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

Compare commits

base: franconian:01cfe1f005db1a0bdb4319e7627a35ffb619a865
Branches Tags
franconian:main
franconian:staging
...
compare: franconian:a9bce746442acebb513d73275ae13fdc78051a2b
Branches Tags
franconian:main
franconian:staging

6 Commits
01cfe1f005 ... a9bce74644

Author SHA1 Message Date
Florian Sorg a9bce74644 style logo and title text
continuous-integration/drone/push Build is passing Details
2021-12-27 12:19:40 +01:00
Florian Sorg 7bdab552d6 update bauchbinde 2021-12-27 12:19:40 +01:00
Luca 172443a987 Update bauchbinde by fl0rp 2021-12-27 12:19:40 +01:00
foosinn e66cb347aa provide a greenscreen background based on 2021
continuous-integration/drone/push Build is passing Details
2021-12-26 21:01:35 +01:00
Florian Sorg f5705ecafe add missing comma
continuous-integration/drone/push Build is passing Details
2021-12-25 02:26:44 +01:00
Florian Sorg a768b30dd5 use default value 0 for fg-pixels background position
continuous-integration/drone/push Build is passing Details
2021-12-25 00:58:48 +01:00
13 changed files with 229 additions and 1834 deletions
Show Stats Expand all files Collapse all files

43
assets/_animations.scss
View File

@ -1 +1,44 @@
@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);
}
}

34
assets/style.scss
View File

@ -4,6 +4,10 @@
@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;
@ -80,14 +84,14 @@ body {
pointer-events: none; pointer-events: none;
background-image: url('layout/fg_pixels.gif'); background-image: url('layout/fg_pixels.gif');
background-repeat: repeat-y; background-repeat: repeat-y;
background-position: 50% calc(50% + -1.4px * var(--scrollTop)); background-position: 50% calc(50% + -1.4px * var(--scrollTop, 0));
} }
@media (min-width: $small) { @media (min-width: $small) {
background-image: background-image:
url('layout/bg_pixels.gif'), url('layout/bg_pixels.gif'),
url('layout/grid.png'), url('layout/grid.png'),
linear-gradient(-45deg, $color-gradient-community-start, $color-gradient-community-end) linear-gradient(-45deg, $color-gradient-community-start, $color-gradient-community-end),
url('layout/background_desktop_01.jpg'); url('layout/background_desktop_01.jpg');
} }
} }
@ -116,10 +120,6 @@ a {
} }
} }
.nav-logo {
text-decoration: none;
}
.block-link { .block-link {
display: block; display: block;
} }
@ -248,16 +248,34 @@ 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,7 +15,13 @@
<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">{{ .Site.Title }}</a> <a class="nav-logo" href="{{ .Site.LanguagePrefix }}/"><img src="/franconianNet.svg" alt="Logo of franconian.net">
<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 Normal file
View File

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

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

@ -53,8 +53,6 @@
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('='));
@ -126,7 +124,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(', ');
} }
} }
} }
@ -135,164 +133,38 @@
return false; return false;
} }
if (speaker && headline) { const headlineEl = document.querySelector('.headline');
headline += ','; headlineEl.innerHTML = '';
} const speakerEl = document.querySelector('.speaker');
speakerEl.innerHTML = '';
const headlineEl = document.createElement('span'); console.log('headline', headline);
headlineEl.classList.add('headline'); console.log('speaker', speaker);
const speakerEl = document.createElement('span');
speakerEl.classList.add('speaker');
if (headline) { if (headline) {
Array.from(headline).forEach(letter => { headlineEl .innerText = headline;
const letterEl = document.createElement('span');
letterEl.classList.add('letter');
letterEl.innerText = letter;
headlineEl.appendChild(letterEl);
})
} }
if (speaker) { if (speaker) {
Array.from(speaker).forEach(letter => { speakerEl.innerText = speaker;
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() {
if (autoIntro ? isFirstRun : isIntro) { const glitchEl = document.querySelector('.glitch');
await Promise.all([ const infoEl = document.querySelector('.info');
slideIn(), const glitchDuration = 1500;
fadeInText(),
]); glitchEl.classList.add('visible');
} else { await new Promise(r => setTimeout(r, glitchDuration));
await Promise.all([ glitchEl.classList.remove('visible');
fadeIn(), infoEl.classList.add('visible');
fadeInText(),
]);
}
await new Promise(r => setTimeout(r, holdDuration * 1000)); await new Promise(r => setTimeout(r, holdDuration * 1000));
await Promise.all([ infoEl.classList.remove('visible');
fadeOut(), glitchEl.classList.add('visible');
fadeOutText(), await new Promise(r => setTimeout(r, glitchDuration));
]) 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 Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

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

@ -1,44 +1,42 @@
@font-face { @font-face {
font-family: Orbitron; font-family: Changa;
src: url('Orbitron-VariableFont_wght.ttf'); font-weight: 700;
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 {
--large-tile-color: #02fae0; --text-color: #fff;
--medium-tile-color: #fff900; --header-text-color: #252826;
--small-tile-color: #0bcb60; --frame-color: #fff;
--text-color: #252826; --bottom: 7vw;
--bottom: 9vw; --left: 25vw;
--left: 12.5vw; --width: 50vw;
--width: 67.5vw;
--top: auto; --top: auto;
} }
:root.theme-main { html {
--large-tile-color: #6800e7; font-size: calc(var(--width) * 0.034);
--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: Orbitron, sans-serif; font-family: SpaceMono, monospace;
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 {
@ -49,191 +47,45 @@ body {
top: var(--top); top: var(--top);
} }
.background { .info {
z-index: -20; border: 0.1vw solid var(--frame-color);
width: 100%;
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; opacity: 0;
background: rgba(0, 0, 0, 0.6);
} }
.tile::before { .headline {
content: ''; 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;
display: block;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 101%;
} }
.tile.large::before { .glitch {
background-color: var(--large-tile-color);
width: 100%; width: 100%;
height: 100%; padding-top: 14.25722%;
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: 1.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,16 +2,18 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Intro</title> <title>Bauchbinde</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="text"></div> <div class="info">
<div class="background"> <div class="headline"></div>
<div class="secondary-tiles tiles"></div> <div class="speaker"></div>
<div class="main-tiles tiles"></div> </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: 79 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

13
static/greenscreen/index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>
Infobeamer
</title>
<link rel="stylesheet" href="/style.css">
</head>
<body class="infobeamer">
</body>
</html>

11
static/infobeamer/index.html
View File

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