franconian
/
www.franconian.net
13
0
Fork 0
Code Pull Requests Releases Activity

Compare commits

base: franconian:00d087fb7060a7da9780a870073865b1b0e53999
Branches Tags
franconian:main
franconian:staging
..
compare: franconian:e66cb347aad3202f7650db9c79984d7c1962ce6c
Branches Tags
franconian:main
franconian:staging

No commits in common. "00d087fb7060a7da9780a870073865b1b0e53999" and "e66cb347aad3202f7650db9c79984d7c1962ce6c" have entirely different histories.
00d087fb70 ... e66cb347aa

13 changed files with 1835 additions and 217 deletions
Show Stats Expand all files Collapse all files

43
assets/_animations.scss
View File

@ -1,44 +1 @@
@import 'variables'; @import 'variables';
@import 'mixins';
@keyframes animate-aberration {
0% {
@include aberration(0);
}
40% {
@include aberration(0);
}
40.1% {
@include aberration(0.2em);
}
45% {
@include aberration(0.2em);
}
45.1% {
@include aberration(-0.1em);
}
60% {
@include aberration(-0.1em);
}
60.1% {
@include aberration(0em);
}
70% {
@include aberration(0);
}
70.1% {
@include aberration(-0.4em);
}
73% {
@include aberration(-0.4em);
}
73.1% {
@include aberration(0.1em);
}
99.9% {
@include aberration(0.1em);
}
100% {
@include aberration(0);
}
}

30
assets/style.scss
View File

@ -4,10 +4,6 @@
@import 'fonts'; @import 'fonts';
@import 'mixins'; @import 'mixins';
:root {
--aberration-offset: 0.1em;
}
html { html {
font-family: 'Space Mono', sans-serif; font-family: 'Space Mono', sans-serif;
box-sizing: border-box; box-sizing: border-box;
@ -120,6 +116,10 @@ a {
} }
} }
.nav-logo {
text-decoration: none;
}
.block-link { .block-link {
display: block; display: block;
} }
@ -248,34 +248,16 @@ table {
@include heading; @include heading;
text-decoration: none; text-decoration: none;
color: currentColor; color: currentColor;
margin: 0 auto; margin: 0 auto;
animation: animate-aberration 2s linear infinite !important;
img { img {
width: 48px; width: 48px;
display: inline-block;
margin-right: 1em; margin-right: 1em;
vertical-align: middle; vertical-align: middle;
} }
.logotype {
font-size: 1.3em;
vertical-align: middle;
display: inline-block;
width: 3.5em;
line-height: 1;
text-align: center;
:nth-child(1) {
letter-spacing: 0.2em;
}
:nth-child(2) {
letter-spacing: 0.14em;
}
:nth-child(3) {
letter-spacing: 0.39em;
}
}
@media screen and (min-width: $small) { @media screen and (min-width: $small) {
margin-left: 0; margin-left: 0;
} }

8
layouts/_default/baseof.html
View File

@ -15,13 +15,7 @@
<body> <body>
<header> <header>
<nav class="nav nav-main"> <nav class="nav nav-main">
<a class="nav-logo" href="{{ .Site.LanguagePrefix }}/"><img src="/franconianNet.svg" alt="Logo of franconian.net"> <a class="nav-logo" href="{{ .Site.LanguagePrefix }}/"><img src="/franconianNet.svg" alt="Logo of franconian.net">{{ .Site.Title }}</a>
<span class="logotype">
<span>franc</span>
<span>onian</span>
<span>.net</span>
</span>
</a>
{{ if .IsTranslated }} {{ if .IsTranslated }}
{{ range .Translations }} {{ range .Translations }}
<a class="nav-link" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a> <a class="nav-link" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>

BIN
static/bauchbinde/assets/Changa-SemiBold.ttf
View File

Binary file not shown.

BIN
static/bauchbinde/assets/Orbitron-VariableFont_wght.ttf Normal file
View File

Binary file not shown.

BIN
static/bauchbinde/assets/SpaceMono-Regular.ttf
View File

Binary file not shown.

170
static/bauchbinde/assets/script.js
View File

@ -53,6 +53,8 @@
async function init() { async function init() {
const root = document.querySelector('html'); const root = document.querySelector('html');
textEl = document.querySelector('.text');
textEl.innerHTML = '';
if (window.location.search) { if (window.location.search) {
const pairs = window.location.search.slice(1).split('&').map(x => x.split('=')); const pairs = window.location.search.slice(1).split('&').map(x => x.split('='));
@ -124,7 +126,7 @@
} else { } else {
headline = talk.title; headline = talk.title;
if (talk.persons) { if (talk.persons) {
speaker = talk.persons.map(person => person.public_name).join(', '); speaker = talk.persons.map(person => person.public_name).join(' / ');
} }
} }
} }
@ -133,38 +135,164 @@
return false; return false;
} }
const headlineEl = document.querySelector('.headline'); if (speaker && headline) {
headlineEl.innerHTML = ''; headline += ',';
const speakerEl = document.querySelector('.speaker'); }
speakerEl.innerHTML = '';
console.log('headline', headline); const headlineEl = document.createElement('span');
console.log('speaker', speaker); headlineEl.classList.add('headline');
const speakerEl = document.createElement('span');
speakerEl.classList.add('speaker');
if (headline) { if (headline) {
headlineEl .innerText = headline; Array.from(headline).forEach(letter => {
const letterEl = document.createElement('span');
letterEl.classList.add('letter');
letterEl.innerText = letter;
headlineEl.appendChild(letterEl);
})
} }
if (speaker) { if (speaker) {
speakerEl.innerText = speaker; Array.from(speaker).forEach(letter => {
const letterEl = document.createElement('span');
letterEl.classList.add('letter');
letterEl.innerText = letter;
speakerEl.appendChild(letterEl);
})
}
textEl.appendChild(headlineEl);
textEl.appendChild(document.createTextNode(' '));
textEl.appendChild(speakerEl);
const mainTilesEl = document.querySelector('.background .main-tiles');
mainTilesEl.innerHTML = '';
for (let i = 0; i < 16; i++) {
const tile = document.createElement('div');
tile.classList.add('tile', 'large');
mainTilesEl.appendChild(tile);
}
const secondaryTilesEl = document.querySelector('.background .secondary-tiles');
secondaryTilesEl.innerHTML = '';
for (let i = 0; i < 17; i++) {
const tile = document.createElement('div');
tile.classList.add('tile');
if (i === 0 || Math.random() > 0.5) {
tile.classList.add('medium');
} else {
tile.classList.add('small');
}
secondaryTilesEl.appendChild(tile);
} }
return true; return true;
} }
async function animate() { async function animate() {
const glitchEl = document.querySelector('.glitch'); if (autoIntro ? isFirstRun : isIntro) {
const infoEl = document.querySelector('.info'); await Promise.all([
const glitchDuration = 1500; slideIn(),
fadeInText(),
glitchEl.classList.add('visible'); ]);
await new Promise(r => setTimeout(r, glitchDuration)); } else {
glitchEl.classList.remove('visible'); await Promise.all([
infoEl.classList.add('visible'); fadeIn(),
fadeInText(),
]);
}
await new Promise(r => setTimeout(r, holdDuration * 1000)); await new Promise(r => setTimeout(r, holdDuration * 1000));
infoEl.classList.remove('visible'); await Promise.all([
glitchEl.classList.add('visible'); fadeOut(),
await new Promise(r => setTimeout(r, glitchDuration)); fadeOutText(),
glitchEl.classList.remove('visible'); ])
}
async function slideIn() {
const tiles = document.querySelectorAll('.tile');
for (const tile of tiles) {
tile.style.animationName = `slide-in-${Math.floor(Math.random() * 10)}`;
tile.style.animationDelay = `${Math.random() * 0.4}s`;
tile.style.animationDuration = `${0.8 + Math.random() * 0.4}s`;
tile.style.animationIterationCount = '1';
tile.style.animationTimingFunction = 'ease-in';
}
await new Promise(r => setTimeout(r, 600));
for (const tile of tiles) {
tile.classList.add('visible');
}
await new Promise(r => setTimeout(r, 1000));
}
async function fadeIn() {
const tiles = document.querySelectorAll('.tile');
for (const tile of tiles) {
tile.style.animationName = `fade-in`;
tile.style.animationDelay = `${Math.random() * 0.4}s`;
tile.style.animationDuration = `${0.8 + Math.random() * 0.4}s`;
tile.style.animationIterationCount = '1';
tile.style.animationTimingFunction = 'ease-in';
}
await new Promise(r => setTimeout(r, 600));
for (const tile of tiles) {
tile.classList.add('visible');
}
await new Promise(r => setTimeout(r, 1000));
}
async function fadeOut() {
const tiles = document.querySelectorAll('.tile');
for (const tile of tiles) {
tile.style.animationName = `fade-out`;
tile.style.animationDelay = `${Math.random() * 0.4}s`;
tile.style.animationDuration = `${0.8 + Math.random() * 0.4}s`;
tile.style.animationIterationCount = '1';
tile.style.animationTimingFunction = 'ease-in';
}
await new Promise(r => setTimeout(r, 600));
for (const tile of tiles) {
tile.classList.remove('visible');
}
await new Promise(r => setTimeout(r, 1000));
}
async function fadeInText() {
const letters = document.querySelectorAll('.letter');
for (const letter of letters) {
letter.style.animationName = `fade-in`;
letter.style.animationDelay = `${Math.random() * 0.4}s`;
letter.style.animationDuration = `${0.8 + Math.random() * 0.4}s`;
letter.style.animationIterationCount = 1;
letter.style.animationTimingFunction = 'ease-in';
}
await new Promise(r => setTimeout(r, 600));
for (const tile of letters) {
tile.classList.add('visible');
}
await new Promise(r => setTimeout(r, 1000));
}
async function fadeOutText() {
const letters = document.querySelectorAll('.letter');
for (const letter of letters) {
letter.style.animationName = `fade-out`;
letter.style.animationDelay = `${Math.random() * 0.4}s`;
letter.style.animationDuration = `${0.8 + Math.random() * 0.4}s`;
letter.style.animationIterationCount = '1';
letter.style.animationTimingFunction = 'ease-in';
}
await new Promise(r => setTimeout(r, 600));
for (const tile of letters) {
tile.classList.remove('visible');
}
await new Promise(r => setTimeout(r, 1000));
} }
async function cycle() { async function cycle() {

BIN
static/bauchbinde/assets/sprites.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 MiB

BIN
static/bauchbinde/assets/sprites.xcf
View File

Binary file not shown.

258
static/bauchbinde/assets/style.css
View File

@ -1,42 +1,44 @@
@font-face { @font-face {
font-family: Changa; font-family: Orbitron;
font-weight: 700; src: url('Orbitron-VariableFont_wght.ttf');
src: url('Changa-SemiBold.ttf');
}
@font-face {
font-family: SpaceMono;
src: url('SpaceMono-Regular.ttf');
}
@keyframes glitch {
0% {
background-position: center 0;
}
0% {
background-position: center 100%;
}
} }
:root { :root {
--text-color: #fff; --large-tile-color: #02fae0;
--header-text-color: #252826; --medium-tile-color: #fff900;
--frame-color: #fff; --small-tile-color: #0bcb60;
--bottom: 7vw; --text-color: #252826;
--left: 25vw; --bottom: 9vw;
--width: 50vw; --left: 12.5vw;
--width: 67.5vw;
--top: auto; --top: auto;
} }
html { :root.theme-main {
font-size: calc(var(--width) * 0.034); --large-tile-color: #6800e7;
--medium-tile-color: #fff;
--small-tile-color: #05b9ec;
--text-color: #fff;
} }
body { body {
margin: 0; margin: 0;
background-color: #000; background-color: #000;
font-family: SpaceMono, monospace; font-family: Orbitron, sans-serif;
font-size: 2vw;
line-height: 2vw;
color: var(--text-color); color: var(--text-color);
/*color: #0e1c23;*/
text-transform: uppercase;
letter-spacing: 0.1vw;
}
.headline {
font-weight: 900;
}
.speaker {
font-size: 0.8em;
} }
.container { .container {
@ -47,45 +49,191 @@ body {
top: var(--top); top: var(--top);
} }
.info { .background {
border: 0.1vw solid var(--frame-color); z-index: -20;
opacity: 0; width: 100%;
background: rgba(0, 0, 0, 0.6);
}
.headline {
text-transform: lowercase;
font-family: Changa, sans-serif;
font-weight: 700;
background: var(--frame-color);
color: var(--header-text-color);
text-align: center;
line-height: 1.3;
padding: 0 0.5875rem;
font-size: 1.25em;
}
.speaker {
padding: 0.29rem 0.59rem 0.406rem;
}
.glitch-container {
position: absolute; position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.text {
margin-left: 6.25%;
padding: 1vw 1.5vw;
}
.tiles {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: stretch;
}
.main-tiles {
margin-left: 6.25%;
transform: translateY(-100%);
}
.tile {
flex: 1;
position: relative;
opacity: 0;
}
.tile::before {
content: '';
position: absolute;
display: block;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 101%;
} }
.glitch { .tile.large::before {
background-color: var(--large-tile-color);
width: 100%; width: 100%;
padding-top: 14.25722%; height: 100%;
box-shadow: 1px 0 0 0 var(--large-tile-color);
}
.tile.medium::before {
background-color: var(--medium-tile-color);
width: 50%;
padding-top: 50%;
}
.tile.small::before {
background-color: var(--small-tile-color);
width: 35%;
padding-top: 35%;
}
.letter {
opacity: 0; opacity: 0;
background-image: url('sprites.png');
background-size: 100% auto;
animation: 5s glitch infinite steps(37);
} }
.visible { .visible {
opacity: 1; opacity: 1;
} }
@keyframes slide-in-0 {
0% {
transform: translate(50vw, -100vw) scale(10);
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes slide-in-1 {
0% {
transform: translate(-40vw, -20vw) scale(2);
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes slide-in-2 {
0% {
transform: translate(50vw, 20vw) scale(5);
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes slide-in-3 {
0% {
transform: translate(80vw, -50vw) scale(3);
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes slide-in-4 {
0% {
transform: translate(-30vw, -50vw) scale(7.5);
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes slide-in-5 {
0% {
transform: translate(-30vw, 50vw) scale(4);
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes slide-in-6 {
0% {
transform: translate(5vw, 30vw) scale(2.5);
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes slide-in-7 {
0% {
transform: translate(-70vw, 100vw) scale(4);
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes slide-in-8 {
0% {
transform: translate(-4vw, 2vw) scale(2);
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes slide-in-9 {
0% {
transform: translate(2vw, -5vw) scale(2);
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

12
static/bauchbinde/index.html
View File

@ -2,18 +2,16 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Bauchbinde</title> <title>Intro</title>
<link rel="stylesheet" href="./assets/style.css"> <link rel="stylesheet" href="./assets/style.css">
<script src="./assets/script.js"></script> <script src="./assets/script.js"></script>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="info"> <div class="text"></div>
<div class="headline"></div> <div class="background">
<div class="speaker"></div> <div class="secondary-tiles tiles"></div>
</div> <div class="main-tiles tiles"></div>
<div class="glitch-container">
<div class="glitch"></div>
</div> </div>
</div> </div>
</body> </body>

1494
static/franconianNet.svg
View File

File diff suppressed because it is too large Load Diff
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 79 KiB

11
static/infobeamer/index.html
View File

@ -105,14 +105,11 @@
<body class="infobeamer"> <body class="infobeamer">
<header> <header>
<nav class="nav nav-main"> <nav class="nav nav-main">
<a class="nav-logo" href="/"><img src="/franconianNet.svg" alt="Logo of franconian.net"> <a class="nav-logo" href="/">
<span class="logotype"> <img src="/franconianNet.svg"
<span>franc</span> alt="Logo of franconian.net">
<span>onian</span> franconian.net
<span>.net</span>
</span>
</a> </a>
<a class="nav-link" id="time"></a> <a class="nav-link" id="time"></a>
</nav> </nav>
</header> </header>