Schönere Projekte-Seite

projects/projects.md

@@ -3,45 +3,80 @@ layout: post
 title: Projekte
 ---
 
+<style>
+.project {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 2em;
+}
+.img {
+    min-width: 200px;
+    max-width: 200px;
+}
+img {
+    object-fit: contain;
+}
+.info {
+    margin-left: 1em;
+    margin-top: 1ex;
+    margin-bottom: auto;
+    text-align: left;
+}
+@media (max-width: 767px) {
+    .project {
+        flex-direction: column;
+        align-items: start;
+    }
+    .img {
+        width: 100%;
+        max-width: 100%;
+        min-width: unset;
+    }
+    .info {
+        margin-left: unset;
+    }
+}
+</style>
+
 Hier dokumentieren wir einige unserer Projekte ausführlicher.
 
-<img alt="Der Lorenz-Attraktor auf dem Oszilloskop-Bildschirm" src="/media/projects/analog-lorenz/analog-lorenz_display.jpg" height=150px style="margin-left: 0"/>
+<div class="project">
-### [Der analoge Lorenz-Attraktor](analog-lorenz/analog-lorenz.html)  
+<div class="img"><img alt="Der Lorenz-Attraktor auf dem Oszilloskop-Bildschirm" src="/media/projects/analog-lorenz/analog-lorenz_display.jpg"/></div>
-Eine Analogschaltung, die den Lorenz-Attraktor auf einem Analog-Oszilloskop darstellen kann.
+<div class="info">
+<a href="analog-lorenz/analog-lorenz.html"><h2>Der analoge Lorenz-Attraktor</h2></a>
+<p>Eine Analogschaltung, die den Lorenz-Attraktor auf einem Analog-Oszilloskop darstellen kann.</p>
+</div>
+</div>
 
----
+<div class="project">
+<div class="img"><img src="https://wiki.chaospott.de/_media/projekte:glados:gla_dos_light_blue.png?w=400&tok=59f2fc"></div>
+<div class="info">
+<a href="https://wiki.chaospott.de/projekte:glados:start"><h2>GLaDOS Ceiling Lamp</h2></a>
+<p>Eine GLaDOS-Deckenlampe basierend auf Portal 2 leuchtet und bewegt sich unter der Decke.</p>
+</div>
+</div>
 
-### Weitere Projekte finden sich [in unserem Wiki](https://wiki.chaospott.de/projekte:start), z.B.:
+<div class="project">
+<div class="img"><img src="https://wiki.chaospott.de/_media/projekte:foodoor:foodoor_v1_carambola.jpg?w=400&tok=39d31a"></div>
+<div class="info">
+<a href="https://wiki.chaospott.de/projekte:foodoor:start"><h2>foodoor</h2></a>
+<p>Ein klassisches Schließsystem mit physischen Schlüsseln passt nicht zu unserem Vereinsalltag. Ein Türöffner per SSH.</p>
+</div>
+</div>
 
-- [AiCore -- StewartPlatform](https://wiki.chaospott.de/projekte:ai_core-stewart_platform:start)
+<div class="project">
-  <img src="https://wiki.chaospott.de/_media/projekte:ai_core-stewart_platform:hexapod_general_anim.gif" height=150px style="margin-left: 0">
+<div class="img"><img src="https://wiki.chaospott.de/_media/projekte:buegelperlen:buegelperlen.jpg"></div>
-- [Alarmanlage](https://wiki.chaospott.de/projekte:alarmanlage:start)
+<div class="info">
-  <img src="https://wiki.chaospott.de/_media/projekte:alarmanlage:luesterklemmenalarmanlage.jpg" height=150px style="margin-left: 0">
+<a href="https://wiki.chaospott.de/projekte:buegelperlen:start"><h2>Bügelperlen</h2></a>
-- [BällebadBällePixelDisplay](https://wiki.chaospott.de/projekte:baellebadbaellepixeldisplay:start)
+<p>Bügelperlen und Bügelpresse für kreative Pixelkunst.</p>
-  <img src="https://wiki.chaospott.de/_media/projekte:baellebadbaellepixeldisplay:baellebadbaellepixeldisplay.jpg?w=400&tok=151a9c" height=150px style="margin-left: 0">
+</div>
-- [Bügelperlen](https://wiki.chaospott.de/projekte:buegelperlen:start)
+</div>
-  <img src="https://wiki.chaospott.de/_media/projekte:buegelperlen:buegelperlen.jpg" height=150px style="margin-left: 0">
+
-- [Ceiling Pixel Lamp](https://wiki.chaospott.de/projekte:ceilingpixellamp:start)
+<div class="project">
-- [Der Tanzhut](https://wiki.chaospott.de/projekte:tanzhut:start)
+<div class="img"><img src="https://wiki.chaospott.de/_media/projekte:hackersofa:hackersofa.jpg?w=400&tok=459154"></div>
-- [Docpatch](https://wiki.chaospott.de/projekte:doc_patch:start)
+<div class="info">
-- [foodoor](https://wiki.chaospott.de/projekte:foodoor:start)
+<a href="https://wiki.chaospott.de/projekte:hackersofa:start"><h2>Das Hackersofa</h2></a>
-  <img src="https://wiki.chaospott.de/_media/projekte:foodoor:foodoor_v1_carambola.jpg?w=400&tok=39d31a" height=150px style="margin-left: 0">
+<p>RJ-45 und Schuko zum gemütlichen Hacken.</p>
-- [Foomood](https://wiki.chaospott.de/projekte:foomood:start)
+</div>
-  <img src="https://wiki.chaospott.de/_media/projekte:foomood:foomood_300.png?w=400&tok=f35695" height=150px style="margin-left: 0">
+</div>
-- [Geocache](https://wiki.chaospott.de/projekte:geocache:start)
-  <img src="https://wiki.chaospott.de/_media/projekte:geocache:opencaching_logo.png?w=400&tok=172183" height=150px style="margin-left: 0">
-- [GLaDOS Ceiling Lamp](https://wiki.chaospott.de/projekte:glados:start)
-  <img src="https://wiki.chaospott.de/_media/projekte:glados:gla_dos_light_blue.png?w=400&tok=59f2fc" height=150px style="margin-left: 0">
-- [Hackersofa](https://wiki.chaospott.de/projekte:hackersofa:start)
-  <img src="https://wiki.chaospott.de/_media/projekte:hackersofa:hackersofa.jpg?w=400&tok=459154" height=150px style="margin-left: 0">
-- [Infoscreen](https://wiki.chaospott.de/projekte:infoscreen:start)
-- [IRemotePI](https://wiki.chaospott.de/projekte:iremotepi:start)
-- [KFZ-Zusatzinstrumente](https://wiki.chaospott.de/projekte:kfzzusatzinstrumente:start)
-  <img src="https://wiki.chaospott.de/_media/projekte:kfzzusatzinstrumente:zusatzinstrumente3.jpg?w=400&tok=c872dd" height=150px style="margin-left: 0">
-- [Klodisplay](https://wiki.chaospott.de/projekte:klodisplay:start)
-  <img src="https://wiki.chaospott.de/_media/projekte:klodisplay:wcba_schaltplan_v2.png?w=400&tok=c6be43" height=150px style="margin-left: 0">
-- [pam_panic](https://wiki.chaospott.de/projekte:pam_panic:start)
-- [SDR Web-based Shared Access Receiver (RX)](https://wiki.chaospott.de/projekte:sdr_rx:start)
-  <img src="https://wiki.chaospott.de/_media/projekte:sdr_rx:20250315_175800.jpg?w=400&tok=145bb8" height=150px style="margin-left: 0">
-- [Slusheis-Maschine](https://wiki.chaospott.de/projekte:slush:start)
-  <img src="https://wiki.chaospott.de/_media/projekte:slush:img_20190223_173929.jpg?w=400&tok=5af803" height=150px style="margin-left: 0">