fixed duplicate global file and seperated fonts

Author: Ciphrox

src/assets/styles/custom-font.css

@@ -0,0 +1,43 @@
+/* src/styles/custom-font.css */
+@supports font-format(woff2) {
+  @font-face {
+    font-family: "sportrop";
+    src: url("/fonts/sportrop-webfont.woff2") format("woff2"),
+        url("/fonts/sportrop-webfont.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: "atkinson";
+    src: url("/fonts/atkinson-hyperlegible-regular-102-webfont.woff2") format("woff2"),
+        url("/fonts/atkinson-hyperlegible-regular-102-webfont.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: "Mudra";
+    src: url("/fonts/MudraMohta-Regular.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+  }
+}
+
+@font-face {
+  font-family: "boisuStroke";
+  src: url("/fonts/Boisu-Stroke.otf") format("otf");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("/fonts/Roboto-Bold.ttf") format("ttf");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}

src/assets/styles/custom-fonts.css

@@ -1,4 +1,4 @@
-@import "./custom-font.css";
+@import "./custom-fonts.css";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -11,12 +11,13 @@
     --font-ratio-max: 1.33;
     --font-width-min: 375;
     --font-width-max: 1500;
+    --header-h: 6rem;
+    --footer-h: 4rem;
   }
 
   html {
     color-scheme: light dark;
     height: 100%;
-    font-family: "Mudra";
   }
 
   [data-theme="light"] {
@@ -40,6 +41,7 @@
     min-height: 100vh;
     font-family: "Roboto", "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif,
       system-ui;
+    font-size: 16px;
   }
 
   body::before {
@@ -62,12 +64,47 @@
     opacity: 1;
   }
 
+  .container {
+    display: grid;
+    grid-auto-flow: row;
+    grid-template-rows: var(--header-h) 1fr var(--footer-h);
+    grid-template-areas: "header" "main" "footer";
+    grid-gap: 0.25rem;
+  }
+
+  header {
+    grid-area: header;
+    height: var(--header-h);
+    border: 1px solid pink;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-inline: 1rem;
+  }
+
+  a {
+    color: light-dark(#151414, white);
+  }
+
+  h1 {
+    font-size: 3rem;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    font-family: Roboto;
+  }
+
   main {
     display: grid;
     gap: 4px;
     grid-template-columns: 20rem 1fr;
     grid-auto-flow: column;
     grid-template-areas: "sidebar content";
+    padding: 1rem;
+    font-size: 1.25rem;
+    line-height: 1.6;
+    max-height: calc(100vh - var(--header-h) - var(--footer-h) - 4rem);
+    height: 100vh;
 
     &.sidebar {
       grid-area: sidebar;
@@ -78,6 +115,15 @@
     }
   }
 
+  footer {
+    grid-area: footer;
+    padding-inline: 1rem;
+    margin-block: 0.5rem;
+    height: var(--footer-h);
+    display: flex;
+    align-items: center;
+  }
+
   @container thread (max-width: 768px) {
     main {
       grid-template-areas: "content";
@@ -111,4 +157,4 @@
   .text__active {
     @apply text-customLight-active dark:text-customDark-active;
   }
-}
+}

src/assets/styles/global.css

@@ -1,4 +1,4 @@
-@import url(./global.css);
+@import url(./globals.css);
 
 .header {
   background-color: #15091d;