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 +269 -71
10 changed files with 269 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 961ffc722c - Show all commits

27
_data/navigationItems.yml
View file

@ -1,10 +1,17 @@
- text: Das MiOM - text: MiOM
link: '#' link: /
- text: Zusammenarbeiten - text: collaborate
link: '#' link: /collaborate
- text: Projekte - text: Projekte und Veranstaltungen
link: '#' link: /projekte
- text: Der Raum - text: der Raum
link: '#' link: /raum
- text: Das Kollektiv - text: das Kollektiv
link: '#' 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 %} {% endif %}
</head> </head>
<body class="mi-page"> <body class="mi-page">
{% include "navigation.njk" %}
{% block main %} <div class="mi-border" aria-hidden="true">
<main class="mi-main mi-content"> <div class="mi-border--top"></div>
{{ article | md | safe }} <div class="mi-border--left"></div>
</main> <div class="mi-border--right"></div>
<div class="mi-border--bottom"></div>
</div>
{% block navigation %}
{% include "navigation.njk" %}
{% endblock %} {% endblock %}
{% include "footer.njk" %} {% block main %}
<main class="mi-main mi-main_content">
<h1>{{ title }}</h1>
{{ text | md | safe }}
</main>
{% endblock %}
</body> </body>
</html> </html>

3
_includes/layouts/homepage.njk
View file

@ -7,7 +7,8 @@
</div> </div>
<div class="mi-tagline"> <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> </div>
{% for card in cards %} {% for card in cards %}

26
_includes/navigation.njk
View file

@ -1,22 +1,22 @@
<nav class="mi-nav" id="nav"> <nav class="mi-nav" id="nav">
<label <button
type="button"
class="mi-nav--toggle" class="mi-nav--toggle"
aria-role="button" onclick="document.getElementById('nav').classList.toggle('mi-nav_open')"
aria-roledescription="toggles the menu" >_menu</button>
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"> <ul class="mi-nav--list">
{% for item in navigationItems %} {% for item in navigationItems %}
{% if item.divider %}
<li class="mi-nav--divider" aria-hidden="true"></li>
{% else %}
<li class="mi-nav--item"> <li class="mi-nav--item">
<a class="mi-nav--link" href="{{ item.link }}">{{ item.text }}</a> <a
class="mi-nav--link"
href="{{ item.link }}"
>{{ item.text }}</a>
</li> </li>
{% endif %}
{% endfor %} {% endfor %}
</ul> </ul>
</nav> </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. tagline: Wir schaffen bezahlbaren Raum in dem wir gemeinsam und interdisziplinär arbeiten und experimentieren.
cards: cards:
- text: Zusammenarbeiten - text: collaborate
link: ./collaborate link: ./collaborate
image: image:
alt: "Eine Gruppe Menschen sitzt an einem Tisch und arbeitet" alt: "Eine Gruppe Menschen sitzt an einem Tisch und arbeitet"
url: /img/hakken.jpeg url: /img/hakken.jpeg
- text: Projekte - text: Projekte und Veranstaltungen
link: ./projects link: ./projekte
image: image:
alt: "Eine Gruppe Menschen sitzt an einem Tisch und arbeitet" alt: "Eine Gruppe Menschen sitzt an einem Tisch und arbeitet"
url: /img/poledance.jpg url: /img/aussenchill.jpg
- text: Der Raum - text: der Raum
link: ./the-room link: ./raum
image: image:
alt: "Die Werkstatt vom MiOM. Es stehen einige Geräte wie Bohrmaschinen und Sägen rum." alt: "Die Werkstatt vom MiOM. Es stehen einige Geräte wie Bohrmaschinen und Sägen rum."
url: /img/werkstatt.jpg url: /img/werkstatt.jpg
- text: Das Kollektiv - text: das Kollektiv
link: ./the-collective link: ./kollektiv
image: image:
alt: "Eine Gruppe Menschen sitzt an einem Tisch und arbeitet" alt: "Eine Gruppe Menschen sitzt an einem Tisch und arbeitet"
url: /img/crowd.jpg 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 title: Privacy policy
text: ' 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. See [our imprint](/imprint) for contact information.
' '

195
styles.css
View file

@ -6,7 +6,7 @@ html {
--primary: #fd0ebf; --primary: #fd0ebf;
--background: #fff; --background: #fff;
--foreground: #000; --foreground: #000;
--box-padding: 1rem 2rem; --box-padding: 0.6rem;
font-family: 'Raleway', sans-serif; font-family: 'Raleway', sans-serif;
@ -14,8 +14,19 @@ html {
line-height: 175%; line-height: 175%;
} }
@media screen and (min-width: 800px) {
html {
--box-padding: 2rem;
}
}
*:focus { *:focus {
outline: 1px dashed var(--primary); outline: 5px dashed var(--primary);
outline-offset: -5px;
}
a, a:visited {
color: var(--primary);
} }
.mi-page { .mi-page {
@ -28,44 +39,160 @@ html {
width: 100vw; 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 { .mi-nav {
border-bottom: 1px solid var(--foreground); border-bottom: 1px solid var(--foreground);
position: sticky; position: sticky;
top: 0; top: 0;
left: 0; left: 0;
width: 100vw; width: 100vw;
background: var(--background);
z-index: 100; z-index: 100;
display: flex;
align-items: stretch;
} }
.mi-nav--toggle { .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 { .mi-nav--toggle:hover {
visibility: hidden; color: var(--primary);
} }
.mi-nav--list { .mi-nav--list {
list-style: none; list-style: none;
display: none; display: none;
padding: 0; padding: var(--box-padding) 0;
margin: 0; margin: 0;
position: absolute; position: absolute;
background: var(--background); background: var(--background);
border-bottom: 1px solid var(--foreground); border-bottom: 1px solid var(--foreground);
left: 0; left: calc(var(--box-padding) + 1px);
right: 0; 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; display: flex;
flex-direction: column; flex-direction: column;
} }
.mi-nav--divider {
flex-grow: 1;
}
.mi-nav--link { .mi-nav--link {
display: flex; display: flex;
padding: 0.25rem 1rem; padding: 0.25rem var(--box-padding);
color: var(--foreground); color: var(--foreground);
text-decoration: none; text-decoration: none;
} }
@ -80,26 +207,16 @@ html {
text-decoration: underline; 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 { .mi-main {
background: var(--background); background: var(--background);
margin: 0; margin: 0 var(--box-padding);
flex-grow: 1; flex-grow: 1;
position: relative;
margin-bottom: var(--box-padding);
}
.mi-main_content {
padding: var(--box-padding);
} }
.mi-cards { .mi-cards {
@ -146,8 +263,10 @@ html {
.mi-tagline { .mi-tagline {
background: var(--background); background: var(--background);
display: flex; display: flex;
align-items: center; flex-direction: column;
justify-content: center;
padding: 0.25rem 1rem; padding: 0.25rem 1rem;
min-height: 300px;
} }
.mi-card { .mi-card {
@ -157,6 +276,11 @@ html {
padding: 1rem; padding: 1rem;
} }
.mi-card:hover,
.mi-card:focus {
z-index: 1;
}
.mi-card--background { .mi-card--background {
width: calc(100% - 2rem); width: calc(100% - 2rem);
height: calc(100% - 2rem); height: calc(100% - 2rem);
@ -164,11 +288,17 @@ html {
top: 1rem; top: 1rem;
left: 1rem; left: 1rem;
object-fit: cover; object-fit: cover;
filter: grayscale(100%);
}
.mi-card:focus .mi-card--background,
.mi-card:hover .mi-card--background {
filter: grayscale(0%);
} }
.mi-card--text { .mi-card--text {
color: var(--background); color: var(--background);
background: var(--primary); background: var(--foreground);
display: flex; display: flex;
z-index: 1; z-index: 1;
padding: 0.25rem 1rem; padding: 0.25rem 1rem;
@ -178,9 +308,14 @@ html {
right: 2rem; right: 2rem;
} }
.mi-card:hover .mi-card--text {
color: var(--primary);
}
.mi-footer { .mi-footer {
border-top: 1px solid var(--foreground); border-top: 1px solid var(--foreground);
background: var(--background); background: var(--background);
margin: var(--box-padding);
} }
.mi-footer--links { .mi-footer--links {