chore: ensure 100vh height and improve Header/Footer styles

6 files changed, 33 insertions, 8 deletions

diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
index debddfb..4daa52a 100644
--- a/src/components/Footer/Footer.module.scss
+++ b/src/components/Footer/Footer.module.scss
@@ -7,6 +7,7 @@
   place-content: center;
   gap: var(--spacing-xs);
   padding: var(--spacing-md) 0 calc(var(--toolbar-size) + var(--spacing-md));
+  border-top: fun.convert-px(3) solid var(--color-border-lighter);
 }
 
 .back-to-top {
@@ -42,13 +43,13 @@
     :global {
       .arrow-head {
         transform: translateY(12px) translateX(-5px) scale(1.5);
-        transition: all 0.6s ease-in-out 0s;
+        transition: all 0.45s ease-in-out 0s;
       }
 
       .arrow-bar {
         opacity: 0;
         transform: translateY(12px) translateX(5px) scale(0.5);
-        transition: transform 0.6s ease-in-out 0s, opacity 0.7s ease-in-out 0s;
+        transition: transform 0.45s ease-in-out 0s, opacity 0.7s ease-in-out 0s;
       }
     }
 
@@ -67,7 +68,7 @@
 
       svg {
         :global {
-          animation: pulse 1.2s ease-in-out 0.6s infinite;
+          animation: pulse 1.4s ease-in-out 0.45s infinite;
         }
       }
     }
diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
index b6bd15d..4ad4ae5 100644
--- a/src/components/Header/Header.module.scss
+++ b/src/components/Header/Header.module.scss
@@ -1,3 +1,5 @@
+@use "@styles/abstracts/functions" as fun;
+
 .wrapper {
   display: grid;
   grid-template-columns:
@@ -6,6 +8,8 @@
   align-items: center;
   padding: var(--spacing-sm) 0 var(--spacing-md);
   position: relative;
+  background: var(--color-bg);
+  border-bottom: fun.convert-px(3) solid var(--color-border-lighter);
 }
 
 .body {
diff --git a/src/components/Main/Main.module.scss b/src/components/Main/Main.module.scss
new file mode 100644
index 0000000..7c20020
--- /dev/null
+++ b/src/components/Main/Main.module.scss
@@ -0,0 +1,3 @@
+.wrapper {
+  flex: 1;
+}
diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
index ad270f6..b21ab1c 100644
--- a/src/components/Main/Main.tsx
+++ b/src/components/Main/Main.tsx
@@ -1,7 +1,12 @@
 import { FunctionComponent } from 'react';
+import styles from './Main.module.scss';
 
 const Main: FunctionComponent = ({ children }) => {
-  return <main id="main">{children}</main>;
+  return (
+    <main id="main" className={styles.wrapper}>
+      {children}
+    </main>
+  );
 };
 
 export default Main;
diff --git a/src/styles/base/_base.scss b/src/styles/base/_base.scss
index 745ee86..e786b17 100644
--- a/src/styles/base/_base.scss
+++ b/src/styles/base/_base.scss
@@ -1,4 +1,5 @@
 @use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
 
 audio,
 button,
@@ -29,16 +30,27 @@ summary {
 }
 
 body {
+  display: flex;
+  flex-flow: column nowrap;
+  min-height: 100vh;
   background: var(--color-bg);
-  border-top: fun.convert-px(5) solid;
+  border-top: max(0.4vw, fun.convert-px(6)) solid;
+  border-bottom: max(0.4vw, fun.convert-px(6)) solid;
   border-image: radial-gradient(
       ellipse at top,
-      var(--color-highlight) 20%,
+      var(--color-primary-lighter) 20%,
       var(--color-primary) 100%
     )
-    5;
+    1;
   color: var(--color-fg);
   font-family: var(--font-family-primary);
   font-size: var(--font-size-md);
   line-height: var(--line-height);
 }
+
+#__next {
+  flex: 1;
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
+}
diff --git a/src/styles/base/_spacings.scss b/src/styles/base/_spacings.scss
index 74c6fa9..7c71445 100644
--- a/src/styles/base/_spacings.scss
+++ b/src/styles/base/_spacings.scss
@@ -30,7 +30,7 @@
 @include mix.media("screen") {
   @include mix.dimensions("sm") {
     :root {
-      --toolbar-size: 0;
+      --toolbar-size: 0px;
     }
   }
 }