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

4 files changed, 17 insertions, 4 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;