Compare commits
4 Commits
e66cb347aa
...
00d087fb70
| Author | SHA1 | Date |
|---|---|---|
 Florian Sorg
|
00d087fb70 | |
|
Florian Sorg
|
a9bce74644 | |
|
Florian Sorg
|
7bdab552d6 | |
 Luca
|
172443a987 |
|
|
@ -1 +1,44 @@
|
|||
@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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,10 @@
|
|||
@import 'fonts';
|
||||
@import 'mixins';
|
||||
|
||||
:root {
|
||||
--aberration-offset: 0.1em;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: 'Space Mono', sans-serif;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -116,10 +120,6 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.block-link {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -248,16 +248,34 @@ table {
|
|||
@include heading;
|
||||
text-decoration: none;
|
||||
color: currentColor;
|
||||
|
||||
margin: 0 auto;
|
||||
animation: animate-aberration 2s linear infinite !important;
|
||||
|
||||
img {
|
||||
width: 48px;
|
||||
display: inline-block;
|
||||
margin-right: 1em;
|
||||
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) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,13 @@
|
|||
<body>
|
||||
<header>
|
||||
<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 }}
|
||||
{{ range .Translations }}
|
||||
<a class="nav-link" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -53,8 +53,6 @@
|
|||
|
||||
async function init() {
|
||||
const root = document.querySelector('html');
|
||||
textEl = document.querySelector('.text');
|
||||
textEl.innerHTML = '';
|
||||
|
||||
if (window.location.search) {
|
||||
const pairs = window.location.search.slice(1).split('&').map(x => x.split('='));
|
||||
|
|
@ -126,7 +124,7 @@
|
|||
} else {
|
||||
headline = talk.title;
|
||||
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;
|
||||
}
|
||||
|
||||
if (speaker && headline) {
|
||||
headline += ',';
|
||||
}
|
||||
const headlineEl = document.querySelector('.headline');
|
||||
headlineEl.innerHTML = '';
|
||||
const speakerEl = document.querySelector('.speaker');
|
||||
speakerEl.innerHTML = '';
|
||||
|
||||
const headlineEl = document.createElement('span');
|
||||
headlineEl.classList.add('headline');
|
||||
const speakerEl = document.createElement('span');
|
||||
speakerEl.classList.add('speaker');
|
||||
console.log('headline', headline);
|
||||
console.log('speaker', speaker);
|
||||
|
||||
if (headline) {
|
||||
Array.from(headline).forEach(letter => {
|
||||
const letterEl = document.createElement('span');
|
||||
letterEl.classList.add('letter');
|
||||
letterEl.innerText = letter;
|
||||
headlineEl.appendChild(letterEl);
|
||||
})
|
||||
headlineEl .innerText = headline;
|
||||
}
|
||||
if (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);
|
||||
speakerEl.innerText = speaker;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
async function animate() {
|
||||
if (autoIntro ? isFirstRun : isIntro) {
|
||||
await Promise.all([
|
||||
slideIn(),
|
||||
fadeInText(),
|
||||
]);
|
||||
} else {
|
||||
await Promise.all([
|
||||
fadeIn(),
|
||||
fadeInText(),
|
||||
]);
|
||||
}
|
||||
const glitchEl = document.querySelector('.glitch');
|
||||
const infoEl = document.querySelector('.info');
|
||||
const glitchDuration = 1500;
|
||||
|
||||
glitchEl.classList.add('visible');
|
||||
await new Promise(r => setTimeout(r, glitchDuration));
|
||||
glitchEl.classList.remove('visible');
|
||||
infoEl.classList.add('visible');
|
||||
await new Promise(r => setTimeout(r, holdDuration * 1000));
|
||||
await Promise.all([
|
||||
fadeOut(),
|
||||
fadeOutText(),
|
||||
])
|
||||
}
|
||||
|
||||
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));
|
||||
infoEl.classList.remove('visible');
|
||||
glitchEl.classList.add('visible');
|
||||
await new Promise(r => setTimeout(r, glitchDuration));
|
||||
glitchEl.classList.remove('visible');
|
||||
}
|
||||
|
||||
async function cycle() {
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
|
@ -1,44 +1,42 @@
|
|||
@font-face {
|
||||
font-family: Orbitron;
|
||||
src: url('Orbitron-VariableFont_wght.ttf');
|
||||
font-family: Changa;
|
||||
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 {
|
||||
--large-tile-color: #02fae0;
|
||||
--medium-tile-color: #fff900;
|
||||
--small-tile-color: #0bcb60;
|
||||
--text-color: #252826;
|
||||
--bottom: 9vw;
|
||||
--left: 12.5vw;
|
||||
--width: 67.5vw;
|
||||
--text-color: #fff;
|
||||
--header-text-color: #252826;
|
||||
--frame-color: #fff;
|
||||
--bottom: 7vw;
|
||||
--left: 25vw;
|
||||
--width: 50vw;
|
||||
--top: auto;
|
||||
}
|
||||
|
||||
:root.theme-main {
|
||||
--large-tile-color: #6800e7;
|
||||
--medium-tile-color: #fff;
|
||||
--small-tile-color: #05b9ec;
|
||||
--text-color: #fff;
|
||||
html {
|
||||
font-size: calc(var(--width) * 0.034);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: #000;
|
||||
font-family: Orbitron, sans-serif;
|
||||
font-size: 2vw;
|
||||
line-height: 2vw;
|
||||
font-family: SpaceMono, monospace;
|
||||
color: var(--text-color);
|
||||
/*color: #0e1c23;*/
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1vw;
|
||||
}
|
||||
|
||||
.headline {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.speaker {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -49,191 +47,45 @@ body {
|
|||
top: var(--top);
|
||||
}
|
||||
|
||||
.background {
|
||||
z-index: -20;
|
||||
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;
|
||||
.info {
|
||||
border: 0.1vw solid var(--frame-color);
|
||||
opacity: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.tile::before {
|
||||
content: '';
|
||||
.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;
|
||||
display: block;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 101%;
|
||||
}
|
||||
|
||||
.tile.large::before {
|
||||
background-color: var(--large-tile-color);
|
||||
.glitch {
|
||||
width: 100%;
|
||||
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 {
|
||||
padding-top: 14.25722%;
|
||||
opacity: 0;
|
||||
background-image: url('sprites.png');
|
||||
background-size: 100% auto;
|
||||
animation: 5s glitch infinite steps(37);
|
||||
}
|
||||
|
||||
.visible {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,16 +2,18 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Intro</title>
|
||||
<title>Bauchbinde</title>
|
||||
<link rel="stylesheet" href="./assets/style.css">
|
||||
<script src="./assets/script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="text"></div>
|
||||
<div class="background">
|
||||
<div class="secondary-tiles tiles"></div>
|
||||
<div class="main-tiles tiles"></div>
|
||||
<div class="info">
|
||||
<div class="headline"></div>
|
||||
<div class="speaker"></div>
|
||||
</div>
|
||||
<div class="glitch-container">
|
||||
<div class="glitch"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 2.2 KiB |
|
|
@ -105,11 +105,14 @@
|
|||
<body class="infobeamer">
|
||||
<header>
|
||||
<nav class="nav nav-main">
|
||||
<a class="nav-logo" href="/">
|
||||
<img src="/franconianNet.svg"
|
||||
alt="Logo of franconian.net">
|
||||
franconian.net
|
||||
</a>
|
||||
<a class="nav-logo" href="/"><img src="/franconianNet.svg" alt="Logo of franconian.net">
|
||||
<span class="logotype">
|
||||
<span>franc</span>
|
||||
<span>onian</span>
|
||||
<span>.net</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="nav-link" id="time"></a>
|
||||
</nav>
|
||||
</header>
|
||||
|
|
|
|||
Loading…
Reference in New Issue