diff options
| author | Armand Philippot <git@armandphilippot.com> | 2021-12-13 22:04:03 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2021-12-13 22:04:26 +0100 |
| commit | aec575c3b5797069e4964cfafa26e3de3b92f99e (patch) | |
| tree | ca58b4e85b4f0d3eb78b57cfa58aa9bad9fd4c2f /src/components/Header/Header.module.scss | |
| parent | 5bc55ac0a801cbe82c41a10f7e680612be4deaf8 (diff) | |
chore: add main-nav component
I choose to implement main-nav paths manually instead of fetching
them from GraphQL to ensure functional navigation without JS.
Diffstat (limited to 'src/components/Header/Header.module.scss')
| -rw-r--r-- | src/components/Header/Header.module.scss | 18 |
1 files changed, 18 insertions, 0 deletions
diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss new file mode 100644 index 0000000..b6bd15d --- /dev/null +++ b/src/components/Header/Header.module.scss @@ -0,0 +1,18 @@ +.wrapper { + display: grid; + grid-template-columns: + minmax(0, 1fr) min(calc(100vw - var(--spacing-md) * 2), 100ch) + minmax(0, 1fr); + align-items: center; + padding: var(--spacing-sm) 0 var(--spacing-md); + position: relative; +} + +.body { + grid-column: 2; + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: space-between; + gap: var(--spacing-md); +} |