From 961ffc722cd776d73f80f53e1ff1aa93d5d65367 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benjamin=20Yule=20B=C3=A4dorf?= Date: Sat, 17 Feb 2024 15:07:20 +0100 Subject: [PATCH] v2/design: now with more lines --- _data/navigationItems.yml | 27 +++-- _includes/layouts/default.njk | 22 +++- _includes/layouts/homepage.njk | 3 +- _includes/navigation.njk | 30 ++--- datenschutz.yml | 9 ++ impressum.yml | 18 +++ index.yml | 16 +-- kollektiv.yml | 18 +++ privacy-policy.yml | 2 +- styles.css | 195 ++++++++++++++++++++++++++++----- 10 files changed, 269 insertions(+), 71 deletions(-) create mode 100644 datenschutz.yml create mode 100644 impressum.yml create mode 100644 kollektiv.yml diff --git a/_data/navigationItems.yml b/_data/navigationItems.yml index b968674..fe015b9 100644 --- a/_data/navigationItems.yml +++ b/_data/navigationItems.yml @@ -1,10 +1,17 @@ -- text: Das MiOM - link: '#' -- text: Zusammenarbeiten - link: '#' -- text: Projekte - link: '#' -- text: Der Raum - link: '#' -- text: Das Kollektiv - link: '#' +- text: MiOM + link: / +- text: collaborate + link: /collaborate +- text: Projekte und Veranstaltungen + link: /projekte +- text: der Raum + link: /raum +- text: das Kollektiv + link: /kollektiv +- divider: true +- text: Impressum + link: /impressum +- text: Datenschutz + link: /datenschutz +- text: Source code + link: https://git.pub.solar/MiOM/miom.space diff --git a/_includes/layouts/default.njk b/_includes/layouts/default.njk index a788ce2..7e58955 100644 --- a/_includes/layouts/default.njk +++ b/_includes/layouts/default.njk @@ -21,14 +21,24 @@ {% endif %} - {% include "navigation.njk" %} - {% block main %} -
- {{ article | md | safe }} -
+ + + {% block navigation %} + {% include "navigation.njk" %} {% endblock %} - {% include "footer.njk" %} + {% block main %} +
+

{{ title }}

+ + {{ text | md | safe }} +
+ {% endblock %} diff --git a/_includes/layouts/homepage.njk b/_includes/layouts/homepage.njk index 22c95f1..a550494 100644 --- a/_includes/layouts/homepage.njk +++ b/_includes/layouts/homepage.njk @@ -7,7 +7,8 @@
-

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

+

Hi! Wir sind das MiOM

+

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

{% for card in cards %} diff --git a/_includes/navigation.njk b/_includes/navigation.njk index 5fa6c45..86d8d6d 100644 --- a/_includes/navigation.njk +++ b/_includes/navigation.njk @@ -1,22 +1,22 @@ diff --git a/datenschutz.yml b/datenschutz.yml new file mode 100644 index 0000000..93f8d91 --- /dev/null +++ b/datenschutz.yml @@ -0,0 +1,9 @@ +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 new file mode 100644 index 0000000..1d0dc1c --- /dev/null +++ b/impressum.yml @@ -0,0 +1,18 @@ +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 82b8775..7a1c493 100644 --- a/index.yml +++ b/index.yml @@ -3,26 +3,26 @@ layout: layouts/homepage.njk tagline: Wir schaffen bezahlbaren Raum in dem wir gemeinsam und interdisziplinär arbeiten und experimentieren. cards: - - text: Zusammenarbeiten + - text: collaborate link: ./collaborate image: alt: "Eine Gruppe Menschen sitzt an einem Tisch und arbeitet" url: /img/hakken.jpeg - - text: Projekte - link: ./projects + - text: Projekte und Veranstaltungen + link: ./projekte image: alt: "Eine Gruppe Menschen sitzt an einem Tisch und arbeitet" - url: /img/poledance.jpg + url: /img/aussenchill.jpg - - text: Der Raum - link: ./the-room + - text: der Raum + link: ./raum 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: ./the-collective + - text: das Kollektiv + link: ./kollektiv image: alt: "Eine Gruppe Menschen sitzt an einem Tisch und arbeitet" url: /img/crowd.jpg diff --git a/kollektiv.yml b/kollektiv.yml new file mode 100644 index 0000000..45be740 --- /dev/null +++ b/kollektiv.yml @@ -0,0 +1,18 @@ +layout: layouts/default.njk + +title: Das Kollektiv + +text: | + + > Each one teach one + + ## Kurze Geschichte + + Entstanden sind wir 2020, im damaligen [Wandelwerk](https://wandelwerk.koeln/). Nachdem wir dort ausziehen mussten sind wir ins Gewächshaus umgezogen. + + 2022 haben wir einen Verein gegründet um die finanziellen und organisatorischen Aufgaben in einer Basisdemokratischen Struktur unter zu bringen. + + ## Organisatorisches + + + Findest du hier. diff --git a/privacy-policy.yml b/privacy-policy.yml index d8f14b4..52fdc2e 100644 --- a/privacy-policy.yml +++ b/privacy-policy.yml @@ -3,7 +3,7 @@ layout: layouts/default.njk title: Privacy policy text: ' -We run on a no-logging policy. We do not track or keep any personal data. +This website runs on a no-logging policy. We do not track or keep any personal data when viewing this site. See [our imprint](/imprint) for contact information. ' diff --git a/styles.css b/styles.css index aa3ea5d..157a300 100644 --- a/styles.css +++ b/styles.css @@ -6,7 +6,7 @@ html { --primary: #fd0ebf; --background: #fff; --foreground: #000; - --box-padding: 1rem 2rem; + --box-padding: 0.6rem; font-family: 'Raleway', sans-serif; @@ -14,8 +14,19 @@ html { line-height: 175%; } +@media screen and (min-width: 800px) { + html { + --box-padding: 2rem; + } +} + *:focus { - outline: 1px dashed var(--primary); + outline: 5px dashed var(--primary); + outline-offset: -5px; +} + +a, a:visited { + color: var(--primary); } .mi-page { @@ -28,44 +39,160 @@ html { width: 100vw; } +.mi-border { + pointer-events: none; + z-index: 10; +} + +.mi-border > * { + pointer-events: all; +} + +.mi-border--top, +.mi-border--bottom, +.mi-border--left, +.mi-border--right { + background: var(--background); + position: fixed; + overflow: hidden; + border: 1px solid var(--foreground); + box-sizing: content-box; + font-size: calc(0.5 * var(--box-padding)); + line-height: 150%; +} + +.mi-border--top::before, +.mi-border--bottom::before, +.mi-border--left::before, +.mi-border--right::before { + display: flex; + align-items: center; + white-space: nowrap; + content: 'each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one'; + color: black; + height: var(--box-padding); +} + +.mi-border--top::before, +.mi-border--bottom::before { + width: 100%; +} + +.mi-border--left::before, +.mi-border--right::before { + width: 10000vh; +} + +.mi-border--top { + height: var(--box-padding); + top: 0; + left: 0; + right: 0; + border-top: 0; + margin-left: var(--box-padding); + margin-right: var(--box-padding); +} + +.mi-border--bottom { + height: var(--box-padding); + bottom: 0; + left: 0; + right: 0; + border-bottom: 0; + margin-left: var(--box-padding); + margin-right: var(--box-padding); +} + +.mi-border--left { + width: var(--box-padding); + top: 0; + left: 0; + bottom: 0; + border-left: 0; + margin-top: var(--box-padding); + margin-bottom: var(--box-padding); +} + +.mi-border--left::before { + transform-origin: 0 0; + transform: translateY(100vh) rotateZ(-90deg); +} + +.mi-border--right { + width: var(--box-padding); + top: 0; + right: 0; + bottom: 0; + border-right: 0; + margin-top: var(--box-padding); + margin-bottom: var(--box-padding); +} + +.mi-border--right::before { + transform-origin: 0 0; + transform: translateX(var(--box-padding)) translateY(-17px) rotateZ(90deg); +} + +.mi-border--bottom::before { + transform: rotateZ(-180deg) translateX(-34px); + text-align: right; +} + .mi-nav { border-bottom: 1px solid var(--foreground); position: sticky; top: 0; left: 0; width: 100vw; - background: var(--background); z-index: 100; + display: flex; + align-items: stretch; } .mi-nav--toggle { - padding: 0.25rem 1rem; + margin-left: calc(var(--box-padding) + 1px); + padding: 0 1rem; + height: 2rem; + display: flex; + justify-content: center; + align-items: center; + border: 0; + border-right: 1px solid var(--foreground); + background: var(--background); + font-size: 1rem; + cursor: pointer; } -.mi-nav--toggle-checky { - visibility: hidden; +.mi-nav--toggle:hover { + color: var(--primary); } .mi-nav--list { list-style: none; display: none; - padding: 0; + padding: var(--box-padding) 0; margin: 0; position: absolute; background: var(--background); border-bottom: 1px solid var(--foreground); - left: 0; - right: 0; + left: calc(var(--box-padding) + 1px); + right: calc(var(--box-padding) + 1px); + top: calc(2rem + 1px); + bottom: calc(-100vh + 2rem + var(--box-padding)); } -.mi-nav--toggle-checky:checked+.mi-nav--list { +.mi-nav_open .mi-nav--list { display: flex; flex-direction: column; } +.mi-nav--divider { + flex-grow: 1; +} + .mi-nav--link { display: flex; - padding: 0.25rem 1rem; + padding: 0.25rem var(--box-padding); color: var(--foreground); text-decoration: none; } @@ -80,26 +207,16 @@ html { text-decoration: underline; } -@media screen and (min-width: 800px) { - .mi-nav--toggle, .mi-nav--toggle-checky { - display: none; - } - - .mi-nav--list { - display: flex; - position: static; - border-bottom: 0; - } - - .mi-nav--item { - flex-grow: 1; - } -} - .mi-main { background: var(--background); - margin: 0; + margin: 0 var(--box-padding); flex-grow: 1; + position: relative; + margin-bottom: var(--box-padding); +} + +.mi-main_content { + padding: var(--box-padding); } .mi-cards { @@ -146,8 +263,10 @@ html { .mi-tagline { background: var(--background); display: flex; - align-items: center; + flex-direction: column; + justify-content: center; padding: 0.25rem 1rem; + min-height: 300px; } .mi-card { @@ -157,6 +276,11 @@ html { padding: 1rem; } +.mi-card:hover, +.mi-card:focus { + z-index: 1; +} + .mi-card--background { width: calc(100% - 2rem); height: calc(100% - 2rem); @@ -164,11 +288,17 @@ html { top: 1rem; left: 1rem; object-fit: cover; + filter: grayscale(100%); +} + +.mi-card:focus .mi-card--background, +.mi-card:hover .mi-card--background { + filter: grayscale(0%); } .mi-card--text { color: var(--background); - background: var(--primary); + background: var(--foreground); display: flex; z-index: 1; padding: 0.25rem 1rem; @@ -178,9 +308,14 @@ html { right: 2rem; } +.mi-card:hover .mi-card--text { + color: var(--primary); +} + .mi-footer { border-top: 1px solid var(--foreground); background: var(--background); + margin: var(--box-padding); } .mi-footer--links {