Update styling accordingly

This commit is contained in:
Blerim Sheqa 2020-11-03 13:59:00 +01:00
parent e8c3fc8b84
commit e9409154e2
14 changed files with 164 additions and 565 deletions

View File

@ -91,7 +91,7 @@ end
config = YAML::load_file('config.yml')
project_config = YAML::load_file(options[:config])
mkdocs = YAML::load_file(options[:template])
mkdocs['pages'] = []
mkdocs['nav'] = []
@ -125,34 +125,31 @@ index_new_content = index_content.gsub(/\(((?!http)\S+(\.md|\.png)(\w)?)/,
"(#{project_config['project']['docs_dir']}/\\1")
File.open(index_file, "w") {|file| file.puts index_new_content }
mkdocs['pages'].push('' => "index.md")
mkdocs['nav'].push('' => "index.md")
if project_config['project']['subcategories']
subcategories = []
project_config['project']['subcategories'].each do |category, subprojects|
subproject_pages = []
subprojects.each do |project, config|
if config['git']
subproject_clone_target = clone_target + '/' + config['target']
cleanup_and_clone(project, subproject_clone_target, config['git'], config['ref'])
end
pages = build_page_index(clone_target + '/' + config['docs_dir'], config['docs_dir'])
if project_config['project']['subprojects']
subproject_navigation = []
subproject_pages.push(project => pages)
project_config['project']['subprojects'].each do |subproject|
if subproject[1]['git']
subproject_clone_target = clone_target + '/' + subproject[1]['target']
cleanup_and_clone(subproject[1], subproject_clone_target, subproject[1]['git'], subproject[1]['ref'])
end
subcategories.push(category => subproject_pages)
subproject_navigation.push(subproject[0] => build_page_index(clone_target + '/' + subproject[1]['docs_dir'], subproject[1]['docs_dir']))
end
end
mkdocs['site_name'] = project_config['site_name']
mkdocs['docs_dir'] = clone_target
mkdocs['site_dir'] = project_config['site_dir'] + '/' + project_config['project']['target'] + '/' + version
mkdocs['pages'].push(*main_pages)
mkdocs['pages'].push(*subcategories) if subcategories
mkdocs['extra']['events'] = get_events(config['events']['git'],
config['events']['source_dir'],
config['events']['categories'])
mkdocs['repo_url'] = project_config['project']['git'].gsub('.git', '').downcase
mkdocs['nav'].push(*main_pages)
mkdocs['nav'].push(*subproject_navigation) if subproject_navigation
#mkdocs['extra']['events'] = get_events(config['events']['git'],
# config['events']['source_dir'],
# config['events']['categories'])
File.write('mkdocs.yml', mkdocs.to_yaml)
%x( mkdocs build )
%x(mkdocs build)

View File

@ -1,41 +1,34 @@
---
theme:
name: 'material'
custom_dir: 'theme'
palette:
primary: 'white'
accent: 'blue'
custom_dir: 'overrides'
font: false
docs_dir: projects
icon:
repo: fontawesome/brands/github
logo: fontawesome/solid/book
features:
- navigation.instant
site_dir: 'html'
extra:
extra:
search:
language: 'en'
menu:
- text: 'Products'
link: 'https://icinga.com/products/'
- text: 'Support'
link: 'https://icinga.com/support/'
- text: 'Events'
link: 'https://icinga.com/events/'
- text: 'Learn'
link: 'https://icinga.com/learn/'
cssid: 'icinga-menu-main-active'
- text: 'Community'
link: 'https://icinga.com/community/'
- text: 'Blog'
link: 'https://icinga.com/blog/'
social:
- type: 'facebook'
link: 'https://www.facebook.com/icinga'
- type: 'twitter'
- icon: 'fontawesome/brands/twitter'
link: 'https://twitter.com/icinga'
- type: 'feed'
link: 'https://icinga.com/feed/'
extra_css:
- './css/theme.css'
name: 'Icinga on Twitter'
- icon: 'fontawesome/brands/facebook'
link: 'https://www.facebook.com/icinga'
name: 'Icinga on Facebook'
- icon: 'fontawesome/brands/youtube'
link: 'https://www.youtube.com/icinga'
name: 'Icinga on YouTube'
- icon: 'fontawesome/brands/linkedin'
link: 'https://www.linkedin.com/company/icinga'
name: 'Icinga on LinkedIn'
plugins:
- search:
lang: en
extra_javascript: []
extra_css:
- css/theme.css
markdown_extensions:
- smarty
- admonition
@ -47,3 +40,5 @@ copyright: '© 2009 - 2020 Icinga GmbH'
google_analytics:
- 'UA-280659-15'
- 'auto'
repo_name: 'View on GitHub'
edit_uri: ''

View File

Before

Width:  |  Height:  |  Size: 806 B

After

Width:  |  Height:  |  Size: 806 B

View File

Before

Width:  |  Height:  |  Size: 7.8 KiB

After

Width:  |  Height:  |  Size: 7.8 KiB

103
overrides/css/theme.css Normal file
View File

@ -0,0 +1,103 @@
:root {
--md-primary-fg-color: #06062C;
--md-accent-fg-color: #0095bf;
}
:root > * {
--md-footer-bg-color: #06062C;
--md-typeset-a-color: #0095bf;
}
@font-face {
font-family: "Oxygen";
src: url("../fonts/Oxygen-Regular.ttf");
}
@font-face {
font-family: "Oxygen";
src: url("../fonts/Oxygen-Bold.ttf");
font-weight: bold;
}
@font-face {
font-family: "Oxygen";
src: url("../fonts/Oxygen-Light.ttf");
font-weight: lighter;
}
@font-face {
font-family: "Oxygen-Mono";
src: url("../fonts/OxygenMono-Regular.ttf");
font-weight: lighter;
}
body, input {
font-family: "Oxygen", -apple-system, Helvetica, Arial, sans-serif;
}
code, pre, kbd {
font-family: "Oxygen-Mono", -apple-system, Helvetica, Arial, sans-serif;
}
.md-header-nav__title {
padding: 0 0;
}
.md-search__input {
background-color: #404D72;
}
.icinga-header {
height: 2rem;
}
.icinga-logo img {
height: 1.7rem;
float: left;
}
@media only screen and (max-width: 900px) {
.icinga-menu-wrapper {
display: none;
}
}
.icinga-menu-wrapper {
float: right;
padding-bottom: 2rem;
margin-right: 2.8rem;
overflow: auto;
}
.icinga-menu li {
float: left;
list-style-type: none;
font-size: 16px;
font-weight: bold;
padding-right: 22px;
margin-top: -0.5em;
}
.icinga-menu-entry a {
color: #fff;
}
.icinga-menu-entry a:hover {
color: #fff;
opacity: .7;
transition: all .4s ease-in-out;
}
.icinga-menu-entry:last-child a {
border: 1px solid #fff;
padding: 8px;
}
.icinga-menu-entry:last-child a:hover {
background-color: #fff;
color: #06062C;
opacity: .7;
transition: all .4s ease-in-out;
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

19
overrides/main.html Normal file
View File

@ -0,0 +1,19 @@
{% extends "base.html" %}
{% block announce %}
<div class="icinga-header">
<div class="icinga-logo">
<a href="https://icinga.com"><img src="{{ base_url }}/assets/images/icinga-logo-white.png"/></a>
</div>
<div class="icinga-menu-wrapper">
<ul class="icinga-menu">
<li class="icinga-menu-entry"><a href="https://icinga.com/products">Products</a></li>
<li class="icinga-menu-entry"><a href="https://icinga.com/support">Support</a></li>
<li class="icinga-menu-entry"><a href="https://icinga.com/community">Community</a></li>
<li class="icinga-menu-entry"><a href="https://icinga.com/learn">Learn</a></li>
<li class="icinga-menu-entry"><a href="https://icinga.com/blog">Blog</a></li>
<li class="icinga-menu-entry"><a href="https://icinga.com/get-started">Get Started</a></li>
</ul>
</div>
</div>
{% endblock %}

View File

@ -1,279 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700,700i');
body{
background-color: #ffffff;
font-family: "Open Sans"
}
#icinga-menu {
background: #0095bf;
position: relative;
width: 100%;
height: 65px;
line-height: 23px;
box-shadow: 0 1px 0 rgba(0,0,0,.1);
}
#icinga-menu-container{
width: 80%;
max-width: 1255px;
text-align: left;
margin: auto;
}
#icinga-menu-logo {
width: 20%;
height: 100%;
position: absolute;
}
#icinga-menu-logo img {
height: 62%;
margin-top: 13px;
margin-left: 2px;
}
#icinga-menu-main {
margin-left: 185px;
color: rgba(255,255,255,0.89);
position: absolute;
}
#icinga-menu-main ul {
float: left;
padding: 0;
padding-top: 10px;
}
#icinga-menu-main li {
float: left;
font-size: 18px;
font-weight: 600;
list-style: none;
}
#icinga-menu-main li a {
padding: 6px 12px;
}
#icinga-menu-main-active a {
background: rgba(0,0,0,0.2);
border-radius: 0.25em;
opacity: 1;
}
#icinga-menu-main li>a:hover {
background: rgba(0,0,0,0.2);
border-radius: 0.25em;
opacity: 1;
transition: all .4s ease-in-out;
}
#icinga-menu-secondary {
color: rgba(255,255,255,0.89);
float: right;
}
#icinga-menu-secondary ul {
float: right;
padding-top: 10px;
padding-left: 20px;
}
#icinga-menu-secondary li {
float: left;
font-size: 14px;
font-weight: 600;
list-style: none;
}
#icinga-menu-download {
background-color: #23cb5b;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 15px;
padding-left: 15px;
border: 1px solid #23cb5b;
border-radius: .25em;
}
#icinga-menu-contact {
padding-top: 2px;
padding-bottom: 2px;
padding-right: 15px;
padding-left: 15px;
margin-right: 15px;
border: 1px solid #ffffff;
border-radius: .25em;
transition: all .4s ease-in-out;
}
#icinga-menu-contact:hover {
color: #0D536B;
background-color: #ffffff;
}
.md-sidebar--secondary {
padding-bottom: 10rem;
}
/* Events */
.md-events {
width: 100%;
margin-top: 2%;
max-width: 122rem;
margin-left: auto;
margin-right: auto;
}
.md-events-inner {
position: relative;
margin: auto;
width: 100%;
max-width: 1255px;
overflow: auto;
border-bottom: 1px solid #ddd;
margin-left: 1.4rem;
}
#events-header span{
float: left;
font-size: 12px;
line-height: 30px;
color: #8d8d8d;
padding-right: 1.5rem;
}
#events-list {
padding: 0;
padding-bottom: 0.5em;
margin: 0;
}
#events-list li:not(:last-child) {
list-style-type: none;
display: inline-block;
margin-right: 3em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
#events-list li:last-child {
list-style-type: none;
display: inline-block;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
#events-list li a > *:not(.event-date) {
display: inline-block;
font-size: 12px;
margin: 0;
margin-right: 0.25em;
font-weight: normal;
}
#events-list li a {
color: #333;
}
.event-date {
background-color: #ddd;
color: #333;
border-radius: 4px;
padding: 0.25em 0.7em;
font-size: 1em;
text-transform: uppercase;
letter-spacing: 0.2px;
}
.event-city {
color: #8d8d8d;
}
#events-list li a:hover {
opacity: 0.6;
}
#event-more-link {
float: right;
}
#event-more-link a {
color: #0095bf !important;
line-height: 18px;
font-size: 12px;
}
/* END Events */
.md-container {
padding-top: 0;
}
.icinga-footer{
background: #f7f7f7;
color: #777;
}
#icinga-footer-menu {
width: 100%;
padding-top: 31px;
padding-bottom: 31px;
float: left;
font-size: 14px;
line-height: 27px;
border-bottom: 1px solid #ccc;
}
#icinga-footer-menu ul {
float: left;
width: 19%;
margin-right: 5.5%;
}
#icinga-footer-menu-last {
margin-right: 0!important;
}
#icinga-footer-menu li {
list-style: none;
}
#icinga-footer-menu li a {
color: #777;
}
#icinga-footer-legal {
width: 100%;
}
#icinga-footer-legal li{
color: #777;
list-style: none;
float: left;
margin: 0;
padding-right: 20px;
}
#icinga-footer-legal li:first-child{
padding-right: 33%;
}
#icinga-footer-legal a{
color: #777;
}
.md-footer {
margin-top: 7rem;
}
@media screen and (max-width:65em) {
#icinga-menu {
display: none;
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 241 KiB

View File

@ -1,131 +0,0 @@
{% import "partials/language.html" as lang with context %}
<footer class="md-footer">
{% if page.previous_page or page.next_page %}
<div class="md-footer-nav">
<nav class="md-footer-nav__inner md-grid">
{% if page.previous_page %}
<a href="{{ page.previous_page.url | url }}" title="{{ page.previous_page.title }}" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
<div class="md-flex__cell md-flex__cell--shrink">
<i class="md-icon md-icon--arrow-back md-footer-nav__button"></i>
</div>
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
<span class="md-flex__ellipsis">
<span class="md-footer-nav__direction">
{{ lang.t("footer.previous") }}
</span>
{{ page.previous_page.title }}
</span>
</div>
</a>
{% endif %}
{% if page.next_page %}
<a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title }}" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next">
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
<span class="md-flex__ellipsis">
<span class="md-footer-nav__direction">
{{ lang.t("footer.next") }}
</span>
{{ page.next_page.title }}
</span>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<i class="md-icon md-icon--arrow-forward md-footer-nav__button"></i>
</div>
</a>
{% endif %}
</nav>
</div>
{% endif %}
<div class="md-footer-meta md-typeset icinga-footer">
<div class="md-footer-meta__inner md-grid ">
<div id="icinga-footer-menu">
<ul>
<li><strong>Icinga</strong></li>
<li><a href="https://icinga.com/products">Products</a></li>
<li><a href="https://icinga.com/blog">Blog</a></li>
<li><a href="https://icinga.com/partners">Partners</a></li>
<li><a href="https://icinga.com/customers">Customers</a></li>
<li><a href="https://icinga.com/about">Company</a></li>
</ul>
<ul>
<li><strong>Events</strong></li>
<li><a href="https://icingaconf.com">IcingaConf 2020</a></li>
<li><a href="https://icinga.com/events">IcingaCamp</a></li>
<li><a href="https://icinga.com/events/meetups">Meetups</a></li>
</ul>
<ul>
<li><strong>Learn</strong></li>
<li><a href="https://icinga.com/docs">Docs</a></li>
<li><a href="https://icinga.com/trainings">Trainings</a></li>
</ul>
<ul id="icinga-footer-menu-last">
<li><strong>Support</strong></li>
<li><a href="https://community.icinga.com">Community Forum</a></li>
<li><a href="https://icinga.com/support">Subscription</a></li>
<li><a href="https://icinga.com/contact">Contact Us</a></li>
</ul>
</div>
<div class="md-footer-copyright" style="width:100%">
{% if config.copyright %}
<div class="md-footer-copyright__highlight icinga-footer">
<ul id="icinga-footer-legal">
<li>{{ config.copyright }}</li>
<li><a href="https://icinga.com/about/imprint">Imprint</a></li>
<li><a href="https://icinga.com/about/privacy-policy">Privacy Policy</a></li>
<li><a href="https://icinga.com/about/terms-of-use">Terms of use</a></li>
</ul>
</div>
{% endif %}
<div class="md-footer-copyright__highlight icinga-footer">
</div>
</div>
</div>
</div>
<!--
<div id="icinga-footer">
<div id="icinga-footer-container">
<div id="icinga-footer-menu">
<ul>
<li><strong>Icinga</strong></li>
<li><a href="#">Product</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Customers</a></li>
<li><a href="#">Company</a></li>
</ul>
<ul>
<li><strong>Events</strong></li>
<li><a href="#">IcingaConf</a></li>
<li><a href="#">IcingaCamp</a></li>
<li><a href="#">Meetups</a></li>
</ul>
<ul>
<li><strong>Learn</strong></li>
<li><a href="#">Docs</a></li>
<li><a href="#">Trainings</a></li>
</ul>
<ul id="icinga-footer-menu-last">
<li><strong>Support</strong></li>
<li><a href="#">Subscription</a></li>
<li><a href="#">Community Forum</a></li>
</ul>
</div>
<div id="icinga-footer-bottom">
<div id="icinga-footer-copyright">
{{ config.copyright }}
</div>
<div id="icinga-footer-legal">
<ul>
<li>Imprint</li>
<li>Privacy Policy</li>
<li>Terms of Use</li>
</ul>
</div>
</div>
</div>
</div>
-->
</footer>

View File

@ -1,105 +0,0 @@
<div id="icinga-menu" class="clearfix">
<div id="icinga-menu-container">
<div id="icinga-menu-logo">
<a href="https://icinga.com/">
<img alt="Icinga" src="{{ base_url }}/images/icinga-logo-white.png" />
</a>
</div>
<div id="icinga-menu-main">
<nav>
<button onclick="document.querySelector('#top-menu').style.display = (document.querySelector('#top-menu').style.display == 'block') ? 'none' : 'block'"></button>
<ul>
{% for menuitem in config.extra.menu %}
{% if menuitem.cssid %}
<li class="icinga-menu-main-entry" id="{{ menuitem.cssid }}"><a href="{{ menuitem.link }}">{{ menuitem.text }}</a></li>
{% else %}
<li><a href="{{ menuitem.link }}">{{ menuitem.text }}</a></li>
{% endif %}
{% endfor %}
</ul>
</nav>
</div>
<div id="icinga-menu-secondary">
<nav>
<ul>
<li id="icinga-menu-contact"><a href="https://icinga.com/contact/">Contact Us</a></li>
<li id="icinga-menu-download"><a href="https://icinga.com/download">Download</a></li>
</ul>
</nav>
</div>
</div>
</div>
<header class="md-header" data-md-component="header" style="position:relative;">
<nav class="md-header-nav md-grid">
<div class="md-flex">
<div class="md-flex__cell md-flex__cell--shrink">
<a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" class="md-header-nav__button md-logo">
{% if config.theme.logo.icon %}
<i class="md-icon">{{ config.theme.logo.icon }}</i>
{% else %}
<img src="{{ config.theme.logo | url }}" width="24" height="24">
{% endif %}
</a>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<label class="md-icon md-icon--menu md-header-nav__button" for="__drawer"></label>
</div>
<div class="md-flex__cell md-flex__cell--stretch">
<div class="md-flex__ellipsis md-header-nav__title" data-md-component="title">
{% block site_name %}
{% if config.site_name == page.title %}
{{ config.site_name }}
{% else %}
<span class="md-header-nav__topic">
{{ config.site_name }}
</span>
<span class="md-header-nav__topic">
{{ page.title }}
</span>
{% endif %}
{% endblock %}
</div>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
{% block search_box %}
{% if "search" in config["plugins"] %}
<label class="md-icon md-icon--search md-header-nav__button" for="__search"></label>
{% include "partials/search.html" %}
{% endif %}
{% endblock %}
</div>
{% if config.repo_url %}
<div class="md-flex__cell md-flex__cell--shrink">
<div class="md-header-nav__source">
{% include "partials/source.html" %}
</div>
</div>
{% endif %}
</div>
</nav>
</header>
<!---
<div class="md-events">
<div class="md-events-inner">
<div id="events-header" class="clearfix">
<span>Upcoming Events</span>
</div>
<ul id="events-list">
{% for event in config.extra.events %}
{% if event.name %}
<li class="event-item"><a href="{{ event.registration_link }}"><span class="event-date">{{ event.date }}</span> <h3>{{ event.name }}</h3> <span class="event-city">{{ event.city }}</span></a></li>
{% endif %}
{% endfor %}
<li class="event-item" id="event-more-link"><a href="https://icinga.com/events/">Show more</a></li>
</ul>
</div>
</div>
--->