attempt: fix css font

acmcsufoss · Sep 18, 2024 · afaa539 · afaa539
1 parent 40bd0b4
commit afaa539
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 74 deletions.
diff --git a/src/components/FloatingBoxes.astro b/src/components/FloatingBoxes.astro
@@ -8,10 +8,10 @@ function getRandom(min: number, max: number) {
 function generateRandomStyles() {
   const randomColor = boxColors[Math.floor(Math.random() * boxColors.length)];
   const randomOpacity = getRandom(0.2, 1);
-  const randomLeft = `${getRandom(30, 90)}%`;
+  const randomLeft = `${getRandom(10, 90)}%`;
   const randomTop = `${getRandom(10, 80)}%`;
   const randomDuration = `${getRandom(5, 15)}s`;
-  const randomDelay = `${getRandom(0, 5)}s`;
+  const randomDelay = `${getRandom(0, 2)}s`;
 
   return {
     backgroundColor: randomColor,

diff --git a/src/globals.css b/src/globals.css
@@ -0,0 +1,69 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
+
+:root {
+  font-family: var(--ff-regular);
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: dark;
+  background-color: var(--color-primary);
+  color: var(--color-contrast);
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+
+  --ff-regular: "Poppins", "sans-serif";
+  --ff-custom: "Fira Code", "monospace";
+
+  --color-primary: #212121;
+  --color-secondary: #2f2f2f;
+  --color-contrast: #f5f5f5;
+
+  --color-oss-team: #11d4b1;
+  --color-link: #4dd0e1;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+a {
+  color: white;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-color: rgb(75, 75, 75);
+  transition: text-decoration 150ms ease;
+}
+
+a:hover {
+  text-decoration-color: white;
+}
+
+.custom-link {
+  text-decoration: underline;
+  color: var(--color-link);
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+}
+
+#app {
+  padding: 1rem 2rem;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+  margin-inline: auto;
+}
+
+.oss {
+  color: var(--color-oss-team);
+}
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,6 +1,7 @@
 ---
 import Footer from "../components/Footer.astro";
 import Navbar from "../components/Navbar.astro";
+import "../globals.css";
 
 interface Props {
   title: string;
@@ -27,75 +28,3 @@ const { title } = Astro.props;
     </div>
   </body>
 </html>
-
-<style is:global>
-  @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
-
-  :root {
-    font-family: var(--ff-regular);
-    line-height: 1.5;
-    font-weight: 400;
-
-    color-scheme: dark;
-    background-color: var(--color-primary);
-    color: var(--color-contrast);
-
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-text-size-adjust: 100%;
-
-    --ff-regular: "Poppins", "sans-serif";
-    --ff-custom: "Fira Code", "monospace";
-
-    --color-primary: #212121;
-    --color-secondary: #2f2f2f;
-    --color-contrast: #f5f5f5;
-
-    --color-oss-team: #11d4b1;
-    --color-link: #4dd0e1;
-  }
-
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  a {
-    color: white;
-    text-decoration: underline;
-    text-underline-offset: 3px;
-    text-decoration-color: rgb(75, 75, 75);
-    transition: text-decoration 150ms ease;
-  }
-
-  a:hover {
-    text-decoration-color: white;
-  }
-
-  .custom-link {
-    text-decoration: underline;
-    color: var(--color-link);
-  }
-
-  body {
-    margin: 0;
-    padding: 0;
-    min-height: 100vh;
-  }
-
-  #app {
-    padding: 1rem 2rem;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    row-gap: 1rem;
-    margin-inline: auto;
-  }
-
-  .oss {
-    color: var(--color-oss-team);
-  }
-</style>