Add newsroom styling

src/content/neuigkeiten/index.njk

@@ -1,13 +1,30 @@
 ---
 layout: layouts/page.njk
+eleventyNavigation:
+  key: Neuigkeiten
+  order: 70
 ---
 
-<ol reversed class="post-list">
-  {% for post in collections.posts | reverse %}
-    <li>
-      <a class="post-card" href="{{ post.url }}">
+<h1>Unsere Pinnwand</h1>
 
+<p>
+  Hier findest du alles aktuelle zu unserem Vereinsgeschehen.
+  Wir versuchen, hier regelmäßig über unsere Aktivitäten, durchgeführte Aktionen und über was wir sonst so treiben zu berichten.
+  Bei den üblichen sozialen Medien wirst du uns nicht finden, aber wir begrüßen dich gerne bei Mastodon:
+</p>
+
+<p>
+  <a class="cta-link" href="https://social.tchncs.de/@angestoepselt" target="_blank" rel="noreferrer noopener">Angestöpselt auf Mastodon</a>
+</p>
+
+<div class="post-list">
+  {% for post in collections.posts | reverse %}
+    <article>
+      <a class="post-card" href="{{ post.url }}">
+        <h2>{{ post.data.title }}</h2>
+        <time datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
+        <p>{{ post.data.blurb }}</p>
       </a>
-    </li>
+    </article>
   {% endfor %}
-</ol>
+</div>

src/styles/base.scss

@@ -1,3 +1,4 @@
+@use 'lib/colors';
 @use 'lib/typography';
 @use 'components/markup';
 @use 'components/site';

src/styles/components/_markup.scss

@@ -152,3 +152,43 @@ ul.link-grid {
 		}
 	}
 }
+
+.post-list {
+  @extend %content-gutter;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: layout.$normal-gap;
+  margin-top: layout.$huge-gap;
+  margin-bottom: layout.$huge-gap;
+}
+
+:any-link.post-card {
+  display: inline-block;
+  padding-left: layout.$normal-gap;
+  padding-right: layout.$normal-gap;
+  text-decoration: none;
+  transition: background-color motion.$subtle, color motion.$subtle, box-shadow motion.$subtle;
+
+  &:hover {
+    @include colors.card-shadow;
+    background-color: colors.$yellow-300;
+    color: colors.$blue-800;
+  }
+
+  > h2 {
+    @extend %subheading;
+
+    &::after {
+      display: none;
+    }
+
+    + time {
+      margin-top: -1 * layout.$normal-gap;
+    }
+  }
+
+  > time {
+    display: block;
+    color: colors.$gray-600;
+  }
+}

src/styles/lib/_colors.scss

@@ -14,6 +14,7 @@ $blue-500: #08b2e3;
 
 $yellow-600: #e8d823;
 $yellow-500: #ffff00;
+$yellow-300: #ffffa4;
 
 $main-text: $gray-800;
 $main-background: $gray-50;