Simple lume setup

.envrc

@@ -0,0 +1 @@
+eval "$(lorri direnv)"

.gitignore

@@ -0,0 +1,2 @@
+tags
+_site

Caddyfile

@@ -0,0 +1,13 @@
+{
+  # acme_ca https://acme-staging-v02.api.letsencrypt.org/directory
+  log {
+    output file /var/log/caddy {
+      roll_keep 16
+    }
+  }
+}
+
+abkommen60jahre.de {
+  root * /var/www/abkommen60jahre.de
+  file_server
+}

README.md

@@ -0,0 +1,5 @@
+Install Lume:
+
+https://lumeland.github.io/getting-started/installation/
+
+deno run -A https://deno.land/x/lume/install.ts

_config.ts

@@ -0,0 +1,20 @@
+import lume from "https:/deno.land/x/lume/mod.ts";
+import postcss from "https:/deno.land/x/lume/plugins/postcss.ts";
+
+const markdown = { breaks: true };
+
+const site = lume({}, { markdown });
+
+site.use(postcss());
+
+site.loadAssets([
+  ".png",
+  ".jpg",
+  ".svg",
+  ".pdf",
+  ".woff2",
+]);
+
+site.filter("title", (value = '') => value + (value ? " | " : "") + "MiOM");
+
+export default site;

_data/people.yml

@@ -0,0 +1,25 @@
+- name: Benjamin Bädorf
+  role: Software Engineer
+  pronouns: he/him
+  contact:
+    - name: MAIL
+      value: byb@miom.space
+    - name: GIT
+      value: 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
+
+- name: Jhonas Wernery
+  role: System Engineer
+  pronouns: he/him
+  contact:
+    - name: MAIL
+      value: jfw@miom.space
+    - name: GIT
+      value: git.b12f.io/teutat3s
+    - name: MATRIX
+      value: '@teutat3s:pub.solar'

_data/thingsWeAre.yml

@@ -0,0 +1,9 @@
+- 'an Off'
+- 'a Creative'
+- 'a Coworking'
+- 'an Art'
+- 'a Tech'
+- 'a Meeting'
+- 'a Gallery'
+- 'an Event'
+- 'a People'

_includes/citations.njk

@@ -0,0 +1,7 @@
+<ol class="citation-list">
+  {% for citation in citations %}
+    <li>
+      <cite class="citation">{{ citation | md | safe }}</cite>
+    </li>
+  {% endfor %}
+</ol>

_includes/downloads.njk

@@ -0,0 +1,18 @@
+<section class="downloads">
+  <ul class="downloads-list">
+    {% for download in downloads %}
+      <li class="download">
+        <div class="download-name">{{ download.name | safe }}</div>
+        <a
+          href="{{ download.location }}"
+          class="download-link download-link_pdf"
+          download
+        >PDF</a>
+        <a
+          href="{{ download.web }}"
+          class="download-link"
+        >Web</a>
+      </li>
+    {% endfor %}
+  </ul>
+</section>

_includes/event-day.njk

@@ -0,0 +1,11 @@
+<details class="event-day">
+  <summary class="event-day-heading">
+    {{ eventDay.heading }}
+  </summary>
+
+  {% if eventDay.events %}
+    {% for event in eventDay.events %}
+      {% include "event.njk" %}
+    {% endfor %}
+  {% endif %}
+</details>

_includes/event.njk

@@ -0,0 +1,41 @@
+<article class="event">
+  <p class="event-time">{{ event.time }}</p>
+
+  <h1 class="event-title">{{ event.title | safe }}</h1>
+
+  <p class="event-details">{{ event.details | safe }}</p>
+
+  <div class="event-description">{{ event.description | md | safe }}</div>
+
+  <address class="event-location">
+    {% if event.organiser %}
+      {{ event.organiser }}<br><br>
+    {% endif %}
+    
+    {{ event.location.name }}
+    {% if event.location.place %} <br>{{ event.location.place }} {% endif %}
+    {% if event.location.address %} <br>{{ event.location.address }} {% endif %}
+    {% if event.location.city %} <br>{{ event.location.city }} {% endif %}
+  </address>
+
+  {% if event.people %}
+    <div class="event-people">
+      <h5>Ansprechpartner:</h5>
+      <ul class="event-people-list">
+        {% for person in event.people %}
+          <li>
+            {% if person.name %}
+              {{ person.name }}
+            {% endif %}
+            {% if person.email %}
+              <br><a href="mailto:{{ person.email }}" class="event-people-link">{{ person.email }}</a>
+            {% endif %}
+            {% if person.tel %}
+              <br><a href="tel:{{ person.tel }}" class="event-people-link">{{ person.tel }}</a>
+            {% endif %}
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  {% endif %}
+</article>

_includes/footer.njk

@@ -0,0 +1,9 @@
+<footer class="footer">
+  <nav>
+    <ul class="footer-links">
+      <li><a href="/impressum" class="footer-link">Impressum</a></li>
+      <li><a href="/datenschutz" class="footer-link">Datenschutz</a></li>
+      <li><a href="/impressum/barrierefreiheit" class="footer-link">Barrierefreiheit</a></li>
+    </ul>
+  </nav>
+</footer>

_includes/header.njk

@@ -0,0 +1,7 @@
+<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>

_includes/hero.njk

@@ -0,0 +1,10 @@
+<header class="mi-header mi-header_hero">
+  <h1 class="mi-header--headline">
+    MiOM 202 is
+    <div class="mi-header--things-we-are">
+      {% for thingWeAre in thingsWeAre %}
+        <span class="mi-header--thing-we-are">{{ thingWeAre }}</span>
+      {% endfor %}
+    </div>space
+  </h1>
+</header>

_includes/layouts/default.njk

@@ -0,0 +1,38 @@
+<!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 202 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="/header.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="page">
+    {% block header %}
+      {% include "header.njk" %}
+    {% endblock %}
+
+    <main class="page-main">
+      {% if article %}
+        {{ article | md | safe }}
+      {% endif %}
+
+      {% block special %}{% endblock %}
+    </main>
+
+    {% include "footer.njk" %}
+  </body>
+</html>

_includes/layouts/homepage.njk

@@ -0,0 +1,18 @@
+---
+themeColor: #FFFFFF
+language: en
+cssCacheBust: ''
+
+header: null
+article: null
+---
+
+{% extends "layouts/default.njk" %}
+
+{% block header %}
+  {% include "hero.njk" %}
+{% endblock %}
+
+{% block special %}
+  {% include "people.njk" %}
+{% endblock %}

_includes/media.njk

@@ -0,0 +1,19 @@
+<section
+  id="media"
+  class="media"
+>
+  {% for medium in media %}
+    <h2>{{ medium.title }}</h2>
+
+    <figure class="media-iframe-parent">
+      <iframe
+        class="media-iframe"
+        src="https://www.youtube.com/embed/{{ medium.id }}"
+        title="YouTube video player"
+        frameborder="0"
+        allow="autoplay; clipboard-write; encrypted-media; picture-in-picture"
+        allowfullscreen
+      ></iframe>
+    </figure>
+  {% endfor %}
+</section>

_includes/navigation.njk

@@ -0,0 +1,43 @@
+<nav
+  id="navigation"
+  class="navigation"
+>
+  <a href="/" class="logo navigation-link">
+    <img
+      class="logo-image"
+      src="/img/logo-60jahre.png"
+      alt="Unser Logo"
+    />
+  </a>
+
+  <button
+    type="button"
+    id="navigation-toggle"
+    class="navigation-toggle"
+    aria-label="Navigation Öffnen und Schliessen"
+  >
+    <span class="navigation-toggle-line"></span>
+    <span class="navigation-toggle-line"></span>
+    <span class="navigation-toggle-line"></span>
+  </button>
+
+  <script>
+    const navToggle = document.getElementById("navigation-toggle");
+    const nav = document.getElementById("navigation");
+    navToggle.addEventListener("click", function () {
+      nav.classList.toggle("navigation_open");
+    });
+  </script>
+
+  <ul class="menu">
+    <li class="menu-item">
+      <a href="/veranstaltungen" class="navigation-link">Veranstaltungen</a>
+    </li>
+    <li class="menu-item">
+      <a href="/medien" class="navigation-link">Medien</a>
+    </li>
+    <li class="menu-item">
+      <a href="/unterricht" class="navigation-link">Bildung</a>
+    </li>
+  </ul>
+</nav>

_includes/people.njk

@@ -0,0 +1,5 @@
+<ol class="mi-people">
+  {% for person in people %}
+    <li></li>
+  {% endfor %}
+</ol>

build.sh

@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+
+lume
+cp -r ./img ./_site/
+cp -r ./unterricht/docs ./_site/unterricht/
+cp -r ./fonts ./_site/
+cp favicon.png ./_site/

header.css

@@ -0,0 +1,32 @@
+.mi-header {
+  padding: 0 5vw;
+  --slide: 28vh;
+}
+
+.mi-header--headline {
+  font-weight: 900;
+  margin: 0;
+  margin-top: var(--slide);
+  font-size: 5vw;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+
+.mi-header--things-we-are {
+  padding: 0 3vh;
+  margin: 0 3vh;
+  background: black;
+  color: white;
+  display: inline-block;
+  position: relative;
+  top: calc(-1 * var(--slide));
+}
+
+.mi-header--thing-we-are {
+  display: block;
+  position: relative;
+  left: 0;
+  top: 0;
+}

index.yml

@@ -0,0 +1 @@
+layout: layouts/homepage.njk

shell.nix

@@ -0,0 +1,11 @@
+with (import (fetchTarball https://github.com/nixos/nixpkgs/archive/nixpkgs-unstable.tar.gz) {});
+mkShell {
+  buildInputs = [
+    nodejs
+    deno
+  ];
+
+  shellHook = ''
+    export PATH="$PATH:/home/ben/.deno/bin"
+  '';
+}

styles.css

@@ -0,0 +1,23 @@
+/*
+@import url('https://fonts.googleapis.com/css2?&family=Raleway:wght@900&display=swap');
+*/
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  /*
+  font-family: 'Dosis', sans-serif;
+  */
+  font-family: 'Raleway', sans-serif;
+}
+
+.page {
+  margin: 0;
+  padding: 0;
+  display: grid;
+  overflow: hidden;
+}
+
+