switched to scss

app/components/banner/banner.module.css → app/components/banner/banner.module.scss

@@ -1,13 +1,15 @@
+@import "../../constants.module.scss";
+
 .banner {
   display: grid;
-  grid-template-columns: var(--profile-size) 1fr;
-  border-radius: var(--border-radius);
+  grid-template-columns: $profile-size 1fr;
+  border-radius: $border-radius;
   width: 100%;
-  min-height: var(--card-height);
+  min-height: $card-height;
   background: url("/images/banner.jpg");
   background-size: cover;
   background-position: 50%;
-  box-shadow: var(--box-shadow);
+  box-shadow: $box-shadow;
 }
 
 .profile {
@@ -19,10 +21,10 @@
 }
 
 .profile img {
-  width: calc(var(--profile-size) - 4rem);
+  width: calc($profile-size) - 4rem;
   height: auto;
-  border-radius: var(--border-radius);
-  border: 4px solid var(--font-color);
+  border-radius: $border-radius;
+  border: 4px solid $font-color;
 }
 
 .description {

app/components/banner/banner.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import styles from "./banner.module.css";
+import styles from "./banner.module.scss";
 
 export default function Banner() {
   return (

app/components/card/card.module.css → app/components/card/card.module.scss

@@ -1,11 +1,13 @@
+@import "../../constants.module.scss";
+
 .card {
   position: relative;
   transition: 0.1s;
   aspect-ratio: 4/3;
-  background-color: var(--primary-color);
-  border-radius: var(--border-radius);
+  background-color: $primary-color;
+  border-radius: $border-radius;
   overflow: hidden;
-  box-shadow: var(--box-shadow);
+  box-shadow: $box-shadow;
 }
 
 .label {
@@ -14,17 +16,17 @@
   left: 0;
   width: 100%;
   padding: 1rem;
-  background-color: var(--card-label-color);
+  background-color: $card-label-color;
 }
 
 .title {
-  font-size: var(--medium-font-size);
+  font-size: $medium-font-size;
   font-weight: bold;
 }
 
 .description {
   position: relative;
-  font-size: var(--regular-font-size);
+  font-size: $regular-font-size;
 }
 
 .image {

app/components/card/card.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import Image from "next/image";
-import styles from "./card.module.css";
+import styles from "./card.module.scss";
+import variables from "../../constants.module.scss";
 
 export type CardData = {
   title: string;
@@ -17,16 +18,16 @@ export type CardProps = {
   flexShrink: number;
 };
 
-const mediumFontSize = "var(--medium-font-size)";
-const regularFontSize = "var(--regular-font-size)";
-const smallFontSize = "var(--small-font-size)";
-const regularSpacing = "var(--spacing)";
-const smallSpacing = "calc(var(--spacing) / 2)";
+const mediumFontSize = "$medium-font-size";
+const regularFontSize = "$regular-font-size";
+const smallFontSize = "$small-font-size";
+const regularSpacing = "$spacing";
+const smallSpacing = "calc($spacing / 2)";
 
 function getCardWidth(flexAdjusted: number): string {
   const flexWidth = 100 / flexAdjusted + "%";
   const widthCorrection =
-    flexAdjusted - 1 + " * var(--spacing) / " + flexAdjusted;
+    flexAdjusted - 1 + " * " + variables.spacing + " / " + flexAdjusted;
   return "calc(" + flexWidth + " - " + widthCorrection + ")";
 }
 

app/components/footer/footer.module.scss

@@ -0,0 +1,11 @@
+@import "../../constants.module.scss";
+
+.footer {
+  @include primary-style;
+  width: 100%;
+  font-size: 20px;
+  line-height: 1.5;
+  margin-top: $spacing;
+  text-align: center;
+  padding: 4rem 2rem;
+}

app/components/footer/footer.tsx

@@ -0,0 +1,12 @@
+import styles from "./footer.module.scss";
+
+export default function Footer() {
+  return (
+    <footer className={styles.footer}>
+      Email at <a href="mailto:[email protected]">[email protected]</a>{" "}
+      or call at (215) 880-9592
+      <br />
+      Updated December 1<sup>st</sup>, 2024
+    </footer>
+  );
+}

app/components/header/header.module.css → app/components/header/header.module.scss

@@ -1,10 +1,12 @@
+@import "../../constants.module.scss";
+
 .header {
   z-index: 1;
   position: sticky;
   top: 0;
   width: 100%;
   height: 4rem;
-  background: var(--primary-color);
+  background: $primary-color;
   padding: 0.75rem;
   box-shadow: 0 4px 4px #00000055;
 }
@@ -26,7 +28,7 @@
   color: white;
   text-decoration: none;
   font-size: 18px;
-  margin-left: var(--spacing);
+  margin-left: $spacing;
   padding: 0;
   line-height: 0;
 }
@@ -46,7 +48,7 @@
   width: 1px;
   height: 2rem;
   background-color: white;
-  margin-left: var(--spacing);
+  margin-left: $spacing;
 }
 
 @media screen and (max-width: 1024px) {

app/components/header/header.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import styles from "./header.module.css";
+import styles from "./header.module.scss";
 
 export default function Header() {
   return (

app/components/section/section.module.css → app/components/section/section.module.scss

@@ -1,6 +1,8 @@
+@import "../../constants.module.scss";
+
 .section {
   margin-top: -4rem;
-  padding-top: calc(4rem + var(--spacing));
+  padding-top: calc(4rem + $spacing);
 }
 
 .title {
@@ -13,15 +15,15 @@
   width: 100%;
   height: 4rem;
   padding: 0 1rem;
-  margin-bottom: var(--spacing);
-  background-color: var(--primary-color);
-  border-radius: var(--border-radius);
-  box-shadow: var(--box-shadow);
+  margin-bottom: $spacing;
+  background-color: $primary-color;
+  border-radius: $border-radius;
+  box-shadow: $box-shadow;
 }
 
 .cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  gap: var(--spacing);
+  gap: $spacing;
 }

app/components/section/section.tsx

@@ -1,5 +1,5 @@
 import Card, { CardData } from "../card/card";
-import styles from "./section.module.css";
+import styles from "./section.module.scss";
 
 export type SectionData = {
   sectionId: string;
@@ -24,7 +24,7 @@ export default function Section({ data, flexShrink }: SectionProps) {
         imageFolder={data.imageFolder ?? data.sectionId}
         flex={data.columns}
         flexShrink={flexShrink}
-      />,
+      />
     );
   }
 

app/constants.module.scss

@@ -0,0 +1,37 @@
+/* colors */
+$primary-color: #26768b;
+$font-color: white;
+$link-color: #46daff;
+$background-color: #0e2f37;
+$card-label-color: #26768bcc;
+$shadow-color: #00000055;
+
+/* card heights */
+$card-height: 20rem;
+$medium-card-height: 17.5rem;
+$small-card-height: 15rem;
+$mobile-card-height: 70vmin;
+$mobile-small-card-height: calc(70vmin / 2);
+
+/* font sizes */
+$small-font-size: 12px;
+$regular-font-size: 16px;
+$medium-font-size: 20px;
+$large-font-size: 24px;
+
+/* sizing */
+$spacing: 1rem;
+$border-radius: 0.5rem;
+$min-width: 60rem;
+$profile-size: 20rem;
+$small-profile-size: 16rem;
+$box-shadow: 4px 4px 4px $shadow-color;
+
+:export {
+  spacing: $spacing;
+}
+
+@mixin primary-style {
+  background-color: $primary-color;
+  border-radius: $border-radius;
+}

app/globals.scss

@@ -0,0 +1,19 @@
+@import "./constants.module.scss";
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  max-width: 100vw;
+  background-color: $background-color;
+  color: $font-color;
+}
+
+a {
+  color: $link-color;
+  text-decoration: none;
+}

app/layout.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import { Ubuntu } from "next/font/google";
-import "./globals.css";
+import "./globals.scss";
 import Header from "./components/header/header";
 
 const inter = Ubuntu({

app/page.module.scss

@@ -0,0 +1,8 @@
+@import "./constants.module.scss";
+
+.main {
+  max-width: 80rem;
+  width: 100%;
+  padding: 0 $spacing;
+  margin: $spacing auto;
+}