feat: basic home page

Created a basic home page with links, a header with a link to home, some basic reusable CSS classes.

ref: N25B-38

src/App.css

@@ -1,24 +1,3 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-
 .logopepper {
   height: 8em;
   padding: 1.5em;
@@ -32,27 +11,21 @@
   filter: drop-shadow(0 0 10em #4eff14aa);
 }
 
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-
 @keyframes logo-pepper-spin {
-  from {
-    transform: rotate(-20deg);
+  0% {
+    transform: rotate(0);
   }
-  to {
+  25% {
     transform: rotate(20deg);
   }
+  75% {
+    transform: rotate(-20deg);
+  }
+  100% {
+    transform: rotate(0);
+  }
 }
 
-
-
 @keyframes logo-pepper-scale {
   from {
     transform: scale(1,1);
@@ -63,19 +36,13 @@
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
+  .logopepper:hover {
+    animation: logo-pepper-spin infinite 1s linear;
   }
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .logopepper {
-    animation: logo-pepper-spin infinite 1s linear alternate;
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .logoPepperScaling {
+  .logoPepperScaling:hover {
     animation: logo-pepper-scale infinite 1s linear alternate;
   }
 }
@@ -113,3 +80,83 @@ button.movePage.right{
 button.movePage:hover{
   background-color: rgb(0, 176, 176);
 }
+
+
+
+header {
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+
+  padding: 1rem;
+
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+
+  backdrop-filter: blur(10px);
+  z-index: 1; /* Otherwise any translated elements render above the blur?? */
+}
+
+main {
+  padding: 1rem 0;
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.align-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-sm {
+  gap: .25rem;
+}
+.gap-md {
+  gap: .5rem;
+}
+.gap-lg {
+  gap: 1rem;
+}
+
+.padding-sm {
+  padding: .25rem;
+}
+.padding-md {
+  padding: .5rem;
+}
+.padding-lg {
+  padding: 1rem;
+}
+
+.round-sm {
+  border-radius: .25rem;
+}
+.round-md {
+  border-radius: .5rem;
+}
+.round-lg {
+  border-radius: 1rem;
+}