Compare commits
3 Commits
a9bce74644
...
01cfe1f005
Author | SHA1 | Date |
---|---|---|
Florian Sorg | 01cfe1f005 | |
Florian Sorg | 4af7b84afb | |
Luca | 75e2e10fad |
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
@ -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() {
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 1.1 MiB |
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
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">
|
<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>
|
||||||
|
|
Loading…
Reference in New Issue