style updates

PScottZero · Dec 19, 2024 · 055e209 · 055e209
1 parent b57860b
commit 055e209
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 34 deletions.
diff --git a/app/components/card/card.module.scss b/app/components/card/card.module.scss
@@ -3,7 +3,6 @@
 .card {
   @include content-border;
   position: relative;
-  transition: 0.1s;
   aspect-ratio: 4/3;
   background-color: $menu-color;
   overflow: hidden;
@@ -15,7 +14,8 @@
   left: 0;
   width: 100%;
   padding: 1rem;
-  background-color: rgba($content-color, 0.75);
+  background-color: rgba($content-color, 0.85);
+  border-top: $border-size solid $content-border-color1;
 }
 
 .title {
@@ -35,7 +35,8 @@
 }
 
 .link:hover {
-  filter: brightness(75%);
+  @include double-border($content-border-color2, $content-border-color1);
+  cursor: pointer;
 }
 
 .linkIcon {

diff --git a/app/components/footer/footer.tsx b/app/components/footer/footer.tsx
@@ -6,7 +6,7 @@ export default function Footer() {
       Email at <a href="mailto:[email protected]">[email protected]</a>{" "}
       or call at (215) 880-9592
       <br />
-      Updated December 11<sup>th</sup>, 2024
+      Updated December 19<sup>th</sup>, 2024
     </footer>
   );
 }
diff --git a/app/components/header/header.module.scss b/app/components/header/header.module.scss
@@ -78,6 +78,6 @@
   margin: 0 0.5rem;
 
   &:hover {
-    filter: brightness(75%);
+    outline: $border-size dotted black;
   }
 }
diff --git a/app/components/section/section.tsx b/app/components/section/section.tsx
@@ -13,7 +13,7 @@ export type SectionData = {
 
 export type SectionProps = {
   data: SectionData;
-  flexShrink: number;
+  fewerColumns: number;
 };
 
 function getCardWidth(columns: number): string {
@@ -23,12 +23,12 @@ function getCardWidth(columns: number): string {
   return "calc(" + width + " - " + lessWidth + ")";
 }
 
-function getCardDims(columns: number, lessColumns: number): CardDims {
+function getCardDims(columns: number, fewerColumns: number): CardDims {
   const dims = new CardDims();
-  const columnsAdjusted = Math.max(columns - lessColumns, 1);
+  const columnsAdjusted = Math.max(columns - fewerColumns, 1);
   dims.width = getCardWidth(columnsAdjusted);
 
-  if (columnsAdjusted == 2 && lessColumns == 2) {
+  if (columnsAdjusted == 2 && fewerColumns == 2) {
     dims.titleSize = variables.mediumFontSize;
     dims.descriptionSize = variables.smallFontSize;
     dims.labelPadding = `calc(${variables.cardSpacing} / 2)`;
@@ -41,14 +41,14 @@ function getCardDims(columns: number, lessColumns: number): CardDims {
   return dims;
 }
 
-export default function Section({ data, flexShrink }: SectionProps) {
+export default function Section({ data, fewerColumns }: SectionProps) {
   let cards: JSX.Element[] = [];
   for (let cardData of data.content) {
     cards.push(
       <Card
         key={cards.length}
         data={cardData}
-        dims={getCardDims(data.columns, flexShrink)}
+        dims={getCardDims(data.columns, fewerColumns)}
         imageFolder={data.imageFolder ?? data.sectionId}
       />
     );

diff --git a/app/page.tsx b/app/page.tsx
@@ -7,42 +7,40 @@ import styles from "./page.module.scss";
 import { useEffect, useState } from "react";
 import Footer from "./components/footer/footer";
 
-const mobileCutoff = 640;
-const tabletCutoff = 1024;
-
-const mobileFlexShrink = 2;
-const tabletFlexShrink = 1;
-const desktopFlexShrink = 0;
-
-function getFlexShrink(window: Window): number {
-  return window.innerWidth <= mobileCutoff
-    ? mobileFlexShrink
-    : window.innerWidth <= tabletCutoff
-    ? tabletFlexShrink
-    : desktopFlexShrink;
-}
+const MOBILE_CUTOFF = 640;
+const TABLET_CUTOFF = 1024;
+
+const MOBILE_COLUMN_ADJUST = 2;
+const TABLET_COLUMN_ADJUST = 1;
 
 export default function Home() {
-  const [flexShrink, setFlexShrink] = useState<number>(0);
+  const [fewerColumns, setFewerColumns] = useState<number>(0);
+
+  const refreshFewerColumns = () =>
+    setFewerColumns(
+      window.innerWidth <= MOBILE_CUTOFF
+        ? MOBILE_COLUMN_ADJUST
+        : window.innerWidth <= TABLET_CUTOFF
+        ? TABLET_COLUMN_ADJUST
+        : 0
+    );
+
+  useEffect(() => {
+    window.addEventListener("resize", refreshFewerColumns);
+    refreshFewerColumns();
+  }, []);
 
   let sections: JSX.Element[] = [];
   content.forEach((sectionData: SectionData) => {
     sections.push(
       <Section
         key={sections.length}
         data={sectionData}
-        flexShrink={flexShrink}
+        fewerColumns={fewerColumns}
       />
     );
   });
 
-  useEffect(() => {
-    window.addEventListener("resize", () =>
-      setFlexShrink(getFlexShrink(window))
-    );
-    setFlexShrink(getFlexShrink(window));
-  }, []);
-
   return (
     <main className={styles.main}>
       <Banner />