new picture for GPN21, improve display of license/copyright info

public/index.html

@@ -86,10 +86,13 @@ <h2>Was wir tun</h2>
         <h2>Veranstaltungen & Projekte</h2>
         <div class="row">
           <figure class="column column-double">
-            <img src="res/img/projects/gpn.jpg" alt="Gulaschprogrammiernacht" class="aspect-ratio-32-to-9">
+            <img src="res/img/projects/gpn21.jpg" alt="Gulaschprogrammiernacht" class="aspect-ratio-32-to-9">
+            <span class="copyright-info"><a href="https://creativecommons.org/licenses/by/4.0/">CC-BY 4.0</a> <a href="https://fotos.cheatha.de/picture/2023_GPN21_230/category/147-gpn21">Florian Köhler</a></span>
             <figcaption>
               <h3><a href="https://entropia.de/GPN">Gulasch&shy;programmier&shy;nacht</a></h3>
-              <p>Dieser 4-tägige Kongress wird jedes Jahr vom Entropia&nbsp;e.V. veranstaltet. Hier schafft es ein Haufen Hacker, eine große Menge Gulasch zuzubereiten, um Gäste zu nähren, damit sie gestärkt zum nächsten Vortrag – über Programmierung oder Gesellschaft – oder zum Programmieren ins Hackcenter gehen können.</p>
+              <p>Dieser 4-tägige Kongress wird jedes Jahr vom Entropia&nbsp;e.V. veranstaltet.
+                Hier schafft es ein Haufen Hacker, eine große Menge Gulasch zuzubereiten, um Gäste zu nähren, damit sie gestärkt zum nächsten Vortrag
+                – über Programmierung oder Gesellschaft – oder zum Programmieren ins Hackcenter gehen können.</p>
             </figcaption>
           </figure>
           <figure class="column">
@@ -103,9 +106,10 @@ <h3>Glühweinprogrammiernacht</h3>
         <div class="row">
           <figure class="column">
             <img src="res/img/projects/camp2019.jpg" alt="Camp" class="aspect-ratio-16-to-9">
+            <span class="copyright-info"><a href="https://basto.digital/posts/events/chaos-communication-camp-2019/">Bildquelle</a></span>
             <figcaption>
               <h3>Campen</h3>
-              <p>Wir fahren zu vielen Campingveranstaltungen im Chaos-Umfeld und organisieren uns als Entropia-Village oder als große Assembly mit befreundeten Hackerspaces. <a href="https://basto.digital/posts/events/chaos-communication-camp-2019/">Bildquelle</a></p>
+              <p>Wir fahren zu vielen Campingveranstaltungen im Chaos-Umfeld und organisieren uns als Entropia-Village oder als große Assembly mit befreundeten Hackerspaces.</p>
             </figcaption>
           </figure>
           <figure class="column">

public/res/css/elements/images.css

@@ -9,10 +9,24 @@ figure img {
   object-position: center;
 }
 
-figure img + figcaption {
+figure figcaption {
   margin-top: .8rem;
 }
 
+.copyright-info {
+  float: right;
+  font-size: 12px;
+  left: -6px;
+  position: relative;
+  top: -20px;
+}
+
+.copyright-info > a {
+  color: var(--color-white);
+  opacity: 0.75;
+  text-decoration: none;
+}
+
 .aspect-ratio-4-to-3 {
   aspect-ratio: 4 / 3;
 }