add more content + emails

.zed/settings.json

@@ -8,6 +8,10 @@
       "tab_size": 2,
       "hard_tabs": false
     },
+    "SCSS": {
+      "tab_size": 2,
+      "hard_tabs": false
+    },
     "TypeScript": {
       "tab_size": 2,
       "hard_tabs": false

src/lib/style.scss

@@ -13,3 +13,37 @@ $size_lg: 1024px;
       repeat url('$lib/textures/brick.svg');
   }
 }
+
+@mixin box-texture($image) {
+  border-image: url($image);
+  border-image-slice: 8 fill;
+  border-image-width: 16px 16px;
+}
+
+@mixin hover {
+  // Because we turn off the user agent's default outline,
+  // we should add a suitable alternative for accessibility reasons.
+
+  & {
+    transform: translateY(0);
+    box-shadow: none;
+    filter: brightness(100%);
+    transition:
+      box-shadow 100ms,
+      transform 100ms,
+      filter 100ms;
+  }
+
+  &:hover {
+    filter: brightness(110%);
+    box-shadow: 4px 8px 8px 0 rgba(0, 0, 0, 0.2);
+    transform: translateY(-2px);
+  }
+
+  &:focus {
+    filter: brightness(120%);
+    box-shadow: 4px 8px 8px 0 rgba(0, 0, 0, 0.2);
+    transform: translateY(-2px);
+    outline: none;
+  }
+}

src/routes/+error.svelte

@@ -0,0 +1,31 @@
+<script>
+  import { page } from '$app/stores';
+</script>
+
+<main>
+  <div class="error-message">
+    <h1>{$page.status}: {$page.error?.message}</h1>
+    {#if $page.status === 404}
+      <p>We couldn't find that page. If you typed in a URL check to see if it is correct.</p>
+    {:else}
+      <p>Something went wrong. Try again?</p>
+    {/if}
+
+    <a href="/">Go to the homepage</a>
+  </div>
+</main>
+
+<style lang="scss">
+  .error-message {
+    margin: auto;
+    padding-top: 8em;
+    width: min-content;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+
+    h1 {
+      width: max-content;
+    }
+  }
+</style>

src/routes/+layout.svelte

@@ -1,22 +1,36 @@
 <script>
+  import DoubleArrow from '$lib/images/doublearrow.svg?component';
   import fonts from '$lib/fonts.css?url';
   import Gear from '$lib/images/gear.svg?component';
 </script>
 
 <svelte:head>
   <noscript><link rel="stylesheet" href={fonts} /></noscript>
+  <!-- See app.html -->
   <link rel="preload" as="style" href={fonts} id="font-preload" />
 </svelte:head>
 
 <slot />
 
 <footer>
   <div class="wall-top"></div>
-  <b>Revolution</b>
-  <ul>
-    <li><a href="https://hackclub.com/slack/">Talk to us on the Hack Club Slack</a></li>
-    <li><a href="https://github.com/Revolution-Hacks/revolution">View this page's source code</a></li>
-  </ul>
+  <div class="grid">
+    <DoubleArrow class="logo" />
+    <p class="header">Revolution</p>
+    <div class="content">
+      <ul>
+        <li><a href="https://hackclub.com/slack/">Hack Club Slack (talk to us!)</a></li>
+        <li><a href="https://github.com/Revolution-Hacks/revolution">Source code</a></li>
+        <li><a href="https://hcb.hackclub.com/revolution">Financials</a></li>
+      </ul>
+
+      <p>
+        Revolution is fiscally sponsored by The Hack Foundation (d.b.a Hack Club), a 501(c)(3) nonprofit (EIN:
+        81-2908499). Revolution is not an official Hack Club event. Use of Hack Club branding does not constitute an
+        endorsement, implied or otherwise, of Revolution by Hack Club.
+      </p>
+    </div>
+  </div>
   <Gear class="gear" />
 </footer>
 
@@ -35,6 +49,7 @@
     src: url('$lib/fonts/DMSans.text.woff2'), local('DM Sans');
   }
 
+  // Global variables
   :global(:root) {
     font-family: 'Revolution Sans ASCII', 'Revolution Sans', 'system-ui', 'sans-serif';
 
@@ -49,14 +64,6 @@
     color: rgb(var(--fg));
   }
 
-  :global(main) {
-    min-height: calc(100vh - 4em);
-
-    @include style.brick-texture(var(--overlay-brick));
-  }
-
-  /* Footer */
-
   @keyframes -global-rotate {
     from {
       transform: var(--transform) rotate(0turn);
@@ -71,16 +78,27 @@
     }
   }
 
+  // Main element brick texture
+  :global(main) {
+    min-height: calc(100vh - 4em);
+    overflow: clip;
+
+    @include style.brick-texture(var(--overlay-brick));
+  }
+
+  // Footer styles
   footer {
     position: relative;
     min-width: 100vw;
     min-height: 24em;
     padding: 4em 2em;
+    padding-bottom: 286px;
     overflow: clip;
     box-shadow: 0 -0.5em 1em rgba(0, 0, 0, 50%);
 
     @include style.brick-texture(var(--overlay-brick), var(--overlay-brick), var(--overlay-brick));
 
+    // Decorative elements
     :global(.gear) {
       position: absolute;
       right: 0;
@@ -112,10 +130,46 @@
     @media (min-width: style.$size_sm) {
       padding: 4em;
     }
-  }
 
-  /* Headers */
+    // Content
+    .grid {
+      display: grid;
+      max-width: 64em;
+      width: 50%;
+      grid-template-columns: min-content auto;
+      grid-template-rows: min-content min-content;
+      gap: 1em;
+
+      :global(.logo) {
+        grid-area: 1 / 1 / 1 / 1;
+        width: 3em;
+        height: 3em;
+        align-self: center;
+      }
+
+      .header {
+        font-weight: bold;
+        grid-area: 1 / 2 / 1 / 2;
+        font-size: 3em;
+        min-width: max-content;
+      }
 
+      .content {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5em;
+        grid-area: 2 / 1 / 2 / end;
+
+        ul {
+          margin: 0;
+          padding: 0;
+          list-style-type: none;
+        }
+      }
+    }
+  }
+
+  // Global header styles
   :global(h1, h2, h3, h4, h5, h6) {
     font-family: 'Revolution Sans Title', 'Revolution Sans ASCII', 'Revolution Sans', system-ui, sans-serif;
     font-weight: bolder;
@@ -174,8 +228,7 @@
     }
   }
 
-  /* Screw browser stylesheets */
-
+  // CSS reset
   :global(html, body) {
     padding: 0;
     margin: 0;