From 5a6584777e42e6e3e55294d357cb0adafe2853e7 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 22 Apr 2022 18:46:48 +0200 Subject: chore: add a Layout component It defines the different components used by all other layouts. --- src/components/templates/layout/layout.module.scss | 35 ++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 src/components/templates/layout/layout.module.scss (limited to 'src/components/templates/layout/layout.module.scss') diff --git a/src/components/templates/layout/layout.module.scss b/src/components/templates/layout/layout.module.scss new file mode 100644 index 0000000..eb84c70 --- /dev/null +++ b/src/components/templates/layout/layout.module.scss @@ -0,0 +1,35 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/mixins" as mix; + +:global { + #__next { + flex: 1; + display: flex; + flex-flow: column nowrap; + min-height: 100vh; + } +} + +.header { + padding: var(--spacing-sm) 0 var(--spacing-md); + border-bottom: fun.convert-px(3) solid var(--color-border-light); +} + +.main { + flex: 1; +} + +.footer { + border-top: fun.convert-px(3) solid var(--color-border-light); +} + +.noscript-spacing { + width: 100%; + height: fun.convert-px(75); + + @include mix.media("screen") { + @include mix.dimensions("xs") { + height: fun.convert-px(50); + } + } +} -- cgit v1.2.3