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

v2/design: now with more lines
continuous-integration/drone/push Build is passing Details

pull/4/head
Benjamin Yule Bädorf 2024-02-17 15:07:20 +01:00
parent 3cbfec0520
commit 961ffc722c
Signed by: b12f
GPG Key ID: 729956E1124F8F26
10 changed files with 269 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
_data/navigationItems.yml
View File

@ -1,10 +1,17 @@
- text: Das MiOM
link: '#'
- text: Zusammenarbeiten
link: '#'
- text: Projekte
link: '#'
- text: Der Raum
link: '#'
- text: Das Kollektiv
link: '#'
- text: MiOM
link: /
- text: collaborate
link: /collaborate
- text: Projekte und Veranstaltungen
link: /projekte
- text: der Raum
link: /raum
- text: das Kollektiv
link: /kollektiv
- divider: true
- text: Impressum
link: /impressum
- text: Datenschutz
link: /datenschutz
- text: Source code
link: https://git.pub.solar/MiOM/miom.space

22
_includes/layouts/default.njk
View File

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

3
_includes/layouts/homepage.njk
View File

@ -7,7 +7,8 @@
</div>
<div class="mi-tagline">
<p>Wir schaffen bezahlbaren Raum in dem wir gemeinsam und interdisziplinär arbeiten und experimentieren.</p>
<h1>Hi! Wir sind das MiOM</h1>
<p>Wir schaffen bezahlbaren Raum in dem wir gemeinsam interdisziplinär arbeiten und experimentieren.</p>
</div>
{% for card in cards %}

30
_includes/navigation.njk
View File

@ -1,22 +1,22 @@
<nav class="mi-nav" id="nav">
<label
<button
type="button"
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"
/>
onclick="document.getElementById('nav').classList.toggle('mi-nav_open')"
>_menu</button>
<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>
{% if item.divider %}
<li class="mi-nav--divider" aria-hidden="true"></li>
{% else %}
<li class="mi-nav--item">
<a
class="mi-nav--link"
href="{{ item.link }}"
>{{ item.text }}</a>
</li>
{% endif %}
{% endfor %}
</ul>
</nav>

9
datenschutz.yml Normal file
View File

@ -0,0 +1,9 @@
layout: layouts/default.njk
title: Datenschutz
text: '
Diese Webseite wird ohne Logdateien betrieben. Wir benutzen keine Cookies, speichern keine persönlichen Daten, und analysieren kein Nutzerverhalten.
Schaue ins [Impressum](/impressum) für Kontaktdaten.
'

18
impressum.yml Normal file
View File

@ -0,0 +1,18 @@
layout: layouts/default.njk
title: Impressum
text: '
Verantwortlich für Inhalte:
<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>
'

16
index.yml
View File

@ -3,26 +3,26 @@ layout: layouts/homepage.njk
tagline: Wir schaffen bezahlbaren Raum in dem wir gemeinsam und interdisziplinär arbeiten und experimentieren.
cards:
- text: Zusammenarbeiten
- text: collaborate
link: ./collaborate
image:
alt: "Eine Gruppe Menschen sitzt an einem Tisch und arbeitet"
url: /img/hakken.jpeg
- text: Projekte
link: ./projects
- text: Projekte und Veranstaltungen
link: ./projekte
image:
alt: "Eine Gruppe Menschen sitzt an einem Tisch und arbeitet"
url: /img/poledance.jpg
url: /img/aussenchill.jpg
- text: Der Raum
link: ./the-room
- text: der Raum
link: ./raum
image:
alt: "Die Werkstatt vom MiOM. Es stehen einige Geräte wie Bohrmaschinen und Sägen rum."
url: /img/werkstatt.jpg
- text: Das Kollektiv
link: ./the-collective
- text: das Kollektiv
link: ./kollektiv
image:
alt: "Eine Gruppe Menschen sitzt an einem Tisch und arbeitet"
url: /img/crowd.jpg

18
kollektiv.yml Normal file
View File

@ -0,0 +1,18 @@
layout: layouts/default.njk
title: Das Kollektiv
text: |
> Each one teach one
## Kurze Geschichte
Entstanden sind wir 2020, im damaligen [Wandelwerk](https://wandelwerk.koeln/). Nachdem wir dort ausziehen mussten sind wir ins Gewächshaus umgezogen.
2022 haben wir einen Verein gegründet um die finanziellen und organisatorischen Aufgaben in einer Basisdemokratischen Struktur unter zu bringen.
## Organisatorisches
Findest du hier.

2
privacy-policy.yml
View File

@ -3,7 +3,7 @@ layout: layouts/default.njk
title: Privacy policy
text: '
We run on a no-logging policy. We do not track or keep any personal data.
This website runs on a no-logging policy. We do not track or keep any personal data when viewing this site.
See [our imprint](/imprint) for contact information.
'

195
styles.css
View File

@ -6,7 +6,7 @@ html {
--primary: #fd0ebf;
--background: #fff;
--foreground: #000;
--box-padding: 1rem 2rem;
--box-padding: 0.6rem;
font-family: 'Raleway', sans-serif;
@ -14,8 +14,19 @@ html {
line-height: 175%;
}
@media screen and (min-width: 800px) {
html {
--box-padding: 2rem;
}
}
*:focus {
outline: 1px dashed var(--primary);
outline: 5px dashed var(--primary);
outline-offset: -5px;
}
a, a:visited {
color: var(--primary);
}
.mi-page {
@ -28,44 +39,160 @@ html {
width: 100vw;
}
.mi-border {
pointer-events: none;
z-index: 10;
}
.mi-border > * {
pointer-events: all;
}
.mi-border--top,
.mi-border--bottom,
.mi-border--left,
.mi-border--right {
background: var(--background);
position: fixed;
overflow: hidden;
border: 1px solid var(--foreground);
box-sizing: content-box;
font-size: calc(0.5 * var(--box-padding));
line-height: 150%;
}
.mi-border--top::before,
.mi-border--bottom::before,
.mi-border--left::before,
.mi-border--right::before {
display: flex;
align-items: center;
white-space: nowrap;
content: 'each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one each one teach one';
color: black;
height: var(--box-padding);
}
.mi-border--top::before,
.mi-border--bottom::before {
width: 100%;
}
.mi-border--left::before,
.mi-border--right::before {
width: 10000vh;
}
.mi-border--top {
height: var(--box-padding);
top: 0;
left: 0;
right: 0;
border-top: 0;
margin-left: var(--box-padding);
margin-right: var(--box-padding);
}
.mi-border--bottom {
height: var(--box-padding);
bottom: 0;
left: 0;
right: 0;
border-bottom: 0;
margin-left: var(--box-padding);
margin-right: var(--box-padding);
}
.mi-border--left {
width: var(--box-padding);
top: 0;
left: 0;
bottom: 0;
border-left: 0;
margin-top: var(--box-padding);
margin-bottom: var(--box-padding);
}
.mi-border--left::before {
transform-origin: 0 0;
transform: translateY(100vh) rotateZ(-90deg);
}
.mi-border--right {
width: var(--box-padding);
top: 0;
right: 0;
bottom: 0;
border-right: 0;
margin-top: var(--box-padding);
margin-bottom: var(--box-padding);
}
.mi-border--right::before {
transform-origin: 0 0;
transform: translateX(var(--box-padding)) translateY(-17px) rotateZ(90deg);
}
.mi-border--bottom::before {
transform: rotateZ(-180deg) translateX(-34px);
text-align: right;
}
.mi-nav {
border-bottom: 1px solid var(--foreground);
position: sticky;
top: 0;
left: 0;
width: 100vw;
background: var(--background);
z-index: 100;
display: flex;
align-items: stretch;
}
.mi-nav--toggle {
padding: 0.25rem 1rem;
margin-left: calc(var(--box-padding) + 1px);
padding: 0 1rem;
height: 2rem;
display: flex;
justify-content: center;
align-items: center;
border: 0;
border-right: 1px solid var(--foreground);
background: var(--background);
font-size: 1rem;
cursor: pointer;
}
.mi-nav--toggle-checky {
visibility: hidden;
.mi-nav--toggle:hover {
color: var(--primary);
}
.mi-nav--list {
list-style: none;
display: none;
padding: 0;
padding: var(--box-padding) 0;
margin: 0;
position: absolute;
background: var(--background);
border-bottom: 1px solid var(--foreground);
left: 0;
right: 0;
left: calc(var(--box-padding) + 1px);
right: calc(var(--box-padding) + 1px);
top: calc(2rem + 1px);
bottom: calc(-100vh + 2rem + var(--box-padding));
}
.mi-nav--toggle-checky:checked+.mi-nav--list {
.mi-nav_open .mi-nav--list {
display: flex;
flex-direction: column;
}
.mi-nav--divider {
flex-grow: 1;
}
.mi-nav--link {
display: flex;
padding: 0.25rem 1rem;
padding: 0.25rem var(--box-padding);
color: var(--foreground);
text-decoration: none;
}
@ -80,26 +207,16 @@ html {
text-decoration: underline;
}
@media screen and (min-width: 800px) {
.mi-nav--toggle, .mi-nav--toggle-checky {
display: none;
}
.mi-nav--list {
display: flex;
position: static;
border-bottom: 0;
}
.mi-nav--item {
flex-grow: 1;
}
}
.mi-main {
background: var(--background);
margin: 0;
margin: 0 var(--box-padding);
flex-grow: 1;
position: relative;
margin-bottom: var(--box-padding);
}
.mi-main_content {
padding: var(--box-padding);
}
.mi-cards {
@ -146,8 +263,10 @@ html {
.mi-tagline {
background: var(--background);
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
padding: 0.25rem 1rem;
min-height: 300px;
}
.mi-card {
@ -157,6 +276,11 @@ html {
padding: 1rem;
}
.mi-card:hover,
.mi-card:focus {
z-index: 1;
}
.mi-card--background {
width: calc(100% - 2rem);
height: calc(100% - 2rem);
@ -164,11 +288,17 @@ html {
top: 1rem;
left: 1rem;
object-fit: cover;
filter: grayscale(100%);
}
.mi-card:focus .mi-card--background,
.mi-card:hover .mi-card--background {
filter: grayscale(0%);
}
.mi-card--text {
color: var(--background);
background: var(--primary);
background: var(--foreground);
display: flex;
z-index: 1;
padding: 0.25rem 1rem;
@ -178,9 +308,14 @@ html {
right: 2rem;
}
.mi-card:hover .mi-card--text {
color: var(--primary);
}
.mi-footer {
border-top: 1px solid var(--foreground);
background: var(--background);
margin: var(--box-padding);
}
.mi-footer--links {