updated color scheme

app/components/card/card.tsx

@@ -41,7 +41,7 @@ export default function Card({ data, dims, imageFolder }: CardProps) {
   const linkIcon = hasLink ? (
     <Image
       className={styles.linkIcon}
-      src="icons/link.svg"
+      src="images/link.svg"
       alt="link"
       width={64}
       height={64}

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 9<sup>th</sup>, 2024
+      Updated December 11<sup>th</sup>, 2024
     </footer>
   );
 }

app/components/header/header.module.scss

@@ -13,7 +13,7 @@
 .innerHeader {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
-  grid-template-rows: 4rem;
+  grid-template-rows: 4.5rem;
   background: $content-color;
 
   div {
@@ -27,7 +27,7 @@
 
 .logo {
   @include flex-vertical-center;
-  padding-left: 0.25rem;
+  padding: 0 0.25rem;
 
   @include mobile {
     @include flex-center;
@@ -68,13 +68,13 @@
 .externalLinks {
   @include flex-vertical-center;
   justify-content: right;
-  padding-right: 0.25rem;
+  padding: 0 0.25rem;
 }
 
 .iconLink img {
   @include flex-center;
   width: auto;
-  height: 2.5rem;
+  height: 4.5rem - 1.5rem;
   margin: 0 0.5rem;
 
   &:hover {

app/components/header/header.tsx

@@ -15,7 +15,7 @@ function IconLink({ title, url, icon }: IconLinkProps) {
       target={url === "/" ? "" : "_blank"}
       title={title}
     >
-      <Image src={`/icons/${icon}`} alt={title} width={192} height={192} />
+      <Image src={`/images/${icon}`} alt={title} width={192} height={192} />
     </a>
   );
 }

app/components/section/section.module.scss

@@ -1,8 +1,8 @@
 @import "../../constants.module.scss";
 
 .section {
-  margin-top: -1 * ($window-spacing + 3rem);
-  padding-top: $window-spacing + 3rem;
+  margin-top: -1 * ($window-spacing + 3.5rem);
+  padding-top: $window-spacing + 3.5rem;
 }
 
 .titleBar {

app/constants.module.scss

@@ -1,21 +1,21 @@
 /* cde colors */
-$header-color: #999999;
-$header-border-color1: #d1d1d2;
-$header-border-color2: #4e4e4e;
-$window-color: #eda870;
-$window-border-color1: #f7d9c0;
-$window-border-color2: #7d593b;
-$menu-color: #4992a7;
-$menu-font-color: white;
-$menu-border-color1: #adced7;
-$menu-border-color2: #244953;
-$content-color: #c6b2a8;
-$content-border-color1: #e7deda;
-$content-border-color2: #6a605a;
-$page-links-color: #8998aa;
-$page-links-border-color1: #cad1d9;
-$page-links-border-color2: #464d56;
-$background-color: #4992a7;
+// $header-color: #999999;
+// $header-border-color1: #d1d1d2;
+// $header-border-color2: #4e4e4e;
+// $window-color: #eda870;
+// $window-border-color1: #f7d9c0;
+// $window-border-color2: #7d593b;
+// $menu-color: #4992a7;
+// $menu-font-color: white;
+// $menu-border-color1: #adced7;
+// $menu-border-color2: #244953;
+// $content-color: #c6b2a8;
+// $content-border-color1: #e7deda;
+// $content-border-color2: #6a605a;
+// $page-links-color: #8998aa;
+// $page-links-border-color1: #cad1d9;
+// $page-links-border-color2: #464d56;
+// $background-color: #4992a7;
 
 /* solaris colors */
 // $header-color: #adb5c6;
@@ -36,6 +36,25 @@ $background-color: #4992a7;
 // $page-links-border-color2: #29294a;
 // $background-color: #524a8c;
 
+/* custom */
+$header-color: #91a9bc;
+$header-border-color1: lighten($header-color, 20%);
+$header-border-color2: darken($header-color, 20%);
+$window-color: #2c6f8f;
+$window-border-color1: lighten($window-color, 30%);
+$window-border-color2: darken($window-color, 20%);
+$menu-color: #91a9bc;
+$menu-font-color: black;
+$menu-border-color1: lighten($menu-color, 20%);
+$menu-border-color2: darken($menu-color, 20%);
+$content-color: #91a9bc;
+$content-border-color1: lighten($content-color, 20%);
+$content-border-color2: darken($content-color, 20%);
+$page-links-color: #2c6f8f;
+$page-links-border-color1: lighten($page-links-color, 30%);
+$page-links-border-color2: darken($page-links-color, 20%);
+$background-color: #193d50;
+
 /* font sizes */
 $small-font-size: 12px;
 $medium-font-size: 16px;