summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--assets/css/_vars.scss2
-rw-r--r--assets/css/components/_header.scss7
-rw-r--r--templates/base.html36
3 files changed, 26 insertions, 19 deletions
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 848a764..eea1764 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -104,7 +104,7 @@ $content--width: 46rem;
104 104
105@include iro-execute { 105@include iro-execute {
106 $gray0: hsl(220, 5%, 100%); 106 $gray0: hsl(220, 5%, 100%);
107 $gray1: hsl(220, 5%, 95%); 107 $gray1: hsl(220, 5%, 96%);
108 $gray2: hsl(220, 5%, 88%); 108 $gray2: hsl(220, 5%, 88%);
109 $gray3: hsl(220, 5%, 83%); 109 $gray3: hsl(220, 5%, 83%);
110 $gray4: hsl(220, 5%, 68%); 110 $gray4: hsl(220, 5%, 68%);
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index e88d167..eb5438d 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -26,9 +26,14 @@
26 ), 'light'); 26 ), 'light');
27 27
28 @include component(namespace()) { 28 @include component(namespace()) {
29 display: flex;
30 height: prop(--dims --height); 29 height: prop(--dims --height);
31 30
31 @include element('nav') {
32 display: inline-flex;
33 height: 100%;
34 box-shadow: prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true);
35 }
36
32 @include element('item') { 37 @include element('item') {
33 padding: 0 prop(--dims --pad-x); 38 padding: 0 prop(--dims --pad-x);
34 line-height: prop(--dims --height); 39 line-height: prop(--dims --height);
diff --git a/templates/base.html b/templates/base.html
index 420f40e..6573dc5 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -44,23 +44,25 @@
44</head> 44</head>
45 45
46<body> 46<body>
47 <nav class="c-header"> 47 <header class="c-header">
48 <a class="c-header__item c-header__item--icon" href="/" title="$site.title$"> 48 <nav class="c-header__nav">
49 <svg class="c-header__icon"> 49 <a class="c-header__item c-header__item--icon" href="/" title="$site.title$">
50 <use href="/symbols.svg#logo"></use> 50 <svg class="c-header__icon">
51 </svg> 51 <use href="/symbols.svg#logo"></use>
52 </a> 52 </svg>
53 $if(namespace.root.is_index)$ 53 </a>
54 $else$ 54 $if(namespace.root.is_index)$
55 $for(menus.main.items)$ 55 $else$
56 $if(it.active)$ 56 $for(menus.main.items)$
57 <a class="c-header__item" href="$it.url$"> 57 $if(it.active)$
58 $it.label$ 58 <a class="c-header__item" href="$it.url$">
59 </a> 59 $it.label$
60 $endif$ 60 </a>
61 $endfor$ 61 $endif$
62 $endif$ 62 $endfor$
63 </nav> 63 $endif$
64 </nav>
65 </header>
64 66
65 <main> 67 <main>
66 $if(namespace.root.is_index)$ 68 $if(namespace.root.is_index)$