menu: rename Logbuch -> Blog to fit all viewports

This is necessary to pin the resolved dependencies.

.gitignore

@@ -1,7 +1,6 @@
 .idea/*
 _site/
 .sass-cache/
-Gemfile.lock
 
 .DS_Store
 vendor/*

Gemfile

@@ -1,5 +1,5 @@
 source 'https://rubygems.org'
 
-gem 'jekyll', '~>3.8.4'
+gem 'jekyll', '~>4.3.4'
 gem 'jekyll-paginate'
 gem 'rexml'

Gemfile.lock

@@ -0,0 +1,75 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.8.7)
+      public_suffix (>= 2.0.2, < 7.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.3.4)
+    em-websocket (0.5.3)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0)
+    eventmachine (1.2.7)
+    ffi (1.17.0)
+    forwardable-extended (2.6.0)
+    google-protobuf (3.25.5-x86_64-linux)
+    http_parser.rb (0.8.0)
+    i18n (1.14.6)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.3.4)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 1.0)
+      jekyll-sass-converter (>= 2.0, < 4.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 2.3, >= 2.3.1)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (>= 0.3.6, < 0.5)
+      pathutil (~> 0.9)
+      rouge (>= 3.0, < 5.0)
+      safe_yaml (~> 1.0)
+      terminal-table (>= 1.8, < 4.0)
+      webrick (~> 1.7)
+    jekyll-paginate (1.1.0)
+    jekyll-sass-converter (3.0.0)
+      sass-embedded (~> 1.54)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (2.5.1)
+      rexml (>= 3.3.9)
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.4)
+    listen (3.9.0)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.4.0)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (6.0.1)
+    rake (13.2.1)
+    rb-fsevent (0.11.2)
+    rb-inotify (0.11.1)
+      ffi (~> 1.0)
+    rexml (3.3.9)
+    rouge (4.5.1)
+    safe_yaml (1.0.5)
+    sass-embedded (1.69.5)
+      google-protobuf (~> 3.23)
+      rake (>= 13.0.0)
+    terminal-table (3.0.2)
+      unicode-display_width (>= 1.1.1, < 3)
+    unicode-display_width (2.6.0)
+    webrick (1.9.1)
+
+PLATFORMS
+  x86_64-linux
+
+DEPENDENCIES
+  jekyll (~> 4.3.4)
+  jekyll-paginate
+  rexml
+
+BUNDLED WITH
+   2.3.5

README.md

@@ -1,32 +1,48 @@
 # 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.
 
-<pre><code>---
-rbenv install 2.7.0
-rbenv local 2.7.0
-bundle install --path=vendor/cache
----</code></pre>
+Unter Debian, Ubuntu etc systemweit installieren:
+
+```
+apt install ruby3.0 ruby3.0-dev bundler
+```
+
+Dann die Gems lokal:
+
+```
+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
 
-Blogeinträge werden in dem Verzeichnis „\_posts“ abgelegt. Um einen Blogeintrag zu verfassen legt man eine Datei mit dem Schema „Jahr-MM-TT-Titel.markdown“ an. Der Blogeintrag beginnt mit folgenden Metadaten:
-<pre><code>---
+Blogeinträge werden in dem Verzeichnis `_posts` abgelegt.
+Um einen Blogeintrag zu verfassen legt man eine Datei mit dem Schema `Jahr-MM-TT-Titel.markdown` an.
+Der Blogeintrag beginnt mit folgenden Metadaten:
+
+```
 layout: post
 title: "Neues Update für DocPatch"
 date: 2015-05-23 13:37:00
 categories: docpatch
----</code></pre>
+```
+
 Damit wird der Titel des Blogeintrags, das Datum der Veröffentlichung und die Kategorie (optional) festgelegt.
 
 #### Troobleshooting fürs NOC
@@ -35,29 +51,37 @@ Sollte der Blogeintrag nicht in den nächsten Minuten auf der Webseite erscheine
 
 ### Bilder
 
-Bilder für Blogeinträge werden unterhalb von Media in einem eigenen Verzeichnis (Jahr-MM-TT) abgelegt.
-
-<pre><code>~/site/media/jahr-mm-tt
-</code></pre>
+Bilder für Blogeinträge werden unterhalb von Media in einem eigenen Verzeichnis (Jahr-MM-TT) abgelegt: `~/site/media/jahr-mm-tt`
 
 Als erstes sollte man die Exif-Daten (z.B. Geoinformation) der Bilder entfernen. Dabei wird auch die „Rotation“ des Bildes entfernt.
-<pre><code>exiftool -all= $Bild
-</code></pre>
+
+```sh
+exiftool -all= $Bild
+```
 
 Ggf. muss das Bild gedreht werden, wenn es ohne die Metatags auf dem Kopf steht oder auf der Seite liegt.
-<pre><code>convert -rotate 90 $Bild $Bild_out.jpg</code></pre>
+
+```sh
+convert -rotate 90 $Bild $Bild_out.jpg
+```
 
 Der vorletzte Schritt setzt die Bilder auf eine einheitliche Breite.
-<pre><code>mogrify -resize "1140>" $Bild
-</code></pre>
+
+```sh
+mogrify -resize "1140>" $Bild
+```
 
 Viele Bilder können noch optimiert werden, damit der benötige Speicherplatz und die zu übertragende Datenmenge reduziert wird.
-<pre><code>jpegoptim -m 80 %Bild.jpg</code></pre>
 
-Wenn das Bild in der korrekten Größe und Ausrichtung vorliegt, kann es wie Folgt eingebunden werden.
-<pre><code>![Quelle: Chaospott]({{ site.url }}/media/Jahr-MM-TT/$Bild.jpg)
-</code></pre>
+```sh
+jpegoptim -m 80 %Bild.jpg
+```
 
+Wenn das Bild in der korrekten Größe und Ausrichtung vorliegt, kann es wie folgt eingebunden werden:
+
+```
+![Quelle: Chaospott]({{ site.url }}/media/Jahr-MM-TT/$Bild.jpg)
+```
 
 ### Web Key Directory (GPG/PGP-Keys zur Suche ablegen)
 
@@ -66,7 +90,7 @@ Um, neben [keys.openpgp.org](https://keys.openpgp.org/), den eigenen Chaospott-G
 
 1. Clone das Repo.
 
-2. Im Repo geh in den Ordner `.well-known/openpgpkey/hu`. 
+2. Im Repo geh in den Ordner `.well-known/openpgpkey/hu`.
 
 3. Folgendes Skript exportiert deinen öffentlichen Schlüssel in eine Datei, die den Namen deines WKD-Hashes trägt. Dieses wird zur Suche nach deinem GPG-Key benutzt.
 

_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;
   }