diff options
-rw-r--r-- | _includes/header.html | 13 | ||||
-rw-r--r-- | style/_header.scss | 36 | ||||
-rw-r--r-- | style/_responsive.scss | 5 | ||||
-rw-r--r-- | style/main.scss | 1 |
4 files changed, 45 insertions, 10 deletions
diff --git a/_includes/header.html b/_includes/header.html index 092bc3f..8ab0b24 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -7,10 +7,13 @@ </div> <div class="title"> <div class="name">Noah Loomans</div> - <div class="menu">const menu = [ - <a href="/">'Home'</a>, - <a href="/projects/">'Projects'</a>, - <a href="/badges/">'Badges'</a> - ]</div> + <div class="menu"> + <ul> + <li>const menu = [</li> + <li><a href="/">'Home'</a>,</li> + <li><a href="/projects/">'Projects'</a>,</li> + <li><a href="/badges/">'Badges'</a></li> + <li>]</li> + </ul></div> </div> </header> diff --git a/style/_header.scss b/style/_header.scss index 28e8100..6593f2a 100644 --- a/style/_header.scss +++ b/style/_header.scss @@ -35,14 +35,46 @@ header { .title { padding-left: $logo-width + $page-padding-between; - height: $logo-width; + padding-top: ($logo-width - 45px) / 2;; + padding-bottom: ($logo-width - 45px) / 2; display: flex; flex-direction: column; - justify-content: center; .name { font-weight: bold; font-size: 1.5em; } } + + .menu { + ul { + list-style: none; + margin: 0; + padding: 0; + } + + li { + display: inline; + padding-left: 0px; + + &:first-of-type, &:last-of-type { + padding-left: 0; + } + } + } +} + +@media screen and (max-width: 900px) { + header { + .menu { + li { + display: list-item; + padding-left: 20px; + } + } + .title { + padding-top: 16px; + padding-bottom: 16px; + } + } } diff --git a/style/_responsive.scss b/style/_responsive.scss index bf35644..427a0fe 100644 --- a/style/_responsive.scss +++ b/style/_responsive.scss @@ -9,12 +9,11 @@ header { .logo { - width: 100px; - height: 100px; + width: $logo-width-small; + height: $logo-width-small; } .title { - height: 100px; padding-left: 140px; } diff --git a/style/main.scss b/style/main.scss index bc913c5..d808a24 100644 --- a/style/main.scss +++ b/style/main.scss @@ -3,6 +3,7 @@ $page-width: 840px; $logo-width: 150px; +$logo-width-small: 100px; $page-padding-between: 40px; @import 'normalize'; |