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

Iniital commit

Browse source
This commit is contained in:
Benjamin Bädorf 2021-10-22 18:05:00 +02:00
parent 69bb11176d
commit f88bc04625
No known key found for this signature in database
GPG key ID: 4406E80E13CD656C
25 changed files with 250 additions and 242 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
_config.ts
View file

@ -13,6 +13,10 @@ site.loadAssets([
".svg",
".pdf",
".woff2",
".woff",
".ttf",
".otf",
".js",
]);
site.filter("title", (value = '') => value + (value ? " | " : "") + "MiOM");

28
_data/people.yml
View file

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

18
_data/thingsWeAre.yml
View file

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

7
_includes/citations.njk
View file

@ -1,7 +0,0 @@
<ol class="citation-list">
{% for citation in citations %}
<li>
<cite class="citation">{{ citation | md | safe }}</cite>
</li>
{% endfor %}
</ol>

18
_includes/downloads.njk
View file

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

11
_includes/event-day.njk
View file

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

41
_includes/event.njk
View file

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

10
_includes/footer.njk
View file

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

10
_includes/hero.njk
View file

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

19
_includes/layouts/default.njk
View file

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

18
_includes/layouts/homepage.njk
View file

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

19
_includes/media.njk
View file

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

43
_includes/navigation.njk
View file

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

19
_includes/people.njk
View file

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

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

BIN
fonts/vertikal/.DS_Store vendored Normal file
View file

Binary file not shown.

BIN
fonts/vertikal/Vertikal-Info.pdf Normal file
View file

Binary file not shown.

BIN
fonts/vertikal/vertikal-bold.eot Normal file
View file

Binary file not shown.

BIN
fonts/vertikal/vertikal-bold.otf Normal file
View file

Binary file not shown.

BIN
fonts/vertikal/vertikal-bold.ttf Normal file
View file

Binary file not shown.

BIN
fonts/vertikal/vertikal-bold.woff Normal file
View file

Binary file not shown.

BIN
fonts/vertikal/vertikal-bold.woff2 Normal file
View file

Binary file not shown.

32
header.css
View file

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

2
index.yml
View file

@ -1 +1 @@
layout: layouts/homepage.njk
layout: layouts/default.njk

190
styles.css
View file

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