Merge pull request 'fix: add word-break to fix hyphenation on iOS' (#13 ) from fix-hyphens-for-webkit into main

Reviewed-on: #13
fix: add word-break to fix hyphenation on iOS
2024-04-16 14:49:27 +00:00 · 2024-04-15 19:12:02 +02:00 · 2024-04-15 09:35:47 +00:00 · 2024-04-15 11:28:54 +02:00 · 2024-04-14 16:20:00 +00:00 · 2024-04-14 18:18:26 +02:00
82 changed files with 2572 additions and 1957 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -1,3 +1,5 @@
+tags
+.direnv
 ./_site
 ./deploy.sh
 ./Dockerfile
--- a/.drone.yml
+++ b/.drone.yml
@ -1,60 +1,33 @@
 kind: pipeline
 type: docker
-name: check-build
+name: default

 steps:
-  - name: check
-    image: denoland/deno:alpine-1.30.3
-    commands:
-      - ./build.sh
-    when:
+  - name: build
+    when: 
      event:
-      - push
+        - push
+        - pull_request
+    image: denoland/deno:alpine-1.40.2
+    commands:
+      - deno task build

-  - name: build docker image
-    image: plugins/docker
+  - name: publish
+    when: 
+      event:
+        - push
+      branch:
+        - main
+    image: appleboy/drone-scp
    settings:
-      registry: registry.greenbaum.cloud
-      repo: registry.greenbaum.cloud/pub_solar/miom.space
-      tags:
-        - latest
-        - ${DRONE_TAG}
+      host: 10.7.6.1
+      port: 22
      username:
-        from_secret: docker_username
-      password:
-        from_secret: docker_password
-    when:
-      event:
-      - tag
-
---
-kind: pipeline
-type: docker
-name: deploy
-
-steps:
-  - name: deploy
-    image: registry.greenbaum.cloud/library/triton-docker
-    environment:
-      DOCKER_CONFIG:
-        from_secret: docker_config
-      TRITON_SSH_KEY:
-        from_secret: triton_ssh_key
-      TRITON_ACCOUNT:
-        from_secret: triton_account
-      TRITON_URL: https://lev-1.api.greenbaum.cloud
-      TRITON_KEY_ID: 59:9f:5a:6f:c4:e2:3b:32:7f:13:1f:de:b7:59:80:85
-      PROJECT_NAME: miomspace
-    commands:
-      - env
-      - mkdir -p /home/node/.ssh .config/docker
-      - echo -e "$TRITON_SSH_KEY" > /home/node/.ssh/id_rsa
-      - echo -e "$DOCKER_CONFIG" > .config/docker/config.json
-      - /usr/local/bin/docker-entrypoint.sh ./deploy.sh $DRONE_TAG
-
-trigger:
-    event:
-      - promote
-      - rollback
-    target:
-      - production
+        from_secret: ps_ssh_user
+      key:
+        from_secret: ps_ssh_key
+      source:
+        - ./_site/*
+      target: /srv/www/miom.space
+      overwrite: true
+      strip_components: 1
--- a/2
+++ b/2
@ -1,4 +1,4 @@
-FROM denoland/deno:alpine-1.30.3 as build-stage
+FROM denoland/deno:alpine-1.41.3 as build-stage

 WORKDIR /app

--- a/README.md
+++ b/README.md
@ -1,17 +1,36 @@
-Install Lume:
+# miom.space homepage

-https://lume.land/docs/overview/installation/
+This is the repository containing the code for https://miom.space.
+
+It is built using [lume](https://lume.land/) with JSX. To get started, make sure
+you have the [nix package manager](https://nixos.org/download.html) installed.
+Then you can start developing with:

 ```
-deno run -Ar https://deno.land/x/lume/init.ts
+nix develop
 ```

-Build the project:
+This will use a [nix devshell](https://nix.dev/tutorials/first-steps/ad-hoc-shell-environments#ad-hoc-envs)
+to create an environment that has [deno](https://deno.land/) and [lume](https://lume.land/)
+available.
+
+An alternative approach for loading all dependencies is [`direnv`](https://direnv.net).
+It basically runs `nix develop` for you, once you enter a directory which
+contains a `.envrc` file and allow it by running `direnv allow`. Once installed
+globally, run:
+
 ```
-./build.sh
+direnv allow
 ```

-Run a local version of the project:
+Just build the static site, results are in `_site`:
+
+```
+deno task build
+```
+
+To get a live development server, run:
+
 ```
 deno task serve
 ```
--- a/_config.ts
+++ b/_config.ts
@ -1,33 +1,61 @@
 import lume from "lume/mod.ts";
+import inline from "lume/plugins/inline.ts";
 import postcss from "lume/plugins/postcss.ts";

 const markdown = { options: { breaks: true } };

 const site = lume({}, { markdown });

+site.use(inline());
+
+const languages = [
+  {
+    name: 'deutsch',
+    slug: 'de',
+    urlPrefix: '',
+  },
+  {
+    name: 'english',
+    slug: 'en',
+    urlPrefix: 'en',
+  }
+]
+site.data('languages', languages);
+
+site.preprocess([ '.md' ], (pages) => {
+  for (const page of pages) {
+    const urlParts = (page.data.url || '').replace(/^\/|\/$/g, '').split('/');
+    const langPrefix = urlParts[0];
+    const currentLang = (() => {
+      if (langPrefix.length === 2) {
+        return languages.find(lang => lang.urlPrefix === langPrefix);
+      }
+
+      return languages.find(lang => lang.urlPrefix.length === 0);
+    })() || languages[0];
+
+    page.data.language = currentLang;
+    page.data.otherLang = languages.find(l => l.slug !== currentLang.slug);
+    page.data.baseURL = page.data.url.replace(new RegExp(`^\\/${currentLang.slug}`), '');
+  }
+});
+
 site.use(postcss());

-site.loadAssets([
-  ".png",
-  ".jpg",
-  ".svg",
-  ".pdf",
-  ".woff2",
-  ".woff",
-  ".ttf",
-  ".otf",
-  ".js",
-  ".txt",
-]);
+site.loadAssets([ ".js" ]);
+
+site.copy("fonts");
+site.copy("img");
+site.copy("favicon.ico");

 site.filter("title", (value = '') => value + (value ? " | " : "") + "MiOM");

-site.filter("objectToArray", (value = {}) => Object.keys(value)
-  .sort()
-  .map(key => value[key])
-  .filter(val => !!val)
+site.ignore(
+  ".direnv",
+  "README.md",
+  "CHANGELOG.md",
+  "LICENSE.md",
+  "docker-compose.yml",
 );

-site.ignore("README.md", "CHANGELOG.md", "LICENSE.md", "docker-compose.yml");
-
 export default site;
--- a/_data/cssCacheBust.yml
+++ b/_data/cssCacheBust.yml
@ -1 +1 @@
-'?v=1'
+'?v=3'
--- a/_data/navigationItems.yml
+++ b/_data/navigationItems.yml
@ -0,0 +1,35 @@
+- text:
+    en: MiOM
+    de: MiOM
+  link: /
+- text:
+    en: collaborate
+    de: Collaborate
+  link: /collaborate
+- text:
+    en: projects and events
+    de: Projekte und Veranstaltungen
+  link: /projects
+- text: 
+    en: the space
+    de: der Raum
+  link: /space
+- text: 
+    en: the collective
+    de: das Kollektiv
+  link: /collective
+- text: 
+    en: contact
+    de: Kontakt
+  link: /contact
+- divider: true
+- text:
+    en: imprint
+    de: Impressum
+  link: /imprint
+  slight: true
+- text:
+    en: privacy policy
+    de: Datenschutz
+  link: /privacy-policy
+  slight: true
--- a/_data/people/avd.yml
+++ b/_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'
-
--- a/_data/people/byb.yml
+++ b/_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.b12f.io/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'
--- a/_data/people/cmp.yml
+++ b/_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'
--- a/_data/people/jfw.yml
+++ b/_data/people/jfw.yml
@ -1,12 +0,0 @@
-name: Jhonas Wernery
-pronouns: he/him
-role: Systems Engineer
-contactOptions:
-  - name: mail
-    value: jfw@miom.space
-    link: 'mailto:jfw@miom.space'
-  - name: git
-    value: '@teutat3s'
-    link: 'https://git.b12f.io/teutat3s'
-  - name: matrix
-    value: '@teutat3s:pub.solar'
--- a/_data/people/jjg.yml
+++ b/_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'
--- a/_data/people/klz.yml
+++ b/_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'
--- a/_data/people/ks.yml
+++ b/_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'
--- a/_data/people/lv.yml
+++ b/_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'
--- a/_data/people/sd.yml
+++ b/_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'
--- a/_data/socialLinks.yml
+++ b/_data/socialLinks.yml
@ -0,0 +1,8 @@
+- text: Mastodon
+  icon: /img/mastodon.svg
+  link: https://mastodon.pub.solar/@miomspace
+  me: true
+- text: Instagram
+  icon: /img/instagram.svg
+  link: https://www.instagram.com/miom.space/
+  me: false
--- a/_data/thingsWeAre.yml
+++ b/_data/thingsWeAre.yml
@ -1,5 +0,0 @@
- 'an off'
- 'a studio'
- 'an art'
- 'a tech'
- 'a people'
--- a/_includes/border.vto
+++ b/_includes/border.vto
@ -0,0 +1,6 @@
+<div class="mi-border" aria-hidden="true">
+  <div class="mi-border--top"></div>
+  <div class="mi-border--left"></div>
+  <div class="mi-border--right"></div>
+  <div class="mi-border--bottom"></div>
+</div>
--- a/_includes/default.vto
+++ b/_includes/default.vto
@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="{{ language.slug }}">
+  <head>
+    <meta charset="utf-8" />
+    <title>{{ title |> title |> safe }}</title>
+
+    <link rel="shortcut icon" href="/favicon.ico" />
+
+    <meta name="theme-color" content="{{ themeColor }}" id="theme-color" />
+    <meta name="description" content="MiOM Kreativraum is a creative space in Cologne, Germany">
+
+    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" type="text/css" href="/styles.css{{ cssCacheBust }}" media="all" />
+    <link rel="stylesheet" type="text/css" href="/raleway.css{{ cssCacheBust }}" media="all" />
+
+    <link rel="alternate" hreflang="{{ otherLang.slug }}" href="{{ if otherLang.urlPrefix }}/{{otherLang.urlPrefix}}{{ /if }}{{ baseURL }}" />
+
+    {{ if extraStylesheets }}
+      {{ for extraStylesheet of extraStylesheets }}
+        <link rel="stylesheet" type="text/css" href="{{ extraStylesheet }}{{ cssCacheBust }}" media="all" />
+      {{ /for }}
+    {{ /if }}
+  </head>
+  <body class="mi-page">
+    {{ include "border.vto" }}
+
+    {{ include "navigation.vto" }}
+
+    {{ content }}
+  </body>
+</html>
--- a/_includes/footer.njk
+++ b/_includes/footer.njk
@ -1,9 +0,0 @@
-<footer class="mi-footer mi-content">
-  <nav>
-    <ul class="mi-footer--links">
-      <li><a href="/imprint" class="mi-footer--link">Imprint</a></li>
-      <li><a href="/privacy-policy" class="mi-footer--link">Privacy policy</a></li>
-      <li><a href="https://git.pub.solar/MiOM/miom.space" target="_blank" class="mi-footer--link">Source code</a></li>
-    </ul>
-  </nav>
-</footer>
--- a/_includes/header.njk
+++ b/_includes/header.njk
@ -1,7 +0,0 @@
-<header class="mi-header">
-  <h1 class="mi-header-headline">{{ title | safe }}</h1>
-
-  {% if header.subheadline %}
-    <p class="mi-header-subheadline">{{ header.subheadline | safe }}<p>
-  {% endif %}
-</header>
--- a/_includes/homepage.vto
+++ b/_includes/homepage.vto
@ -0,0 +1,39 @@
+{{ layout 'default.vto' }}
+  <main class="mi-main mi-cards">
+    <div class="mi-logo">
+      <picture>
+        <source media="(max-width: 500px)" srcset="/img/logo-500.jpg" />
+        <source media="(min-width: 501px) and (max-width: 700px)" srcset="/img/logo-700.jpg" />
+        <source media="(min-width: 701px) and (max-width: 799px)" srcset="/img/logo-1000.jpg" />
+        <source media="(min-width: 800px) and (max-width: 1400)" srcset="/img/logo-500.jpg" />
+        <source media="(min-width: 1401px) and (max-width: 1899px)" srcset="/img/logo-700.jpg" />
+        <source media="(min-width: 1900px)" srcset="/img/logo-1000.jpg" />
+        <img class="mi-logo--img" src="/img/logo-500.jpg" alt="MiOM Logo" />
+      </picture>
+    </div>
+
+    <div class="mi-tagline">
+      {{ tagline |> md |> safe }}
+    </div>
+
+    {{ for card of cards }}
+      <a
+        class="mi-card"
+        href="{{ card.link }}"
+      >
+        <picture>
+          <source media="(max-width: 500px)" srcset="/img/home-{{ card.image.url }}-500.jpg" />
+          <source media="(min-width: 501px)" srcset="/img/home-{{ card.image.url }}-700.jpg" />
+          <img
+            class="mi-card--background"
+            src="/img/home-{{ card.image.url }}-500.jpg"
+            alt="{{ card.image.alt }}"
+          />
+        </picture>
+        <div class="mi-card--text">{{ card.text }}</div>
+      </a>
+    {{ /for }}
+
+  </main>
+  <div class="mi-page-filler"></div>
+{{ /layout }}
--- a/_includes/layouts/default.njk
+++ b/_includes/layouts/default.njk
@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<html lang="{{ language }}">
-  <head>
-    <meta charset="utf-8" />
-    <title>{{ title | title | safe }}</title>
-
-    <link rel="shortcut icon" href="/favicon.png" />
-
-    <meta name="theme-color" content="{{ themeColor }}" id="theme-color" />
-    <meta name="description" content="MiOM Kreativraum is a creative space in Cologne, Germany">
-
-    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <link rel="stylesheet" type="text/css" href="/styles.css{{ cssCacheBust }}" media="all" />
-    <link rel="stylesheet" type="text/css" href="/raleway.css{{ cssCacheBust }}" media="all" />
-
-    {% if extraStylesheets %}
-      {% for extraStylesheet in extraStylesheets %}
-        <link rel="stylesheet" type="text/css" href="{{ extraStylesheet }}{{ cssCacheBust }}" media="all" />
-      {% endfor %}
-    {% endif %}
-  </head>
-  <body class="mi-page">
-    {% block header %}
-      <div class="mi-page--we-are mi-page--title mi-page--title_side">
-        <span class="mi-logo">MiOM Kreativraum</span>
-        <br>
-        <br>
-        <a href="/">Back home</a>
-      </div>
-      
-      <header class="mi-page--title mi-content">
-        <h1>{{ title }}</h1>
-      </header>
-    {% endblock %}
-
-    <main class="mi-main mi-content">
-      {% block main %}
-        {{ article | md | safe }}
-      {% endblock %}
-    </main>
-
-    {% include "footer.njk" %}
-  </body>
-</html>
--- a/_includes/layouts/homepage.njk
+++ b/_includes/layouts/homepage.njk
@ -1,20 +0,0 @@
-{% extends 'layouts/default.njk' %}
-
-{% block header %}
-  <div class="mi-page--we-are mi-page--title mi-page--title_side"><span class="mi-logo">MiOM 202</span> is</div>
-  <p class="mi-things-we-are mi-page--title mi-content">
-    {% for thingWeAre in thingsWeAre %}
-      <span class="mi-things-we-are--thing">
-        {{ thingWeAre }}<span class="mi-things-we-are--space">space</span>
-      </span>
-    {% endfor %}
-  </p>
-{% endblock %}
-
-{% block main %}
-  {{ introduction | md | safe }}
-
-  {% include "people.njk" %}
-
-  {{ cta | md | safe }}
-{% endblock %}
--- a/_includes/navigation.vto
+++ b/_includes/navigation.vto
@ -0,0 +1,47 @@
+<nav class="mi-nav" id="nav">
+  <button
+    type="button"
+    class="mi-nav--toggle"
+    onclick="document.getElementById('nav').classList.toggle('mi-nav_open')"
+  >_menu</button>
+
+  <ul class="mi-nav--list">
+    {{ for item of navigationItems }}
+      {{ if item.divider }}
+        <li class="mi-nav--divider" aria-hidden="true"></li>
+      {{ else }}
+        <li class="mi-nav--item">
+          <a
+            class="mi-nav--link {{ if item.slight }}mi-nav--link_slight{{ /if }}"
+            href="{{ if language.urlPrefix }}/{{ language.urlPrefix }}{{ /if }}{{ item.link }}"
+          >{{ item.text[language.slug] }}</a>
+        </li>
+      {{ /if }}
+    {{ /for }}
+  </ul>
+
+  <ul class="mi-nav--top">
+    {{ for item of socialLinks }}
+      <li class="mi-nav--top-item">
+        <a
+          class="mi-nav--top-item-link mi-nav--top-item-link_icon-only"
+          href="{{ item.link }}"
+          {{ if item.me }}rel="me"{{ /if }}
+        >
+          <img
+            src="{{ item.icon }}"
+            alt="{{ item.text }}"
+            class="mi-nav--top-item-icon"
+            inline
+          />
+        </a>
+      </li>
+    {{ /for }}
+    <li class="mi-nav--top-item">
+      <a
+        href="{{ if otherLang.urlPrefix }}/{{ otherLang.urlPrefix }}{{ /if }}{{ baseURL }}"
+        class="mi-nav--top-item-link"
+      >{{ otherLang.slug }}</a>
+    </li>
+  </ul>
+</nav>
--- a/_includes/people.njk
+++ b/_includes/people.njk
@ -1,28 +0,0 @@
-<ul class="mi-people">
-  {% for person in (people | objectToArray) %}
-    <li class="mi-person">
-      <h1 class="mi-person--name">
-        {{ person.name }}
-        <span class="mi-person--pronoun">({{ person.pronouns }})</span>
-      </h1>
-      <p class="mi-person--role">{{ person.role }}</p>
-      <details>
-        <summary class="mi-person--contact-toggle">Contact</summary>
-        <table class="mi-person--contact-options">
-          {% for contactOption in person.contactOptions %}
-            <tr class="mi-person--contact-option">
-              <td class="mi-person--contact-option-name">{{ contactOption.name }}:<td>
-              <td>
-                {% if contactOption.link %}
-                  <a href="{{ contactOption.link }}">{{ contactOption.value }}</a>
-                {% else %}
-                  {{ contactOption.value }}
-                {% endif %}
-              </td>
-            </tr>
-          {% endfor %}
-        </table>
-      </details>
-    </li>
-  {% endfor %}
-</ul>
--- a/_includes/text.vto
+++ b/_includes/text.vto
@ -0,0 +1,7 @@
+{{ layout 'default.vto' }}
+  <main class="mi-main mi-main_content">
+    <h1>{{ title }}</h1>
+
+    {{ content |> safe }}
+  </main>
+{{ /layout }}
--- a/build.sh
+++ b/build.sh
@ -1,13 +0,0 @@
-#!/usr/bin/env sh
-
-# Remove previous build leftovers
-rm -rf ./_site
-
-# Build, results are in ./_site
-deno task build
-
-# Put fonts in place
-cp -r ./fonts ./_site/
-
-# Clean up
-rm -rf ./_site/README
--- a/collaborate.md
+++ b/collaborate.md
@ -0,0 +1,16 @@
+---
+layout: text.vto
+title: Collaborate
+---
+
+Es gibt verschiedene Möglichkeiten mit uns aktiv zu werden! 
+
+Suchst du einen Raum, um eigene Projekte wie Workshops, Veranstaltungen oder Releasepartys zu realisieren?
+
+Vielleicht hast du auch Interesse daran, gemeinsam mit uns ein Projekt oder eine Veranstaltung zu organisieren. 
+
+Du hast auch die Option, einen Platz in unserer Werkstatt, im Büro oder im Atelier für €180,- im Monat zu mieten und Teil unseres Kollektivs werden. Wir möchten unseren Kreis erweitern und suchen nach weiteren Gleichgesinnten, die Lust haben, sich mit ihren eigenen Projekten einzubringen. Unser solidarisches Finanzierungskonzept sorgt dafür, dass die Kosten fair aufgeteilt werden. 
+
+Außerdem stehen bei uns Workshops und Unterricht im Bereich Malerei, Stickerei, Näherei, Holzarbeit, ein Repaircafé und Cryptopartys zur Verfügung.
+
+Welcher Punkt es auch ist, der dich anspricht- wir freuen uns darauf, mit dir gemeinsame Sache zu machen und neue kreative Projekte zu verwirklichen. [Kontaktiere uns gerne](/contact), um mehr über die Möglichkeiten einer Zusammenarbeit zu erfahren. Wir sind offen für neue Ideen und freuen uns darauf, von dir zu hören!
--- a/collective.md
+++ b/collective.md
@ -0,0 +1,14 @@
+---
+layout: text.vto
+title: Das Kollektiv
+---
+
+Wer sind wir? 
+
+Wir sind das MiOM. Ein kreatives Kollektiv und eine Gruppe mit der Vision, bezahlbaren Raum für kreative Synergien zu schaffen. 
+
+Entstanden sind wir 2020, im damaligen Wandelwerk. Nachdem wir dort ausziehen mussten sind wir an unseren jetzigen Standort - [das Gewächshaus](https://www.instagram.com/gewaechshauskoeln/) - umgezogen. Im September 2022 haben wir den MiOM Kreativraum e.V. gegründet, um die finanziellen und organisatorischen Aufgaben in einer basisdemokratischen Struktur zu organisieren.
+
+Als Kollektiv arbeiten wir an kreativen Projekten aus Kunst und Kultur, um Potenziale zu entfalten und künstlerische Synergien zu schaffen. Derzeit bestehen wir aus Produktdesignern, Entwickler:innen, Fotograf:innen, Künstler:innen, Tättoowiererinnen, Modedesignerinnen und Maskenbildnerinnen. Unser Ziel ist es, Raum zum Experimentieren, Austauschen und Arbeiten zu gestalten. Wir streben nach einer nachhaltigen Gemeinschaft verschiedener Individuen, die ihre Schaffenskraft entfalten können.
+
+Each one, teach one! 
--- a/contact.md
+++ b/contact.md
@ -0,0 +1,21 @@
+---
+layout: text.vto
+title: Kontakt
+---
+
+Du willst mal vorbei schauen? Lust was mit uns zu machen? Ideen für den Raum?
+
+Du erreichst uns unter [contact@miom.space](mailto:contact@miom.space).
+
+Komm vorbei! Unser Raum ist in der [Wilhelm-Mauser-Straße 47, Halle 5 in 50827 Köln](https://www.openstreetmap.org/node/9627028359). Kontaktiere uns vorher damit wir sicherstellen können, dass jemand da ist um dich zu begrüßen.
+
+## So findest du zu uns
+
+**Mit dem Bus:**
+Mit der Linie 141/143 bis zur Haltestelle Bickendorf Wilhelm-Mauser-Str., Köln
+
+**Mit der Bahn:**
+U-Bahn Haltestelle Rochusplatz (Linie 3/4)
+10 Minunten Fußweg von der Haltestelle
+
+Bei Hausnummer 47 (grünes Tor) geradeaus durch, dann nach rechts zur Halle 5
--- a/deno.json
+++ b/deno.json
@ -1,12 +1,15 @@
 {
-  "importMap": "import_map.json",
+  "imports": {
+    "lume/": "https://deno.land/x/lume@v2.1.3/"
+  },
  "tasks": {
-    "lume": "echo \"import 'lume/cli.ts'\" | deno run --unstable -A -",
+    "lume": "echo \"import 'lume/cli.ts'\" | deno run -A -",
    "build": "deno task lume",
    "serve": "deno task lume -s"
  },
  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "npm:react"
+    "types": [
+      "lume/types.ts"
+    ]
  }
-}
+}
--- a/deno.lock
+++ b/deno.lock
--- a/deploy.sh
+++ b/deploy.sh
@ -17,7 +17,7 @@ if [[ -z "$TAG" ]]; then
 fi

 # Login to Greenbaum's private docker registry
-docker login registry.greenbaum.cloud
+echo "$DOCKER_PASSWORD" | docker login --username "$DOCKER_USERNAME" --password-stdin registry.greenbaum.cloud

 # Use our tag for docker-compose
 export DEPLOY_TAG="$TAG"
@ -26,4 +26,4 @@ export DEPLOY_TAG="$TAG"
 docker pull registry.greenbaum.cloud/pub_solar/miom.space:"$DEPLOY_TAG"

 # Deploy on Greenbaum Cloud
-docker-compose up -d
+docker-compose --project-name miomspace up --detach
--- a/en/collaborate.md
+++ b/en/collaborate.md
@ -0,0 +1,16 @@
+---
+layout: text.vto
+title: Collaborate
+---
+
+There are many ways to get involved with us! 
+
+Are you looking for a space to realize your own projects such as workshops, events, or release parties? 
+
+Perhaps you are interested in a project/event collaboration with us?
+
+You also have the option to rent a work space in our wood and metal shop, office, or studio for 180€ per month and become part of our collective. We aim to expand our circle and are seeking like-minded people who are eager to contribute with their own creative projects. Our solidarity- based finance concept ensures that costs are fairly distributed. 
+
+Additionally, we offer workshops and classes in painting, embroidery, sewing, woodwork, a repair café and cryptoparties. 
+
+Whatever aspect appeals most to you - we look forward to collaborating with you and bringing new creative projects to life. [Feel free to contact us](/en/contact) to learn more about collaboration opportunities. We are open to new ideas and excited to hear from you!
--- a/en/collective.md
+++ b/en/collective.md
@ -0,0 +1,14 @@
+---
+layout: text.vto
+title: The collective
+---
+
+Who are we? 
+
+We are MiOM. A creative collective and a group with the vision of creating affordable space for creative synergies. 
+
+We were founded in 2020, in the former Wandelwerk. After having to move out, we relocated to our current location - [the Gewächshaus](https://www.instagram.com/gewaechshauskoeln/). In September 2022, we founded the MiOM Kreativraum e.V. to organize the financial and organizational tasks in a grassroots democratic structure. 
+
+As a collective, we work on creative projects in art and culture to unfold potentials and create artistic synergies. Currently, we consist of product designers, techies, photographers, artists, tattoo artists, fashion designers, and makeup artists. Our goal is to create space for experimenting, exchanging ideas, and working together. We aim for a sustainable community of diverse individuals who can unleash their creative power. 
+
+Each one, teach one!
--- a/en/contact.md
+++ b/en/contact.md
@ -0,0 +1,21 @@
+---
+layout: text.vto
+title: Contact
+---
+
+Do you want to come around? Want to collaborate with us? Ideas for the space? 
+
+You can reach us at [contact@miom.space](mailto:contact@miom.space).
+
+Come by! Our space is located at [Wilhelm-Mauser-Straße 47, Hall 5 in 50827 Cologne](https://www.openstreetmap.org/node/9627028359). Contact us beforehand so we can ensure that someone is there to welcome you.
+
+## How to find us
+
+**By bus:**
+Take line 141/143 to the stop Bickendorf Wilhelm-Mauser-Str., Köln
+
+**By tram:**
+Subway stop Rochusplatz (line 3/4)
+Walk 10 minutes from the station
+
+At house number 47 (green gate), go straight through, then to the right to Hall 5.
--- a/en/imprint.md
+++ b/en/imprint.md
@ -0,0 +1,23 @@
+---
+layout: text.vto
+title: Imprint
+---
+
+Responsible for contents:
+
+
+**MiOM Kreativraum e.V.**
+
+Board: Slavica Dretvić, Constantin Pannwitz, Jhonas Wernery
+
+Wilhelm-Mauser-Straße 47
+
+Halle 5
+
+50827 Köln
+
+
+[contact@miom.space](mailto:contact@miom.space)
+
+
+The [source code for this website](https://git.pub.solar/MiOM/miom.space) is licensed under the AGPLv3.
--- a/en/index.md
+++ b/en/index.md
@ -0,0 +1,32 @@
+---
+
+layout: homepage.vto
+
+tagline: |
+  MiOM is a collective from Cologne with the vision of creating affordable space for creative synergies.
+
+cards:
+  - text: the collective
+    link: ./collective
+    image:
+      alt: "Dancing and celebrating people"
+      url: crowd
+
+  - text: the space
+    link: ./space
+    image:
+      alt: "Die Werkstatt vom MiOM. Es stehen einige Geräte wie Bohrmaschinen und Sägen rum"
+      url: werkstatt
+
+  - text: collaborate
+    link: ./collaborate
+    image:
+      alt: "A group of people is sitting at a table together working"
+      url: hakken
+
+  - text: projects and events
+    link: ./projects
+    image:
+      alt: "The outside area at night. There's a camp fire with a crowd. In the background a tall building is visible."
+      url: aussenchill
+---
--- a/en/privacy-policy.md
+++ b/en/privacy-policy.md
@ -0,0 +1,8 @@
+---
+layout: text.vto
+title: Privacy policy
+---
+
+This website runs on a no-logging policy. We do not track or keep any personal data when viewing this site.
+
+See [our imprint](/en/imprint) for contact information.
--- a/en/projects.md
+++ b/en/projects.md
@ -0,0 +1,33 @@
+---
+layout: text.vto
+title: Projects and Events
+---
+
+## Kunstroute 2024
+
+Currently, we are organizing our next exhibition of interdisciplinary arts for May, which will take place as part of [Kunstroute](https://kunstroute-ehrenfeld.de/) Ehrenfeld 2024.
+
+### The following forms of art will be exhibited
+
+* Graffiti
+* Painting
+* Embroidery
+* Illustration
+* Installations
+* Performance
+* Art
+* Tattoo ink.
+* Design
+* Graphics
+* Prints
+
+More information about the exhibiting artists and the exhibition itself will be available in the coming weeks on our [Instagram](https://www.instagram.com/miom.space/) and [Mastodon](https://mastodon.pub.solar/@miomspace) accounts.
+
+## hakken.irl
+
+pub.solar, a collective that provides digital infrastructures in a solidary and grassroots democratic way, regularly organizes a hackathon at MiOM, the [pub.solar hakken.irl](https://pub.solar/hakken/).
+
+## Bisherige Projekte und Veranstaltungen
+
+* **Dimensioniii** as part of Passagen Interior Design Week Cologne (January 2020)
+* Art/- Design Exhibition **Gemischte Tüte** (June 2019)
--- a/en/space.md
+++ b/en/space.md
@ -0,0 +1,23 @@
+---
+layout: text.vto
+title: The space
+---
+
+Our space is located at Wilhelm-Mauser Straße 47 (Halle 5) in Cologne Bickendorf, close to Cologne Ehrenfeld, and is part of the [Gewächshaus community](https://www.instagram.com/gewaechshauskoeln/). 
+
+With a total of 175 square meters, our space offers diverse opportunities for creative use. The wood- and metal working shop is located in the heart of the hall. Above we have created several studio spaces on a platform. On the second floor of the premises there are two lockable office rooms for co-working and further exchange available. 
+
+Through collaboration with the Gewächshaus Community, we can provide a first-class infrastructure, including:
+- internet access
+- printer
+- sanitary facilities
+- large shared kitchen with a barista coffee machine
+- drinks shop
+- electronic pallet truck
+- chill area
+- meeting room
+- 24/7 access
+
+On weekdays, we serve a daily communal lunch with regional organic products. 
+
+Due to our usage concept, members have the opportunity to rent fixed spaces that are full-time available. At the same time, all collective members can use the space as long as it is not occupied by renters. This combination of individual and communal use is based on open communication and mutual consideration.
--- a/favicon.ico
+++ b/favicon.ico
--- a/flake.lock
+++ b/flake.lock
@ -2,19 +2,17 @@
  "nodes": {
    "devshell": {
      "inputs": {
-        "flake-utils": [
-          "flake-utils"
-        ],
+        "flake-utils": "flake-utils",
        "nixpkgs": [
          "nixpkgs"
        ]
      },
      "locked": {
-        "lastModified": 1677411038,
-        "narHash": "sha256-pxUh5tQozXw7ohX6mc7EhUriFR/kqWMnVS1fdohfKBs=",
+        "lastModified": 1711099426,
+        "narHash": "sha256-HzpgM/wc3aqpnHJJ2oDqPBkNsqWbW0WfWUO8lKu8nGk=",
        "owner": "numtide",
        "repo": "devshell",
-        "rev": "7389b00da0c6b0e58aa514a239f4b08086d2a164",
+        "rev": "2d45b54ca4a183f2fdcf4b19c895b64fbf620ee8",
        "type": "github"
      },
      "original": {
@ -24,12 +22,33 @@
      }
    },
    "flake-utils": {
+      "inputs": {
+        "systems": "systems"
+      },
      "locked": {
-        "lastModified": 1676283394,
-        "narHash": "sha256-XX2f9c3iySLCw54rJ/CZs+ZK6IQy7GXNY4nSOyu2QG4=",
+        "lastModified": 1701680307,
+        "narHash": "sha256-kAuep2h5ajznlPMD9rnQyffWG8EM/C73lejGofXvdM8=",
        "owner": "numtide",
        "repo": "flake-utils",
-        "rev": "3db36a8b464d0c4532ba1c7dda728f4576d6d073",
+        "rev": "4022d587cbbfd70fe950c1e2083a02621806a725",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "flake-utils_2": {
+      "inputs": {
+        "systems": "systems_2"
+      },
+      "locked": {
+        "lastModified": 1710146030,
+        "narHash": "sha256-SZ5L6eA7HJ/nmkzGG7/ISclqe6oZdOZTNoesiInkXPQ=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "b1d9ab70662946ef0850d488da1c9019f3a9752a",
        "type": "github"
      },
      "original": {
@ -40,11 +59,11 @@
    },
    "nixpkgs": {
      "locked": {
-        "lastModified": 1677342105,
-        "narHash": "sha256-kv1fpkfCJGb0M+LZaCHFUuIS9kRIwyVgupHu86Y28nc=",
+        "lastModified": 1712791164,
+        "narHash": "sha256-3sbWO1mbpWsLepZGbWaMovSO7ndZeFqDSdX0hZ9nVyw=",
        "owner": "nixos",
        "repo": "nixpkgs",
-        "rev": "b1f87ca164a9684404c8829b851c3586c4d9f089",
+        "rev": "1042fd8b148a9105f3c0aca3a6177fd1d9360ba5",
        "type": "github"
      },
      "original": {
@ -57,36 +76,38 @@
    "root": {
      "inputs": {
        "devshell": "devshell",
-        "flake-utils": "flake-utils",
-        "nixpkgs": "nixpkgs",
-        "tritonshell-module": "tritonshell-module"
+        "flake-utils": "flake-utils_2",
+        "nixpkgs": "nixpkgs"
      }
    },
-    "tritonshell-module": {
-      "inputs": {
-        "devshell": [
-          "devshell"
-        ],
-        "flake-utils": [
-          "flake-utils"
-        ],
-        "nixpkgs": [
-          "nixpkgs"
-        ]
-      },
+    "systems": {
      "locked": {
-        "lastModified": 1675336609,
-        "narHash": "sha256-PEsx4vXs0jOpnfHrWGDcpirhyEGMCuVo70Zr9KEvN+s=",
-        "ref": "main",
-        "rev": "4ce3a32dac5909b09eabcf66761e6e37bf457dcf",
-        "revCount": 55,
-        "type": "git",
-        "url": "https://git.greenbaum.cloud/dev/tritonshell"
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
      },
      "original": {
-        "ref": "main",
-        "type": "git",
-        "url": "https://git.greenbaum.cloud/dev/tritonshell"
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    },
+    "systems_2": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
      }
    }
  },
--- a/flake.nix
+++ b/flake.nix
@ -1,5 +1,5 @@
 {
-  description = "devs & ops environment for nix'ing with triton";
+  description = "MiOM homepage live at @ miom.space";

  inputs = {
    nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable";
@ -7,20 +7,14 @@
    flake-utils.url = "github:numtide/flake-utils";

    devshell.url = "github:numtide/devshell";
-    devshell.inputs.flake-utils.follows = "flake-utils";
    devshell.inputs.nixpkgs.follows = "nixpkgs";
-
-    tritonshell-module.url = "git+https://git.greenbaum.cloud/dev/tritonshell?ref=main";
-    tritonshell-module.inputs.devshell.follows = "devshell";
-    tritonshell-module.inputs.flake-utils.follows = "flake-utils";
-    tritonshell-module.inputs.nixpkgs.follows = "nixpkgs";
  };

-  outputs = { self, flake-utils, devshell, tritonshell-module, nixpkgs }:
+  outputs = { self, flake-utils, devshell, nixpkgs }:
    flake-utils.lib.simpleFlake {
      inherit self nixpkgs;
      name = "miom.space";
-      preOverlays = [ devshell.overlay ];
+      preOverlays = [ devshell.overlays.default ];
      shell = { pkgs }:
      let
        google-font-downloader = pkgs.writeShellScriptBin "google-font-downloader" ''
@ -34,19 +28,6 @@
        '';
      in
        pkgs.devshell.mkShell {
-          imports = [ tritonshell-module.devshellModules.x86_64-linux.tritonshell ];
-          # Now the tritonshell environment nix module options are available
-          environment = {
-            enable = true;
-            # CUSTOMIZE if desired, default options are:
-            #cnsBaseDomain = "greenbaum.zone";
-            #dataCenters = [ "cgn-1" "lev-1" ];
-            #mantaDomain = "eu-central.manta.greenbaum.cloud";
-            #tritonApiDomain = "api.greenbaum.cloud";
-          };
-
-          # Add additional packages you'd like to be available in your devshell
-          # PATH here
          devshell.packages = with pkgs; [
            deno
            google-font-downloader
--- a/img/IMG_0199.jpg
+++ b/img/IMG_0199.jpg
--- a/img/IMG_0200.jpg
+++ b/img/IMG_0200.jpg
--- a/img/IMG_0746.jpg
+++ b/img/IMG_0746.jpg
--- a/img/IMG_0817.jpg
+++ b/img/IMG_0817.jpg
--- a/img/crowd-top.jpg
+++ b/img/crowd-top.jpg
--- a/img/home-aussenchill-500.jpg
+++ b/img/home-aussenchill-500.jpg
--- a/img/home-aussenchill-700.jpg
+++ b/img/home-aussenchill-700.jpg
--- a/img/home-aussenchill.jpg
+++ b/img/home-aussenchill.jpg
--- a/img/home-crowd-500.jpg
+++ b/img/home-crowd-500.jpg
--- a/img/home-crowd-700.jpg
+++ b/img/home-crowd-700.jpg
--- a/img/home-crowd.jpg
+++ b/img/home-crowd.jpg
--- a/img/home-hakken-500.jpg
+++ b/img/home-hakken-500.jpg
--- a/img/home-hakken-700.jpg
+++ b/img/home-hakken-700.jpg
--- a/img/home-hakken.jpg
+++ b/img/home-hakken.jpg
--- a/img/home-werkstatt-500.jpg
+++ b/img/home-werkstatt-500.jpg
--- a/img/home-werkstatt-700.jpg
+++ b/img/home-werkstatt-700.jpg
--- a/img/home-werkstatt.jpg
+++ b/img/home-werkstatt.jpg
--- a/img/instagram.svg
+++ b/img/instagram.svg
@ -0,0 +1,3 @@
+<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
+  <path fill="currentColor" d="M295.42,6c-53.2,2.51-89.53,11-121.29,23.48-32.87,12.81-60.73,30-88.45,57.82S40.89,143,28.17,175.92c-12.31,31.83-20.65,68.19-23,121.42S2.3,367.68,2.56,503.46,3.42,656.26,6,709.6c2.54,53.19,11,89.51,23.48,121.28,12.83,32.87,30,60.72,57.83,88.45S143,964.09,176,976.83c31.8,12.29,68.17,20.67,121.39,23s70.35,2.87,206.09,2.61,152.83-.86,206.16-3.39S799.1,988,830.88,975.58c32.87-12.86,60.74-30,88.45-57.84S964.1,862,976.81,829.06c12.32-31.8,20.69-68.17,23-121.35,2.33-53.37,2.88-70.41,2.62-206.17s-.87-152.78-3.4-206.1-11-89.53-23.47-121.32c-12.85-32.87-30-60.7-57.82-88.45S862,40.87,829.07,28.19c-31.82-12.31-68.17-20.7-121.39-23S637.33,2.3,501.54,2.56,348.75,3.4,295.42,6m5.84,903.88c-48.75-2.12-75.22-10.22-92.86-17-23.36-9-40-19.88-57.58-37.29s-28.38-34.11-37.5-57.42c-6.85-17.64-15.1-44.08-17.38-92.83-2.48-52.69-3-68.51-3.29-202s.22-149.29,2.53-202c2.08-48.71,10.23-75.21,17-92.84,9-23.39,19.84-40,37.29-57.57s34.1-28.39,57.43-37.51c17.62-6.88,44.06-15.06,92.79-17.38,52.73-2.5,68.53-3,202-3.29s149.31.21,202.06,2.53c48.71,2.12,75.22,10.19,92.83,17,23.37,9,40,19.81,57.57,37.29s28.4,34.07,37.52,57.45c6.89,17.57,15.07,44,17.37,92.76,2.51,52.73,3.08,68.54,3.32,202s-.23,149.31-2.54,202c-2.13,48.75-10.21,75.23-17,92.89-9,23.35-19.85,40-37.31,57.56s-34.09,28.38-57.43,37.5c-17.6,6.87-44.07,15.07-92.76,17.39-52.73,2.48-68.53,3-202.05,3.29s-149.27-.25-202-2.53m407.6-674.61a60,60,0,1,0,59.88-60.1,60,60,0,0,0-59.88,60.1M245.77,503c.28,141.8,115.44,256.49,257.21,256.22S759.52,643.8,759.25,502,643.79,245.48,502,245.76,245.5,361.22,245.77,503m90.06-.18a166.67,166.67,0,1,1,167,166.34,166.65,166.65,0,0,1-167-166.34" transform="translate(-2.5 -2.5)"/>
+</svg>
--- a/img/logo-1000.jpg
+++ b/img/logo-1000.jpg
--- a/img/logo-500.jpg
+++ b/img/logo-500.jpg
--- a/img/logo-700.jpg
+++ b/img/logo-700.jpg
--- a/img/logo.jpg
+++ b/img/logo.jpg
--- a/img/mastodon.svg
+++ b/img/mastodon.svg
@ -0,0 +1,3 @@
+<svg width="74" height="79" viewBox="0 0 74 79" xmlns="http://www.w3.org/2000/svg">
+  <path fill="currentColor" d="M73.7014 17.4323C72.5616 9.05152 65.1774 2.4469 56.424 1.1671C54.9472 0.950843 49.3518 0.163818 36.3901 0.163818H36.2933C23.3281 0.163818 20.5465 0.950843 19.0697 1.1671C10.56 2.41145 2.78877 8.34604 0.903306 16.826C-0.00357854 21.0022 -0.100361 25.6322 0.068112 29.8793C0.308275 35.9699 0.354874 42.0498 0.91406 48.1156C1.30064 52.1448 1.97502 56.1419 2.93215 60.0769C4.72441 67.3445 11.9795 73.3925 19.0876 75.86C26.6979 78.4332 34.8821 78.8603 42.724 77.0937C43.5866 76.8952 44.4398 76.6647 45.2833 76.4024C47.1867 75.8033 49.4199 75.1332 51.0616 73.9562C51.0841 73.9397 51.1026 73.9184 51.1156 73.8938C51.1286 73.8693 51.1359 73.8421 51.1368 73.8144V67.9366C51.1364 67.9107 51.1302 67.8852 51.1186 67.862C51.1069 67.8388 51.0902 67.8184 51.0695 67.8025C51.0489 67.7865 51.0249 67.7753 50.9994 67.7696C50.9738 67.764 50.9473 67.7641 50.9218 67.7699C45.8976 68.9569 40.7491 69.5519 35.5836 69.5425C26.694 69.5425 24.3031 65.3699 23.6184 63.6327C23.0681 62.1314 22.7186 60.5654 22.5789 58.9744C22.5775 58.9477 22.5825 58.921 22.5934 58.8965C22.6043 58.8721 22.621 58.8505 22.6419 58.8336C22.6629 58.8167 22.6876 58.8049 22.714 58.7992C22.7404 58.7934 22.7678 58.794 22.794 58.8007C27.7345 59.9796 32.799 60.5746 37.8813 60.5733C39.1036 60.5733 40.3223 60.5733 41.5447 60.5414C46.6562 60.3996 52.0437 60.1408 57.0728 59.1694C57.1983 59.1446 57.3237 59.1233 57.4313 59.0914C65.3638 57.5847 72.9128 52.8555 73.6799 40.8799C73.7086 40.4084 73.7803 35.9415 73.7803 35.4523C73.7839 33.7896 74.3216 23.6576 73.7014 17.4323ZM61.4925 47.3144H53.1514V27.107C53.1514 22.8528 51.3591 20.6832 47.7136 20.6832C43.7061 20.6832 41.6988 23.2499 41.6988 28.3194V39.3803H33.4078V28.3194C33.4078 23.2499 31.3969 20.6832 27.3894 20.6832C23.7654 20.6832 21.9552 22.8528 21.9516 27.107V47.3144H13.6176V26.4937C13.6176 22.2395 14.7157 18.8598 16.9118 16.3545C19.1772 13.8552 22.1488 12.5719 25.8373 12.5719C30.1064 12.5719 33.3325 14.1955 35.4832 17.4394L37.5587 20.8853L39.6377 17.4394C41.7884 14.1955 45.0145 12.5719 49.2765 12.5719C52.9614 12.5719 55.9329 13.8552 58.2055 16.3545C60.4017 18.8574 61.4997 22.2371 61.4997 26.4937L61.4925 47.3144Z" />
+</svg>
--- a/img/poledance.jpg
+++ b/img/poledance.jpg
--- a/img/signal-2023-03-02-144400_020.jpg
+++ b/img/signal-2023-03-02-144400_020.jpg
--- a/import_map.json
+++ b/import_map.json
@ -1,7 +1,7 @@
 {
  "imports": {
-    "lume/": "https://deno.land/x/lume@v1.15.3/",
-    "react/jsx-runtime": "https://deno.land/x/lume@v1.15.3/deps/react_runtime.ts",
-    "react": "https://deno.land/x/lume@v1.15.3/deps/react.ts"
+    "lume/": "https://deno.land/x/lume@v1.18.0/",
+    "react/jsx-runtime": "https://deno.land/x/lume@v1.18.0/deps/react_runtime.ts",
+    "react": "https://deno.land/x/lume@v1.18.0/deps/react.ts"
  }
 }
--- a/imprint.md
+++ b/imprint.md
@ -0,0 +1,23 @@
+---
+layout: text.vto
+title: Impressum
+---
+
+Verantwortlich für die 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](mailto:contact@miom.space)
+
+
+Der [Quellcode dieser Website](https://git.pub.solar/MiOM/miom.space) ist lizenziert unter AGPLv3.
--- a/imprint.yml
+++ b/imprint.yml
@ -1,18 +0,0 @@
-layout: layouts/default.njk
-
-title: 'Imprint'
-
-article: '
-Responsible for contents:
-
-
-<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>
-'
--- a/index.md
+++ b/index.md
@ -0,0 +1,31 @@
+---
+layout: homepage.vto
+
+tagline: |
+  Das MiOM ist ein Kollektiv mit der Vision, bezahlbaren Raum für kreative Synergien zu schaffen.
+
+cards:
+  - text: das Kollektiv
+    link: ./collective
+    image:
+      alt: "Feierne Menschen Tanzen"
+      url: crowd
+
+  - text: der Raum
+    link: ./space
+    image:
+      alt: "Die Werkstatt vom MiOM. Es stehen einige Geräte wie Bohrmaschinen und Sägen rum"
+      url: werkstatt
+
+  - text: Collaborate
+    link: ./collaborate
+    image:
+      alt: "Eine Gruppe Menschen sitzt an einem Tisch und arbeitet"
+      url: hakken
+
+  - text: Projekte und Veranstaltungen
+    link: ./projects
+    image:
+      alt: "Innenhof mit lagerfeuer bei Abend. Im Hintergrund ist ein Hochhaus zu sehen"
+      url: aussenchill
+---
--- a/index.yml
+++ b/index.yml
@ -1,17 +0,0 @@
-layout: layouts/homepage.njk
-
-introduction: "
-We are an interdisciplinary creative space. We offer affordable room to work and exchange ideas in. Our community is composed of people from a variety of backgrounds.
-
-
-Each one teach one.
-"
-
-cta: "
-Interested?
-
-
-Come see us! We are currently located at [Wilhelm-Mauser-Straße 47](https://www.openstreetmap.org/node/9627028359), Halle 5 in 50827 Cologne. Contact one of us and we'll make sure someone is there to welcome you.
-"
-
-
--- a/privacy-policy.md
+++ b/privacy-policy.md
@ -0,0 +1,8 @@
+---
+layout: text.vto
+title: Datenschutz
+---
+
+Auf dieser Website wird nicht protokolliert. Wir verfolgen oder speichern keine persönlichen Daten beim Besuch dieser Website.
+
+Siehe unser [Impressum](/imprint) für Verantwortlichkeiten und Kontaktinformationen.
--- a/privacy-policy.yml
+++ b/privacy-policy.yml
@ -1,9 +0,0 @@
-layout: layouts/default.njk
-
-title: 'Privacy policy'
-
-article: '
-We run on a no-logging policy. We do not track or keep any personal data.
-
-See [our imprint](/imprint) for contact information.
-'
--- a/projects.md
+++ b/projects.md
@ -0,0 +1,32 @@
+---
+layout: text.vto
+title: Projekte und Veranstaltungen
+---
+
+## Kunstroute 2024
+
+Aktuell organisieren wir unsere nächste Ausstellung der interdisziplinären Künste für den kommenden Mai, die im Rahmen der [Kunstroute](https://kunstroute-ehrenfeld.de/) Ehrenfeld 2024 stattfinden wird.
+
+### Folgende Formen der Kunst werden ausgestellt
+
+* Graffiti
+* Malerei
+* Stickerei
+* Illustration
+* Installationen
+* Performance
+* Tattoo ink. 
+* Gestaltung
+* Grafiken
+* Drucke
+
+Nähere Informationen zu den ausstellenden Künstler:innen und der Ausstellung selbst findet ihr in den folgenden Wochen auf unserer [Instagram](https://www.instagram.com/miom.space/) & [Mastodon](https://mastodon.pub.solar/@miomspace) Seite.
+
+## hakken.irl
+
+pub.solar, ein Kollektiv was auf solidarische und basisdemokratische Weise digitale Infrastrukturen bereitstellt, organisiert regelmäßig im MiOM ein Hackathon, das [pub.solar hakken.irl](https://pub.solar/hakken/).
+
+## Bisherige Projekte und Veranstaltungen
+
+* **Dimensioniii** als Teil der Passagen Interior Design Week Köln (Januar 2020)
+* Art/- Design Exhibition **Gemischte Tüte** (Juni 2019) 
--- a/raleway.css
+++ b/raleway.css
@ -4,7 +4,7 @@
  font-style: normal;
  font-weight: 100;
  font-display: swap;
-  src: url(/fonts/raleway/v22/1Ptug8zYS_SKggPNyCAIT4ttDfCmxA.woff2) format('woff2');
+  src: url(./fonts/raleway/v22/1Ptug8zYS_SKggPNyCAIT4ttDfCmxA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
@ -13,7 +13,7 @@
  font-style: normal;
  font-weight: 100;
  font-display: swap;
-  src: url(/fonts/raleway/v22/1Ptug8zYS_SKggPNyCkIT4ttDfCmxA.woff2) format('woff2');
+  src: url(./fonts/raleway/v22/1Ptug8zYS_SKggPNyCkIT4ttDfCmxA.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* vietnamese */
@ -22,7 +22,7 @@
  font-style: normal;
  font-weight: 100;
  font-display: swap;
-  src: url(/fonts/raleway/v22/1Ptug8zYS_SKggPNyCIIT4ttDfCmxA.woff2) format('woff2');
+  src: url(./fonts/raleway/v22/1Ptug8zYS_SKggPNyCIIT4ttDfCmxA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
@ -31,7 +31,7 @@
  font-style: normal;
  font-weight: 100;
  font-display: swap;
-  src: url(/fonts/raleway/v22/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format('woff2');
+  src: url(./fonts/raleway/v22/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
@ -40,7 +40,7 @@
  font-style: normal;
  font-weight: 100;
  font-display: swap;
-  src: url(/fonts/raleway/v22/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2');
+  src: url(./fonts/raleway/v22/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* cyrillic-ext */
@ -49,7 +49,7 @@
  font-style: normal;
  font-weight: 400;
  font-display: swap;
-  src: url(/fonts/raleway/v22/1Ptug8zYS_SKggPNyCAIT4ttDfCmxA.woff2) format('woff2');
+  src: url(./fonts/raleway/v22/1Ptug8zYS_SKggPNyCAIT4ttDfCmxA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
@ -58,7 +58,7 @@
  font-style: normal;
  font-weight: 400;
  font-display: swap;
-  src: url(/fonts/raleway/v22/1Ptug8zYS_SKggPNyCkIT4ttDfCmxA.woff2) format('woff2');
+  src: url(./fonts/raleway/v22/1Ptug8zYS_SKggPNyCkIT4ttDfCmxA.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* vietnamese */
@ -67,7 +67,7 @@
  font-style: normal;
  font-weight: 400;
  font-display: swap;
-  src: url(/fonts/raleway/v22/1Ptug8zYS_SKggPNyCIIT4ttDfCmxA.woff2) format('woff2');
+  src: url(./fonts/raleway/v22/1Ptug8zYS_SKggPNyCIIT4ttDfCmxA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
@ -76,7 +76,7 @@
  font-style: normal;
  font-weight: 400;
  font-display: swap;
-  src: url(/fonts/raleway/v22/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format('woff2');
+  src: url(./fonts/raleway/v22/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
@ -85,7 +85,7 @@
  font-style: normal;
  font-weight: 400;
  font-display: swap;
-  src: url(/fonts/raleway/v22/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2');
+  src: url(./fonts/raleway/v22/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* cyrillic-ext */
@ -94,7 +94,7 @@
  font-style: normal;
  font-weight: 900;
  font-display: swap;
-  src: url(/fonts/raleway/v22/1Ptug8zYS_SKggPNyCAIT4ttDfCmxA.woff2) format('woff2');
+  src: url(./fonts/raleway/v22/1Ptug8zYS_SKggPNyCAIT4ttDfCmxA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
@ -103,7 +103,7 @@
  font-style: normal;
  font-weight: 900;
  font-display: swap;
-  src: url(/fonts/raleway/v22/1Ptug8zYS_SKggPNyCkIT4ttDfCmxA.woff2) format('woff2');
+  src: url(./fonts/raleway/v22/1Ptug8zYS_SKggPNyCkIT4ttDfCmxA.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* vietnamese */
@ -112,7 +112,7 @@
  font-style: normal;
  font-weight: 900;
  font-display: swap;
-  src: url(/fonts/raleway/v22/1Ptug8zYS_SKggPNyCIIT4ttDfCmxA.woff2) format('woff2');
+  src: url(./fonts/raleway/v22/1Ptug8zYS_SKggPNyCIIT4ttDfCmxA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
@ -121,7 +121,7 @@
  font-style: normal;
  font-weight: 900;
  font-display: swap;
-  src: url(/fonts/raleway/v22/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format('woff2');
+  src: url(./fonts/raleway/v22/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
@ -130,6 +130,6 @@
  font-style: normal;
  font-weight: 900;
  font-display: swap;
-  src: url(/fonts/raleway/v22/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2');
+  src: url(./fonts/raleway/v22/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
--- a/space.md
+++ b/space.md
@ -0,0 +1,12 @@
+---
+layout: text.vto
+title: Der Raum
+---
+
+Unser Raum befindet sich in der Wilhelm-Mauser Straße 47 (Halle 5) in Köln Bickendorf, nahe der Grenze zu Köln Ehrenfeld und ist Teil der [Gewächshaus Community](https://www.instagram.com/gewaechshauskoeln/).
+
+Mit insgesamt 175qm bietet unser Space vielfältige Möglichkeiten zur kreativen Nutzung. Die Werkstatt befindet sich im Herzen der Halle, darüber haben wir mit einer Plattform verschiedenste Atelierplätze geschaffen und in der zweiten Etage der Räumlichkeiten stehen zwei abschließbare Büroräume für Co-Working und weiteren Austausch zur Verfügung.
+
+Durch die Zusammenarbeit mit der Gewächshaus Community können wir eine erstklassige Infrastruktur bieten, die unter anderem Internetzugang, Drucker, sanitäre Einrichtungen, eine große gemeinsame Küche mit Barista Kaffeemaschine, einen Getränkeshop, einen elektronischen Hubwagen, eine Chill Area, einen Besprechungsraum und 24/7 Zugang umfasst. An Wochentagen zaubern wir täglich ein gemeinsames Mittagessen mit regionalen Bioprodukten auf den Tisch.
+
+Durch unser Nutzungskonzept haben Mitglieder die Möglichkeit, feste Plätze im Space zu mieten, die ihnen rund um die Uhr zur Verfügung stehen. Gleichzeitig können alle Kollektivmitglieder den Raum nutzen, solange er nicht von den Mieter:innen belegt ist. Diese Kombination aus individueller Nutzung und gemeinschaftlicher Nutzung basiert auf einer offenen Kommunikation und gegenseitiger Rücksichtnahme.
--- a/styles.css
+++ b/styles.css
@ -3,227 +3,498 @@
 }

 html {
+  --primary: #fd0ebf;
+  --background: #fff;
+  --foreground: #000;
+  --grayish: #777;
+  --box-padding: 1.5rem;
+
  font-family: 'Raleway', sans-serif;

-  font-size: 7.3vw;
-  line-height: 150%;
-  background: white;
+  font-size: 16px;
+  line-height: 175%;
 }

-body {
-  background: white;
+@media screen and (min-width: 800px) {
+  html {
+    --box-padding: 3rem;
+  }
 }

-a,
-a:visited {
-  color: #ff006c;
-  text-decoration: none;
+*:focus {
+  outline: 1px dashed var(--grayish);
+  outline-offset: -5px;
 }

-a:hover {
-  text-decoration: underline;
+h1 { 
+  font-size: 3rem;
 }

-h1 {
-  font-size: 1.4rem;
+h2 { 
+  font-size: 1.8rem;
 }

-h2 {
+h2::after {
+  display: block;
+  content: '';
+  flex-grow: 1;
+  border-bottom: 1px solid var(--foreground);
+}
+
+h3 { 
  font-size: 1.2rem;
 }

+h4 { 
+  font-size: 1rem;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  margin-top: 1rem;
+  margin-bottom: 0rem;
+  line-height: 1.5;
+  display: flex;
+}
+
 .mi-page {
  margin: 0;
-  column-gap: 0.666rem;
  padding: 0;
-  padding-left: 0.666rem;
-  display: grid;
-  grid-template-columns: 14vw 1fr;
-  grid-template-rows: auto auto auto auto;
-}
-
-.mi-page--title {
-  font-weight: 100;
-}
-
-.mi-logo {
-  font-weight: 100;
-}
-
-.mi-page--title_side {
-  position: sticky;
-  margin-top: 2rem;
-  top: 2rem;
-  font-size: 0.7rem;
-  line-height: 120%;
-  align-self: start;
-}
-
-.mi-page--we-are {
-  grid-row-start: 1;
-  grid-row-end: 2;
-  grid-column-start: 1;
-  grid-column-end: 2;
-}
-
-.mi-content {
-  grid-column-start: 2;
-  grid-column-end: 3;
-  background: black;
-  color: white;
-  padding: 0.666rem;
-  margin: 0;
-}
-
-.mi-things-we-are {
-  padding: 1rem 0;
-  grid-row-start: 1;
-  grid-row-end: 2;
+  background: var(--background);
  display: flex;
-  font-size: 0.7rem;
  flex-direction: column;
-  font-weight: 100;
-  position: relative;
+  min-height: 100vh;
+  width: 100vw;
 }

-.mi-things-we-are::before {
-  display: flex;
-  justify-content: right;
-  content: 'space';
-  position: sticky;
-  top: 1.5rem;
-  left: 0;
-  right: 0;
-  padding: 0.5em 0.666rem;
-  padding-right: 3.75rem;
-  background: white;
-  color: black;
-  z-index: 0;
+.mi-page-filler {
+  width: 100%;
+  padding: 0;
+  flex-basis: 0;
+  flex-grow: 1;
 }

-.mi-things-we-are--space {
-  opacity: 0;
+.mi-border {
+  pointer-events: none;
+  z-index: 10;
 }

-.mi-things-we-are--thing {
-  padding: 0.5em 0.666rem;
-  white-space: nowrap;
-  mix-blend-mode: difference;
-  z-index: 1;
-  transition-property: background, color;
-  transition-duration: 0.2s;
-  transition-timing-function: ease;
+.mi-border > * {
+  pointer-events: all;
 }

-.mi-things-we-are--thing:first-child {
-  margin-top: -1.7rem;
-}
-
-.mi-main {
-  grid-row-start: 2;
-  grid-row-end: 3;
-
-  font-size: 3vw;
+.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-footer {
-  grid-row-start: 3;
-  grid-row-end: 4;
-  grid-column-start: 2;
-  grid-column-end: 3;
+.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-people {
-  list-style: none;
-  padding: 0;
-  margin: 1rem 0;
-  font-size: 0.6rem;
-  line-height: 120%;
+.mi-border--top::before,
+.mi-border--bottom::before {
+  width: 100%;
 }

-.mi-person {
-  margin-top: 1em;
+.mi-border--left::before,
+.mi-border--right::before {
+  width: 10000vh;
 }

-.mi-person--name {
-  margin: 0;
-  font-size: 0.8em;
+.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-person--pronoun {
-  font-weight: 400;
+.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-person--role {
-  font-size: 0.4rem;
-  margin: 0;
+.mi-border--left {
+  width: var(--box-padding);
+  top: 0;
+  left: 0;
+  height: calc(100% - 2 * var(--box-padding) - 2px);
+  border-left: 0;
+  margin-top: var(--box-padding);
+  margin-bottom: var(--box-padding);
 }

-.mi-person--contact-toggle {
-  font-size: 0.4rem;
-  font-weight: 400;
-  color: #ff006c;
+.mi-border--left::before {
+  transform-origin: 0 0;
+  transform: translateY(100vh) rotateZ(-90deg);
+}
+
+.mi-border--right {
+  width: var(--box-padding);
+  top: 0;
+  right: 0;
+  height: calc(100% - 2 * var(--box-padding) - 2px);
+  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: 0;
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  z-index: 100;
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  font-weight: bold;
+}
+
+.mi-nav--toggle {
+  margin-left: calc(var(--box-padding) + 1px);
+  padding: 0 1rem;
+  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);
+  color: var(--foreground);
+  text-decoration: none;
+  background: var(--background);
+  font-size: 1.25rem;
  cursor: pointer;
+  z-index: 1;
+  font-family: inherit;
+  font-weight: inherit;
 }

-.mi-person--contact-options {
-  margin: 0;
+.mi-nav--toggle:hover {
+  color: var(--primary);
+}
+
+.mi-nav--top {
+  list-style: none;
+  display: flex;
  padding: 0;
-  font-size: 0.4rem;
+  margin: 0;
+  margin-right: calc(var(--box-padding) + 1px);
+  border: 0;
+  border-bottom: 1px solid var(--foreground);
+  background: var(--background);
+  font-size: 1.25rem;
+  height: 2.4rem;
+  z-index: 1;
 }

-.mi-person--contact-option-name {
-  padding-right: 0.5em;
+@media screen and (min-width: 800px) {
+  .mi-nav--top,
+  .mi-nav--toggle {
+    border-bottom: 0;
+    height: var(--box-padding);
+  }
+}
+
+.mi-nav--top-item {
+  border: 0;
+  border-left: 1px solid var(--foreground);
+  text-decoration: none;
+  display: flex;
+}
+
+.mi-nav--top-item-link {
+  color: var(--foreground);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 1rem;
+  text-decoration: none;
+}
+
+.mi-nav--top-item-link_icon-only {
+  padding: 0;
+  width: 2.4rem;
+}
+
+@media screen and (min-width: 800px) {
+  .mi-nav--top-item-link_icon-only {
+    width: var(--box-padding);
+  }
+}
+
+.mi-nav--top-item-link:hover {
+  color: var(--primary);
+}
+
+.mi-nav--top-item-icon {
+  height: 50%;
+  display: block;
+}
+
+.mi-nav--list {
+  list-style: none;
+  display: none;
+  padding: var(--box-padding) 0;
+  margin: 0;
+  position: fixed;
+  background: var(--background);
+  left: calc(var(--box-padding) + 1px);
+  right: calc(var(--box-padding) + 1px);
+  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;
+}
+
+.mi-nav--divider {
+  flex-grow: 1;
+}
+
+.mi-nav--link {
+  display: flex;
+  padding: 0.25rem var(--box-padding);
+  color: var(--foreground);
+  text-decoration: none;
+}
+
+.mi-nav--link_slight {
+  font-weight: normal;
+}
+
+.mi-nav--link:before {
+  display: inline-block;
+  content: '__';
+}
+
+.mi-nav--link:hover {
+  color: var(--primary);
+  text-decoration: underline;
+}
+
+.mi-main {
+  background: var(--background);
+  margin: 0 var(--box-padding);
+  flex-grow: 0;
+  position: relative;
+  margin-bottom: var(--box-padding);
+  hyphens: auto;
+  word-break: break-word;
+}
+
+.mi-main a,
+.mi-main  a:visited {
+  color: var(--primary);
+}
+
+.mi-main_content {
+  padding: var(--box-padding) 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.mi-main_content > * {
+  margin-left: var(--box-padding);
+  margin-right: var(--box-padding);
+  margin-top: 1rem;
+  margin-bottom: 0;
+  max-width: 800px;
+}
+
+.mi-cards {
+  display: grid;
+  background: var(--foreground);
+  grid-gap: 1px;
+  grid-template-columns: 1fr;
+  padding-bottom: 1px;
+}
+
+@media screen and (min-width: 800px) {
+  .mi-cards {
+    grid-template-columns: repeat(8, 1fr);
+  }
+
+  .mi-card {
+    grid-column: auto / span 4;
+  }
+  
+  .mi-logo {
+    grid-column: 1 / span 3;
+  }
+
+  .mi-tagline {
+    grid-column: 4 / span 5;
+  }
+}
+
+@media screen and (min-width: 1600px) {
+  .mi-card {
+    grid-column: auto / span 2;
+  }
+}
+
+.mi-logo {
+  background: var(--background);
+}
+
+.mi-logo--img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.mi-tagline {
+  background: var(--background);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0.5rem 2rem;
+  min-height: 300px;
+  font-size: 2rem;
+  line-height: 1.75;
+}
+
+@media screen and (min-width: 800px) {
+  .mi-tagline {
+    padding: 1rem 3rem;
+    font-size: 1.5rem;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .mi-tagline {
+    padding: 2rem 4rem;
+    font-size: 2.4rem;
+  }
+}
+
+.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;
+}
+
+.mi-card:hover,
+.mi-card:focus {
+  z-index: 1;
+}
+
+.mi-card--background {
+  width: calc(100% - 2rem);
+  height: calc(100% - 2rem);
+  position: absolute;
+  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(--foreground);
+  display: flex;
+  z-index: 1;
+  padding: 0.25rem 1rem;
+  position: absolute;
+  bottom: 2rem;
+  left: 2rem;
+  right: 2rem;
+}
+
+.mi-card:hover .mi-card--text {
+  color: var(--primary);
 }

 .mi-footer {
-  font-size: 0.5rem;
+  border-top: 1px solid var(--foreground);
+  background: var(--background);
+  margin: var(--box-padding);
 }

 .mi-footer--links {
  display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  flex-wrap: wrap;
  list-style: none;
+  margin: 0;
  padding: 0;
-  line-height: 140%;
 }

-@media screen and (min-width: 1400px) {
-  html {
-    font-size: 5vw;
-  }
-
-  .mi-page {
-    grid-template-columns: auto 1fr;
-    grid-template-rows: auto auto auto auto;
-  }
-
-  .mi-page--title {
-    white-space: nowrap;
-    line-height: 200%;
-  }
-
-  .mi-things-we-are {
-    padding: 1.15rem 0;
-  }
-
-  .mi-things-we-are::before {
-    padding-right: 8.05rem;
-    top: 1.65rem;
-  }
-
-  .mi-things-we-are--thing:first-child {
-    margin-top: -1.6rem;
-  }
-
-  .mi-person--contact-options {
-    font-size: 0.3rem;
-  }
-
-  .mi-footer--links {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-  }
+.mi-footer--link {
+  text-decoration: none;
+  color: var(--foreground);
+  padding: 0.25rem 1rem;
+}
+
+.mi-footer--link:hover {
+  text-decoration: underline;
 }
Author	SHA1	Message	Date
b12f	bffea04762	Merge pull request 'fix: add word-break to fix hyphenation on iOS' (#13 ) from fix-hyphens-for-webkit into main continuous-integration/drone/push Build is passing Details Reviewed-on: #13	2024-04-16 14:49:27 +00:00
teutat3s	cea23e6f2e	fix: add word-break to fix hyphenation on iOS continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details Source: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/	2024-04-15 19:12:02 +02:00
b12f	096a3ab57b	Merge pull request 'design: more fixes' (#12 ) from fixes-round-x into main continuous-integration/drone/push Build is passing Details Reviewed-on: #12	2024-04-15 09:35:47 +00:00
Benjamin Yule Bädorf	98bd6ea34f	design: more fixes continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details * Make menu and language toggle bold * Make main navigation items bold * Add Euro-sign € to rent price * Fix overflow issue for long words on small screens	2024-04-15 11:28:54 +02:00
b12f	15dcf900ce	Merge pull request 'contact: move "How to find us" to contact page' (#11 ) from move-contact-info into main continuous-integration/drone/push Build is passing Details Reviewed-on: #11	2024-04-14 16:20:00 +00:00
teutat3s	ae6179f35a	contact: move "How to find us" to contact page continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2024-04-14 18:18:26 +02:00
teutat3s	d9c5b100e3	Merge pull request 'Fix link for new kunstroute website' (#10 ) from fix-link-kunstroute into main continuous-integration/drone/push Build is passing Details Reviewed-on: #10	2024-04-14 15:57:39 +00:00
teutat3s	ee65831a1a	projects: add links to Mastodon + Instagram accounts continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2024-04-14 17:53:21 +02:00
teutat3s	314926711d	projects: use new website link for kunstroute	2024-04-14 17:52:52 +02:00
b12f	aea396180a	Merge pull request 'fix/card-sizing' (#9 ) from fix/card-sizing into main continuous-integration/drone/push Build is passing Details Reviewed-on: #9	2024-04-14 13:59:17 +00:00
Benjamin Yule Bädorf	68e3aab8d1	img: reduce image sizes by lowering quality continuous-integration/drone/pr Build is passing Details continuous-integration/drone/push Build is passing Details	2024-04-14 15:57:27 +02:00
Benjamin Yule Bädorf	424274cda4	feat: add favicon continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2024-04-14 15:48:12 +02:00
Benjamin Yule Bädorf	c1acb631ff	homepage: fix black box below cards on certain screen sizes	2024-04-14 15:47:54 +02:00
teutat3s	0481fdcf66	Merge pull request 'drone: use wireguard internal ip for publish' (#8 ) from fix/nachtigall-ip-wg into main continuous-integration/drone/push Build is passing Details Reviewed-on: #8	2024-04-14 13:27:00 +00:00
Benjamin Yule Bädorf	0e9a921b03	drone: use wireguard internal ip for publish continuous-integration/drone/pr Build is passing Details continuous-integration/drone/push Build is passing Details	2024-04-14 13:24:32 +00:00
b12f	7b980934e0	Merge pull request 'lume: update to v2' (#7 ) from update-deno into main continuous-integration/drone/push Build is failing Details Reviewed-on: #7	2024-04-14 13:19:43 +00:00
Benjamin Yule Bädorf	8341c079f8	lume: update to v2 continuous-integration/drone/pr Build is passing Details continuous-integration/drone/push Build is passing Details * Update lume to v2 * Update deno to v1.41.3 * Use vento instead of nunjucks for templating * Use markdown for page data * Fix english translation of homepage * Fix asset build * Make images responsive	2024-04-14 15:02:49 +02:00
b12f	826463a651	Merge pull request 'Fix assets in build' (#6 ) from b12f-patch-1 into main continuous-integration/drone/push Build is passing Details Reviewed-on: #6	2024-02-25 22:52:20 +00:00
b12f	82f2df3ae2	Fix assets in build continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2024-02-25 22:50:04 +00:00
b12f	f95ddd4a03	Merge pull request 'Update cachebust' (#5 ) from b12f-patch-1 into main continuous-integration/drone/push Build is passing Details Reviewed-on: #5	2024-02-25 22:48:01 +00:00
b12f	cae2b9de2a	Update cachebust continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2024-02-25 22:46:18 +00:00
teutat3s	e3804331d3	fix: miom.space static files directory, update continuous-integration/drone/push Build is passing Details deno docker image to 1.40.2	2024-02-25 23:15:13 +01:00
teutat3s	46be3f1e7d	Merge pull request 'v2' (#4 ) from v2 into main continuous-integration/drone/push Build is passing Details Reviewed-on: #4	2024-02-25 22:09:26 +00:00
Benjamin Yule Bädorf	dd30178d7f	space: remove extraneous colon continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2024-02-25 18:48:14 +01:00
Benjamin Yule Bädorf	db095abc39	v2: add CI for nachtigall continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2024-02-25 16:45:45 +01:00
Benjamin Yule Bädorf	fca8b4bd8f	v2: small typo fixes continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2024-02-25 16:04:34 +01:00
Benjamin Yule Bädorf	a8afe95ca7	v2: update privacy policy & imprint continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2024-02-25 15:56:12 +01:00
Benjamin Yule Bädorf	578a420215	v2: contact, index, & collaborate page contents	2024-02-25 15:49:40 +01:00
Benjamin Yule Bädorf	4bfc8572d7	v2: collective, projects, and space pages continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2024-02-25 14:31:28 +01:00
Benjamin Yule Bädorf	478bb1a14d	v2: multilang & social links continuous-integration/drone/push Build is passing Details	2024-02-24 13:45:21 +01:00
Benjamin Yule Bädorf	1fd5ec8502	v2: improve design, add pages, delete old data continuous-integration/drone/push Build is passing Details	2024-02-23 17:13:52 +01:00
Benjamin Yule Bädorf	961ffc722c	v2/design: now with more lines continuous-integration/drone/push Build is passing Details	2024-02-17 15:07:20 +01:00
Benjamin Yule Bädorf	3cbfec0520	Initial commit for v2 continuous-integration/drone/push Build is passing Details	2024-02-16 19:52:30 +01:00
b12f	17e3d14685	Merge pull request 'Fix links: git.b12f.io -> git.pub.solar' (#1 ) from fix-links into main continuous-integration/drone/push Build is passing Details Reviewed-on: #1	2023-07-03 14:36:13 +02:00
b12f	fbe49ab026	Merge pull request 'Improve quickstart development docs' (#2 ) from update-readme into main continuous-integration/drone/push Build is passing Details Reviewed-on: #2	2023-07-03 14:36:02 +02:00
b12f	1d9a758e24	Merge pull request 'Bump flake.lock, deno 1.34.3, lume 1.18.0' (#3 ) from update-versions into main continuous-integration/drone/push Build is passing Details Reviewed-on: #3	2023-07-03 14:35:07 +02:00
teutat3s	963c28c8e4	Update jfw continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2023-07-03 00:39:36 +02:00
teutat3s	289db44767	Bump flake.lock, deno 1.34.3, lume 1.18.0 continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2023-07-03 00:38:32 +02:00
teutat3s	87925dacbf	Improve quickstart development docs continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2023-07-03 00:36:48 +02:00
teutat3s	d273e7216e	Fix links git.b12f.io -> git.pub.solar continuous-integration/drone/push Build is passing Details	2023-07-03 00:35:21 +02:00
teutat3s	02336befe7	ci: fix project-name option syntax continuous-integration/drone/push Build is passing Details	2023-02-28 02:24:14 +01:00
teutat3s	d62227c14f	ci: add docker compose project name to ensure continuous-integration/drone/push Build is passing Details correct container names	2023-02-28 02:19:34 +01:00
teutat3s	f82f10596c	ci: fix docker login using --password-stdin continuous-integration/drone/push Build is passing Details	2023-02-27 20:38:04 +01:00
teutat3s	cabce4f097	ci: fix docker login continuous-integration/drone/push Build is passing Details	2023-02-27 18:18:02 +01:00