v2/design: now with more lines
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
3cbfec0520
commit
961ffc722c
GPG key ID:
729956E1124F8F26
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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 %}
|
||||||
|
|
|
||||||
|
|
@ -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 %}
|
||||||
<li class="mi-nav--item">
|
{% if item.divider %}
|
||||||
<a class="mi-nav--link" href="{{ item.link }}">{{ item.text }}</a>
|
<li class="mi-nav--divider" aria-hidden="true"></li>
|
||||||
</li>
|
{% else %}
|
||||||
|
<li class="mi-nav--item">
|
||||||
|
<a
|
||||||
|
class="mi-nav--link"
|
||||||
|
href="{{ item.link }}"
|
||||||
|
>{{ item.text }}</a>
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
9
datenschutz.yml
Normal file
9
datenschutz.yml
Normal 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
18
impressum.yml
Normal 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
16
index.yml
|
|
@ -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
18
kollektiv.yml
Normal 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.
|
||||||
|
|
@ -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
195
styles.css
|
|
@ -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 {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue