ui mockup for layout & home

gatsby-browser.js

@@ -0,0 +1 @@
+import "./src/styles/global.css"

src/components/footer.js

@@ -0,0 +1,16 @@
+import React from "react"
+import footerStyles from "./footer.module.css"
+import { Link } from "gatsby"
+
+export default () => (
+  <div className={footerStyles.footer}>
+    <div className={footerStyles.footerContent}>
+      <Link className={footerStyles.footerItem} to="/impressum/">
+        Impressum
+      </Link>
+      <Link className={footerStyles.footerItem} to="/datenschutz/">
+        Datenschutzerklärung
+      </Link>
+    </div>
+  </div>
+)

src/components/footer.module.css

@@ -0,0 +1,21 @@
+.footer {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 1rem 0;
+  background-color: #14284c;
+}
+
+.footerContent {
+  margin: 0 auto;
+  max-width: 1000px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.footerItem {
+  padding: 0 1rem;
+  color: white;
+  text-decoration: none;
+}

src/components/layout.js

@@ -0,0 +1,12 @@
+import React from "react"
+import Nav from "../components/nav"
+import Footer from "../components/footer"
+import layoutStyles from "./layout.module.css"
+
+export default ({ children }) => (
+  <>
+    <Nav />
+    <div className={layoutStyles.layout}>{children}</div>
+    <Footer />
+  </>
+)

src/components/layout.module.css

@@ -0,0 +1,5 @@
+.layout {
+  margin: 3rem auto;
+  max-width: 1000px;
+  padding: 0 1rem;
+}

src/components/nav.js

@@ -0,0 +1,35 @@
+import React from "react"
+import navStyles from "./nav.module.css"
+import { Link } from "gatsby"
+
+let pages = [
+  ["home", ""],
+  ["zeiten & location", "treff/"],
+  ["events", "events/"],
+  ["kontakt", "kontakt/"],
+  ["verein", "verein/"],
+]
+
+export default () => (
+  <>
+    <div className={navStyles.header}>
+      <div className={navStyles.headerContent}>
+        <span className={navStyles.chaos}>Chaostreff</span> Dortmund
+      </div>
+    </div>
+    <div className={navStyles.nav}>
+      <div className={navStyles.navContent}>
+        {pages.map(([title, link]) => (
+          <Link
+            className={navStyles.navItem}
+            activeClassName={navStyles.navItemActive}
+            activeStyle={{ textDecoration: `solid underline white 0.2em` }}
+            to={`/${link}`}
+          >
+            {title}
+          </Link>
+        ))}
+      </div>
+    </div>
+  </>
+)

src/components/nav.module.css

@@ -0,0 +1,41 @@
+.header {
+  background-color: #193360;
+}
+
+.headerContent {
+  font-size: 2rem;
+  margin: 0 auto;
+  max-width: 1000px;
+  padding: 1.5rem 1rem;
+}
+
+.chaos {
+  font-weight: bold;
+}
+
+.nav {
+  background-color: #14284c;
+}
+
+.navContent {
+  margin: 0 auto;
+  max-width: 1000px;
+  display: flex;
+  flex-flow: row wrap;
+}
+
+.navItem {
+  padding: 1rem;
+  color: white;
+  font-weight: 900;
+  text-transform: uppercase;
+  text-decoration: none;
+}
+
+.navItem:hover {
+  text-decoration: solid underline white 0.1em;
+}
+
+.navItemActive {
+  text-decoration: solid underline white 0.1em;
+}

src/pages/events.js

@@ -0,0 +1,4 @@
+import React from "react"
+import Layout from "../components/layout"
+
+export default () => <Layout />

src/pages/index.js

@@ -1,3 +1,80 @@
 import React from "react"
+import Layout from "../components/layout"
 
-export default () => <div>Hello world!</div>
+export default () => (
+  <Layout>
+    <h2>Wer wir sind</h2>
+    <p>
+      Der Chaostreff Dortmund e.V. ist 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 Teilnehmer 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.
+    </p>
+    <p>
+      *Wir sind ein Teil des Chaos Computer Club (CCC), ein s.g. Erfa Kreis, da
+      wir seit dem 16.04.2017 den Erfa Status vom Regiotreff zuerkannt bekommen
+      haben.
+    </p>
+    <p>
+      Zunächst: 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.
+    </p>
+    <h2>Unsere Ziele</h2>
+    <ul>
+      <li>Schaffung einer Plattform für technikbegeisterte Menschen</li>
+      <li>Bereitstellung einer technischen Infrastruktur</li>
+      <li>Gemütliche Räumlichkeiten mit Getränken, etc …</li>
+      <li>Die Möglichkeit, gemeinsam kreativ mit Technik umzugehen</li>
+      <li>Nützliches Mitglied des Nordstadtquartiers zu sein</li>
+      <li>Sich und andere weiterzubilden</li>
+      <li>Weltherrschaft natürlich!¹</li>
+    </ul>
+    <h2>Unsere Zielgruppe</h2>
+    <p>
+      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.
+    </p>
+    <p>Wir freuen uns schon auf deinen ersten Besuch bei uns.</p>
+    <h2>Wir bieten dir</h2>
+    <ul>
+      <li>Viel Platz für eigene Projekte</li>
+      <li>Chillout Platz mit Sofas und gemütlicher Atmosphäre</li>
+      <li>Eine Küche zum gemeinsamen Kochen</li>
+      <li>Einen Raum für Siebdruck und Platinenherstellung</li>
+      <li>Maschinen wie Lasercutter, Stickmaschine, 3D Drucker</li>
+      <li>Werkzeuge, sowie Lötarbeitsplätze und Messgeräte</li>
+      <li>PC-Arbeitsplätze</li>
+      <li>Email/Jabber/Shell Konten und Webspace oder VServer</li>
+      <li>Kisten/Regale damit du dein Zeug verstauen kannst</li>
+      <li>Freundliche Leute mit denen man sich austauschen kann</li>
+      <li>u.v.m</li>
+    </ul>
+    <h2>Du gehörst nicht zu uns, wenn…</h2>
+    <ul>
+      <li>…du einen 24/7 kostenlosen PC-Hilfe Notdienst suchst.</li>
+      <li>
+        …deine Festplatte kaputt ist, und du vergessen hast, ein Backup zu
+        machen. (Ausnahmen bestätigen die Regel)
+      </li>
+      <li>…du der Meinung bist, wir wären dein kostenloses Internetcafé</li>
+      <li>
+        …du der nnnnnnn Annahme verfallen bist, wir würden für dich irgendeinen
+        FTP-/WebServer/eMail-Account-deiner-ExFreundin hacken, geschweige denn
+        dir dabei helfen
+      </li>
+    </ul>
+    <p>Wir freuen uns schon auf deinen ersten Besuch bei uns.</p>
+    <p>
+      ¹ Dies ist eine witzige Bemerkung – ein s.g. “Running Gag” und ist als
+      sarkastische Bemerkung zu verstehen!
+    </p>
+  </Layout>
+)

src/pages/kontakt.js

@@ -0,0 +1,4 @@
+import React from "react"
+import Layout from "../components/layout"
+
+export default () => <Layout />

src/pages/treff.js

@@ -0,0 +1,10 @@
+import React from "react"
+import Layout from "../components/layout"
+
+export default () => (
+  <Layout>
+    <h2>
+      Raumtatus <span style={{ color: `green` }}>OFFEN</span>
+    </h2>
+  </Layout>
+)

src/pages/verein.js

@@ -0,0 +1,4 @@
+import React from "react"
+import Layout from "../components/layout"
+
+export default () => <Layout />

src/styles/global.css

@@ -0,0 +1,20 @@
+html {
+  background-color: #0e1e38;
+  color: #eeeeee;
+  margin: 0;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  position: relative;
+  margin: 0;
+  padding-bottom: 6rem;
+  min-height: 100%;
+}