From 5cdd38fcafc6b9abae9bf8463544f68abbcde45a Mon Sep 17 00:00:00 2001 From: Luca Date: Tue, 24 Nov 2020 21:44:16 +0100 Subject: [PATCH] Improve style sheet --- assets/style.scss | 44 ++++++++++++++++++++++---------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/assets/style.scss b/assets/style.scss index b1c44b0..6636ff2 100644 --- a/assets/style.scss +++ b/assets/style.scss @@ -1,5 +1,6 @@ -@import 'fonts'; +@import 'breakpoints'; @import 'colors'; +@import 'fonts'; @import 'mixins'; * { @@ -24,8 +25,8 @@ header { main { width: 100%; - max-width: 1200px; - margin: auto; + max-width: $large; + margin: 0 auto; flex-grow: 1; } @@ -48,10 +49,6 @@ h1 { border-bottom: 2px $text-color solid; } -a { - text-decoration: none; -} - figure { margin-bottom: 1rem; @@ -67,21 +64,14 @@ figure { } .nav { - max-width: 1200px; - margin: 0 auto; - padding: 0.5em; - display: flex; flex-direction: column; justify-content: space-between; - @media screen and (min-width: 800px) { - flex-direction: row; - - hr { - margin: 0 0.5em !important; - align-self: center; - } + &.nav-main { + max-width: $large; + margin: 0 auto; + padding: 0.5em; } hr { @@ -90,19 +80,20 @@ figure { .nav-logo { @include heading; + text-decoration: none; margin: 0 auto; - @media screen and (min-width: 800px) { - margin-left: 0; - } - img { width: 48px; display: inline-block; margin-right: 1em; vertical-align: middle; } + + @media screen and (min-width: $small) { + margin-left: 0; + } } .nav-link { @@ -112,4 +103,13 @@ figure { &.nav-link-active { } } + + @media screen and (min-width: $small) { + flex-direction: row; + + hr { + margin: 0 0.5em; + align-self: center; + } + } }