leaner home-page, separate donation and about page, better nav styles

src/components/footer.module.css

@@ -3,7 +3,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  padding: 1rem 0;
+  padding: 0.5rem 0;
   background-color: #14284c;
 }
 
@@ -11,11 +11,12 @@
   margin: 0 auto;
   max-width: 1000px;
   display: flex;
+  flex-flow: row wrap;
   justify-content: flex-end;
 }
 
 a.footerItem {
-  margin: 0 1rem;
+  padding: 0.5rem 1rem;
   color: white;
   text-decoration: none;
 }

src/components/nav.js

@@ -3,11 +3,13 @@ import navStyles from "./nav.module.css"
 import { Link } from "gatsby"
 
 let pages = [
-  ["home", ""],
+  ["home", "/", navStyles.desktopOnly],
-  ["zeiten & location", "treff"],
+  ["zeiten & location", "treff", ""],
-  ["events", "events"],
+  ["events", "events", ""],
-  ["kontakt", "kontakt"],
+  ["über uns", "über-uns", ""],
-  ["verein", "verein"],
+  ["kontakt", "kontakt", ""],
+  ["verein", "verein", ""],
+  ["supporte uns", "support", ""],
 ]
 
 export default ({ path }) => {
@@ -19,16 +21,21 @@ export default ({ path }) => {
   return (
     <>
       <header className={navStyles.header}>
-        <div className={navStyles.headerContent}>
+        <Link to="/">
-          <span className={navStyles.chaos}>Chaostreff</span> Dortmund
+          <div className={navStyles.headerContent}>
-        </div>
+            <img width="80rem" src="/logo_ctdo.svg" />
+            <span>
+              <span className={navStyles.chaos}>Chaostreff</span> Dortmund
+            </span>
+          </div>
+        </Link>
       </header>
       <nav className={navStyles.nav}>
         <div className={navStyles.navContent}>
-          {pages.map(([title, link]) => (
+          {pages.map(([title, link, device]) => (
             <Link
               key={title}
-              className={navStyles.navItem + activeClasses(link)}
+              className={navStyles.navItem + activeClasses(link) + " " + device}
               activeClassName={navStyles.navItemActive}
               activeStyle={{ textDecoration: `solid underline white 0.2em` }}
               to={`/${link}`}

src/components/nav.module.css

@@ -6,7 +6,24 @@
   font-size: 2rem;
   margin: 0 auto;
   max-width: 1000px;
-  padding: 1.5rem 1rem;
+  padding: 1rem 1rem;
+  display: flex;
+  align-items: center;
+}
+
+.headerContent img {
+  margin-right: 1rem;
+}
+
+@media only screen and (max-width: 600px) {
+  .headerContent img {
+    display: none;
+  }
+}
+
+.header a {
+  color: #eeeeee;
+  text-decoration: none;
 }
 
 .chaos {
@@ -24,7 +41,8 @@
   flex-flow: row wrap;
 }
 
-a.navItem, a.navItem:visited {
+a.navItem,
+a.navItem:visited {
   padding: 1rem;
   color: white;
   font-weight: 900;
@@ -36,3 +54,9 @@ a.navItem:hover,
 a.navItemActive {
   text-decoration: solid underline white 0.1em;
 }
+
+@media only screen and (max-width: 600px) {
+  a.navItem.desktopOnly {
+    display: none;
+  }
+}

src/markdown-pages/about.mdx

@@ -0,0 +1,72 @@
+---
+path: "/über-uns"
+title: "über uns"
+edit: "about.mdx"
+---
+
+# Wer wir sind
+
+Der Chaostreff Dortmund e.V. ist ein Erfa-Kreis des CCC\* und eine bunt
+gemischte Gruppe aus computer-, technikbegeisterten und kreativen Menschen.
+Wir sind nicht finanziell orientiert und betreiben den Chaostreff aus Spaß an
+der Sache und um interessierten Menschen eine Plattform zu bieten, über die
+man sich austauschen kann.
+Unser Ziel ist es den Chaostreff fortwährend aus Spenden der einzelnen
+Teilnehmenden bzw.  Mitglieder zu finanzieren.
+Wenn du dir angucken möchtest, wie das so bei uns in den Räumen aussieht,
+dann komm doch einfach vorbei.
+
+Wir schließen niemanden aufgrund körperlicher Disposition, Religion, Alter,
+Weltanschauung, sexueller Ausrichtung oder sonstigen nichtigen Gründen aus!
+Alle, die interessiert sind, sind auch bei uns willkommen.
+
+\*Wir sind ein Teil des Chaos Computer Club (CCC), ein s. g. Erfa Kreis
+(Erfahrungsaustausch Kreis), da wir seit 2017-04-16¹ den Erfa Status
+vom Regiotreff zuerkannt bekommen haben.
+
+# Unsere Ziele
+
+- Schaffung einer Plattform für technikbegeisterte Menschen
+- Bereitstellung einer technischen Infrastruktur
+- Gemütliche Räumlichkeiten mit Getränken etc.
+- Die Möglichkeit, gemeinsam kreativ mit Technik umzugehen
+- Nützliches Mitglied des Nordstadtquartiers zu sein
+- Sich und andere weiterzubilden
+- Weltherrschaft natürlich!²
+
+# Unsere Zielgruppe
+
+Alle, die sich für Technik, Kunst, Kreativität, OpenSource, Netzpolitik,
+den Geist in der Maschine oder ähnliches begeistern können; wie bereits
+oben erwähnt schließen wir niemanden aus irgendwelchen
+dämlichen/rassistischen/vorurteilsbehafteten Gründen aus.
+
+Wir freuen uns schon auf deinen ersten Besuch bei uns.
+
+# Wir bieten dir
+
+- Viel Platz für eigene Projekte
+- Chillout Platz mit Sofas und gemütlicher Atmosphäre
+- Eine Küche zum gemeinsamen Kochen
+- Einen Raum für Siebdruck und Platinenherstellung
+- Maschinen wie Lasercutter, Stickmaschine, 3D Drucker
+- Werkzeuge, sowie Lötarbeitsplätze und Messgeräte
+- PC-Arbeitsplätze
+- Email/Shell Konten und Webspace oder VServer
+- Kisten/Regale damit du dein Zeug verstauen kannst
+- Freundliche Leute mit denen man sich austauschen kann
+- u.v.m
+
+# Du gehörst nicht zu uns, wenn…
+
+- …du einen 24/7 kostenlosen PC-Hilfe Notdienst suchst.
+- …deine Festplatte kaputt ist, und du vergessen hast, ein Backup zu machen.
+(Ausnahmen bestätigen die Regel)
+- …du der Meinung bist, wir wären dein kostenloses Internetcafé
+- …du der irrigen Annahme verfallen bist, wir würden für dich irgendeinen
+FTP-/WebServer/eMail-Account-deiner-ExFreundin hacken,
+geschweige denn dir dabei helfen
+
+¹ [https://en.wikipedia.org/wiki/ISO_8601](https://en.wikipedia.org/wiki/ISO_8601)  
+² Dies ist eine witzige Bemerkung ein s.g. “Running Gag” und ist als
+sarkastische Bemerkung zu verstehen!

src/markdown-pages/home.mdx

@@ -3,70 +3,30 @@ path: "/"
 title: "home"
 edit: "home.mdx"
 ---
+import { Link } from "gatsby"
+import RoomState from "../components/roomState.js"
 
-# Wer wir sind
+<img width="100%" alt="Raum 2 mit gemütlichen Sofas" src="/header.jpg"></img>
 
-Der Chaostreff Dortmund e.V. ist ein Erfa-Kreis des CCC\* und eine bunt
+# Räume sind <RoomState/>
-gemischte Gruppe aus computer-, technikbegeisterten und kreativen Menschen.
-Wir sind nicht finanziell orientiert und betreiben den Chaostreff aus Spaß an
-der Sache und um interessierten Menschen eine Plattform zu bieten, über die
-man sich austauschen kann.
-Unser Ziel ist es den Chaostreff fortwährend aus Spenden der einzelnen
-Teilnehmenden bzw.  Mitglieder zu finanzieren.
-Wenn du dir angucken möchtest, wie das so bei uns in den Räumen aussieht,
-dann komm doch einfach vorbei.
 
-Wir schließen niemanden aufgrund körperlicher Disposition, Religion, Alter,
+# Hi
-Weltanschauung, sexueller Ausrichtung oder sonstigen nichtigen Gründen aus!
-Alle, die interessiert sind, sind auch bei uns willkommen.
 
-\*Wir sind ein Teil des Chaos Computer Club (CCC), ein s. g. Erfa Kreis
+Wir sind eine bunt gemischte Gruppe aus **computer-, technikbegeisterten
-(Erfahrungsaustausch Kreis), da wir seit 2017-04-16¹ den Erfa Status
+und kreativen Menschen**.
-vom Regiotreff zuerkannt bekommen haben.
+Wir betreiben den Chaostreff aus Spaß an der Sache und um interessierten
+Menschen eine Plattform zu bieten, über die man sich austauschen kann.
 
-# Unsere Ziele
+Wenn du Lust hast dir das mal anzuschauen,
+dann komm gerne vorbei.  <Link to="/treff">zeiten & location</Link>
 
-- Schaffung einer Plattform für technikbegeisterte Menschen
+Egal wer du bist, egal was du machst **bei uns sind alle Menschen willkommen**.
-- Bereitstellung einer technischen Infrastruktur
+Leider sind unsere Räume aktuell nicht barrierefrei.  
-- Gemütliche Räumlichkeiten mit Getränken etc.
+Falls du Fragen hast schreibe uns an. <Link to="/kontakt">kontakt</Link>
-- Die Möglichkeit, gemeinsam kreativ mit Technik umzugehen
-- Nützliches Mitglied des Nordstadtquartiers zu sein
-- Sich und andere weiterzubilden
-- Weltherrschaft natürlich!²
 
-# Unsere Zielgruppe
+Wenn du mehr über uns wissen möchtest,
+schau hier: <Link to="/about">über uns</Link>
 
-Alle, die sich für Technik, Kunst, Kreativität, OpenSource, Netzpolitik,
+# Die nächsten Events
-den Geist in der Maschine oder ähnliches begeistern können; wie bereits
-oben erwähnt schließen wir niemanden aus irgendwelchen
-dämlichen/rassistischen/vorurteilsbehafteten Gründen aus.
 
-Wir freuen uns schon auf deinen ersten Besuch bei uns.
+Es sind gerade keine besonderen Veranstaltungen geplant.
-
-# Wir bieten dir
-
-- Viel Platz für eigene Projekte
-- Chillout Platz mit Sofas und gemütlicher Atmosphäre
-- Eine Küche zum gemeinsamen Kochen
-- Einen Raum für Siebdruck und Platinenherstellung
-- Maschinen wie Lasercutter, Stickmaschine, 3D Drucker
-- Werkzeuge, sowie Lötarbeitsplätze und Messgeräte
-- PC-Arbeitsplätze
-- Email/Shell Konten und Webspace oder VServer
-- Kisten/Regale damit du dein Zeug verstauen kannst
-- Freundliche Leute mit denen man sich austauschen kann
-- u.v.m
-
-# Du gehörst nicht zu uns, wenn…
-
-- …du einen 24/7 kostenlosen PC-Hilfe Notdienst suchst.
-- …deine Festplatte kaputt ist, und du vergessen hast, ein Backup zu machen.
-(Ausnahmen bestätigen die Regel)
-- …du der Meinung bist, wir wären dein kostenloses Internetcafé
-- …du der irrigen Annahme verfallen bist, wir würden für dich irgendeinen
-FTP-/WebServer/eMail-Account-deiner-ExFreundin hacken,
-geschweige denn dir dabei helfen
-
-¹ [https://en.wikipedia.org/wiki/ISO_8601](https://en.wikipedia.org/wiki/ISO_8601)  
-² Dies ist eine witzige Bemerkung ein s.g. “Running Gag” und ist als
-sarkastische Bemerkung zu verstehen!

src/markdown-pages/support.mdx

@@ -0,0 +1,37 @@
+---
+path: "/support"
+title: "support us"
+edit: "support.mdx"
+---
+import { BankAccount } from "../components/data.js"
+
+# Spenden
+
+Der Chaostreff Dortmund finanziert sich vollkommen aus sich selbst:
+Das bedeutet aus dem Portemonnaie seiner Mitglieder und oder derer,
+die den Treff für sinnvoll halten.
+
+## Wieso und wofür?
+
+Wir haben gewisse Kosten zu decken, dazu gehören die Miete, Kosten für Heizung,
+Strom und Internet.
+Letztere Punkte werden durch das positive Klima im Langen August für uns sehr
+angenehm gehalten.
+Damit ist jedoch gerade einmal die grundsätzliche Infrastruktur geschaffen.
+Für Projekte fehlt es dem Treff schon wieder an Geld.
+Allein die Finanzierung der gemeinsamen Räume basiert Gerüchten zufolge eher
+auf einer raffinierten Mate-Wiederverkaufsstrategie in Kombination mit einer
+Ausnutzung der suchterregenden Auswirkungen dieses Getränks.
+Als groben Richtwert kann man sagen, dass der Spendendurchschnitt irgendwo
+zwischen 23 und 42 Euro monatlich liegt.
+An diesem Punkt sei erwähnt dass wir über jede Spende sehr erfreut sind,
+am liebsten natürlich wenn sie regelmäßig ist. ;)
+
+## Gerne, wo soll ich unterschreiben?
+
+<BankAccount/>
+
+Der Chaostreff Dortmund ist vom Finanzamt als gemeinnützig anerkannt und
+deshalb dürfen wir Spendenbescheinigungen ausstellen.
+
+**Der Chaostreff sagt in jedem Fall schon mal Danke!**

src/markdown-pages/treff.mdx

@@ -11,14 +11,14 @@ import Accordion from "../components/accordion.js"
 
 # Zeiten
 
-Wir sind für gewöhnlich Dienstags und Donnerstag ab 19:00
+Wir sind für gewöhnlich **Dienstags und Donnerstag ab 19:00**
 (±1hr Chaos-Verspätung) im Treff.
 Bevor du kommst schau einmal nach ob jemand da ist.
 Das kannst du oben beim Raumstatus sehen.
 
 # Location
 
-Die Räume sind im Langen August.
+Die Räume sind im **Langen August**.
 Wenn du den Langen August gefunden hast, geh durch das erste Tor,
 dann findest du auf der rechten Seite eine Tür in das Treppenhaus.
 Da noch zwei Stockwerke hoch, die rechte Tür führt zu uns.

src/markdown-pages/verein.mdx

@@ -5,7 +5,35 @@ edit: "verein.mdx"
 ---
 import { BankAccount } from "../components/data.js"
 
-# Verein
+# Mitglied werden
+
+Durch deine Mitgliedschaft kannst du dem CTDO direkt deine Unterstützung
+zukommen lassen.
+Wenn du uns zu deiner Mitgliedschaft einen freiwilligen Betrag spendest,
+wird dieser für neue Projekte und die Umsetzung von tollen Ideen verwendet.
+
+Du kannst den Mitgliedsantrag
+[hier](https://www.chaostreff-dortmund.de/wp-content/uploads/2011/07/mitgliedsantrag-2017.pdf)
+herunterladen, ausfüllen, und zum Chaostreff mitbringen.
+
+Selbstverständlich kannst du auch im Chaostreff-Dortmund aktiv sein,
+ohne Mitglied in unserem Verein zu sein.
+Es erfolgt keine Bestätigung über die Annahme des Mitgliedsantrages.
+Im Falle einer Ablehnung erfolgt eine Mitteilung.
+
+# Satzung
+
+Die aktuelle Satzung des Vereins Chaostreff Dortmund e.V. kann stets hier auf
+unserer Webseite heruntergeladen werden.
+Darin eventuell referenzierte Anhänge oder Zusatzvereinbarungen,
+die nicht notwendigerweise Teil der Satzung selbst sind,
+sind jeweils der Einfachheit halber als ein PDF-Dokument direkt der aktuellen
+Satzung anhängig.
+
+[Aktuelle Satzung](https://www.chaostreff-dortmund.de/presse/satzung/aktuelle_satzung.pdf)  
+[Alle Satzungen](https://www.chaostreff-dortmund.de/presse/satzung/)
+
+# Gründungsgeschichte
 
 Der Verein wurde als „Trägerverein“ des Chaostreffs im Jahre 2009 gegründet um
 dem Chaostreff als losen Verbund von Menschen gleicher Interessen eine (solide)
@@ -55,61 +83,3 @@ Einen weiteren Meilenstein erreichten wir etwas später:
 Das Finanzamt stellte uns die Anerkennung der Gemeinnützigkeit in Aussicht,
 zu der es noch einer Änderung in der Satzung bedurfte.
 
-# Mitglied werden
-
-Durch deine Mitgliedschaft kannst du dem CTDO direkt deine Unterstützung
-zukommen lassen.
-Wenn du uns zu deiner Mitgliedschaft einen freiwilligen Betrag spendest,
-wird dieser für neue Projekte und die Umsetzung von tollen Ideen verwendet.
-
-Du kannst den Mitgliedsantrag
-[hier](https://www.chaostreff-dortmund.de/wp-content/uploads/2011/07/mitgliedsantrag-2017.pdf)
-herunterladen, ausfüllen, und zum Chaostreff mitbringen.
-
-Selbstverständlich kannst du auch im Chaostreff-Dortmund aktiv sein,
-ohne Mitglied in unserem Verein zu sein.
-Es erfolgt keine Bestätigung über die Annahme des Mitgliedsantrages.
-Im Falle einer Ablehnung erfolgt eine Mitteilung.
-
-# Satzung
-
-Die aktuelle Satzung des Vereins Chaostreff Dortmund e.V. kann stets hier auf
-unserer Webseite heruntergeladen werden.
-Darin eventuell referenzierte Anhänge oder Zusatzvereinbarungen,
-die nicht notwendigerweise Teil der Satzung selbst sind,
-sind jeweils der Einfachheit halber als ein PDF-Dokument direkt der aktuellen
-Satzung anhängig.
-
-[Aktuelle Satzung](https://www.chaostreff-dortmund.de/presse/satzung/aktuelle_satzung.pdf)  
-[Alle Satzungen](https://www.chaostreff-dortmund.de/presse/satzung/)
-
-# Spenden
-
-Der Chaostreff Dortmund finanziert sich vollkommen aus sich selbst:
-Das bedeutet aus dem Portemonnaie seiner Mitglieder und oder derer,
-die den Treff für sinnvoll halten.
-
-## Wieso und wofür?
-
-Wir haben gewisse Kosten zu decken, dazu gehören die Miete, Kosten für Heizung,
-Strom und Internet.
-Letztere Punkte werden durch das positive Klima im Langen August für uns sehr
-angenehm gehalten.
-Damit ist jedoch gerade einmal die grundsätzliche Infrastruktur geschaffen.
-Für Projekte fehlt es dem Treff schon wieder an Geld.
-Allein die Finanzierung der gemeinsamen Räume basiert Gerüchten zufolge eher
-auf einer raffinierten Mate-Wiederverkaufsstrategie in Kombination mit einer
-Ausnutzung der suchterregenden Auswirkungen dieses Getränks.
-Als groben Richtwert kann man sagen, dass der Spendendurchschnitt irgendwo
-zwischen 23 und 42 Euro monatlich liegt.
-An diesem Punkt sei erwähnt dass wir über jede Spende sehr erfreut sind,
-am liebsten natürlich wenn sie regelmäßig ist. ;)
-
-## Gerne, wo soll ich unterschreiben?
-
-<BankAccount/>
-
-Der Chaostreff Dortmund ist vom Finanzamt als gemeinnützig anerkannt und
-deshalb dürfen wir Spendenbescheinigungen ausstellen.
-
-**Der Chaostreff sagt in jedem Fall schon mal Danke!**