diff options
| author | Volpeon <git@volpeon.ink> | 2021-11-11 13:41:59 +0100 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2021-11-11 13:41:59 +0100 |
| commit | b6567cad526f86902a24883a23ddcdfa0cd1980a (patch) | |
| tree | d6d6453d68f51b54e8946e9a52989146b0d2969f | |
| parent | Fixes (diff) | |
| download | volpeon.ink-b6567cad526f86902a24883a23ddcdfa0cd1980a.tar.gz volpeon.ink-b6567cad526f86902a24883a23ddcdfa0cd1980a.tar.bz2 volpeon.ink-b6567cad526f86902a24883a23ddcdfa0cd1980a.zip | |
Design adjustments
| -rw-r--r-- | assets/css/_vars.scss | 2 | ||||
| -rw-r--r-- | assets/css/components/_header.scss | 7 | ||||
| -rw-r--r-- | templates/base.html | 36 |
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)$ |