menu: rename Logbuch -> Blog to fit all viewports

README.md

@@ -1,22 +1,33 @@
 # site
 
-Die Chaospott Seite / Der Blog
-
-Zu finden auf [chaospott.de](https://chaospott.de)
-
-jekyll + bootstrap
+Die Chaospott Seite mit Blog, zu finden auf
+[chaospott.de](https://chaospott.de), ist mit Jekyll und Bootstrap gemacht.
 
 ## Initialisierung
 
-Für die Seite benötigt ihr Ruby 2.7.0
+Für die Seite benötigt ihr Ruby 3 inkl. Headern und Bundler.
+
+Unter Debian, Ubuntu etc systemweit installieren:
+
+```
+apt install ruby3.0 ruby3.0-dev bundler
+```
+
+Dann die Gems lokal:
 
 ```
-rbenv install 2.7.0
-rbenv local 2.7.0
 bundle config set --local path 'vendor/cache'
 bundle install
 ```
 
+## Lokale Entwicklung
+
+Um die lokale Installation von Jekyll zu nutzen:
+
+```sh
+bundle exec jekyll serve
+```
+
 ## Blogeinträge
 
 ### Text
@@ -44,25 +55,25 @@ Bilder für Blogeinträge werden unterhalb von Media in einem eigenen Verzeichni
 
 Als erstes sollte man die Exif-Daten (z.B. Geoinformation) der Bilder entfernen. Dabei wird auch die „Rotation“ des Bildes entfernt.
 
-```
+```sh
 exiftool -all= $Bild
 ```
 
 Ggf. muss das Bild gedreht werden, wenn es ohne die Metatags auf dem Kopf steht oder auf der Seite liegt.
 
-```
+```sh
 convert -rotate 90 $Bild $Bild_out.jpg
 ```
 
 Der vorletzte Schritt setzt die Bilder auf eine einheitliche Breite.
 
-```
+```sh
 mogrify -resize "1140>" $Bild
 ```
 
 Viele Bilder können noch optimiert werden, damit der benötige Speicherplatz und die zu übertragende Datenmenge reduziert wird.
 
-```
+```sh
 jpegoptim -m 80 %Bild.jpg
 ```
 

_includes/header.html

@@ -15,7 +15,7 @@
             <ul class="nav navbar-nav">
                 <li><a href="/">Home</a></li>
                 <li class="divider-vertical"></li>
-                <li><a href="/blog/">Logbuch</a></li>
+                <li><a href="/blog/">Blog</a></li>
                 <li class="divider-vertical"></li>
                 <li><a href="/about.html">&Uuml;ber uns</a></li>
                 <!-- <li class="divider-vertical"></li>

_posts/2024-12-11-workshop-huttrop.markdown

@@ -0,0 +1,15 @@
+---
+layout: post
+title: "Kreatives Werken mit LEDs"
+date: 2024-12-11 19:38:23
+categories: cms
+---
+
+Am vergangenen Mittwoch wurde die Stadtteilbibliothek Essen zum Schauplatz für Technikbegeisterte: Sechs Jugendliche trafen sich, um in einem Lötworkshop ihr Geschick unter Beweis zu stellen. Unter Anleitung entstanden funkelnde LED-Sterne, die ihr Licht in der kommenden Weihnachtszeit auf der Fensterbank verbreiten.
+
+![Quelle: Chaospott]({{ site.url }}/media/2024-12-11/workshop-huttrop.jpg)
+*Lötworkshop in Huttrop [Chaospott](https://chaospott.de) [CC-BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/)*
+
+In etwa einer Stunde verwandelten die Teilnehmenden einfache Bauteile in leuchtende Kunstwerke. Dabei wurde konzentriert gearbeitet, gelötet und gebohrt. Die Freude am Werken war nicht zu übersehen.
+
+Wir freuen uns schon jetzt auf den nächsten Workshop, der zu Beginn des nächsten Jahres stattfinden wird. Wer Lust auf Technik, Kreativität und jede Menge Spaß hat, sollte unbedingt dabei sein!

_sass/_chaospott.scss

@@ -50,6 +50,19 @@ body {
     max-height: 600px;
 }
 
+ul.navbar-right {
+  display: flex;
+}
+
+ul.navbar-right li {
+  flex: 1;
+  white-space: nowrap;
+}
+
+ul.navbar-right li#spacer {
+  flex: 0;
+}
+
 ul.navbar-nav li a {
   color: $nav-link-color !important;
 }
@@ -129,22 +142,29 @@ ul.nav>li>a {
   border-left-color: #111111;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 1023px) {
   #large-header {
     display: none;
   }
+  nav .container {
+    width: 100%;
+    margin: 0;
+  }
   .navbar-header {
-    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
+    float: unset !important;
   }
   .navbar-brand {
     display: block;
   }
-  .navbar-collapse .nav>.divider-vertical {
-    display: none;
+  .navbar-collapse.collapse {
+    display: none !important;
+  }
+  button.navbar-toggle {
+    display: block;
   }
 }
 
-@media (min-width: 768px) {
+@media (min-width: 1024px) {
   .navbar-brand {
     display: none;
   }