Add initial blog

src/content/neuigkeiten/2021-10-20-neue-homepage.md

@@ -0,0 +1,24 @@
+---
+title: Ein neuer Anstrich
+date: 2021-01-01
+blurb: Angestöpselt bekommt ein neues Auftreten: frisches Logo, erneuerte Homepage und einfachere Kontaktmöglichkeiten!
+layout: post
+---
+# Ein neuer Anstrich
+
+Lange hat's gedauert – jetzt endlich freuen wir uns, unser neues
+Vereins-"Branding" präsentieren zu können. Das zu gehört:
+
+- Ein eigens entworfenes Logo samt Schriftzug
+- Diese neue Homepage
+- Diverse Flyer
+- Marketing-Kram wie Tassen
+
+Zum einen möchten mir damit unserem Verein ein neues, modernes Auftreten
+verpassen. Im Hintergrund sind auch ein paar technische Veränderungen passiert,
+die letztendlich darauf hinauslaufen, dass wir in Zukunft Anfragen besser
+sammeln, strukturieren und abarbeiten können. Gleichzeitig wollen wir es allen
+BesucherInnen möglichst einfach machen, mit uns in Kontakt zu treten. Das baut
+Hürden ab und dient letztendlich auch dazu, mehr Menschen mit unseren Projekten
+zu versorgen. Wir sind überzeugt davon, dass das eine gute Sache ist und freuen
+uns auf Rückmeldungen!

src/content/neuigkeiten/firstpost.md

@@ -1,6 +0,0 @@
----
-title: Erster Post
-date: 2021-01-01
-layout: post
----
-Das ist ein erster Post. Es kommen noch viele mehr.

src/content/neuigkeiten/index.njk

@@ -0,0 +1,13 @@
+---
+layout: layouts/page.njk
+---
+
+<ol reversed class="post-list">
+  {% for post in collections.post | reverse %}
+    <li>
+      <a class="post-card" href="{{ post.url }}">
+
+      </a>
+    </li>
+  {% endfor %}
+</ol>

src/styles/components/_markup.scss

@@ -1,5 +1,6 @@
 @use '../lib/colors';
 @use '../lib/layout';
+@use '../lib/motion';
 @use '../lib/typography';
 
 body {
@@ -77,6 +78,7 @@ dd {
 :any-link,
 a[href] {
   color: colors.$main-text;
+  transition: color motion.$subtle;
 
   &:hover {
     color: colors.$blue-800;
@@ -92,8 +94,11 @@ a[href] {
   text-decoration: none;
   line-height: 3rem;
   border: 1px solid colors.$main-text;
+  transition: font motion.$subtle, border-color motion.$subtle, color motion.$subtle;
 
   &:hover {
     border-color: colors.$blue-800;
+    font-weight: typography.$emphasized-weight;
+    font-size: 110%;
   }
 }