v2: improve design, add pages, delete old data

_data/navigationItems.yml

@@ -1,17 +1,17 @@
 - text: MiOM
   link: /
-- text: collaborate
+- text: Mit uns machen
   link: /collaborate
 - text: Projekte und Veranstaltungen
-  link: /projekte
+  link: /projects
 - text: der Raum
-  link: /raum
+  link: /space
 - text: das Kollektiv
-  link: /kollektiv
+  link: /collective
 - divider: true
 - text: Impressum
-  link: /impressum
+  link: /imprint
 - text: Datenschutz
-  link: /datenschutz
+  link: /privacy-policy
 - text: Source code
   link: https://git.pub.solar/MiOM/miom.space

_data/people/avd.yml

@@ -1,13 +0,0 @@
-name: Alexander von Dombois
-pronouns: he/him
-role: Product Design
-contactOptions:
-  - name: mail
-    value: avd@miom.space
-    link: 'mailto:avd@miom.space'
-  - name: insta
-    value: '@alexandervondombois'
-  - name: web
-    value: alexandervondombois.de
-    link: 'https://alexandervondombois.de'
-

_data/people/byb.yml

@@ -1,17 +0,0 @@
-name: Benjamin Bädorf
-pronouns: he/him
-role: Software Engineer
-contactOptions:
-  - name: mail
-    value: byb@miom.space
-    link: 'mailto:byb@miom.space'
-  - name: git
-    value: '@b12f'
-    link: 'https://git.pub.solar/b12f'
-  - name: gpg
-    value: 4332 E0D0 2B21 4D31 376C  366E 4406 E80E 13CD 656C
-  - name: matrix
-    value: '@b12f:pub.solar'
-  - name: web
-    value: benjaminbaedorf.eu
-    link: 'https://benjaminbaedorf.eu'

_data/people/cmp.yml

@@ -1,7 +0,0 @@
-name: Constantin Pannwitz
-pronouns: he/him
-role: Product Designer
-contactOptions:
-  - name: mail
-    value: cmp@miom.space
-    link: 'mailto:cmp@miom.space'

_data/people/jfw.yml

@@ -1,15 +0,0 @@
-name: Jhonas Wernery
-pronouns: he/him
-role: System Administrator
-contactOptions:
-  - name: mail
-    value: jfw@miom.space
-    link: 'mailto:jfw@miom.space'
-  - name: git
-    value: '@teutat3s'
-    link: 'https://git.pub.solar/teutat3s'
-  - name: matrix
-    value: '@teutat3s:pub.solar'
-  - name: mastodon
-    value: '@teutat3s@pub.solar'
-    link: 'https://mastodon.pub.solar/@teutat3s'

_data/people/jjg.yml

@@ -1,7 +0,0 @@
-name: Julian Gerullis
-pronouns: he/him
-role: Product Designer
-contactOptions:
-  - name: mail
-    value: jjg@miom.space
-    link: 'mailto:jjg@miom.space'

_data/people/klz.yml

@@ -1,7 +0,0 @@
-name: Katharina Lenz
-pronouns: she/her
-role: 
-contactOptions:
-  - name: mail
-    value: klz@miom.space
-    link: 'mailto:klz@miom.space'

_data/people/ks.yml

@@ -1,7 +0,0 @@
-name: Katharina Schreiber
-pronouns: she/her
-role: 
-contactOptions:
-  - name: mail
-    value: ks@miom.space
-    link: 'mailto:ks@miom.space'

_data/people/lv.yml

@@ -1,7 +0,0 @@
-name: Lea Vieler
-pronouns: she/her
-role: 
-contactOptions:
-  - name: mail
-    value: lv@miom.space
-    link: 'mailto:lv@miom.space'

_data/people/sd.yml

@@ -1,7 +0,0 @@
-name: Slavica Dretvić
-pronouns: she/her
-role: 
-contactOptions:
-  - name: mail
-    value: sd@miom.space
-    link: 'mailto:sd@miom.space'

_data/thingsWeAre.yml

@@ -1,5 +0,0 @@
-- 'an off'
-- 'a studio'
-- 'an art'
-- 'a tech'
-- 'a people'

_includes/layouts/homepage.njk

@@ -7,8 +7,7 @@
     </div>
 
     <div class="mi-tagline">
-      <h1>Hi! Wir sind das MiOM</h1>
+      {{ tagline | md | safe }}
-      <p>Wir schaffen bezahlbaren Raum in dem wir gemeinsam interdisziplinär arbeiten und experimentieren.</p>
     </div>
 
     {% for card in cards %}

collaborate.yml

@@ -0,0 +1,9 @@
+layout: layouts/default.njk
+
+title: Mit uns machen
+
+text: |
+  - Was machen wir so?
+  - Wen suchen wir?
+  - Wie findest du zu uns? > Link auf Standort
+  - Was kostet das? wichtige info > solidarisches finanzierungskonzept

datenschutz.yml

@@ -1,9 +0,0 @@
-layout: layouts/default.njk
-
-title: Datenschutz
-
-text: '
-Diese Webseite wird ohne Logdateien betrieben. Wir benutzen keine Cookies, speichern keine persönlichen Daten, und analysieren kein Nutzerverhalten.
-
-Schaue ins [Impressum](/impressum) für Kontaktdaten.
-'

impressum.yml

@@ -1,18 +0,0 @@
-layout: layouts/default.njk
-
-title: Impressum
-
-text: '
-Verantwortlich für Inhalte:
-
-
-<b>MiOM Kreativraum e.V.</b><br>
-Vorstand: Slavica Dretvić, Constantin Pannwitz, Jhonas Wernery<br>
-<br>
-Wilhelm-Mauser-Straße 47<br>
-Halle 5<br>
-50827 Köln<br>
-
-
-<a href="mailto:contact@miom.space">contact@miom.space</a>
-'

index.yml

@@ -1,28 +1,31 @@
 layout: layouts/homepage.njk
 
-tagline: Wir schaffen bezahlbaren Raum in dem wir gemeinsam und interdisziplinär arbeiten und experimentieren.
+tagline: |
+  # Hi!
+  
+  Wir sind das MiOM Kollektiv. Wir schaffen bezahlbaren Raum in dem wir gemeinsam und interdisziplinär arbeiten und experimentieren.
 
 cards:
-  - text: collaborate
+  - text: Mit uns machen
     link: ./collaborate
     image:
       alt: "Eine Gruppe Menschen sitzt an einem Tisch und arbeitet"
       url: /img/hakken.jpeg
 
   - text: Projekte und Veranstaltungen
-    link: ./projekte
+    link: ./projects
     image:
       alt: "Eine Gruppe Menschen sitzt an einem Tisch und arbeitet"
       url: /img/aussenchill.jpg
 
   - text: der Raum
-    link: ./raum
+    link: ./space
     image:
       alt: "Die Werkstatt vom MiOM. Es stehen einige Geräte wie Bohrmaschinen und Sägen rum."
       url: /img/werkstatt.jpg
 
   - text: das Kollektiv
-    link: ./kollektiv
+    link: ./collective
     image:
       alt: "Eine Gruppe Menschen sitzt an einem Tisch und arbeitet"
       url: /img/crowd.jpg

projects.yml

@@ -0,0 +1,14 @@
+layout: layouts/default.njk
+
+title: Projekte
+
+text: '
+- Termine (Wollen wir die Plenumszeiten veröffentlichen?)
+
+- Bisherige Projekte:
+    * Workshops
+    * Veranstaltungen (machwerkschau)
+    * hackathon pub.solar
+    * Kunstprojekte ?
+    * Exhibitionen
+  '

space.yml

@@ -0,0 +1,10 @@
+layout: layouts/default.njk
+
+title: Der Raum
+
+text: |
+  - Foto vom Raum oder interactive visuelle Lösung (Collagenmäßig - Grafickerin)
+  - Standort
+  - Aufteilung in der Location
+  - Benutzungskonzept
+  - Infrastruktur (I-net, Holzwerkstatt, , Getränkeshop, Wasser für Künstler\*ins, elektronischer Hubwagen, DIY mittagstisch, besprechungsraum / Chillecke)

styles.css

@@ -6,29 +6,26 @@ html {
   --primary: #fd0ebf;
   --background: #fff;
   --foreground: #000;
-  --box-padding: 0.6rem;
+  --grayish: #777;
+  --box-padding: 1.5rem;
 
   font-family: 'Raleway', sans-serif;
 
-  font-size: 24px;
+  font-size: 16px;
   line-height: 175%;
 }
 
 @media screen and (min-width: 800px) {
   html {
-    --box-padding: 2rem;
+    --box-padding: 3rem;
   }
 }
 
 *:focus {
-  outline: 5px dashed var(--primary);
+  outline: 1px dashed var(--grayish);
   outline-offset: -5px;
 }
 
-a, a:visited {
-  color: var(--primary);
-}
-
 .mi-page {
   margin: 0;
   padding: 0;
@@ -107,7 +104,7 @@ a, a:visited {
   width: var(--box-padding);
   top: 0;
   left: 0;
-  bottom: 0;
+  height: calc(100% - 2 * var(--box-padding) - 2px);
   border-left: 0;
   margin-top: var(--box-padding);
   margin-bottom: var(--box-padding);
@@ -122,7 +119,7 @@ a, a:visited {
   width: var(--box-padding);
   top: 0;
   right: 0;
-  bottom: 0;
+  height: calc(100% - 2 * var(--box-padding) - 2px);
   border-right: 0;
   margin-top: var(--box-padding);
   margin-bottom: var(--box-padding);
@@ -139,7 +136,7 @@ a, a:visited {
 }
 
 .mi-nav {
-  border-bottom: 1px solid var(--foreground);
+  border: 0;
   position: sticky;
   top: 0;
   left: 0;
@@ -152,15 +149,24 @@ a, a:visited {
 .mi-nav--toggle {
   margin-left: calc(var(--box-padding) + 1px);
   padding: 0 1rem;
-  height: 2rem;
+  height: 2.4rem;
   display: flex;
   justify-content: center;
   align-items: center;
   border: 0;
   border-right: 1px solid var(--foreground);
+  border-bottom: 1px solid var(--foreground);
   background: var(--background);
-  font-size: 1rem;
+  font-size: 1.25rem;
   cursor: pointer;
+  z-index: 1;
+}
+
+@media screen and (min-width: 800px) {
+  .mi-nav--toggle {
+    border-bottom: 0;
+    height: var(--box-padding);
+  }
 }
 
 .mi-nav--toggle:hover {
@@ -172,15 +178,29 @@ a, a:visited {
   display: none;
   padding: var(--box-padding) 0;
   margin: 0;
-  position: absolute;
+  position: fixed;
   background: var(--background);
-  border-bottom: 1px solid var(--foreground);
   left: calc(var(--box-padding) + 1px);
   right: calc(var(--box-padding) + 1px);
-  top: calc(2rem + 1px);
+  top: calc(var(--box-padding) + 1px);
-  bottom: calc(-100vh + 2rem + var(--box-padding));
+  bottom: calc(var(--box-padding) + 1px);
 }
 
+@media screen and (min-width: 800px) {
+  .mi-nav--list {
+    font-size: 1.5rem;
+    line-height: 1.5;
+  }
+}
+
+
+@media screen and (min-width: 800px) {
+  .mi-nav--toggle {
+    border-bottom: 0;
+  }
+}
+
+
 .mi-nav_open .mi-nav--list {
   display: flex;
   flex-direction: column;
@@ -215,8 +235,18 @@ a, a:visited {
   margin-bottom: var(--box-padding);
 }
 
+.mi-main a,
+.mi-main  a:visited {
+  color: var(--primary);
+}
+
 .mi-main_content {
-  padding: var(--box-padding);
+  padding: var(--box-padding) 0;
+}
+
+.mi-main_content > * {
+  margin: calc(0.5 * var(--box-padding)) var(--box-padding);
+  max-width: 800px;
 }
 
 .mi-cards {
@@ -265,14 +295,25 @@ a, a:visited {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 0.25rem 1rem;
+  padding: 0.5rem 2rem;
   min-height: 300px;
+  font-size: 2rem;
+  line-height: 1.75;
+}
+
+.mi-tagline > * {
+  margin-bottom: 0;
+}
+
+.mi-tagline > *:first-child {
+  margin-top: 0;
 }
 
 .mi-card {
   background: var(--background);
   position: relative;
   height: 600px;
+  max-height: 70vh;
   padding: 1rem;
 }