New retro design for most of the site

3 files changed, 71 insertions, 64 deletions

diff --git a/styles/_alert.scss b/styles/_alert.scss
index b0935ce..e041d4b 100644
--- a/styles/_alert.scss
+++ b/styles/_alert.scss
@@ -10,11 +10,14 @@ div[role="alert"] {
   margin-block: 1.5rem;
   margin-inline: 0.5rem;
 
-  border-radius: 0.5rem;
+  border-radius: 8px;
+  border: 1px solid rgba(0,0,0,0.1);
+  box-shadow: 0 4px 6px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.5);
+  //background-image: $glossyGradient;
 
   svg {
-    width: 1.5em;
-    height: 1.5em;
+    width: 2em;
+    height: 2em;
     margin-inline-end: 0.5rem;
     color: inherit;
     vertical-align: middle;
@@ -23,43 +26,32 @@ div[role="alert"] {
 
   p {
     margin-block: 0;
-  }
-
-  &::before {
-    flex-shrink: 0;
-    display: block;
-
-    width: 24px;
-    height: 24px;
-    line-height: 24px;
-
-    border-radius: 50%;
-    font-size: 1rem;
-
-    text-align: center;
+    font-weight: 500;
   }
 }
 
 div[role="alert"].note {
-  background-color: $noteBackground;
-  color: $noteText;
-  box-shadow: 0 0 0 1px $noteText;
+  background-color: #e7f3ff;
+  color: #004a99;
+  border-color: #b3d7ff;
 
   &::before {
     content: "i";
-    background-color: $noteText;
-    color: $light;
+    background-color: #004a99;
+    color: white;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
   }
 }
 
 div[role="alert"].warning {
-  background-color: $warningBackground;
-  color: $warningText;
-  box-shadow: 0 0 0 1px $warningText;
+  background-color: #fff4ce;
+  color: #856404;
+  border-color: #ffeeba;
 
   &::before {
     content: "!";
-    background-color: $warningText;
-    color: $light;
+    background-color: #856404;
+    color: white;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
   }
 }
diff --git a/styles/_variables.scss b/styles/_variables.scss
index fba0516..7862724 100644
--- a/styles/_variables.scss
+++ b/styles/_variables.scss
@@ -1,26 +1,29 @@
-$titleFontStack: "Archivo Variable", "Liberation Sans", "Arial", "Helvetica", sans-serif;
-$mainFontStack: "Archivo Variable", "Liberation Sans", "Arial", "Helvetica", sans-serif;
-$monoFontStack: "Roboto Mono Variable", "Fira Code", "Consolas", monospace;
+$titleFontStack: "Segoe UI", "Tahoma", "Geneva", "Verdana", sans-serif;
+$mainFontStack: "Segoe UI", "Tahoma", "Geneva", "Verdana", sans-serif;
+$monoFontStack: "Consolas", "Monaco", "Lucida Console", monospace;
 
-$accent: hsl(209, 94%, 42%);
-$accentLight: hsl(215, 90%, 60%);
-$accentDark: hsl(215, 90%, 30%);
-$secondary: hsl(48, 100%, 50%);
-$dark: hsl(340, 13%, 5%);
+$accent: hsl(210, 100%, 45%); // Classic blue
+$accentLight: hsl(210, 100%, 70%);
+$accentDark: hsl(210, 100%, 25%);
+$secondary: hsl(35, 100%, 50%); // Glossy orange for highlights
+$dark: hsl(210, 15%, 10%);
 
-$background: hsl(210, 40%, 96%);
-$backgroundDarker: hsl(210, 40%, 80%);
-$light: hsl(214, 64%, 98%);
-$lightAlt: hsl(0, 0%, 100%);
+$background: hsl(0, 0%, 94%);
+$backgroundDarker: hsl(0, 0%, 90%);
+$light: white;
+$lightAlt: hsl(0, 0%, 95%);
 
-$noteBackground: hsl(210, 40%, 86%);
-$noteText: hsl(210, 40%, 40%);
+$noteBackground: #fffbcc;
+$noteText: #5a5a22;
 
-$warningBackground: hsl(40, 100%, 90%);
-$warningText: hsl(40, 100%, 30%);
+$warningBackground: #ffe6e6;
+$warningText: #cc0000;
 
-$shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
+$shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 
+// Web 2.0/Skeuomorphic effects
+$glassBackground: rgba(255, 255, 255, 0.75);
+$bevelShadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 5px rgba(0, 0, 0, 0.2);
 $floatingRadius: 0.5rem;
 
 $breakpointTablet: 480px;
diff --git a/styles/shared.scss b/styles/shared.scss
index 3f7a155..96f20c6 100644
--- a/styles/shared.scss
+++ b/styles/shared.scss
@@ -5,67 +5,79 @@
 body {
   font-family: $mainFontStack;
   line-height: 1.65;
-  color: #000000;
+  color: $dark;
+  background-color: $background;
 }
 
 %heading {
   font-family: $titleFontStack;
-  margin-block-start: 0.75em;
-  margin-block-end: 0.25em;
+  margin-block-start: 1rem;
+  margin-block-end: 0.5rem;
+  color: $accentDark;
+  text-shadow: 1px 1px 0 #fff;
 }
 
 h1 {
   @extend %heading;
-  font-size: 3.25rem;
-  line-height: 1.3;
-
+  font-size: 2.75rem;
+  line-height: 1.2;
+  border-bottom: 2px solid $accentLight;
+  padding-bottom: 0.5rem;
+  margin-bottom: 1.5rem;
 }
 
 h2 {
   @extend %heading;
-  font-size: 2.5rem;
-  line-height: 1.55;
-  font-variation-settings: "wdth" 87.5,"wght" 700,"GRAD" 150
+  font-size: 2rem;
+  line-height: 1.3;
 }
 
 h3 {
   @extend %heading;
-  font-size: 2rem;
-  line-height: 1.55;
+  font-size: 1.5rem;
+  line-height: 1.3;
 }
 
 h4 {
   @extend %heading;
-  font-size: 1.25rem;
-  line-height: 1.55;
+  font-size: 1.2rem;
+  line-height: 1.3;
 }
 
 p {
-  font-variation-settings: "GRAD" -15,"wdth" 112.5;
+  margin-bottom: 1rem;
 }
 
 table {
   width: 100%;
-  border-collapse: collapse;
+  border-collapse: separate;
+  border-spacing: 0;
   margin-bottom: 1.5rem;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 
   th,
   td {
-    border: 1px solid $accent;
+    border: 1px solid #ddd;
     padding: 0.75rem;
     text-align: left;
   }
 
   th {
-    font-variation-settings: "GRAD" 150,"wdth" 87.5,"wght" 700;
+    background: $accent;
+    //background-image: $glossyGradient;
+    color: white;
+    font-weight: bold;
+    text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
   }
 
   tbody tr:nth-child(odd) {
-    background-color: color.scale($accent, $lightness: 90%);
+    background-color: #fff;
   }
 
-  th,
   tbody tr:nth-child(even) {
-    background-color: color.scale($accent, $lightness: 97%);
+    background-color: #f9f9f9;
   }
 }