Clean up post and post list styles, Add source icons

includes/layouts/post.njk

@@ -4,6 +4,13 @@ layout: layouts/base.njk
 <h1>{{ title }}</h1>
 
 <p class="post-metadata">
+	{% if source %}
+		{% if sourceLogo %}
+			<img src="/assets/logos/{{ sourceLogo }}" alt="Logo für {{ source }}" />
+		{% endif %}
+		Ursprünglich erschienen:
+		<span>{{ source }}</span>,
+	{% endif %}
 	<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time>
 </p>
 

sites/angestoepselt/neuigkeiten/2017-04-12-computer-sind-mein-leben.md

@@ -1,14 +1,11 @@
 ---
-title: "Computer sind mein Leben"
+title: Computer sind mein Leben
 date: 2017-04-17
+source: Publik Forum
+sourceLogo: publik-forum.png
+url: https://www.publik-forum.de/Publik-Forum-09-2017/computer-sind-mein-leben
 blurb:
   'Der 17 Jahre alte Gymnasiast Moritz Beck macht alte
-  Rechner wieder fit für Menschen mit kleinem Geldbeutel'
+  Rechner wieder fit für Menschen mit kleinem Geldbeutel.'
 layout: post
 ---
-
-![Publik-Forum](/assets/logos/publik-forum.png)
-
-Eben kam eine große Computerspende rein, wohl aus einem Nachlass. Deshalb sieht es hier in unserem Arbeitsraum ein bisschen chaotisch aus. Wir nehmen bei angestöpselt alle Spenden – PCs und Laptops, Drucker, Tastaturen, Mäuse. Meist stammen sie von Privatleuten, hin und wieder auch von Firmen. Zunächst löschen wir die alten Daten komplett. Wir spielen ein neues Betriebssystem und die nötigen Programme auf und verteilen die PCs an Arbeitslose, Geflüchtete oder Rentner. Wer einen Computer braucht, lässt sich auf unsere Warteliste setzen. Rückt er oder sie auf Platz Nummer eins vor, gibt es den nächsten fertigen Computer. Geöffnet haben wir zwei Abende in der Woche...
-
-[Weiterlesen auf "Publik Forum"](https://www.publik-forum.de/Publik-Forum-09-2017/computer-sind-mein-leben){target="\_blank" rel="noopener noreferrer"}

sites/angestoepselt/neuigkeiten/2017-06-11-run-auf-angestoepselt.md

@@ -1,6 +1,8 @@
 ---
 title: "Run auf angestöpselt"
 date: 2017-04-17
+source: Main-Post
+sourceLogo: mainpost.gif
 blurb:
   'Großer Run auf die Ware von angestöpselt'
 layout: post
@@ -63,11 +65,4 @@ Fragt sich nur, ob es gelingt, günstige Räume in Würzburg zu finden.
 Wer das Team von angestöpselt kennen lernen möchte, hat dazu auf dem Umsonst & Draussen Festival vom 15. bis 18.
 Juni Gelegenheit
 
-
+> [Artikel als PDF herunterladen](/assets/magazine/run_auf_angestoepselt.pdf){target="\_blank"}
-Quelle: Main-Post
- 
-[Artikel auch als PDF Version verfügbar](/assets/magazine/run_auf_angestoepselt.pdf){target="\_blank"}
-
-![Main-Post](/assets/logos/mainpost.gif)
-
-

sites/angestoepselt/neuigkeiten/2017-06-22-suedwest-ansturm-alte-pcs.md

@@ -1,12 +1,11 @@
 ---
 title: Riesiger Ansturm auf alte PCs
 date: 2017-06-22
+source: Südwest-Presse
+sourceLogo: suedwest.png
+url: /assets/magazine/Artikel_Suedwest.pdf
 blurb:
   'Verein für Digitalkompetenz Würzburg: Lokale Firma übergab 
   200 Notebooks als Spende / Dankbare Abnehmer'
 layout: post
 ---
-
-![Südwest-Presse](/assets/logos/suedwest.png) 
-
-[Artikel PDF-Version](/assets/magazine/Artikel_Suedwest.pdf){target="\_blank"}

sites/angestoepselt/neuigkeiten/2017-12-18-studierende-foerdern-progammierer.md

@@ -1,12 +1,12 @@
 ---
 title: Studierende fördern junge Programmierer
 date: 2017-12-18
+source: Main-Post
+sourceLogo: mainpost.gif
 blurb:
   'Der Verein angestöpselt e.V. veranstaltet CoderDojos und fördert
   junger Programmierer'
 layout: post
 ---
 
-Der Beitrag in der Mainpost vom 18.12.2017
+![Beitrag in der Main-Post: 20 Master-Studierende boten an der Hochschule Würzburg-Schweinfurt ein sogennantes "CoderDojo" an, einen kostenlosen Programmier-Workshop für knapp 40 interessierte Kinder sowie begleitende Eltern. Die Studierenden der Fakultät Informatik und Wirtschaftsinformatik betreuten Kinder und Jugendliche im Alter von neun bis 17 Jahren und halfen ihnen bei verschiedenen Programmierprojekten – sie konnten sich in der Anfänger- oder Fortgeschrittenengruppe anschließen, sich der Java-Programmierung widmen, in der Kreativgruppe Webseiten designen, bei der Hardware-Bastelgruppe mitmachen – je nach Interessensgebiet und Kenntnissen. Den Teilnehmern wurde neben professioneller Hilfe und Unterstützung ihrer eigenen Ideen zwei Vorträge angeboten zu den Themen Eye-Tracking und IT-Security. Zum Abschluss der Veranstaltung konnten die Schülerinnen und Schüler ihre Projekte vorstellen und neue Ideen einbringen für den nächsten CoderDojo an der FHWS. Das Angebot der CoderDojos gibt es weltweit. Unterstützt werden sie global von der CoderDojo Foundation aus Irland, lokal vom Verein "angestöpselt e.V.".](/assets/magazine/MP-2017-12-18-Coder-Dojo.jpeg){target="\_blank" width=100%}
-
-![Beitrag in der Mainpost](/assets/magazine/MP-2017-12-18-Coder-Dojo.jpeg){target="\_blank" width=800px }

sites/angestoepselt/neuigkeiten/2018-07-10-tuefteln-und-dabei-gutes-tun.md

@@ -1,13 +1,11 @@
 ---
 title: "Tüfteln und dabei Gutes tun"
 date: 2017-07-10
+source: Main-Post
+sourceLogo: mainpost.gif
+url: https://www.mainpost.de/regional/wuerzburg/tuefteln-und-dabei-gutes-tun-art-10006292
 blurb:
   'Seit Februar hat der Verein angestöpselt in der Zeller Str. 29/31
   eine neue Heimat. Wir haben uns von 40qm auf 100qm verdoppelt.'
 layout: post
 ---
-
-[Artikel ist bei Main-Post erschienen](https://www.mainpost.de/regional/wuerzburg/tuefteln-und-dabei-gutes-tun-art-10006292){target="\_blank" rel="noopener noreferrer"}    
-
-![Main-Post](/assets/logos/mainpost.gif)
-

sites/angestoepselt/neuigkeiten/2020-03-01-greenpeace-magazin.md

@@ -1,6 +1,7 @@
 ---
 title: Wir sind „Wegweiser“ im Greenpeace Magazin
 date: 2020-03-01
+source: Greenpeace Magazin
 blurb:
   'Gestern noch Schrott, heute wieder flott'
 layout: post
@@ -10,8 +11,4 @@ Die Medien sind auf uns aufmerksame geworden und wollen einen Artikel in
 der Kategorie "Wegweiser" über uns veröffentlichen. Den kompletten Beitrag
 könnt Ihr auf der Homepage von Greenpeace nachlesen:
 
-"Wegweiser“ – März 2020"
+> [![Greenpeace Magazin](/assets/magazine/GP03-2020_Titel_RGB_96dpi.jpg)](https://www.greenpeace-magazin.de/wegweiser/matthias-hemmerich-lukas-seeber){target="\_blank" rel="noopener noreferrer"}
-
-![Greenpeace Magazin](/assets/magazine/GP03-2020_Titel_RGB_96dpi.jpg){ width=300px }
-
-[https://www.greenpeace-magazin.de](https://www.greenpeace-magazin.de/wegweiser/matthias-hemmerich-lukas-seeber){target="\_blank" rel="noopener noreferrer"}

sites/angestoepselt/neuigkeiten/2020-11-01-geo-magazin.md

@@ -1,6 +1,7 @@
 ---
-title: Geo Magazin berichtet über uns
+title: GEO Magazin berichtet über uns
 date: 2020-11-01
+source: GEO Magazin
 blurb:
   'Für den Verein »Angestöpselt« setzt eine Gruppe von Nerds 
   alte Computer wieder instand – und verschenkt sie an Arme'
@@ -11,6 +12,4 @@ Im Geo Magazin wird über unsere ehrenamtliche Tätigkeit berichtet.
 Den kompletten Beitrag kann man in der Ausgabe 11/2020 nachlesen:
 
 
-![GEO Magazin 2020/11](/assets/magazine/geo-11-2020-zukunft-cover.png){ width=300px }
+> [![GEO Magazin 2020/11](/assets/magazine/geo-11-2020-zukunft-cover.png)](https://www.geo.de/wissen/23500-rtkl-hobby-und-hilfsprogramm-wie-ein-verein-aus-nerds-beduerftigen-zu-computern){target="\_blank" rel="noopener noreferrer"}
-
-[www.geo.de](https://www.geo.de/wissen/23500-rtkl-hobby-und-hilfsprogramm-wie-ein-verein-aus-nerds-beduerftigen-zu-computern){target="\_blank" rel="noopener noreferrer"}

sites/angestoepselt/neuigkeiten/index.njk

@@ -8,18 +8,37 @@ eleventyNavigation:
 <h1>Unsere Pinnwand</h1>
 
 <p>
-  Hier findest du alles Aktuelle zu unserem Vereinsgeschehen. Du kannst uns natürlich auch gerne auf dem sozialen Netzwerk Mastodon folgen.
+  Hier findest du alles Aktuelle zu unserem Vereinsgeschehen.
+  Du kannst uns natürlich auch gerne auf dem sozialen Netzwerk Mastodon folgen.
 </p>
 
 <p>
   <a class="cta-link" href="https://social.tchncs.de/@angestoepselt" target="_blank" rel="noreferrer noopener me">Angestöpselt auf Mastodon</a>
 </p>
 
+<p>
+	Weiterhin haben wir hier auch eine paar ausgewählte Pressestimmen aus den vergangenen Jahren zusammengestellt.
+	Sie berichten ein wenig über unser Vereinsleben und unsere Aktionen.
+</p>
+
 <div class="post-list">
   {% for post in collections.posts | reverse %}
     <article>
-      <a class="post-card" href="{{ post.url }}">
+      <a
-        <h2>{{ post.data.title }}</h2>
+      	class="post-card {% if post.data.source %}external{% endif %}"
+      	{% if post.data.url %}
+      		href="{{ post.data.url }}"
+      		target="_blank" rel="noopener noreferrer"
+      	{% else %}
+      		href="{{ post.url }}"
+      	{% endif %}
+      >
+      	<h2>
+					{% if post.data.source and post.data.sourceLogo %}
+						<img src="/assets/logos/{{ post.data.sourceLogo }}" alt="Logo für {{ post.data.source }}" />
+					{% endif %}
+        	{{ post.data.title }}
+        </h2>
         <time datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
         <p>{{ post.data.blurb }}</p>
       </a>

styles/components/_markup.scss

@@ -125,6 +125,12 @@ blockquote {
 	$border: 0.5em solid $color;
 	border-top: $border;
 	border-bottom: $border;
+
+	> p:only-child > a:only-child > img:only-child {
+		display: block;
+		max-width: 30rem;
+		margin: 0 auto;
+	}
 }
 
 .cta-link {
@@ -207,6 +213,9 @@ ul.link-grid {
 }
 
 .post-list {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
 	@extend %content-gutter;
 	margin-top: layout.$huge-gap;
 	margin-bottom: layout.$huge-gap;
@@ -215,11 +224,14 @@ ul.link-grid {
 		display: grid;
 		grid-template-columns: 1fr 1fr;
 		gap: layout.$normal-gap;
+		justify-content: stretch;
 	}
 }
 
 :any-link.post-card {
-	display: inline-block;
+	display: block;
+	padding-top: layout.$normal-gap;
+	padding-bottom: layout.$normal-gap;
 	text-decoration: none;
 	transition: background-color motion.$subtle, color motion.$subtle,
 		box-shadow motion.$subtle;
@@ -239,6 +251,26 @@ ul.link-grid {
 		}
 	}
 
+	&.external {
+		color: colors.$brown-800;
+
+		> time {
+			color: colors.$brown-500;
+		}
+
+		&:hover {
+			background-color: colors.$teal-300;
+		}
+	}
+
+	> :first-child {
+		margin-top: 0;
+	}
+
+	> :last-child {
+		margin-top: 0;
+	}
+
 	> h2,
 	> p {
 		margin-left: 0;
@@ -252,6 +284,12 @@ ul.link-grid {
 			display: none;
 		}
 
+		> img {
+			display: inline-block;
+			max-width: 4em;
+			max-height: 1em;
+		}
+
 		+ time {
 			margin-top: -1 * layout.$normal-gap;
 		}
@@ -260,6 +298,10 @@ ul.link-grid {
 	> time {
 		display: block;
 		color: colors.$gray-600;
+
+		+ p {
+			margin-top: layout.$small-gap;
+		}
 	}
 }
 
@@ -270,4 +312,10 @@ ul.link-grid {
 	@include colors.coderdojo-theme {
 		color: colors.$brown-800;
 	}
+
+	> img {
+		display: block;
+		margin: 0 auto layout.$small-gap auto;
+		max-height: 6rem;
+	}
 }