Iniital commit
parent
69bb11176d
commit
f88bc04625
|
|
@ -13,6 +13,10 @@ site.loadAssets([
|
|||
".svg",
|
||||
".pdf",
|
||||
".woff2",
|
||||
".woff",
|
||||
".ttf",
|
||||
".otf",
|
||||
".js",
|
||||
]);
|
||||
|
||||
site.filter("title", (value = '') => value + (value ? " | " : "") + "MiOM");
|
||||
|
|
|
|||
|
|
@ -1,7 +1,25 @@
|
|||
- name: Benjamin Bädorf
|
||||
role: Software Engineer
|
||||
- name: Alexander von Dombois
|
||||
pronouns: he/him
|
||||
contact:
|
||||
role: Product Design
|
||||
contactOptions:
|
||||
- name: MAIL
|
||||
value: avd@miom.space
|
||||
- name: INSTA
|
||||
value: '@alexandervondombois'
|
||||
- name: WEB
|
||||
value: alexandervondombois.de
|
||||
|
||||
- name: Helena Geisler
|
||||
pronouns: she/her
|
||||
role: Visual artist
|
||||
contactOptions:
|
||||
- name: MAIL
|
||||
value: hsg@miom.space
|
||||
|
||||
- name: Benjamin Bädorf
|
||||
pronouns: he/him
|
||||
role: Software Engineer
|
||||
contactOptions:
|
||||
- name: MAIL
|
||||
value: byb@miom.space
|
||||
- name: GIT
|
||||
|
|
@ -14,9 +32,9 @@
|
|||
value: benjaminbaedorf.eu
|
||||
|
||||
- name: Jhonas Wernery
|
||||
role: System Engineer
|
||||
pronouns: he/him
|
||||
contact:
|
||||
role: System Engineer
|
||||
contactOptions:
|
||||
- name: MAIL
|
||||
value: jfw@miom.space
|
||||
- name: GIT
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
- 'an Off'
|
||||
- 'a Creative'
|
||||
- 'a Coworking'
|
||||
- 'an Art'
|
||||
- 'a Tech'
|
||||
- 'a Meeting'
|
||||
- 'a Gallery'
|
||||
- 'an Event'
|
||||
- 'a People'
|
||||
- 'an off'
|
||||
- 'a creative'
|
||||
- 'a coworking'
|
||||
- 'an art'
|
||||
- 'a tech'
|
||||
- 'a meeting'
|
||||
- 'a gallery'
|
||||
- 'an event'
|
||||
- 'a people'
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
<ol class="citation-list">
|
||||
{% for citation in citations %}
|
||||
<li>
|
||||
<cite class="citation">{{ citation | md | safe }}</cite>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<section class="downloads">
|
||||
<ul class="downloads-list">
|
||||
{% for download in downloads %}
|
||||
<li class="download">
|
||||
<div class="download-name">{{ download.name | safe }}</div>
|
||||
<a
|
||||
href="{{ download.location }}"
|
||||
class="download-link download-link_pdf"
|
||||
download
|
||||
>PDF</a>
|
||||
<a
|
||||
href="{{ download.web }}"
|
||||
class="download-link"
|
||||
>Web</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</section>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<details class="event-day">
|
||||
<summary class="event-day-heading">
|
||||
{{ eventDay.heading }}
|
||||
</summary>
|
||||
|
||||
{% if eventDay.events %}
|
||||
{% for event in eventDay.events %}
|
||||
{% include "event.njk" %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</details>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<article class="event">
|
||||
<p class="event-time">{{ event.time }}</p>
|
||||
|
||||
<h1 class="event-title">{{ event.title | safe }}</h1>
|
||||
|
||||
<p class="event-details">{{ event.details | safe }}</p>
|
||||
|
||||
<div class="event-description">{{ event.description | md | safe }}</div>
|
||||
|
||||
<address class="event-location">
|
||||
{% if event.organiser %}
|
||||
{{ event.organiser }}<br><br>
|
||||
{% endif %}
|
||||
|
||||
{{ event.location.name }}
|
||||
{% if event.location.place %} <br>{{ event.location.place }} {% endif %}
|
||||
{% if event.location.address %} <br>{{ event.location.address }} {% endif %}
|
||||
{% if event.location.city %} <br>{{ event.location.city }} {% endif %}
|
||||
</address>
|
||||
|
||||
{% if event.people %}
|
||||
<div class="event-people">
|
||||
<h5>Ansprechpartner:</h5>
|
||||
<ul class="event-people-list">
|
||||
{% for person in event.people %}
|
||||
<li>
|
||||
{% if person.name %}
|
||||
{{ person.name }}
|
||||
{% endif %}
|
||||
{% if person.email %}
|
||||
<br><a href="mailto:{{ person.email }}" class="event-people-link">{{ person.email }}</a>
|
||||
{% endif %}
|
||||
{% if person.tel %}
|
||||
<br><a href="tel:{{ person.tel }}" class="event-people-link">{{ person.tel }}</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</article>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<footer class="footer">
|
||||
<footer class="mi-footer mi-content">
|
||||
<nav>
|
||||
<ul class="footer-links">
|
||||
<li><a href="/impressum" class="footer-link">Impressum</a></li>
|
||||
<li><a href="/datenschutz" class="footer-link">Datenschutz</a></li>
|
||||
<li><a href="/impressum/barrierefreiheit" class="footer-link">Barrierefreiheit</a></li>
|
||||
<ul class="mi-footer--links">
|
||||
<li><a href="/imprint" class="mi-footer--link">Imprint</a></li>
|
||||
<li><a href="/dataprivacy" class="mi-footer--link">Dataprivacy</a></li>
|
||||
<li><a href="/accessibility" class="mi-footer--link">Accessibility</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
<header class="mi-header mi-header_hero">
|
||||
<h1 class="mi-header--headline">
|
||||
MiOM 202 is
|
||||
<div class="mi-header--things-we-are">
|
||||
{% for thingWeAre in thingsWeAre %}
|
||||
<span class="mi-header--thing-we-are">{{ thingWeAre }}</span>
|
||||
{% endfor %}
|
||||
</div>space
|
||||
</h1>
|
||||
</header>
|
||||
|
|
@ -12,7 +12,6 @@
|
|||
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/styles.css{{ cssCacheBust }}" media="all" />
|
||||
<link rel="stylesheet" type="text/css" href="/header.css{{ cssCacheBust }}" media="all" />
|
||||
|
||||
{% if extraStylesheets %}
|
||||
{% for extraStylesheet in extraStylesheets %}
|
||||
|
|
@ -20,19 +19,23 @@
|
|||
{% endfor %}
|
||||
{% endif %}
|
||||
</head>
|
||||
<body class="page">
|
||||
{% block header %}
|
||||
{% include "header.njk" %}
|
||||
{% endblock %}
|
||||
<body class="mi-page">
|
||||
<h1 class="mi-page--we-are mi-page--title mi-page--title_side"><span class="mi-logo">MiOM 202</span> is</h1>
|
||||
<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>
|
||||
|
||||
<main class="page-main">
|
||||
<main class="mi-main mi-content">
|
||||
{% if article %}
|
||||
{{ article | md | safe }}
|
||||
{% endif %}
|
||||
|
||||
{% block special %}{% endblock %}
|
||||
{% include "people.njk" %}
|
||||
</main>
|
||||
|
||||
{% include "footer.njk" %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
---
|
||||
themeColor: #FFFFFF
|
||||
language: en
|
||||
cssCacheBust: ''
|
||||
|
||||
header: null
|
||||
article: null
|
||||
---
|
||||
|
||||
{% extends "layouts/default.njk" %}
|
||||
|
||||
{% block header %}
|
||||
{% include "hero.njk" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block special %}
|
||||
{% include "people.njk" %}
|
||||
{% endblock %}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<section
|
||||
id="media"
|
||||
class="media"
|
||||
>
|
||||
{% for medium in media %}
|
||||
<h2>{{ medium.title }}</h2>
|
||||
|
||||
<figure class="media-iframe-parent">
|
||||
<iframe
|
||||
class="media-iframe"
|
||||
src="https://www.youtube.com/embed/{{ medium.id }}"
|
||||
title="YouTube video player"
|
||||
frameborder="0"
|
||||
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</figure>
|
||||
{% endfor %}
|
||||
</section>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<nav
|
||||
id="navigation"
|
||||
class="navigation"
|
||||
>
|
||||
<a href="/" class="logo navigation-link">
|
||||
<img
|
||||
class="logo-image"
|
||||
src="/img/logo-60jahre.png"
|
||||
alt="Unser Logo"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
id="navigation-toggle"
|
||||
class="navigation-toggle"
|
||||
aria-label="Navigation Öffnen und Schliessen"
|
||||
>
|
||||
<span class="navigation-toggle-line"></span>
|
||||
<span class="navigation-toggle-line"></span>
|
||||
<span class="navigation-toggle-line"></span>
|
||||
</button>
|
||||
|
||||
<script>
|
||||
const navToggle = document.getElementById("navigation-toggle");
|
||||
const nav = document.getElementById("navigation");
|
||||
navToggle.addEventListener("click", function () {
|
||||
nav.classList.toggle("navigation_open");
|
||||
});
|
||||
</script>
|
||||
|
||||
<ul class="menu">
|
||||
<li class="menu-item">
|
||||
<a href="/veranstaltungen" class="navigation-link">Veranstaltungen</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="/medien" class="navigation-link">Medien</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="/unterricht" class="navigation-link">Bildung</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
@ -1,5 +1,18 @@
|
|||
<ol class="mi-people">
|
||||
<ul class="mi-people">
|
||||
{% for person in people %}
|
||||
<li></li>
|
||||
<li class="mi-person">
|
||||
<h1 class="mi-person--name">{{ person.name }} ({{ person.pronouns }})</h1>
|
||||
<p class="mi-person--role">{{ person.role }}</p>
|
||||
<details>
|
||||
<summary class="mi-person--contact-toggle">Contact</summary>
|
||||
<ul class="mi-person--contact-options">
|
||||
{% for contactOption in person.contactOptions %}
|
||||
<li class="mi-person--contact-option">
|
||||
<span class="mi-person--contact-option-name">{{ contactOption.name }}:</span> {{ contactOption.value }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</ul>
|
||||
|
|
|
|||
3
build.sh
3
build.sh
|
|
@ -1,7 +1,4 @@
|
|||
#!/usr/bin/env bash
|
||||
|
||||
lume
|
||||
cp -r ./img ./_site/
|
||||
cp -r ./unterricht/docs ./_site/unterricht/
|
||||
cp -r ./fonts ./_site/
|
||||
cp favicon.png ./_site/
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
32
header.css
32
header.css
|
|
@ -1,32 +0,0 @@
|
|||
.mi-header {
|
||||
padding: 0 5vw;
|
||||
--slide: 28vh;
|
||||
}
|
||||
|
||||
.mi-header--headline {
|
||||
font-weight: 900;
|
||||
margin: 0;
|
||||
margin-top: var(--slide);
|
||||
font-size: 5vw;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.mi-header--things-we-are {
|
||||
padding: 0 3vh;
|
||||
margin: 0 3vh;
|
||||
background: black;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: calc(-1 * var(--slide));
|
||||
}
|
||||
|
||||
.mi-header--thing-we-are {
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
190
styles.css
190
styles.css
|
|
@ -1,23 +1,195 @@
|
|||
/*
|
||||
@import url('https://fonts.googleapis.com/css2?&family=Raleway:wght@900&display=swap');
|
||||
*/
|
||||
@import url('https://fonts.googleapis.com/css2?&family=Raleway:wght@900;400;100&display=swap');
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
/*
|
||||
font-family: 'Dosis', sans-serif;
|
||||
*/
|
||||
font-family: 'Raleway', sans-serif;
|
||||
|
||||
font-size: 7.3vw;
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
.page {
|
||||
a {
|
||||
color: #ff006c;
|
||||
}
|
||||
|
||||
.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;
|
||||
font-size: 0.7rem;
|
||||
flex-direction: column;
|
||||
font-weight: 100;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mi-things-we-are::before {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
content: 'space';
|
||||
position: sticky;
|
||||
top: 1.5rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0.5em 0.666rem;
|
||||
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 {
|
||||
grid-row-start: 2;
|
||||
grid-row-end: 3;
|
||||
}
|
||||
|
||||
.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: 0;
|
||||
font-size: 0.6rem;
|
||||
line-height: 120%;
|
||||
}
|
||||
|
||||
.mi-person {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.mi-person--name {
|
||||
margin: 0;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.mi-person--role {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mi-person--contact-toggle {
|
||||
font-size: 0.4rem;
|
||||
font-weight: 900;
|
||||
color: #ff006c;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mi-person--contact-options {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
font-size: 0.4rem;
|
||||
}
|
||||
|
||||
.mi-person--contact-option-name {
|
||||
color: #ff006c;
|
||||
}
|
||||
|
||||
.mi-footer {
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
|
||||
.mi-footer--links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
list-style: none;
|
||||
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.12rem 0;
|
||||
}
|
||||
|
||||
.mi-things-we-are--thing:first-child {
|
||||
margin-top: -1.6rem;
|
||||
}
|
||||
|
||||
.mi-footer--links {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue