thang
/
notes
mirror of https://github.com/thangisme/notes.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Removed hardcoded styling from layout, improved aux nav 

(cherry picked from commit fd3c68cd1a39e059180c35c1d56ffa33ef4dfde4)
This commit is contained in:
Silvio Giebl 2019-07-21 16:55:34 +02:00
parent 721ca36d85
commit ec420a385b
3 changed files with 33 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
_layouts/default.html
View File

@ -12,13 +12,13 @@ layout: table_wrappers
<div class="side-bar"> <div class="side-bar">
<div class="site-header"> <div class="site-header">
<a href="{{ site.url }}{{ site.baseurl }}" class="site-title lh-tight">{% include title.html %}</a> <a href="{{ site.url }}{{ site.baseurl }}" class="site-title lh-tight">{% include title.html %}</a>
<button id="site-nav-trigger" class="menu-button fs-3" data-text-toggle="Hide" type="button">Menu</button> <button id="site-nav-trigger" class="site-button" data-text-toggle="Hide" type="button">Menu</button>
</div> </div>
<nav role="navigation" aria-label="Main navigation" id="site-nav" class="site-nav"> <nav role="navigation" aria-label="Main" id="site-nav" class="site-nav">
{% include nav.html %} {% include nav.html %}
</nav> </nav>
<footer class="site-footer"> <footer class="site-footer">
<p class="text-small text-grey-dk-000 mb-4">This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.</p> This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.
</footer> </footer>
</div> </div>
<div id="main-wrap" class="main-wrap" tabindex="0"> <div id="main-wrap" class="main-wrap" tabindex="0">
@ -34,17 +34,19 @@ layout: table_wrappers
</div> </div>
{% endif %} {% endif %}
{% if site.aux_links != nil %} {% if site.aux_links != nil %}
<ul class="list-style-none text-small aux-nav"> <nav aria-label="Auxiliary" class="aux-nav">
{% for link in site.aux_links %} <ul class="aux-nav-list">
<li class="d-inline-block my-0{% unless forloop.last %} mr-2{% endunless %}"><a href="{{ link.last }}">{{ link.first }}</a></li> {% for link in site.aux_links %}
{% endfor %} <li class="aux-nav-list-item"><a href="{{ link.last }}">{{ link.first }}</a></li>
</ul> {% endfor %}
</ul>
</nav>
{% endif %} {% endif %}
</div> </div>
<div class="main-content-wrap"> <div class="main-content-wrap">
{% unless page.url == "/" %} {% unless page.url == "/" %}
{% if page.parent %} {% if page.parent %}
<nav class="breadcrumb-nav"> <nav aria-label="Breadcrumb" class="breadcrumb-nav">
<ol class="breadcrumb-nav-list"> <ol class="breadcrumb-nav-list">
{% if page.grand_parent %} {% if page.grand_parent %}
<li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li> <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>

5
_sass/layout.scss
View File

@ -148,7 +148,7 @@
@include fs-6; @include fs-6;
} }
.menu-button { .site-button {
appearance: none; appearance: none;
display: flex; display: flex;
height: 100%; height: 100%;
@ -158,6 +158,7 @@
text-transform: uppercase; text-transform: uppercase;
background: transparent; background: transparent;
border: 0; border: 0;
@include fs-3;
@include mq(md) { @include mq(md) {
display: none; display: none;
@ -185,6 +186,8 @@ body {
left: 0; left: 0;
padding-top: $sp-4; padding-top: $sp-4;
padding-bottom: $sp-4; padding-bottom: $sp-4;
color: $grey-dk-000;
@include fs-2;
@include mq(md) { @include mq(md) {
position: static; position: static;

18
_sass/navigation.scss
View File

@ -81,9 +81,27 @@
.aux-nav { .aux-nav {
align-self: center; align-self: center;
.aux-nav-list {
padding: 0;
margin: 0;
list-style: none;
@include fs-2;
}
.aux-nav-list-item {
display: inline-block;
margin-right: $sp-2;
@include fs-2;
&:last-child {
margin-right: 0;
}
}
} }
// Breadcrumb nav // Breadcrumb nav
.breadcrumb-nav { .breadcrumb-nav {
@include mq(md) { @include mq(md) {
margin-top: -$sp-4; margin-top: -$sp-4;