Add boxes component

index.md

@@ -1,13 +1,29 @@
 ---
 layout: layouts/home.njk
-eleventyNavigation:
-  key: Startseite
-  order: 1
 ---
 {% banner "Angestöpselt", "images/home-banner.jpg", "Kinder und Jugendliche verfolgen der Präsentation eines 3D-Druckers" %}
 Wir bieten Bedürftigen Zugang in die digitale Welt
 {% endbanner %}
 
+<section class="page-actions">
+  <div>
+    <h2>Wie du mitmachen kannst</h2>
+    <p>Wenn du Lust hast unseren Verein zu unterstützen, dann komm' vorbei und bastel mit! Oder spende Geld, mit dem wir unsere anfallenden Kosten bezahlen!</p>
+  </div>
+  <a href="/computer-beantragen" class="first">
+    <h3>Computer bekommen</h3>
+  </a>
+  <a href="/hardware-spenden">
+    <h3>Computer spenden</h3>
+  </a>
+  <a href="/mitmachen">
+    <h3>Zeit spenden</h3>
+  </a>
+  <a href="#">
+    <h3>Geld spenden</h3>
+  </a>
+</section>
+
 {% section %}
 
 ## Projekte

styles/components/_boxes.scss

@@ -1,56 +0,0 @@
-@use '../colors';
-@use '../layout';
-
-.boxes-module {
-  padding: layout.$large-gap;
-  background-color: colors.$teal-300;
-
-  .content,
-  .box {
-    &:not(:last-child) {
-      margin-bottom: layout.$large-gap;
-    }
-  }
-
-  .content {
-    > *:first-child {
-      margin-top: 0;
-    }
-
-    > *:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .box {
-    margin: layout.$large-gap 0;
-    padding: layout.$large-gap;
-    background: colors.$gray-50;
-    @include colors.card-shadow;
-
-    h3 {
-      margin: 0;
-      text-transform: uppercase;
-    }
-  }
-
-  @media screen and (min-width: layout.$breakpoint) {
-    display: grid;
-    grid-template-columns: repeat(6, 1fr);
-    gap: layout.$large-gap;
-
-    .content,
-    .box {
-      grid-column: span 3;
-      margin: 0;
-
-      &:not(:last-child) {
-        margin-bottom: 0;
-      }
-    }
-
-    .box:not(.first) {
-      grid-column: span 2;
-    }
-  }
-}

styles/components/_page.scss

@@ -76,3 +76,65 @@
     }
   }
 }
+
+// Actions are another module that is present on the home page. It shows a small
+// number of CTA-style buttons which lead to different parts of the site.
+.page-actions {
+  padding: layout.$large-gap;
+  background-color: colors.$teal-300;
+
+  > *:not(:last-child) {
+    margin-bottom: layout.$large-gap;
+  }
+
+  > div {
+    > *:first-child {
+      margin-top: 0;
+    }
+
+    > *:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  > a {
+    margin: layout.$large-gap 0;
+    padding: layout.$large-gap;
+    background: colors.$gray-50;
+    color: inherit;
+    text-decoration: none;
+    @include colors.card-shadow;
+
+    > h3 {
+      margin: 0;
+      text-transform: uppercase;
+    }
+  }
+
+  @media screen and (min-width: layout.$breakpoint) {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: layout.$large-gap;
+    align-items: stretch;
+
+    > * {
+      grid-column: span 3;
+
+      &:not(:last-child) {
+        margin-bottom: 0;
+      }
+    }
+
+    > a {
+      margin: 0;
+
+      &.first {
+        transform: translateY(#{-1 * layout.$huge-gap});
+      }
+
+      &:not(.first) {
+        grid-column: span 2;
+      }
+    }
+  }
+}

styles/main.scss

@@ -2,6 +2,5 @@
 @use 'base';
 @use 'components/site';
 @use 'components/page';
-@use 'components/boxes';
 @use 'components/tabs';
 @use 'components/forms';