MiOM/miom.space
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

v2 #4

Merged
teutat3s merged 10 commits from v2 into main 2024-02-25 22:09:26 +00:00
Conversation 0 Commits 10 Files changed 57 +295 -309
25 changed files with 295 additions and 309 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 3cbfec0520 - Show all commits

10
_data/navigationItems.yml Normal file
View file

@ -0,0 +1,10 @@
- text: Das MiOM
link: '#'
- text: Zusammenarbeiten
link: '#'
- text: Projekte
link: '#'
- text: Der Raum
link: '#'
- text: Das Kollektiv
link: '#'

2
_includes/footer.njk
View file

@ -1,4 +1,4 @@
<footer class="mi-footer mi-content"> <footer class="mi-footer">
<nav> <nav>
<ul class="mi-footer--links"> <ul class="mi-footer--links">
<li><a href="/imprint" class="mi-footer--link">Imprint</a></li> <li><a href="/imprint" class="mi-footer--link">Imprint</a></li>

17
_includes/layouts/default.njk
View file

@ -21,24 +21,13 @@
{% endif %} {% endif %}
</head> </head>
<body class="mi-page"> <body class="mi-page">
{% block header %} {% include "navigation.njk" %}
<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 %} {% block main %}
<main class="mi-main mi-content">
{{ article | md | safe }} {{ article | md | safe }}
{% endblock %}
</main> </main>
{% endblock %}
{% include "footer.njk" %} {% include "footer.njk" %}
</body> </body>

35
_includes/layouts/homepage.njk
View file

@ -1,20 +1,27 @@
{% extends 'layouts/default.njk' %} {% 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 %} {% 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 %} {% endblock %}

22
_includes/navigation.njk Normal file
View file

@ -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>

3
build.sh
View file

@ -6,5 +6,6 @@ rm -rf ./_site
# Build, results are in ./_site # Build, results are in ./_site
deno task build deno task build
# Put fonts in place # Put binary assets in place
cp -r ./fonts ./_site/ cp -r ./fonts ./_site/
cp -r ./img ./_site/

72
flake.lock
View file

@ -2,17 +2,17 @@
"nodes": { "nodes": {
"devshell": { "devshell": {
"inputs": { "inputs": {
"flake-utils": "flake-utils",
"nixpkgs": [ "nixpkgs": [
"nixpkgs" "nixpkgs"
], ]
"systems": "systems"
}, },
"locked": { "locked": {
"lastModified": 1687944744, "lastModified": 1705332421,
"narHash": "sha256-4ZtRVG/5yWHPZpkit1Ak5Mo1DDnkx1AG1HpNu/P+n5U=", "narHash": "sha256-USpGLPme1IuqG78JNqSaRabilwkCyHmVWY0M9vYyqEA=",
"owner": "numtide", "owner": "numtide",
"repo": "devshell", "repo": "devshell",
"rev": "3864857b2754ab0e16c7c7c626f0e5a1d4e42f38", "rev": "83cb93d6d063ad290beee669f4badf9914cc16ec",
"type": "github" "type": "github"
}, },
"original": { "original": {
@ -22,15 +22,33 @@
} }
}, },
"flake-utils": { "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": { "inputs": {
"systems": "systems_2" "systems": "systems_2"
}, },
"locked": { "locked": {
"lastModified": 1687709756, "lastModified": 1705309234,
"narHash": "sha256-Y5wKlQSkgEK2weWdOu4J3riRd+kV/VCgHsqLNTTWQ/0=", "narHash": "sha256-uNRRNRKmJyCRC/8y1RqBkqWBLM034y4qN7EprSdmgyA=",
"owner": "numtide", "owner": "numtide",
"repo": "flake-utils", "repo": "flake-utils",
"rev": "dbabf0ca0c0c4bce6ea5eaf65af5cb694d2082c7", "rev": "1ef2e671c3b0c19053962c07dbda38332dcebf26",
"type": "github" "type": "github"
}, },
"original": { "original": {
@ -41,11 +59,11 @@
}, },
"nixpkgs": { "nixpkgs": {
"locked": { "locked": {
"lastModified": 1688231357, "lastModified": 1707956935,
"narHash": "sha256-ZOn16X5jZ6X5ror58gOJAxPfFLAQhZJ6nOUeS4tfFwo=", "narHash": "sha256-ZL2TrjVsiFNKOYwYQozpbvQSwvtV/3Me7Zwhmdsfyu4=",
"owner": "nixos", "owner": "nixos",
"repo": "nixpkgs", "repo": "nixpkgs",
"rev": "645ff62e09d294a30de823cb568e9c6d68e92606", "rev": "a4d4fe8c5002202493e87ec8dbc91335ff55552c",
"type": "github" "type": "github"
}, },
"original": { "original": {
@ -58,9 +76,8 @@
"root": { "root": {
"inputs": { "inputs": {
"devshell": "devshell", "devshell": "devshell",
"flake-utils": "flake-utils", "flake-utils": "flake-utils_2",
"nixpkgs": "nixpkgs", "nixpkgs": "nixpkgs"
"tritonshell-module": "tritonshell-module"
} }
}, },
"systems": { "systems": {
@ -92,33 +109,6 @@
"repo": "default", "repo": "default",
"type": "github" "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", "root": "root",

22
flake.nix
View file

@ -1,5 +1,5 @@
{ {
description = "devs & ops environment for nix'ing with triton"; description = "MiOM homepage live at @ miom.space";
inputs = { inputs = {
nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable"; nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable";
@ -8,14 +8,9 @@
devshell.url = "github:numtide/devshell"; devshell.url = "github:numtide/devshell";
devshell.inputs.nixpkgs.follows = "nixpkgs"; 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 { flake-utils.lib.simpleFlake {
inherit self nixpkgs; inherit self nixpkgs;
name = "miom.space"; name = "miom.space";
@ -33,19 +28,6 @@
''; '';
in in
pkgs.devshell.mkShell { 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; [ devshell.packages = with pkgs; [
deno deno
google-font-downloader google-font-downloader

BIN
img/IMG_0199.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.7 MiB

BIN
img/IMG_0200.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
img/IMG_0746.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.5 MiB

BIN
img/IMG_0817.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
img/aussenchill.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.7 MiB

BIN
img/crowd-top.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2 MiB

BIN
img/crowd.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.2 MiB

BIN
img/hakken.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 574 KiB

BIN
img/logo.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 35 MiB

BIN
img/poledance.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2 MiB

BIN
img/signal-2023-03-02-144400_020.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 419 KiB

BIN
img/werkstatt.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 MiB

4
imprint.yml
View file

@ -1,8 +1,8 @@
layout: layouts/default.njk layout: layouts/default.njk
title: 'Imprint' title: Imprint
article: ' text: '
Responsible for contents: Responsible for contents:

33
index.yml
View file

@ -1,17 +1,28 @@
layout: layouts/homepage.njk layout: layouts/homepage.njk
introduction: " tagline: Wir schaffen bezahlbaren Raum in dem wir gemeinsam und interdisziplinär arbeiten und experimentieren.
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.
cards:
- text: Zusammenarbeiten
link: ./collaborate
image:
alt: "Eine Gruppe Menschen sitzt an einem Tisch und arbeitet"
url: /img/hakken.jpeg
Each one teach one. - text: Projekte
" link: ./projects
image:
cta: " alt: "Eine Gruppe Menschen sitzt an einem Tisch und arbeitet"
Interested? url: /img/poledance.jpg
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: 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

4
privacy-policy.yml
View file

@ -1,8 +1,8 @@
layout: layouts/default.njk 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. We run on a no-logging policy. We do not track or keep any personal data.
See [our imprint](/imprint) for contact information. See [our imprint](/imprint) for contact information.

30
raleway.css
View file

@ -4,7 +4,7 @@
font-style: normal; font-style: normal;
font-weight: 100; font-weight: 100;
font-display: swap; 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; unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
} }
/* cyrillic */ /* cyrillic */
@ -13,7 +13,7 @@
font-style: normal; font-style: normal;
font-weight: 100; font-weight: 100;
font-display: swap; 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; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
} }
/* vietnamese */ /* vietnamese */
@ -22,7 +22,7 @@
font-style: normal; font-style: normal;
font-weight: 100; font-weight: 100;
font-display: swap; 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; 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 */ /* latin-ext */
@ -31,7 +31,7 @@
font-style: normal; font-style: normal;
font-weight: 100; font-weight: 100;
font-display: swap; 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; 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 */ /* latin */
@ -40,7 +40,7 @@
font-style: normal; font-style: normal;
font-weight: 100; font-weight: 100;
font-display: swap; 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; 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 */ /* cyrillic-ext */
@ -49,7 +49,7 @@
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-display: swap; 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; unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
} }
/* cyrillic */ /* cyrillic */
@ -58,7 +58,7 @@
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-display: swap; 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; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
} }
/* vietnamese */ /* vietnamese */
@ -67,7 +67,7 @@
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-display: swap; 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; 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 */ /* latin-ext */
@ -76,7 +76,7 @@
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-display: swap; 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; 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 */ /* latin */
@ -85,7 +85,7 @@
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-display: swap; 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; 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 */ /* cyrillic-ext */
@ -94,7 +94,7 @@
font-style: normal; font-style: normal;
font-weight: 900; font-weight: 900;
font-display: swap; 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; unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
} }
/* cyrillic */ /* cyrillic */
@ -103,7 +103,7 @@
font-style: normal; font-style: normal;
font-weight: 900; font-weight: 900;
font-display: swap; 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; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
} }
/* vietnamese */ /* vietnamese */
@ -112,7 +112,7 @@
font-style: normal; font-style: normal;
font-weight: 900; font-weight: 900;
font-display: swap; 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; 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 */ /* latin-ext */
@ -121,7 +121,7 @@
font-style: normal; font-style: normal;
font-weight: 900; font-weight: 900;
font-display: swap; 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; 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 */ /* latin */
@ -130,6 +130,6 @@
font-style: normal; font-style: normal;
font-weight: 900; font-weight: 900;
font-display: swap; 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; 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;
} }

318
styles.css
View file

@ -3,227 +3,201 @@
} }
html { html {
--primary: #fd0ebf;
--background: #fff;
--foreground: #000;
--box-padding: 1rem 2rem;
font-family: 'Raleway', sans-serif; font-family: 'Raleway', sans-serif;
font-size: 7.3vw; font-size: 24px;
line-height: 150%; line-height: 175%;
background: white;
} }
body { *:focus {
background: white; outline: 1px dashed var(--primary);
} }
a, .mi-page {
a:visited { margin: 0;
color: #ff006c; padding: 0;
background: var(--background);
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100vw;
}
.mi-nav {
border-bottom: 1px solid var(--foreground);
position: sticky;
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;
}
.mi-nav--toggle-checky:checked+.mi-nav--list {
display: flex;
flex-direction: column;
}
.mi-nav--link {
display: flex;
padding: 0.25rem 1rem;
color: var(--foreground);
text-decoration: none; text-decoration: none;
} }
a:hover { .mi-nav--link:before {
display: inline-block;
content: '__';
}
.mi-nav--link:hover {
color: var(--primary);
text-decoration: underline; text-decoration: underline;
} }
h1 { @media screen and (min-width: 800px) {
font-size: 1.4rem; .mi-nav--toggle, .mi-nav--toggle-checky {
display: none;
} }
h2 { .mi-nav--list {
font-size: 1.2rem;
}
.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;
display: flex; display: flex;
font-size: 0.7rem; position: static;
flex-direction: column; border-bottom: 0;
font-weight: 100;
position: relative;
} }
.mi-things-we-are::before { .mi-nav--item {
display: flex; flex-grow: 1;
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-things-we-are--space {
opacity: 0;
}
.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-things-we-are--thing:first-child {
margin-top: -1.7rem;
} }
.mi-main { .mi-main {
grid-row-start: 2; background: var(--background);
grid-row-end: 3;
font-size: 3vw;
line-height: 150%;
}
.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; margin: 0;
font-size: 0.8em; flex-grow: 1;
} }
.mi-person--pronoun { .mi-cards {
font-weight: 400; display: grid;
background: var(--foreground);
grid-gap: 1px;
grid-template-columns: 1fr;
} }
.mi-person--role { @media screen and (min-width: 800px) {
font-size: 0.4rem; .mi-cards {
margin: 0; grid-template-columns: repeat(8, 1fr);
} }
.mi-person--contact-toggle { .mi-card {
font-size: 0.4rem; grid-column: auto / span 4;
font-weight: 400;
color: #ff006c;
cursor: pointer;
} }
.mi-person--contact-options { .mi-logo {
margin: 0; grid-column: 1 / span 3;
padding: 0;
font-size: 0.4rem;
} }
.mi-person--contact-option-name { .mi-tagline {
padding-right: 0.5em; grid-column: 4 / span 5;
}
} }
.mi-footer { @media screen and (min-width: 1600px) {
font-size: 0.5rem; .mi-card {
grid-column: auto / span 2;
}
} }
.mi-footer--links { .mi-logo {
background: var(--background);
}
.mi-logo--img {
width: 100%;
height: 100%;
object-fit: contain;
}
.mi-tagline {
background: var(--background);
display: flex; display: flex;
flex-direction: column; align-items: center;
list-style: none; padding: 0.25rem 1rem;
padding: 0;
line-height: 140%;
} }
@media screen and (min-width: 1400px) { .mi-card {
html { background: var(--background);
font-size: 5vw; position: relative;
height: 600px;
padding: 1rem;
} }
.mi-page { .mi-card--background {
grid-template-columns: auto 1fr; width: calc(100% - 2rem);
grid-template-rows: auto auto auto auto; height: calc(100% - 2rem);
position: absolute;
top: 1rem;
left: 1rem;
object-fit: cover;
} }
.mi-page--title { .mi-card--text {
white-space: nowrap; color: var(--background);
line-height: 200%; background: var(--primary);
display: flex;
z-index: 1;
padding: 0.25rem 1rem;
position: absolute;
bottom: 2rem;
left: 2rem;
right: 2rem;
} }
.mi-things-we-are { .mi-footer {
padding: 1.15rem 0; border-top: 1px solid var(--foreground);
} background: var(--background);
.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 { .mi-footer--links {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
} }
.mi-footer--link {
text-decoration: none;
color: var(--foreground);
padding: 0.25rem 1rem;
}
.mi-footer--link:hover {
text-decoration: underline;
} }