diff --git a/sass/_nav.scss b/sass/_nav.scss index ca07fe0..b0f3ba1 100644 --- a/sass/_nav.scss +++ b/sass/_nav.scss @@ -1,71 +1,68 @@ nav { - display:flex; - flex-direction:column; - width:100%; - background:$nav-background-primary; - color:$nav-h1-color; + display: flex; + flex-direction: column; + width: 100%; + color: $nav-h1-color; - h1 { + a.title { margin: 0; - - a { - display: block; - padding: $nav-h1-padding; - color: $nav-h1-color; - font-size: $nav-h1-font-size; - } + padding: 0 $nav-item-padding; + color: $nav-h1-color; + font-size: $nav-h1-font-size; + font-weight: bold; } ul { - display:flex; - flex-wrap:wrap; - justify-content:center; - margin:0; - padding:0; - list-style-type:none; + display: flex; + flex-wrap: wrap; + justify-content: center; + margin: 0; + padding: 0; + list-style-type: none; - li { - - a { - padding: $nav-item-padding; - display:block; - text-decoration:none; - - &, &:active, &:visited { - color:$nav-color; - } + li a { + display: block; + padding: $nav-item-padding; + text-decoration: none; - &:hover { - color:$nav-anchor-hover-color; - } + &, &:active, &:visited { + color: $nav-color; + } + + &:hover, &.selected { + color: $nav-anchor-hover-color; + background-color: $nav-background-primary; } } } img { - height:1em; - width:1em; + height: 1em; + width: 1em; } - .mainnav { - display:flex; - justify-content:space-between; - align-items:center; - width:100%; - max-width:$recipe-wrap; - margin:0 auto; - box-sizing:border-box; + .wrap { + width: 100%; + max-width: $main-wrap; + margin: 0 auto; } - .subnav { - display:flex; - justify-content:center; - background:$nav-background-secondary; + .primary { + background: $nav-background-primary; - a.active { - color: $nav-anchor-hover-color; - background-color: $nav-background-primary; + .wrap { + display: flex; + justify-content: space-between; + align-items : center; + } + } + + .secondary { + background: $nav-background-secondary; + + .wrap { + display: flex; + justify-content: center; } } } - diff --git a/sass/_variables.scss b/sass/_variables.scss index 839ad28..a6967d6 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -29,10 +29,9 @@ $nav-color:#fff; $nav-background-primary:#333; $nav-background-secondary:#555; $nav-anchor-hover-color:$anchor-hover-color; -$nav-h1-padding: .8em; $nav-h1-color: $primary; $nav-h1-font-size: 1.5rem; -$nav-item-padding: 1em; +$nav-item-padding: 1rem; // recipe $recipe-background:#fff; diff --git a/sass/style.scss b/sass/style.scss index db8d6ee..d4dfbf1 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -7,6 +7,10 @@ @import "fonts"; +*, *:before, *:after { + box-sizing: border-box; +} + html, body { margin:0; } @@ -138,7 +142,6 @@ main { border:1px solid $border; border-radius:$article-border-radius; overflow:hidden; - box-sizing:border-box; width:100%; box-shadow: none; transition: box-shadow .15s ease; diff --git a/templates/base.html b/templates/base.html index ed91956..527994c 100644 --- a/templates/base.html +++ b/templates/base.html @@ -10,16 +10,20 @@ {% block content %}{% endblock content %} diff --git a/templates/macros.html b/templates/macros.html index 329685c..0a5e943 100644 --- a/templates/macros.html +++ b/templates/macros.html @@ -44,7 +44,7 @@ {% for item in config.extra.menu %}
  • {{ item.name }}
    • {% endfor %}