Cleaned up CSS.

Author: anthonyb8

app/globals.css

@@ -1,11 +1,6 @@
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
-  /*   #001b2e */
-  /* #1d3f58 */
-  /* #537692 */
-  /* #b3cde4 */
-  /* #eef3f9 */
+  --off-white: #f4f0e0;
+  --header-bg: rgb(42, 42, 42, 0.2);
 }
 
 html,
@@ -15,7 +10,14 @@ body {
 }
 
 body {
-  background: linear-gradient(135deg, #001b2e, #537692, #001b2e);
+  background: linear-gradient(
+    130deg,
+    #2a5d9f,
+    #8b5e3c,
+    #2a5d9f,
+    #8b5e3c,
+    #2a5d9f
+  );
   font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
 }
 

app/layout.tsx

@@ -1,18 +1,7 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import TopNav from "./ui/top-nav";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
 export const metadata: Metadata = {
   title: "Midas Website",
   icons: {

app/page.module.css

@@ -4,10 +4,7 @@
   grid-template-rows: 0.65rem 1fr 0.65rem;
   align-items: center;
   justify-items: center;
-  min-height: calc(100svh - 100px);
   padding: 0.8rem;
-  gap: 1rem;
-  font-family: var(--font-geist-sans);
 }
 
 .main {
@@ -30,13 +27,12 @@
 }
 
 .button_container {
-  /* width: 40%; */
   display: flex;
   justify-content: center;
 }
 
 .main button {
-  padding: 15 100;
+  padding: 1rem 6rem;
   border-radius: 50px;
   font-size: 1.25rem;
   font-weight: bold;
@@ -45,32 +41,15 @@
 }
 
 @media (min-width: 600px) {
-  .page {
-    display: grid;
-    grid-template-rows: 20px 1fr 20px;
-    align-items: center;
-    justify-items: center;
-    min-height: calc(100svh - 100px);
-    padding: 80px;
-    gap: 64px;
-    font-family: var(--font-geist-sans);
-  }
-
   .main {
-    display: flex;
-    flex-direction: column;
-    gap: 32px;
-    grid-row-start: 2;
     width: 60%;
   }
 
   .main h1 {
     font-size: 3rem;
-    color: white;
   }
 
   .main h3 {
-    color: grey;
     width: 80%;
   }
 
@@ -79,13 +58,4 @@
     display: flex;
     justify-content: center;
   }
-
-  .main button {
-    padding: 15 100;
-    border-radius: 50px;
-    font-size: 1.25rem;
-    font-weight: bold;
-    border: none;
-    color: rgba(42, 42, 42, 0.9);
-  }
 }

app/page.tsx

@@ -1,4 +1,3 @@
-import Image from "next/image";
 import styles from "./page.module.css";
 import Socialbar from "./ui/socials";
 

app/ui/socials.module.css

@@ -1,19 +1,7 @@
 .icon_bar {
   font-size: 1.5rem;
-  color: #f4f0e0;
+  color: var(--off-white);
   display: flex;
-  flex-direction: row;
   padding-left: 1%;
   gap: 20px;
 }
-
-@media (min-width: 600px) {
-  .icon_bar {
-    font-size: 1.5rem;
-    color: #f4f0e0;
-    display: flex;
-    flex-direction: row;
-    padding-left: 1%;
-    gap: 20px;
-  }
-}

app/ui/top-nav.module.css

@@ -1,27 +1,18 @@
 .top_nav {
-  background-color: rgb(42, 42, 42, 0.2);
+  background-color: var(--header-bg);
   display: flex;
   align-items: center;
   color: white;
   height: 10%;
 }
 
-.nav_logo {
-  display: flex;
-}
-
 .top_nav img {
   width: 2.5rem;
   height: 2.5rem;
 }
 
-.icon_bar {
-  font-size: 1.5rem;
-  color: #f4f0e0;
+.nav_logo {
   display: flex;
-  flex-direction: row;
-  padding-left: 5%;
-  /* gap: 0.8rem; */
 }
 
 .nav {
@@ -34,7 +25,7 @@
 }
 
 .top_nav_icons {
-  font-size: 0.7rem;
+  font-size: 0.8rem;
   color: white;
   padding: 0.65rem;
 }
@@ -45,45 +36,21 @@
     margin-right: 10%;
     padding: 20px;
     margin-top: 20px;
-    background-color: rgb(42, 42, 42, 0.2);
-    display: flex;
-    align-items: center;
-    padding-right: 1%;
-    color: white;
     height: 80px;
     border-radius: 20px;
   }
 
-  .nav_logo {
-    display: flex;
-  }
-
   .top_nav img {
     width: 45px;
     height: 45px;
   }
 
   .icon_bar {
     font-size: 1.5rem;
-    color: #f4f0e0;
-    display: flex;
-    flex-direction: row;
-    padding-left: 1%;
-    gap: 20px;
-  }
-
-  .nav {
-    width: 100%;
-    height: 80px;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    padding-right: 5%;
   }
 
   .top_nav_icons {
     font-size: 1rem;
-    color: white;
     padding: 10px;
   }
 }