chore: [#111] clean up css

cd-bash · cd-bash · commit eb413c9aa88a · 2025-10-01T16:09:18.000-04:00
diff --git a/src/styles/base/reset.css b/src/styles/base/reset.css
@@ -1,7 +1,3 @@
-/* ==========================================================================
-   Reset & Base Styles
-   ========================================================================== */
-
 * {
   box-sizing: border-box;
 }
@@ -20,30 +16,25 @@ body {
   line-height: 1.3;
 }
 
-/* Remove default margins */
 h1, h2, h3, h4, h5, h6, p, ul, ol, figure {
   margin: 0;
 }
 
-/* Remove default list styles */
 ul, ol {
   list-style: none;
   padding: 0;
 }
 
-/* Better image defaults */
 img {
   max-width: 100%;
   height: auto;
 }
 
-/* Better button defaults */
 button {
   font-family: inherit;
   cursor: pointer;
 }
 
-/* Better link defaults */
 a {
   color: inherit;
   text-decoration: none;
diff --git a/src/styles/base/typography.css b/src/styles/base/typography.css
@@ -1,7 +1,3 @@
-/* ==========================================================================
-   Typography
-   ========================================================================== */
-
 /* Headings */
 h1, h2 {
   font-family: var(--font-primary);
diff --git a/src/styles/base/variables.css b/src/styles/base/variables.css
@@ -1,7 +1,3 @@
-/* ==========================================================================
-   CSS Custom Properties (Variables)
-   ========================================================================== */
-
 :root {
   /* Colors */
   --color-primary: #3BFFC5;
@@ -46,7 +42,7 @@
   --radius-sm: clamp(15px, 4vw, 18px);
   --radius-md: clamp(18px, 5vw, 20px);
   
-  /* Breakpoints (for reference in media queries) */
+  /* Breakpoints */
   --bp-mobile: 480px;
   --bp-tablet: 768px;
   --bp-desktop: 1024px;
@@ -58,7 +54,7 @@
   --transition-slow: 0.5s ease;
   --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   
-  /* Z-Index Scale */
+  /* Z-Index */
   --z-background: -1;
   --z-base: 0;
   --z-content: 1;
diff --git a/src/styles/components/buttons.css b/src/styles/components/buttons.css
@@ -1,7 +1,3 @@
-/* ==========================================================================
-   Buttons - Simplified to match TypeScript function
-   ========================================================================== */
-
 .btn-main {
   display: inline-block;
   font-family: var(--font-secondary);
diff --git a/src/styles/components/call-to-action.css b/src/styles/components/call-to-action.css
@@ -1,7 +1,3 @@
-/* ==========================================================================
-   Call to Action Component
-   ========================================================================== */
-
 .cta-banner {
   position: relative;
   width: 100%;
@@ -46,7 +42,6 @@
   flex-wrap: wrap;
 }
 
-/* -------------------------------------------------------------------------- */
 .cta-banner article.right {
   margin-left: auto;
   padding-left: var(--space-lg);
@@ -57,7 +52,6 @@
   padding-right: var(--space-lg);
 }
 
-/* -------------------------------------------------------------------------- */
 .cta-banner article.right::before {
   content: '';
   position: absolute;
@@ -81,9 +75,6 @@
 }
 
 
-/* ==========================================================================
-   Responsive Styles
-   ========================================================================== */
 
 @media (max-width: 1500px) {
   .cta-banner {
@@ -119,7 +110,6 @@
   }
 }
 
-/* -------------------------------------------------------------------------- */
 @media (max-width: 768px) {
   .cta-banner article {
     grid-template-columns: 1fr;
diff --git a/src/styles/components/footer.css b/src/styles/components/footer.css
@@ -1,7 +1,3 @@
-/* ==========================================================================
-   Footer Component
-   ========================================================================== */
-
 #main-footer {
     min-height: 75px;
     width: 85%;
@@ -17,17 +13,17 @@
     }
     
     .footer-socials {
-        order: 1; /* Ensures socials come first */
-        flex-shrink: 0; /* Prevents shrinking */
+        order: 1;
+        flex-shrink: 0;
     }
     
     .copyrights {
-        order: 2; /* Ensures copyrights come second */
+        order: 2;
         margin: 0;
         font-size: var(--text-3xs);
         text-transform: uppercase;
         color: var(--color-text-secondary);
         text-align: left;
-        flex-grow: 1; /* Takes remaining space */
+        flex-grow: 1;
     }
 }
diff --git a/src/styles/components/navigation.css b/src/styles/components/navigation.css
@@ -1,7 +1,4 @@
-/* ==========================================================================
-   Navigation Component
-   ========================================================================== */
-
+/* Desktop Navigation */
 #top-nav {
   .bar-box {
     position: fixed;
@@ -17,7 +14,6 @@
       justify-content: space-between;
       gap: 50px;
       height: 60px;
-      margin: 0;
       padding: 0 35px;
       margin: 0;
       list-style: none;
@@ -86,8 +82,7 @@
   }
 }
 
-/* -------------------------------------------------------------------------- */
-
+/* Mobile Navigation */
 #mobile-nav {
   display: none;
   position: fixed;
diff --git a/src/styles/components/socials.css b/src/styles/components/socials.css
@@ -1,7 +1,3 @@
-/* ==========================================================================
-   Socials Component
-   ========================================================================== */
-
 .social-icons {
     list-style: none;
     display: flex;
diff --git a/src/styles/layout/backgrounds.css b/src/styles/layout/backgrounds.css
@@ -1,8 +1,3 @@
-/* ==========================================================================
-   Backgrounds & Media
-   ========================================================================== */
-
-/* Video backgrounds */
 .video-background {
   position: absolute;
   top: 50%;
@@ -16,7 +11,6 @@
   min-height: 100%;
 }
 
-/* Canvas backgrounds */
 canvas.pixel-grid {
   position: absolute;
   top: 0;
diff --git a/src/styles/layout/containers.css b/src/styles/layout/containers.css
@@ -1,7 +1,3 @@
-/* ==========================================================================
-   Layout - Containers & Wrappers
-   ========================================================================== */
-
 #view {
   height: 100%;
   font-family: var(--font-primary);
diff --git a/src/styles/layout/sections.css b/src/styles/layout/sections.css
@@ -1,7 +1,3 @@
-/* ==========================================================================
-   Layout - Sections
-   ========================================================================== */
-
 section {
   width: 100%;
   margin: 0;
@@ -30,15 +26,13 @@ section article p {
   max-width: clamp(500px, 90%, 750px);
 }
 
-/* Full height sections */
 .section--full-height {
   min-height: 100vh;
   height: 100vh;
   display: flex;
   align-items: center;
 }
 
-/* Section with background */
 .section--with-background {
   position: relative;
   overflow: hidden;
@@ -54,12 +48,12 @@ section article p {
   z-index: var(--z-background);
 }
 
-/* Padded sections */
 .section--padded {
   padding: var(--space-3xl) 0;
 }
 
-/* Responsive section adjustments */
+
+
 @media (max-width: 768px) {
   section {
     padding: 0 var(--space-sm);
diff --git a/src/styles/main.css b/src/styles/main.css
@@ -1,31 +1,27 @@
-/* ==========================================================================
-   Main Stylesheet - Import Order Matters!
-   ========================================================================== */
-
-/* Base Styles - Reset, variables, typography */
+/* Base */
 @import './base/variables.css';
 @import './base/reset.css';
 @import './base/typography.css';
 
-/* Layout - Grid systems, containers, etc. */
+/* Layout */
 @import './layout/containers.css';
 @import './layout/sections.css';
 @import './layout/backgrounds.css';
 
-/* Components - Reusable UI components */
+/* Components */
 @import './components/buttons.css';
 @import './components/socials.css';
 @import './components/navigation.css';
 @import './components/call-to-action.css';
 @import './components/footer.css';
 
-/* Pages - Page-specific styles */
+/* Views */
 @import './views/home.css';
 @import './views/about.css';
 @import './views/contact.css';
 @import './views/log-article.css';
 
-/* Utilities - Helper classes and overrides */
+/* Utilities */
 @import './utilities/spacing.css';
 @import './utilities/text.css';
 @import './utilities/responsive.css';
diff --git a/src/styles/views/about.css b/src/styles/views/about.css
@@ -1,7 +1,3 @@
-/* ==========================================================================
-   About Page Styles
-   ========================================================================== */
-
 #about-page {
   overflow-x: hidden; /* Hide horizontal overflow for the page */
   
@@ -35,42 +31,39 @@
   }
 
   img {
-    height: 100%; /* Larger height for bigger screens */
+    height: 100%; 
     width: auto;
     position: absolute;
     bottom: 0;
-    right: calc(85% / 2 + 7vw); /* Further outside the text wrapper */
+    right: calc(85% / 2 + 7vw);
     z-index: var(--z-content);
     object-fit: contain;
   }
 
   section.left img {
     right: auto;
-    left: calc(85% / 2 + 5vw); /* Further outside the text wrapper on the left */
+    left: calc(85% / 2 + 5vw); 
   }
 }
 
-/* Allow body to show the overflow on larger screens */
 body {
   overflow-x: visible;
 }
 
 
-/* ==========================================================================
-  Responsive Styles
-  ========================================================================== */
+
 @media (max-width: 1500px) {
   #about-page {
     .first-section {
       img {
         bottom: -15%;
-        left: calc(100% / 2 + 10vw); /* Further outside the text wrapper on the left */
+        left: calc(100% / 2 + 10vw); 
       }
 
     }
 
     section {
-      overflow-x: visible; /* Allow images to extend outside */
+      overflow-x: visible; 
     }
     
     section {
@@ -90,17 +83,19 @@ body {
       height: 100%;
       right: auto;
       bottom: -35%;
-      left: calc(100% / 2 + 10vw); /* Further outside the text wrapper on the left */
+      left: calc(100% / 2 + 10vw); 
     }
 
     section.left img {
       right: auto;
       top: -35%;
-      left: calc(100% / 2 + 10vw); /* Further outside the text wrapper on the left */
+      left: calc(100% / 2 + 10vw); 
     }
   }
 }
 
+
+
 @media (max-width: 768px) {
   #about-page {
     .first-section {
@@ -114,7 +109,7 @@ body {
       article {
         padding: var(--space-lg) 0;
         min-height: auto;
-        order: 1; /* Article appears first */
+        order: 1; 
       }
 
       img {
@@ -124,8 +119,8 @@ body {
         left: 0;
         margin: auto 0;
         display: block;
-        order: 2; /* Image appears after article */
-        align-self: center; /* Center horizontally within the flex container */
+        order: 2; 
+        align-self: center;
       }
     }
 
diff --git a/src/styles/views/contact.css b/src/styles/views/contact.css
diff --git a/src/styles/views/home.css b/src/styles/views/home.css
diff --git a/src/styles/views/log-article.css b/src/styles/views/log-article.css

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,3 @@`
`1`		`-/* ==========================================================================`
`2`		`- Reset & Base Styles`
`3`		`- ========================================================================== */`
`4`		`-`
`5`	`1`	`* {`
`6`	`2`	`box-sizing: border-box;`
`7`	`3`	`}`
`@@ -20,30 +16,25 @@ body {`
`20`	`16`	`line-height: 1.3;`
`21`	`17`	`}`
`22`	`18`
`23`		`-/* Remove default margins */`
`24`	`19`	`h1, h2, h3, h4, h5, h6, p, ul, ol, figure {`
`25`	`20`	`margin: 0;`
`26`	`21`	`}`
`27`	`22`
`28`		`-/* Remove default list styles */`
`29`	`23`	`ul, ol {`
`30`	`24`	`list-style: none;`
`31`	`25`	`padding: 0;`
`32`	`26`	`}`
`33`	`27`
`34`		`-/* Better image defaults */`
`35`	`28`	`img {`
`36`	`29`	`max-width: 100%;`
`37`	`30`	`height: auto;`
`38`	`31`	`}`
`39`	`32`
`40`		`-/* Better button defaults */`
`41`	`33`	`button {`
`42`	`34`	`font-family: inherit;`
`43`	`35`	`cursor: pointer;`
`44`	`36`	`}`
`45`	`37`
`46`		`-/* Better link defaults */`
`47`	`38`	`a {`
`48`	`39`	`color: inherit;`
`49`	`40`	`text-decoration: none;`