From d4045fbcbfa8208ec31539744417f315f1f6fad8 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 21 Nov 2023 19:01:18 +0100 Subject: refactor(components): split Layout component in smaller components The previous component was too long and hardly readable. So I splitted it in different part and added tests. --- .../layout/site-footer/site-footer.module.scss | 42 ++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 src/components/templates/layout/site-footer/site-footer.module.scss (limited to 'src/components/templates/layout/site-footer/site-footer.module.scss') diff --git a/src/components/templates/layout/site-footer/site-footer.module.scss b/src/components/templates/layout/site-footer/site-footer.module.scss new file mode 100644 index 0000000..935c163 --- /dev/null +++ b/src/components/templates/layout/site-footer/site-footer.module.scss @@ -0,0 +1,42 @@ +@use "../../../../styles/abstracts/functions" as fun; +@use "../../../../styles/abstracts/mixins" as mix; + +.footer { + --navbar-size: #{fun.convert-px(80)}; + + display: flex; + flex-flow: column wrap; + gap: var(--spacing-xs); + place-items: center; + place-content: center; + padding: var(--spacing-md) 0 calc(var(--navbar-size) + var(--spacing-md)); + border-top: fun.convert-px(3) solid var(--color-border-light); + + @include mix.media("screen") { + @include mix.dimensions("sm") { + --navbar-size: 0px; + + flex-flow: row wrap; + font-size: var(--font-size-sm); + } + } +} + +.back-to-top { + position: fixed; + bottom: calc(var(--navbar-size, 0px) + var(--spacing-md)); + right: var(--spacing-md); + transition: all 0.4s ease-in 0s; + + &--hidden { + opacity: 0; + transform: translateY(calc(var(--button-height) + var(--spacing-md))); + visibility: hidden; + } + + &--visible { + opacity: 1; + transform: translateY(0); + visibility: visible; + } +} -- cgit v1.2.3