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;
 @include iro-execute {
    $gray0: hsl(220, 5%, 100%);
-    $gray1: hsl(220, 5%, 95%);
+    $gray1: hsl(220, 5%, 96%);
    $gray2: hsl(220, 5%, 88%);
    $gray3: hsl(220, 5%, 83%);
    $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 @@
    ), 'light');
    @include component(namespace()) {
-        display: flex;
        height:  prop(--dims --height);
+        @include element('nav') {
+            display:    inline-flex;
+            height:     100%;
+            box-shadow: prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true);
+        }
        @include element('item') {
            padding:          0 prop(--dims --pad-x);
            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 @@
 </head>
 <body>
-    <nav class="c-header">
+    <header class="c-header">
-        <a class="c-header__item c-header__item--icon" href="/" title="$site.title$">
+        <nav class="c-header__nav">
-            <svg class="c-header__icon">
+            <a class="c-header__item c-header__item--icon" href="/" title="$site.title$">
-                <use href="/symbols.svg#logo"></use>
+                <svg class="c-header__icon">
-            </svg>
+                    <use href="/symbols.svg#logo"></use>
-        </a>
+                </svg>
-        $if(namespace.root.is_index)$
+            </a>
-        $else$
+            $if(namespace.root.is_index)$
-            $for(menus.main.items)$
+            $else$
-                $if(it.active)$
+                $for(menus.main.items)$
-                    <a class="c-header__item" href="$it.url$">
+                    $if(it.active)$
-                        $it.label$
+                        <a class="c-header__item" href="$it.url$">
-                    </a>
+                            $it.label$
-                $endif$
+                        </a>
-            $endfor$
+                    $endif$
-        $endif$
+                $endfor$
-    </nav>
+            $endif$
+        </nav>
+    </header>
        
    <main>
        $if(namespace.root.is_index)$

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)$