faq content and style

Author: opatut

assets/scss/dark.scss

@@ -8,6 +8,8 @@
   --background-2: #e9e9e9;
 
   --dark-text: #101010;
+
+  --faq-question-color: #c1ebfb;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -17,6 +19,7 @@
     --background-1: #303030;
     --background-2: #505050;
     --foreground: #FFFFFF;
+    --faq-question-color: #07445d;
     color-scheme: dark;
     color: var(--foreground);
     background: var(--background);

assets/scss/features.scss

@@ -54,41 +54,44 @@
 // Buttons
 
 .button {
-   background: var(--background-1);
-   box-shadow: $border-color 0 5px;
-   border: 1px solid $border-color;
+  background: var(--background-1);
+  box-shadow: $border-color 0 5px;
+  border: 1px solid $border-color;
 
-   &, &:visited, &:hover {
-     color: var(--foreground);
-   }
+  &, &:visited, &:hover {
+    color: var(--foreground);
+  }
 
-   &:hover {
-     background: var(--background);
-   }
+  &:hover {
+    background: var(--background);
+  }
 
   .primary &, .primary-1 &, .stage & {
-     background: rgba(255, 255, 255, 0.7);
-     box-shadow: rgba(0, 0, 0, 0.6) 0 5px;
-     border: none;
-
-     &, &:visited, &:hover {
-       color: var(--dark-text);
-     }
-
-     &:hover {
-       background: white;
-     }
-   }
-
-   text-decoration: none;
-   padding: 0.4em 1.25em 0.3em;
-   border-radius: 0.25rem;
-   transition: all 0.25s ease-out;
-   font-weight: 500;
-
-   &:hover {
-     transform: translateY(-3px);
-   }
+    background: rgba(255, 255, 255, 0.7);
+    box-shadow: rgba(0, 0, 0, 0.6) 0 5px;
+    border: none;
+
+    &, &:visited, &:hover {
+      color: var(--dark-text);
+    }
+
+    &:hover {
+      background: white;
+    }
+  }
+
+  text-decoration: none;
+  padding: 0.4em 1.25em 0.3em;
+  border-radius: 0.25rem;
+  font-weight: 500;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: all 0.25s ease-out;
+
+    &:hover {
+      transform: translateY(-3px);
+    }
+  }
 }
 
 .action-buttons {
@@ -266,10 +269,12 @@
     filter: blur(3px);
     scale: 1.01;
 
-    animation: stage-scroll-effect linear;
-    animation-duration: 1ms;
-    animation-timeline: view();
-    animation-range: exit -60px;
+    @media (prefers-reduced-motion: no-preference) {
+      animation: stage-scroll-effect linear;
+      animation-duration: 1ms;
+      animation-timeline: view();
+      animation-range: exit -60px;
+    }
   }
 
   height: 66vh;
@@ -313,12 +318,15 @@
     width: #{"min(50vw, 25ch)"};
     padding: 0;
     transform-origin: 33% 33%;
-    transition: all 0.5s;
-    opacity: 0.8;
 
-    &:hover {
-      scale: 1.1;
-      opacity: 1;
+    @media (prefers-reduced-motion: no-preference) {
+      opacity: 0.8;
+      transition: all 0.5s;
+
+      &:hover {
+        scale: 1.1;
+        opacity: 1;
+      }
     }
 
     > img {
@@ -499,3 +507,80 @@ ul.blog-posts > li > h5 > a {
     height: 100%;
   }
 }
+
+// FAQ
+
+// @media ($media-desktop) {
+//   .faq-list {
+//     display: grid;
+//     gap: 4rem;
+//     grid-template-columns: 1fr 1fr;
+//   }
+// }
+
+.faq-entry {
+  --size: 1rem; // triangle
+
+  margin-block: 1rem;
+
+  &.single {
+    margin-block: 4rem;
+  }
+
+  .question {
+    background: var(--faq-question-color);
+    padding: 1rem 2rem;
+    border-radius: 1rem 1rem 1rem 0;
+    margin: 0;
+    margin-left: var(--size);
+    margin-right: #{"min(10%, 5rem)"};
+    margin-block-end: 0.5rem;
+    font-size: inherit;
+    font-weight: 500;
+    color: inherit;
+    position: relative;
+
+    a {
+      color: inherit;
+    }
+
+    &::after {
+      position: absolute;
+      content: "";
+      left: 0;
+      bottom: 0;
+      transform: translate(-100%, 0);
+      border-style: solid;
+      border-width: var(--size) var(--size) 0;
+      border-color: transparent var(--faq-question-color) transparent transparent;
+      z-index: 3;
+    }
+  }
+
+  .response {
+    p, ul {
+      background: var(--background-1);
+      padding: 1rem 2rem;
+      border-radius: 1rem 1rem 0 1rem;
+      margin-left: #{"min(10%, 5rem)"};
+      margin-right: var(--size);
+      margin-block: 0.25rem;
+      position: relative;
+
+      &::after {
+        position: absolute;
+        content: "";
+        right: 0;
+        bottom: 0;
+        transform: translate(100%, 0);
+        border-style: solid;
+        border-width: 0 var(--size) var(--size) 0;
+        border-color: transparent transparent var(--background-1) transparent;
+        z-index: 3;
+      }
+    }
+    ul {
+      padding-left: 4rem;
+    }
+  }
+}

content/_index.de.html

@@ -92,7 +92,7 @@ <h2>Sei auch du dabei!</h2>
   {{% /blocks/feature %}}
 
   {{% blocks/feature icon="person-biking" title="Bauen & Daten sammeln" url="/bauanleitung" url_text="Zur Bauanleitung" %}}
-  Bau Dir Deinen eigenen Überholabstandsmesser. Wir unterstützen Dich dabei. Am
+  Bau Dir Deinen eigenen OpenBikeSensor. Wir unterstützen Dich dabei. Am
   besten schließt Du Dich einer der Sammelbestellungen und einem unserer
   Regio-Teams an.
   {{% /blocks/feature %}}

content/docs/classic/pcb/_index.de.md

@@ -5,7 +5,7 @@ aliases:
 - /docs/hardware/general/pcb
 description: >
     Die Hauptplatine des OpenBikeSensor Classic verbindet alle Module
-    und elektronisch Einzelbauteile miteinander. Hier beschreiben wir,
+    und elektronischen Einzelbauteile miteinander. Hier beschreiben wir,
     wie du eine solche Platine bekommst.
 
 ---
@@ -16,23 +16,39 @@ Teil hieran ist das „printed” -- ein PCB ist ein professionell
 hergestelltes Bauteil, das schwierig selbst zu erstellen ist. Hier sind deine
 Optionen:
 
-* Das PCB anhand der Designdateien von einem Platinenhersteller [anfertigen
-  lassen.](#gerber-dateien)
-* Finde heraus, ob jemensch anders schon Platinen anhand der gleichen Dateien
-  hat herstellen lassen. Eventuell hat er:sie noch Exemplare übrig, frag am
-  besten [in der Community]({{< ref "/community" >}}) nach.
+## Kleinstmengen
 
-Die Gängigen PCB-Hersteller können unsere Platine herstellen, wir haben z.B.
-gute Erfahrungen mit [Aisler](aisler.de) (deutscher Hersteller) oder 
-[jlcpcb](jlcpcb.com) gemacht.
+Falls du nur eine oder wenige Platinen brauchst, lohnt es sich meist, in der
+Community herumzufragen. Viele haben noch ein paar Platinen übrig und schicken
+sie dir gern zum Selbstkostenpreis plus Porto zu. 
 
-## Gerber-Dateien
+## Sammelbestellungen
 
-Um deine Platine herstellen zu lassen benötigst du bei den meisten Herstellern
-sogenannte Gerber Dateien bei manchen kannst du aber auch die kicad Dateien
-hochladen und bestellen. Du lädst die Datei hoch und der Hersteller rechnet
-für dich aus was es kostet. Meist ein paar Euro pro Platine, bei großen Mengen
-auch weniger als einen Euro.
+Wenn du einen Bausatz aus einer Sammelbestellung erhältst, ist in der Regel
+auch die Platine schon dabei. Falls du mehrere Platinen brauchst, um selbst
+Bausätze zusammenzustellen, frag trotzdem gern in der Community nach, ob sich
+auch hier ein Zusammenschluss mit anderen Sammelbestellungen lohnt. So sparen
+alle am Versand und den Stückpreisen.
+
+## Herstellung beauftragen
+
+Die Platine kannst du anhand der Designdateien, auch Gerberdateien genannt, von
+einem Platinenhersteller anfertigen lassen. Wir veröffentlichen diese Dateien
+[auf GitHub](https://github.com/openbikesensor/OpenBikeSensor_PCB_Board), von
+wo du sie herunterladen kannst. Auf der verlinkten Seite findest du auch Hinweise,
+welche Dateien du brauchst und wie du die Platinen bestellst im Abschnitt
+**Bestellung bei Platinenherstellern**.
+
+Alle gängigen Platinenhersteller können unsere Platine herstellen, das Design
+ist nicht besonders anspruchsvoll. Wir haben z.B. gute Erfahrungen mit
+[Aisler](https://aisler.de) (deutscher Hersteller) oder
+[JLCPCB](https://jlcpcb.com) (aus China) gemacht. 
+
+Inländische Hersteller sind in der Regel etwas langsamer in der Herstellung und
+verlangen höhere Preise, bei kleinen Mengen macht das aber keinen großen
+Unterschied, da der Versand wesentlich günstiger, schneller und zuverlässiger
+ist. Erst bei großen Bestellungen (ab ~20 Stück) lohnt sich oft die Herstellung
+im Ausland. Rechne mit Stückkosten (ohne Versand) um 1&thinsp;€ in China und um
+3-5&thinsp;€ in Europa. Du bekommst in der Regel ein verbindliches Angebot über
+die Webseite des Herstellers, nachdem du die Designdateien hochgeladen hast.
 
-Die aktuellen Gerber-Dateien findest du im Unterverzeichnis ``generated`` der
-jeiweiligen PCB-Version, die auf der Teileliste verlinkt ist.

content/faq/build/how-much-does-one-sensor-cost.de.md

@@ -1,7 +1,10 @@
 ---
 title: >
-    Was kostet ein Überholabstandsmesser?
-slug: was-kostet-ein-ueberholabstandsmesser
+    Was kostet ein OpenBikeSensor?
+slug: was-kostet-ein-openbikesensor
+alias:
+  - /faq/build/was-kostet-ein-ueberholabstandsmesser/
+weight: 3
 ---
 
 Die Teile für einen Bausatz können einzeln oder in größeren Mengen gekauft

content/faq/build/i-am-a-beginner-can-i-build-one.de.md

@@ -1,8 +1,9 @@
 ---
 title: >
     Ich bin kein:e Profi-Bastler:in, kann ich trotzdem einen
-    Überholabstandsmesser bauen?
+    OpenBikeSensor bauen?
 slug: ich-bin-neuling
+weight: 2
 ---
 
 Ja! Natürlich hilft es, so etwas schon einmal gemacht zu haben. Aber mit

content/faq/build/where-do-i-get-a-pcb.de.md

@@ -2,18 +2,12 @@
 title: >
     Ich brauche eine Platine (PCB), woher bekomme ich die?
 slug: woher-bekomme-ich-eine-platine
+weight: 10
 ---
 
-Wir veröffentlichen [auf
-GitHub](https://github.com/openbikesensor/OpenBikeSensor_PCB_Board) die
-CAD-Zeichnungen für die Platinen. Du kannst dir von dort die benötigten Dateien
-herunterladen und bei einem Platinenhersteller deiner Wahl bestellen.
+Du kannst die Platine selbst anhand unserer Designdateien
+[bei einem Hersteller deiner Wahl bestellen]({{< relref "/docs/classic/pcb" >}})
+oder dich mit Anderen [in der Community]({{< relref "/community" >}}) 
+zusammentun. Vielleicht hat auch jemand noch Platinen übrig, für kleine Mengen 
+lohnt sich das Nachfragen!
 
-Platinen sind aber auch immer Bestandteil unserer Sammelbestellungen, denn
-solche Spezialanfertigungen sind natürlich in Menge gefertigt wesentlich
-günstiger. Unser Hersteller in China bietet uns die fertigen PCBs in Menge für
-etwa 0,50&thinsp;€ pro Stück an. In Deutschland gefertigt und damit schneller und
-umweltschonender geliefert kosten Platinen 3 bis 5&thinsp;€ pro Stück, dies ist für
-mittelgroße Bestellungen natürlich auch eine gute Option.
-
-[&raquo; Dokumentation zum PCB (Englisch)]({{< ref path="/docs/classic/pcb" >}})

content/faq/build/where-do-i-get-a-sensor.de.md

@@ -1,7 +1,10 @@
 ---
 title: >
-    Woher bekomme ich den Überholabstandsmesser?
-slug: woher-bekomme-ich-den-ueberholabstandsmesser
+    Woher bekomme ich einen OpenBikeSensor?
+slug: woher-bekomme-ich-einen-openbikesensor
+alias:
+  - /faq/build/woher-bekomme-ich-den-ueberholabstandsmesser/
+weight: 1
 ---
 
 Wir entwickeln in ehrenamtlicher Arbeit dieses Gerät, aber wir verkaufen es

content/faq/data/how-do-privacy-zones-work.de.md

@@ -9,7 +9,7 @@ Diese Zonen erlauben das Anonymisieren deiner Aufzeichnungen innerhalb
 bestimmter geografischer Bereiche, zum Beispiel damit nicht öffentlich ist, wo
 du wohnst.
 
-Du kannst sie im Überholabstandsmesser konfigurieren und auswählen, wie sich
+Du kannst sie im OpenBikeSensor konfigurieren und auswählen, wie sich
 das Gerät innerhalb dieser Zonen verhalten soll. In Zukunft wird es auch
 möglich sein, im Portal solche Zonen zu verwalten und die Anonymisierung dort
 durchführen zu lassen.