Initial commit for v2

2024-02-16 19:52:30 +01:00 · 2024-02-16 19:52:30 +01:00 · 3cbfec0520
parent 17e3d14685
commit 3cbfec0520
25 changed files with 295 additions and 309 deletions
--- a/_data/navigationItems.yml
+++ b/_data/navigationItems.yml
@ -0,0 +1,10 @@
+- text: Das MiOM
+  link: '#'
+- text: Zusammenarbeiten
+  link: '#'
+- text: Projekte
+  link: '#'
+- text: Der Raum
+  link: '#'
+- text: Das Kollektiv
+  link: '#'
--- a/_includes/footer.njk
+++ b/_includes/footer.njk
@ -1,4 +1,4 @@
-<footer class="mi-footer mi-content">
+<footer class="mi-footer">
  <nav>
    <ul class="mi-footer--links">
      <li><a href="/imprint" class="mi-footer--link">Imprint</a></li>
--- a/_includes/layouts/default.njk
+++ b/_includes/layouts/default.njk
@ -21,24 +21,13 @@
    {% 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>
+    {% include "navigation.njk" %}

-      <header class="mi-page--title mi-content">
-        <h1>{{ title }}</h1>
-      </header>
-    {% endblock %}
-
-    <main class="mi-main mi-content">
-      {% block main %}
+    {% block main %}
+      <main class="mi-main mi-content">
        {{ article | md | safe }}
-      {% endblock %}
-    </main>
+      </main>
+    {% endblock %}

    {% include "footer.njk" %}
  </body>
--- a/_includes/layouts/homepage.njk
+++ b/_includes/layouts/homepage.njk
@ -1,20 +1,27 @@
 {% 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 }}
+  <main class="mi-main mi-cards">
+    <div class="mi-logo">
+      <img src="/img/logo.jpg" class="mi-logo--img" />
+    </div>

-  {% include "people.njk" %}
+    <div class="mi-tagline">
+      <p>Wir schaffen bezahlbaren Raum in dem wir gemeinsam und interdisziplinär arbeiten und experimentieren.</p>
+    </div>

-  {{ cta | md | safe }}
+    {% for card in cards %}
+      <a
+        class="mi-card"
+        href="{{ card.link }}"
+      >
+        <img
+          class="mi-card--background"
+          src="{{ card.image.url }}"
+          alt="{{ card.image.alt }}"
+        />
+        <div class="mi-card--text">{{ card.text }}</div>
+      </a>
+    {% endfor %}
+  </main>
 {% endblock %}
--- a/_includes/navigation.njk
+++ b/_includes/navigation.njk
@ -0,0 +1,22 @@
+<nav class="mi-nav" id="nav">
+  <label
+    class="mi-nav--toggle"
+    aria-role="button"
+    aria-roledescription="toggles the menu"
+    for="nav-toggle-checky"
+    tabindex="0"
+    onkeypress="document.getElementById('nav-toggle-checky').checked = !document.getElementById('nav-toggle-checky').checked"
+  >_MiOM</label>
+  <input
+    class="mi-nav--toggle-checky"
+    type="checkbox"
+    id="nav-toggle-checky"
+  />
+  <ul class="mi-nav--list">
+    {% for item in navigationItems %}
+      <li class="mi-nav--item">
+        <a class="mi-nav--link" href="{{ item.link }}">{{ item.text }}</a>
+      </li>
+    {% endfor %}
+  </ul>
+</nav>
--- a/build.sh
+++ b/build.sh
@ -6,5 +6,6 @@ rm -rf ./_site
 # Build, results are in ./_site
 deno task build

-# Put fonts in place
+# Put binary assets in place
 cp -r ./fonts ./_site/
+cp -r ./img ./_site/
--- a/flake.lock
+++ b/flake.lock
@ -2,17 +2,17 @@
  "nodes": {
    "devshell": {
      "inputs": {
+        "flake-utils": "flake-utils",
        "nixpkgs": [
          "nixpkgs"
-        ],
-        "systems": "systems"
+        ]
      },
      "locked": {
-        "lastModified": 1687944744,
-        "narHash": "sha256-4ZtRVG/5yWHPZpkit1Ak5Mo1DDnkx1AG1HpNu/P+n5U=",
+        "lastModified": 1705332421,
+        "narHash": "sha256-USpGLPme1IuqG78JNqSaRabilwkCyHmVWY0M9vYyqEA=",
        "owner": "numtide",
        "repo": "devshell",
-        "rev": "3864857b2754ab0e16c7c7c626f0e5a1d4e42f38",
+        "rev": "83cb93d6d063ad290beee669f4badf9914cc16ec",
        "type": "github"
      },
      "original": {
@ -22,15 +22,33 @@
      }
    },
    "flake-utils": {
+      "inputs": {
+        "systems": "systems"
+      },
+      "locked": {
+        "lastModified": 1701680307,
+        "narHash": "sha256-kAuep2h5ajznlPMD9rnQyffWG8EM/C73lejGofXvdM8=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "4022d587cbbfd70fe950c1e2083a02621806a725",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "flake-utils_2": {
      "inputs": {
        "systems": "systems_2"
      },
      "locked": {
-        "lastModified": 1687709756,
-        "narHash": "sha256-Y5wKlQSkgEK2weWdOu4J3riRd+kV/VCgHsqLNTTWQ/0=",
+        "lastModified": 1705309234,
+        "narHash": "sha256-uNRRNRKmJyCRC/8y1RqBkqWBLM034y4qN7EprSdmgyA=",
        "owner": "numtide",
        "repo": "flake-utils",
-        "rev": "dbabf0ca0c0c4bce6ea5eaf65af5cb694d2082c7",
+        "rev": "1ef2e671c3b0c19053962c07dbda38332dcebf26",
        "type": "github"
      },
      "original": {
@ -41,11 +59,11 @@
    },
    "nixpkgs": {
      "locked": {
-        "lastModified": 1688231357,
-        "narHash": "sha256-ZOn16X5jZ6X5ror58gOJAxPfFLAQhZJ6nOUeS4tfFwo=",
+        "lastModified": 1707956935,
+        "narHash": "sha256-ZL2TrjVsiFNKOYwYQozpbvQSwvtV/3Me7Zwhmdsfyu4=",
        "owner": "nixos",
        "repo": "nixpkgs",
-        "rev": "645ff62e09d294a30de823cb568e9c6d68e92606",
+        "rev": "a4d4fe8c5002202493e87ec8dbc91335ff55552c",
        "type": "github"
      },
      "original": {
@ -58,9 +76,8 @@
    "root": {
      "inputs": {
        "devshell": "devshell",
-        "flake-utils": "flake-utils",
-        "nixpkgs": "nixpkgs",
-        "tritonshell-module": "tritonshell-module"
+        "flake-utils": "flake-utils_2",
+        "nixpkgs": "nixpkgs"
      }
    },
    "systems": {
@ -92,33 +109,6 @@
        "repo": "default",
        "type": "github"
      }
-    },
-    "tritonshell-module": {
-      "inputs": {
-        "devshell": [
-          "devshell"
-        ],
-        "flake-utils": [
-          "flake-utils"
-        ],
-        "nixpkgs": [
-          "nixpkgs"
-        ]
-      },
-      "locked": {
-        "lastModified": 1686817625,
-        "narHash": "sha256-UUt00+BuPiqBv5it8eG99KLWVa7F392PPt52TPO20Zs=",
-        "ref": "main",
-        "rev": "c2280bb09683372f2f482bea3a8bd1112cf990e7",
-        "revCount": 62,
-        "type": "git",
-        "url": "https://git.greenbaum.cloud/dev/tritonshell"
-      },
-      "original": {
-        "ref": "main",
-        "type": "git",
-        "url": "https://git.greenbaum.cloud/dev/tritonshell"
-      }
    }
  },
  "root": "root",
--- 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";
@ -8,14 +8,9 @@

    devshell.url = "github:numtide/devshell";
    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";
@ -33,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/aussenchill.jpg
+++ b/img/aussenchill.jpg
--- a/img/crowd-top.jpg
+++ b/img/crowd-top.jpg
--- a/img/crowd.jpg
+++ b/img/crowd.jpg
--- a/img/hakken.jpeg
+++ b/img/hakken.jpeg
--- a/img/logo.jpg
+++ b/img/logo.jpg
--- a/img/poledance.jpg
+++ b/img/poledance.jpg
--- a/img/signal-2023-03-02-144400_020.jpeg
+++ b/img/signal-2023-03-02-144400_020.jpeg
--- a/img/werkstatt.jpg
+++ b/img/werkstatt.jpg
--- a/imprint.yml
+++ b/imprint.yml
@ -1,8 +1,8 @@
 layout: layouts/default.njk

-title: 'Imprint'
+title: Imprint

-article: '
+text: '
 Responsible for contents:


--- a/index.yml
+++ b/index.yml
@ -1,17 +1,28 @@
 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.
+tagline: Wir schaffen bezahlbaren Raum in dem wir gemeinsam und interdisziplinär arbeiten und experimentieren.

+cards:
+  - text: Zusammenarbeiten
+    link: ./collaborate
+    image:
+      alt: "Eine Gruppe Menschen sitzt an einem Tisch und arbeitet"
+      url: /img/hakken.jpeg

-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.
-"
+  - text: Projekte
+    link: ./projects
+    image:
+      alt: "Eine Gruppe Menschen sitzt an einem Tisch und arbeitet"
+      url: /img/poledance.jpg

+  - text: Der Raum
+    link: ./the-room
+    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
+    image:
+      alt: "Eine Gruppe Menschen sitzt an einem Tisch und arbeitet"
+      url: /img/crowd.jpg
--- a/privacy-policy.yml
+++ b/privacy-policy.yml
@ -1,8 +1,8 @@
 layout: layouts/default.njk

-title: 'Privacy policy'
+title: Privacy policy

-article: '
+text: '
 We run on a no-logging policy. We do not track or keep any personal data.

 See [our imprint](/imprint) for contact information.
--- 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/styles.css
+++ b/styles.css
@ -3,227 +3,201 @@
 }

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

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

-body {
-  background: white;
-}
-
-a,
-a:visited {
-  color: #ff006c;
-  text-decoration: none;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
-h1 {
-  font-size: 1.4rem;
-}
-
-h2 {
-  font-size: 1.2rem;
+*:focus {
+  outline: 1px dashed var(--primary);
 }

 .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';
+.mi-nav {
+  border-bottom: 1px solid var(--foreground);
  position: sticky;
-  top: 1.5rem;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  background: var(--background);
+  z-index: 100;
+}
+
+.mi-nav--toggle {
+  padding: 0.25rem 1rem;
+}
+
+.mi-nav--toggle-checky {
+  visibility: hidden;
+}
+
+.mi-nav--list {
+  list-style: none;
+  display: none;
+  padding: 0;
+  margin: 0;
+  position: absolute;
+  background: var(--background);
+  border-bottom: 1px solid var(--foreground);
  left: 0;
  right: 0;
-  padding: 0.5em 0.666rem;
-  padding-right: 3.75rem;
-  background: white;
-  color: black;
-  z-index: 0;
 }

-.mi-things-we-are--space {
-  opacity: 0;
+.mi-nav--toggle-checky:checked+.mi-nav--list {
+  display: flex;
+  flex-direction: column;
 }

-.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-nav--link {
+  display: flex;
+  padding: 0.25rem 1rem;
+  color: var(--foreground);
+  text-decoration: none;
 }

-.mi-things-we-are--thing:first-child {
-  margin-top: -1.7rem;
+.mi-nav--link:before {
+  display: inline-block;
+  content: '__';
+}
+
+.mi-nav--link:hover {
+  color: var(--primary);
+  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 {
-  grid-row-start: 2;
-  grid-row-end: 3;
+  background: var(--background);
+  margin: 0;
+  flex-grow: 1;
+}

-  font-size: 3vw;
-  line-height: 150%;
+.mi-cards {
+  display: grid;
+  background: var(--foreground);
+  grid-gap: 1px;
+  grid-template-columns: 1fr;
+}
+
+@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;
+  align-items: center;
+  padding: 0.25rem 1rem;
+}
+
+.mi-card {
+  background: var(--background);
+  position: relative;
+  height: 600px;
+  padding: 1rem;
+}
+
+.mi-card--background {
+  width: calc(100% - 2rem);
+  height: calc(100% - 2rem);
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  object-fit: cover;
+}
+
+.mi-card--text {
+  color: var(--background);
+  background: var(--primary);
+  display: flex;
+  z-index: 1;
+  padding: 0.25rem 1rem;
+  position: absolute;
+  bottom: 2rem;
+  left: 2rem;
+  right: 2rem;
 }

 .mi-footer {
-  grid-row-start: 3;
-  grid-row-end: 4;
-  grid-column-start: 2;
-  grid-column-end: 3;
-}
-
-.mi-people {
-  list-style: none;
-  padding: 0;
-  margin: 1rem 0;
-  font-size: 0.6rem;
-  line-height: 120%;
-}
-
-.mi-person {
-  margin-top: 1em;
-}
-
-.mi-person--name {
-  margin: 0;
-  font-size: 0.8em;
-}
-
-.mi-person--pronoun {
-  font-weight: 400;
-}
-
-.mi-person--role {
-  font-size: 0.4rem;
-  margin: 0;
-}
-
-.mi-person--contact-toggle {
-  font-size: 0.4rem;
-  font-weight: 400;
-  color: #ff006c;
-  cursor: pointer;
-}
-
-.mi-person--contact-options {
-  margin: 0;
-  padding: 0;
-  font-size: 0.4rem;
-}
-
-.mi-person--contact-option-name {
-  padding-right: 0.5em;
-}
-
-.mi-footer {
-  font-size: 0.5rem;
+  border-top: 1px solid var(--foreground);
+  background: var(--background);
 }

 .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;
 }