lots of css and content

Author: opatut

assets/js/obs.js

@@ -62,3 +62,18 @@ function initSliders() {
   }
 }
 document.addEventListener('DOMContentLoaded', initSliders)
+
+//////////////////////////////////////////////
+
+function initTocHide() {
+  // Fix to hide TOC menu when clicking a link inside -- not easy with native HTML
+  // without making an ugly DOM.
+
+  const main = document.getElementById('mobile-menu-main')
+  for (const item of Array.from(document.querySelectorAll('aside.toc a'))) {
+    item.addEventListener('click', () => {
+      main.checked = true
+    })
+  }
+}
+document.addEventListener('DOMContentLoaded', initTocHide)

assets/scss/dark.scss

@@ -0,0 +1,20 @@
+// Dark mode, as detected by the media query
+
+:root {
+  --border-color: rgba(0, 0, 0, 0.1);
+  --background: #FFFFFF;
+  --foreground: #101010;
+  --background-1: #f1f1f6;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --border-color: rgba(255, 255, 255, 0.2);
+    --background: #101010;
+    --background-1: #303030;
+    --foreground: #FFFFFF;
+    color-scheme: dark;
+    color: var(--foreground);
+    background: var(--background);
+  }
+}

assets/scss/features.scss

@@ -24,6 +24,12 @@
   flex-direction: column;
   position: relative;
 
+  @media ($media-mobile) {
+    & + & {
+      margin-block-start: 2rem;
+    }
+  }
+
   .button {
     margin-top: auto;
     align-self: flex-start;
@@ -33,7 +39,7 @@
     margin-block: 0;
   }
 
-  .inline-svg {
+  > .inline-svg {
     position: absolute;
     left: 50%;
     top: 50%;
@@ -85,6 +91,9 @@
   display: flex;
   gap: 1em;
   margin-block-start: 2rem;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
 }
 
 
@@ -258,7 +267,7 @@
     animation-range: exit -60px;
   }
 
-  height: 50vh;
+  height: 66vh;
   position: relative;
   margin: 0;
 
@@ -268,18 +277,24 @@
   justify-content: center;
   color: white;
   gap: 1em;
+  text-align: center;
+  padding-inline: 1rem;
 
   > h2 {
-    font-size: #{"min(4.5vw, 4rem)"};
+    font-size: #{"min(max(1.5rem, 4.5vw), 4rem)"};
     font-weight: 300;
     margin: 0;
     text-shadow: 0 0 10px black;
+
+    @media ($media-mobile) {
+      font-weight: 500;
+    }
   }
 
   > p {
+    font-size: #{"min(max(1rem, 1.5vw), 1.5rem)"};
     font-weight: 500;
     margin: 0;
-    font-size: 1.2rem;
     text-shadow: 0 0 5px black;
   }
 
@@ -290,7 +305,7 @@
     left: 0;
     top: 0;
     z-index: 100;
-    width: 25ch;
+    width: #{"min(50vw, 25ch)"};
     padding: 0;
     transform-origin: 33% 33%;
     transition: all 0.5s;

assets/scss/layout.scss

@@ -1,3 +1,4 @@
+
 #header {
   background: $primary;
   color: white;
@@ -213,10 +214,6 @@ footer {
   }
 }
 
-#mobile-sidebar-toggle {
-  display: none;
-}
-
 @media ($media-mobile) {
   #header {
     position: relative;
@@ -252,56 +249,23 @@ footer {
   }
 
   .docs {
+    aside.toc,
     aside.sidebar {
-      transition: all 0.5s;
       overflow: auto;
       position: absolute;
       width: 100%;
-      background: white;
+      background: var(--background);
       display: none;
+      z-index: 1;
 
       height: #{"calc(100vh - 100px)"};
       box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.1);
-      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-    }
-
-    aside.toc {
-      padding: 1rem;
-      h6 {
-        margin: 0;
-      }
+      border-bottom: 1px solid $border-color;
     }
 
     > main {
       padding: 1rem;
     }
-
-    .mobile-sidebar-toggle-label {
-      background: $gray-light;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-      padding: 0 1rem;
-      height: 40px;
-      display: flex;
-      align-items: center;
-
-      .inline-svg {
-        margin-right: 0.5rem;
-        height: 24px;
-      }
-
-      > :last-child { display: none; }
-    }
-
-    #mobile-sidebar-toggle:checked ~ {
-      .mobile-sidebar-toggle-label {
-        > :last-child { display: initial; }
-        > :first-child { display: none; }
-      }
-
-      aside.sidebar {
-        display: block;
-      }
-    }
   }
 
   ul.blog-posts {
@@ -310,10 +274,6 @@ footer {
 }
 
 @media ($media-desktop) {
-  .mobile-sidebar-toggle-label {
-    display: none;
-  }
-
   .docs {
     display: grid;
     grid-column: full-width;
@@ -363,3 +323,59 @@ section.primary-1 {
 .content-grid > section.narrow {
     grid-column: col-start 3 / col-end 10;
 }
+
+// Sidebar and TOC on mobile
+
+input[name='mobile-menu'] {
+  display: none;
+}
+
+.mobile-menu-toggles-row {
+  display: none;
+}
+
+@media ($media-mobile) {
+  .mobile-menu-toggles-row {
+    background: var(--background-1);
+
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 0 1rem;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+
+    .inline-svg { height: 16px; }
+    label {
+      flex: 1 1 auto;
+      white-space: nowrap;
+      overflow: hidden;
+      flex-shrink: 1;
+      text-overflow: ellipsis;
+      &[class^="toc-"] {
+        direction: rtl;
+        text-align: right;
+
+        .docs:not(:has(aside.toc)) & {
+          display: none;
+        }
+      }
+    }
+
+    .sidebar-show { display: none; }
+    .toc-show { display: none; }
+  }
+
+  #mobile-menu-sidebar:checked ~ {
+    .mobile-menu-toggles-row .sidebar-show { display: block; }
+    .mobile-menu-toggles-row .sidebar-hide { display: none; }
+    aside.sidebar { display: block; }
+  }
+
+  #mobile-menu-toc:checked ~ {
+    .mobile-menu-toggles-row .toc-show { display: block; }
+    .mobile-menu-toggles-row .toc-hide { display: none; }
+    aside.toc { display: block; }
+  }
+}

assets/scss/main.scss

@@ -2,4 +2,5 @@
 @import "baseline.scss";
 @import "layout.scss";
 @import "features.scss";
+@import "dark.scss";
 @import "print.scss";

assets/scss/variables.scss

@@ -1,6 +1,5 @@
-$gray-light: #f1f1f6;
 $gray-dark: #222222;
-$border-color: rgba(0, 0, 0, 0.1);
+$border-color: var(--border-color);
 
 // $hue: 275deg; // lila
 $hue: 197deg; // türkis

content/_index.de.html

@@ -16,8 +16,8 @@
 <section class="stage full-width">
   <a class="banderole" href="blog/2024/02/01/nachruf/"><img  src="natenom_banderole.png"/></a>
 
-	<p>Der OpenBikeSensor ist ein offenes System für die</p>
-	<h2>Überholabstandsmessung am Fahrrad</h2>
+	<p>Der&nbsp;OpenBikeSensor ist&nbsp;ein offenes System&nbsp;für&nbsp;die</p>
+	<h2>Überholabstands&shy;messung am&nbsp;Fahrrad</h2>
 
   <div class="action-buttons">
     <a class="button" href="https://forum.openbikesensor.org" target="_blank" rel="noopener noreferrer nofollow">
@@ -38,11 +38,53 @@ <h2>Überholabstandsmessung am Fahrrad</h2>
   </div>
 </section>
 
-<section class="columns-3 primary full-width content-grid">
-  {{% blocks/feature icon="discourse" title="Fragen und Diskutieren" url="https://forum.openbikesensor.org" url_text="Zum Forum" %}}
-  Komm in unser Discourse-Forum, und diskutiere mit den anderen Interessierten
-  und Aktiven. Hier findet fast alles einen Platz: Unterstützung bei Problemen,
-  Lokalgruppen, Forschungs&shy;projekte, Events, Entwicklungsthemen, und vieles mehr.
+<section>
+<h2>Bürger:innenforschung für Verkehrssicherheit</h2>
+
+<p class="lead">Wir sind aktive Alltagsradler:innen, die Radfahren überall
+sicherer und populärer machen möchten. Dazu forschen wir zu Überholabständen.</p>
+
+<p>Eine der gefährlichsten Situation für Radfahrende im Straßenverkehr ist das
+Überholen durch Kraftfahrzeuge. Seit 2020 gibt es zwar den gesetzlich
+vorgeschriebenen Mindestabstand von 1,5m (außerorts 2m) beim Überholen von
+Fahrrädern, doch oft wird dieser nicht eingehalten.</p>
+
+<p>Grund dafür sind gar nicht überwiegend einzelnes Fehlverhalten der
+Autofahrenden, auch wenn es nach wie vor an Bewusstsein und auch Bekanntheit
+der neuen Regeln mangelt. Viel öfter sind aber die Platzverhältnisse und
+Vekehrsführung Auslöser für Regelverstöße, sodass hier auch vonseiten der
+Kommunen und Länder nachgebessert werden muss.</p>
+
+<p>Für eine gelungene Verkehrswende brauchen wir dringend Fahrradinfrastruktur,
+die sich sicher anfühlt, und auch nachweislich sicherer ist. Darum haben wir es
+uns zum Auftrag gemacht, Infrastruktur, die enges Überholen ermöglicht oder
+begünstigt zu identifizieren und zu überprüfen. Dazu haben wir einen Sensor und
+ein Portal entwickelt, mit denen wir Überholabstände messen und die Daten
+einsammeln und auf einer Karte darstellen.</p>
+
+<p>Überall in <a href="{{< relref "/map" >}}">Deutschland und darüber
+hinaus</a> gibt es Initiativen und Gruppen, die OpenBikeSensoren bauen
+und betreiben und mit den entstandenen Daten auf Politik und Verwaltung zugehen und zu Veränderung bewegen.
+</p>
+</section>
+
+<div class="full-width content-grid columns-2">
+{{< yt id=Ym3BeUaSrWo thumbnail="/thumbnails/Ym3BeUaSrWo.jpg" >}}
+{{< yt id=izUD16ffs_Q thumbnail="/thumbnails/izUD16ffs_Q.jpg" >}}
+</div>
+
+<section class="full-width content-grid">
+<h2>Sei auch du dabei!</h2>
+
+<p>Deine Hilfe wird gebraucht. Egal, ob du an der Weiterentwicklung der Technik oder an der Verbreitung in deiner Stadt oder Kommune
+arbeiten möchtest, mit vielen Freiwilligen kommen wir voran! Hier sind einige Vorschläge, wie du dich einbringen kannst:</p>
+</section>
+
+<section class="columns-3 full-width content-grid primary-1">
+  {{% blocks/feature icon="discourse" title="Fragen und Diskutieren" url="/community" url_text="Zur Community" %}}
+    Komm in unsere Community und vernetze dich mit Gleichgesinnten. Hier
+    findest du Radler:innen, Techniker:innen, Forschende und Menschen, die in
+    Lokalpolitik aktiv sind oder sein wollen. So bringen sich alle im Projekt ein.
   {{% /blocks/feature %}}
 
   {{% blocks/feature icon="person-biking" title="Bauen & Daten sammeln" url="/bauanleitung" url_text="Zur Bauanleitung" %}}
@@ -58,34 +100,3 @@ <h2>Überholabstandsmessung am Fahrrad</h2>
   {{% /blocks/feature %}}
 </section>
 
-<section>
-<h2>OpenBikeSensor – OpenCitizenScience</h2>
-
-<p>Wir sind eine Gruppe von aktiven Alltagsradler:innen und möchten Radfahren sicherer und populärer machen. Überall!</p>
-
-<p>Wie oft passiert es uns, dass uns ein Auto beinahe vom Sattel holt? Was wir alle kennen, überprüfen wir nun wissenschaftlich. Dazu haben wir einen Sensor entwickelt, der den Abstand misst und Überholmanöver Geodaten zuordnet. Wo ist es sicher? Wo nicht? Welche Uhrzeit? Welche Strecken? Der Sensor soll helfen, das zu erkennen und zu belegen.</p>
-</section>
-
-<div class="full-width content-grid columns-2">
-
-{{< yt id=Ym3BeUaSrWo thumbnail="/thumbnails/Ym3BeUaSrWo.jpg" >}}
-
-{{< yt id=izUD16ffs_Q thumbnail="/thumbnails/izUD16ffs_Q.jpg" >}}
-
-</div>
-
-<section>
-<h2>Teil der Lösung</h2>
-
-<p>Unser Ziel ist, Schwachstellen und Verbesserungspotenzial in der Verkehrsinfrastruktur aufzuzeigen und diese in Kooperation mit Stadtplaner:innen zu beheben. Zudem wollen wir die gesellschaftliche Wirkung von Kampagnen wie beispielsweise <a href="https://twitter.com/search?q=%23AnderthalbMeter&src=typed_query&f=live" target="_blank" rel="noopener noreferrer nofollow">#AnderthalbMeter</a> (in Städten) messen. Um statistisch verlässliche Open Data zu erhalten, ist es wichtig, dass möglichst viele Alltagsradler:innen mit unseren Sensoren offene Daten erfassen. Mit den von allen gesammelten Daten wiederum lassen sich individuelle Auswertungen vornehmen; von Initiativen, Kommunen und von Euch (Open Citizen Science).</p>
-
-<p>Zentrales Hilfsmittel und Namensgeber des OpenBikeSensors ist unser Überholabstandsmesser, ein kleines technisches Gerät am Fahrrad. Während der Fahrt misst es den Abstand nach links und rechts (minus Lenkerbreite) und zeichnet die Fahrt via GPS auf. Überholmanöver kann die:der Radler:in per Taste am Lenker bestätigen. Nicht aufgezeichnet werden Fahrzeug- oder Personendaten der Überholenden. Uns geht es hauptsächlich um die Seitenabstände zu anderen Verkehrsteilnehmer:innen.</p>
-
-<p>Wir wünschen uns, dass unser Sensor von vielen genutzt und weiterentwickelt wird. Die <a href="{{< relref "/docs/classic/build-instructions">}}">Anleitung zum Selberbauen und Montieren</a> ist für alle als Open Source verfügbar – hier auf unserer Website und <a href="https://github.com/openbikesensor" target="_blank" rel="noopener noreferrer nofollow">quelloffen via GitHub</a>. Wir entwickeln für die offenen Daten zudem <a href="{{< relref "#visualisierung">}}">Visualisierungskonzepte</a> (inklusive Visualisierungssoftware) und werten die Ergebnisse gemeinsam mit Forschungspartner:innen aus.</p>
-
-<p>Uns geht es jedoch nicht nur um die Technik. Ergänzend entwickeln wir gemeinsam mit zivilgesellschaftlichen Organisationen und Kommunen regionale Aktionen, Kampagnen und Verkehrskonzepte. Wir gestalten Gesellschaft und leisten so einen Beitrag für mehr Lebensqualität in den Städten und auf dem Land.</p>
-
-<p>Es wäre toll, wenn schon bald viele mitmachen, und wir so zusammen Bewegung in die Sache bringen.</p>
-
-<p>Klingt interessant? <a href="{{< relref "/community" >}}">Hier kannst Du Teil der Community werden.</a></p>
-</section>