From 1fd5ec85022eae26f3b9fa182775d470ea27a014 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benjamin=20Yule=20B=C3=A4dorf?= Date: Fri, 23 Feb 2024 17:13:52 +0100 Subject: [PATCH] v2: improve design, add pages, delete old data --- _data/navigationItems.yml | 12 ++--- _data/people/avd.yml | 13 ------ _data/people/byb.yml | 17 ------- _data/people/cmp.yml | 7 --- _data/people/jfw.yml | 15 ------- _data/people/jjg.yml | 7 --- _data/people/klz.yml | 7 --- _data/people/ks.yml | 7 --- _data/people/lv.yml | 7 --- _data/people/sd.yml | 7 --- _data/thingsWeAre.yml | 5 --- _includes/layouts/homepage.njk | 3 +- collaborate.yml | 9 ++++ kollektiv.yml => collective.yml | 0 datenschutz.yml | 9 ---- impressum.yml | 18 -------- index.yml | 13 +++--- projects.yml | 14 ++++++ space.yml | 10 +++++ styles.css | 79 +++++++++++++++++++++++++-------- 20 files changed, 108 insertions(+), 151 deletions(-) delete mode 100644 _data/people/avd.yml delete mode 100644 _data/people/byb.yml delete mode 100644 _data/people/cmp.yml delete mode 100644 _data/people/jfw.yml delete mode 100644 _data/people/jjg.yml delete mode 100644 _data/people/klz.yml delete mode 100644 _data/people/ks.yml delete mode 100644 _data/people/lv.yml delete mode 100644 _data/people/sd.yml delete mode 100644 _data/thingsWeAre.yml create mode 100644 collaborate.yml rename kollektiv.yml => collective.yml (100%) delete mode 100644 datenschutz.yml delete mode 100644 impressum.yml create mode 100644 projects.yml create mode 100644 space.yml diff --git a/_data/navigationItems.yml b/_data/navigationItems.yml index fe015b9..a0304a5 100644 --- a/_data/navigationItems.yml +++ b/_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 diff --git a/_data/people/avd.yml b/_data/people/avd.yml deleted file mode 100644 index a1a2caa..0000000 --- a/_data/people/avd.yml +++ /dev/null @@ -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' - diff --git a/_data/people/byb.yml b/_data/people/byb.yml deleted file mode 100644 index 9e59a11..0000000 --- a/_data/people/byb.yml +++ /dev/null @@ -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' diff --git a/_data/people/cmp.yml b/_data/people/cmp.yml deleted file mode 100644 index 4575eae..0000000 --- a/_data/people/cmp.yml +++ /dev/null @@ -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' diff --git a/_data/people/jfw.yml b/_data/people/jfw.yml deleted file mode 100644 index 707aaeb..0000000 --- a/_data/people/jfw.yml +++ /dev/null @@ -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' diff --git a/_data/people/jjg.yml b/_data/people/jjg.yml deleted file mode 100644 index 7bc962c..0000000 --- a/_data/people/jjg.yml +++ /dev/null @@ -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' diff --git a/_data/people/klz.yml b/_data/people/klz.yml deleted file mode 100644 index 5298681..0000000 --- a/_data/people/klz.yml +++ /dev/null @@ -1,7 +0,0 @@ -name: Katharina Lenz -pronouns: she/her -role: -contactOptions: - - name: mail - value: klz@miom.space - link: 'mailto:klz@miom.space' diff --git a/_data/people/ks.yml b/_data/people/ks.yml deleted file mode 100644 index 23d47e0..0000000 --- a/_data/people/ks.yml +++ /dev/null @@ -1,7 +0,0 @@ -name: Katharina Schreiber -pronouns: she/her -role: -contactOptions: - - name: mail - value: ks@miom.space - link: 'mailto:ks@miom.space' diff --git a/_data/people/lv.yml b/_data/people/lv.yml deleted file mode 100644 index c8b1455..0000000 --- a/_data/people/lv.yml +++ /dev/null @@ -1,7 +0,0 @@ -name: Lea Vieler -pronouns: she/her -role: -contactOptions: - - name: mail - value: lv@miom.space - link: 'mailto:lv@miom.space' diff --git a/_data/people/sd.yml b/_data/people/sd.yml deleted file mode 100644 index eeb4d10..0000000 --- a/_data/people/sd.yml +++ /dev/null @@ -1,7 +0,0 @@ -name: Slavica Dretvić -pronouns: she/her -role: -contactOptions: - - name: mail - value: sd@miom.space - link: 'mailto:sd@miom.space' diff --git a/_data/thingsWeAre.yml b/_data/thingsWeAre.yml deleted file mode 100644 index 21e1430..0000000 --- a/_data/thingsWeAre.yml +++ /dev/null @@ -1,5 +0,0 @@ -- 'an off' -- 'a studio' -- 'an art' -- 'a tech' -- 'a people' diff --git a/_includes/layouts/homepage.njk b/_includes/layouts/homepage.njk index a550494..dc857ac 100644 --- a/_includes/layouts/homepage.njk +++ b/_includes/layouts/homepage.njk @@ -7,8 +7,7 @@
-

Hi! Wir sind das MiOM

-

Wir schaffen bezahlbaren Raum in dem wir gemeinsam interdisziplinär arbeiten und experimentieren.

+ {{ tagline | md | safe }}
{% for card in cards %} diff --git a/collaborate.yml b/collaborate.yml new file mode 100644 index 0000000..765585a --- /dev/null +++ b/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 diff --git a/kollektiv.yml b/collective.yml similarity index 100% rename from kollektiv.yml rename to collective.yml diff --git a/datenschutz.yml b/datenschutz.yml deleted file mode 100644 index 93f8d91..0000000 --- a/datenschutz.yml +++ /dev/null @@ -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. -' diff --git a/impressum.yml b/impressum.yml deleted file mode 100644 index 1d0dc1c..0000000 --- a/impressum.yml +++ /dev/null @@ -1,18 +0,0 @@ -layout: layouts/default.njk - -title: Impressum - -text: ' -Verantwortlich für Inhalte: - - -MiOM Kreativraum e.V.
-Vorstand: Slavica Dretvić, Constantin Pannwitz, Jhonas Wernery
-
-Wilhelm-Mauser-Straße 47
-Halle 5
-50827 Köln
- - -contact@miom.space -' diff --git a/index.yml b/index.yml index 7a1c493..58f5b9c 100644 --- a/index.yml +++ b/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 diff --git a/projects.yml b/projects.yml new file mode 100644 index 0000000..72c32f4 --- /dev/null +++ b/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 + ' diff --git a/space.yml b/space.yml new file mode 100644 index 0000000..7e7604a --- /dev/null +++ b/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) diff --git a/styles.css b/styles.css index 157a300..c616dc3 100644 --- a/styles.css +++ b/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); - bottom: calc(-100vh + 2rem + var(--box-padding)); + top: calc(var(--box-padding) + 1px); + 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; }