This commit is contained in:
Manuel Dossinger 2019-02-06 22:14:50 +01:00
коміт f7a22abf66
36 змінених файлів з 642 додано та 0 видалено

90
assets/css/main.css Normal file

@ -0,0 +1,90 @@
body {
background: url('/assets/img/noisy_background.svg');
margin: 0;
padding: 0;
}
/************/
/* The Grid */
/************/
.episode-list {
max-width: 1000px;
min-height: 100vh;
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 1fr 100px;
grid-template-areas:
"header header header"
"main main main"
"footer_l footer_c footer_r";
grid-row-gap: 1em;
}
header {
grid-area: header;
}
main {
grid-area: main;
}
footer #left {
grid-area: footer_l;
}
footer #center {
grid-area: footer_c;
}
footer #right {
grid-area: footer_r;
}
/**********/
/* Header */
/**********/
header {
background-color: white;
}
header h1 {
color: red;
}
header h2 {
color: green;
}
/********/
/* Main */
/********/
main {
background-color: white;
}
/***********/
/* Preview */
/***********/
article.preview {
margin: 1em 1em 1em 1em;
border: 1px solid green;
border-radius: 20px;
}
article.preview h1 {
color: blue;
}
article.preview p {
color: yellow;
}
/**********/
/* Footer */
/**********/
footer {
background-color: white;
}

@ -0,0 +1,32 @@
<svg width="1920" height="50" xmlns="http://www.w3.org/2000/svg">\
<style type="text/css">
<!-- #a { animation: x .5s ease alternate 14; } -->
#line_a { animation: marquee 30s linear infinite; animation-delay: -5s }
#line_b { animation: marquee 36s linear infinite; animation-delay: -3s }
#line_c { animation: marquee 60s linear infinite reverse; animation-delay: -7s }
#line_d { animation: marquee 51s linear infinite; animation-delay: -2s }
#line_e { animation: marquee 42s linear infinite; animation-delay: -6s }
@keyframes x {
from { fill: #000; }
to { fill: #fff; }
}
@keyframes marquee {
0% { transform: translateX(-50px); opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { transform: translateX(1000px); opacity: 0; }
}
</style>
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<rect width="100%" height="100%" fill="#eeeeee"/>
<text text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="27" id="line_a" y="15" x="115.5" fill="#dcdcdc">Laram apsam dalar sat amat, cansatatar sadapscang alatr, sad daam nanamy aarmad tampar anvadant at labara at dalara magna alaqayam arat, sad daam valaptaa. At vara aas at accasam at jasta daa dalaras at aa rabam. Stat clata kasd gabargran, na saa takamata sanctas ast Laram apsam dalar sat amat. Laram apsam dalar sat amat, cansatatar sadapscang alatr, sad daam nanamy aarmad tampar anvadant at labara at dalara magna alaqayam arat, sad daam valaptaa. At vara aas at accasam at jasta daa dalaras at aa rabam. Stat clata kasd gabargran, na saa takamata sanctas ast Laram apsam dalar sat amat. Laram apsam dalar sat amat, cansatatar sadapscang alatr, sad daam nanamy aarmad tampar anvadant at labara at dalara magna alaqayam arat, sad daam valaptaa. At vara aas at accasam at jasta daa dalaras at aa rabam. Stat clata kasd gabargran, na saa takamata sanctas ast Laram apsam dalar sat amat.</text>
<text text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="24" id="line_b" y="27" x="131.5" fill="#dcdcde">Lerem epsem deler set emet, censeteter sedepsceng eletr, sed deem nenemy eermed temper envedent et lebere et delere megne eleqeyem eret, sed deem veleptee. Et vere ees et eccesem et jeste dee deleres et ee rebem. Stet clete kesd gebergren, ne see tekemete senctes est Lerem epsem deler set emet. Lerem epsem deler set emet, censeteter sedepsceng eletr, sed deem nenemy eermed temper envedent et lebere et delere megne eleqeyem eret, sed deem veleptee. Et vere ees et eccesem et jeste dee deleres et ee rebem. Stet clete kesd gebergren, ne see tekemete senctes est Lerem epsem deler set emet. Lerem epsem deler set emet, censeteter sedepsceng eletr, sed deem nenemy eermed temper envedent et lebere et delere megne eleqeyem eret, sed deem veleptee. Et vere ees et eccesem et jeste dee deleres et ee rebem. Stet clete kesd gebergren, ne see tekemete senctes est Lerem epsem deler set emet.</text>
<text text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="30" id="line_c" y="37" x="115.5" fill="#dcdedc">Lirim ipsim dilir sit imit, cinsititir sidipscing ilitr, sid diim ninimy iirmid timpir invidint it libiri it diliri migni iliqiyim irit, sid diim viliptii. It viri iis it iccisim it jisti dii diliris it ii ribim. Stit cliti kisd gibirgrin, ni sii tikimiti sinctis ist Lirim ipsim dilir sit imit. Lirim ipsim dilir sit imit, cinsititir sidipscing ilitr, sid diim ninimy iirmid timpir invidint it libiri it diliri migni iliqiyim irit, sid diim viliptii. It viri iis it iccisim it jisti dii diliris it ii ribim. Stit cliti kisd gibirgrin, ni sii tikimiti sinctis ist Lirim ipsim dilir sit imit. Lirim ipsim dilir sit imit, cinsititir sidipscing ilitr, sid diim ninimy iirmid timpir invidint it libiri it diliri migni iliqiyim irit, sid diim viliptii. It viri iis it iccisim it jisti dii diliris it ii ribim. Stit cliti kisd gibirgrin, ni sii tikimiti sinctis ist Lirim ipsim dilir sit imit.</text>
<text text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="19" id="line_d" y="45" x="115.5" fill="#dedcdc">Lorom opsom dolor sot omot, consototor sodopscong olotr, sod doom nonomy oormod tompor onvodont ot loboro ot doloro mogno oloqoyom orot, sod doom voloptoo. Ot voro oos ot occosom ot josto doo doloros ot oo robom. Stot cloto kosd goborgron, no soo tokomoto sonctos ost Lorom opsom dolor sot omot. Lorom opsom dolor sot omot, consototor sodopscong olotr, sod doom nonomy oormod tompor onvodont ot loboro ot doloro mogno oloqoyom orot, sod doom voloptoo. Ot voro oos ot occosom ot josto doo doloros ot oo robom. Stot cloto kosd goborgron, no soo tokomoto sonctos ost Lorom opsom dolor sot omot. Lorom opsom dolor sot omot, consototor sodopscong olotr, sod doom nonomy oormod tompor onvodont ot loboro ot doloro mogno oloqoyom orot, sod doom voloptoo. Ot voro oos ot occosom ot josto doo doloros ot oo robom. Stot cloto kosd goborgron, no soo tokomoto sonctos ost Lorom opsom dolor sot omot.</text>
<text text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="25" id="line_e" y="54" x="115.5" fill="#dcdcde">Lurum upsum dulur sut umut, cunsututur sudupscung ulutr, sud duum nunumy uurmud tumpur unvudunt ut luburu ut duluru mugnu uluquyum urut, sud duum vuluptuu. Ut vuru uus ut uccusum ut justu duu dulurus ut uu rubum. Stut clutu kusd guburgrun, nu suu tukumutu sunctus ust Lurum upsum dulur sut umut. Lurum upsum dulur sut umut, cunsututur sudupscung ulutr, sud duum nunumy uurmud tumpur unvudunt ut luburu ut duluru mugnu uluquyum urut, sud duum vuluptuu. Ut vuru uus ut uccusum ut justu duu dulurus ut uu rubum. Stut clutu kusd guburgrun, nu suu tukumutu sunctus ust Lurum upsum dulur sut umut. Lurum upsum dulur sut umut, cunsututur sudupscung ulutr, sud duum nunumy uurmud tumpur unvudunt ut luburu ut duluru mugnu uluquyum urut, sud duum vuluptuu. Ut vuru uus ut uccusum ut justu duu dulurus ut uu rubum. Stut clutu kusd guburgrun, nu suu tukumutu sunctus ust Lurum upsum dulur sut umut.</text>
</g>
</svg>

Після

Ширина:  |  Висота:  |  Розмір: 6.0 KiB

BIN
assets2/.DS_Store сторонній Normal file

Бінарний файл не відображається.

Бінарний файл не відображається.

135
assets2/css/main.css Normal file

@ -0,0 +1,135 @@
@font-face {
font-family: "repulsor";
src: url("/assets2/fonts/repulsore.ttf") format("truetype"); }
@font-face {
font-family: 'Muli';
font-style: normal;
font-weight: 400;
src: local("Muli Regular"), local("Muli-Regular"), url(/assets2/fonts/Muli-Regular.ttf) format("truetype"); }
html {
padding: 0;
margin: 0;
height: 100%;
font-family: Muli; }
body {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#004e66+0,145266+17,0e0e0e+100 */
background: #004e66;
/* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #004e66 0%, #145266 17%, #0e0e0e 100%);
/* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #004e66 0%, #145266 17%, #0e0e0e 100%);
/* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #004e66 0%, #145266 17%, #0e0e0e 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ }
header {
margin-left: auto;
margin-right: auto;
width: 800px;
height: 100px; }
header h1 {
text-align: center;
color: #fff7e5;
font-family: repulsor;
font-size: 42px;
margin-bottom: 0; }
header h2 {
margin-top: 0;
text-align: center;
color: #ffb400;
font-size: 30px; }
/** glitch **/
header {
/* Hover flash animation on last image */ }
header .glitch {
position: absolute;
width: 800px;
max-width: 400px;
height: 100px;
max-height: calc(400px * 1.25);
overflow: hidden;
margin: 0 auto; }
header .glitch:hover {
cursor: pointer; }
header .glitch__img {
position: absolute;
top: calc(-1 * 5px);
left: calc(-1 * 10px);
width: calc(100% + 10px * 2);
height: calc(100% + 5px * 2);
background: url(../img/1.jpg) no-repeat 50% 0;
background-color: transparent;
background-size: cover;
background-blend-mode: none; }
header .glitch__img:nth-child(2) {
background-color: transparent;
background-blend-mode: none; }
header .glitch__img:nth-child(3) {
background-color: transparent;
background-blend-mode: none; }
header .glitch__img:nth-child(4) {
background-color: transparent;
background-blend-mode: none; }
header .glitch__img:nth-child(5) {
background-color: #af4949;
background-blend-mode: overlay; }
header .glitch__img:nth-child(n+2) {
opacity: 0; }
header .glitch:hover .glitch__img:nth-child(n+2) {
opacity: 1; }
header .glitch:hover .glitch__img:nth-child(2) {
transform: translate3d(10px, 0, 0);
animation: glitch-anim-1-horizontal 4s infinite linear alternate; }
header .glitch:hover > .glitch__img:nth-child(3) {
transform: translate3d(calc(-1 * 10px), 0, 0);
animation: glitch-anim-2-horizontal 4s infinite linear alternate; }
header .glitch:hover > .glitch__img:nth-child(4) {
transform: translate3d(0, calc(-1 * 5px), 0) scale3d(-1, -1, 1);
animation: glitch-anim-3-horizontal 4s infinite linear alternate; }
header .glitch:hover > .glitch__img:nth-child(5) {
animation: glitch-anim-flash 0.5s steps(1, end) infinite; }
@keyframes glitch-anim-1-horizontal {
0% {
-webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); }
10% {
-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); }
20% {
-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); }
30% {
-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); }
40% {
-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); }
50% {
-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
60% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); }
70% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); }
80% {
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
90% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }
100% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
@keyframes glitch-anim-flash {
0% {
opacity: 0.2;
transform: translate3d(10px, 5px, 0); }
33%, 100% {
opacity: 0;
transform: translate3d(0, 0, 0); } } }
/*# sourceMappingURL=main.css.map */

7
assets2/css/main.css.map Normal file

@ -0,0 +1,7 @@
{
"version": 3,
"mappings": "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",
"sources": ["main.scss"],
"names": [],
"file": "main.css"
}

211
assets2/css/main.scss Normal file

@ -0,0 +1,211 @@
// palette
$white: #fff7e5;
$yellow: #ffb400;
$blue: #004e66;
@font-face {
font-family: "repulsor";
src: url("/assets2/fonts/repulsore.ttf") format("truetype");
}
@font-face {
font-family: 'Muli';
font-style: normal;
font-weight: 400;
src: local('Muli Regular'), local('Muli-Regular'), url(/assets2/fonts/Muli-Regular.ttf) format('truetype');
}
// mixins
@mixin radial-background() {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#004e66+0,145266+17,0e0e0e+100 */
background: $blue; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, $blue 0%, #145266 17%, #0e0e0e 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, $blue 0%,#145266 17%,#0e0e0e 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, $blue 0%, #145266 17%,#0e0e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
html {
padding: 0;
margin: 0;
height: 100%;
font-family: Muli;
}
body {
@include radial-background();
}
header {
margin-left: auto;
margin-right: auto;
width: 800px;
height: 100px;
h1 {
text-align: center;
color: $white;
font-family: repulsor;
font-size: 42px;
margin-bottom: 0;
}
h2 {
margin-top: 0;
text-align: center;
color: $yellow;
font-size: 30px;
}
}
/** glitch **/
$glitch-width: 800px;
$glitch-height: 100px;
$gap-horizontal: 10px;
$gap-vertical: 5px;
$time-anim: 4s;
$delay-anim: 2s;
$blend-mode-1: none;
$blend-mode-2: none;
$blend-mode-3: none;
$blend-mode-4: none;
$blend-mode-5: overlay;
$blend-color-1: transparent;
$blend-color-2: transparent;
$blend-color-3: transparent;
$blend-color-4: transparent;
$blend-color-5: #af4949;
header {
.glitch {
position: absolute;
width: $glitch-width;
max-width: 400px;
height: $glitch-height;
max-height: calc(400px * 1.25);
overflow: hidden;
margin: 0 auto;
}
.glitch:hover {
cursor: pointer;
}
.glitch__img {
position: absolute;
top: calc(-1 * #{$gap-vertical});
left: calc(-1 * #{$gap-horizontal});
width: calc(100% + #{$gap-horizontal} * 2);
height: calc(100% + #{$gap-vertical} * 2);
background: url(../img/1.jpg) no-repeat 50% 0;
background-color: $blend-color-1;
background-size: cover;
background-blend-mode: $blend-mode-1;
}
.glitch__img:nth-child(2) {
background-color: $blend-color-2;
background-blend-mode: $blend-mode-2;
}
.glitch__img:nth-child(3) {
background-color: $blend-color-3;
background-blend-mode: $blend-mode-3;
}
.glitch__img:nth-child(4) {
background-color: $blend-color-4;
background-blend-mode: $blend-mode-4;
}
.glitch__img:nth-child(5) {
background-color: $blend-color-5;
background-blend-mode: $blend-mode-5;
}
.glitch__img:nth-child(n+2) {
opacity: 0;
}
.glitch:hover .glitch__img:nth-child(n+2) {
opacity: 1;
}
.glitch:hover .glitch__img:nth-child(2) {
transform: translate3d($gap-horizontal,0,0);
animation: glitch-anim-1-horizontal $time-anim infinite linear alternate;
}
.glitch:hover > .glitch__img:nth-child(3) {
transform: translate3d(calc(-1 * #{$gap-horizontal}),0,0);
animation: glitch-anim-2-horizontal $time-anim infinite linear alternate;
}
.glitch:hover > .glitch__img:nth-child(4) {
transform: translate3d(0, calc(-1 * #{$gap-vertical}), 0) scale3d(-1,-1,1);
animation: glitch-anim-3-horizontal $time-anim infinite linear alternate;
}
/* Hover flash animation on last image */
.glitch:hover > .glitch__img:nth-child(5) {
animation: glitch-anim-flash 0.5s steps(1,end) infinite;
}
@keyframes glitch-anim-1-horizontal {
0% {
-webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
}
10% {
-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
}
20% {
-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
}
30% {
-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
}
40% {
-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
}
50% {
-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
}
60% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
}
70% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
}
80% {
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
}
90% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
}
100% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
}
@keyframes glitch-anim-flash {
0% {
opacity: 0.2;
transform: translate3d($gap-horizontal, $gap-vertical, 0);
}
33%, 100% {
opacity: 0;
transform: translate3d(0,0,0);
}
}
}
}

BIN
assets2/fonts/Muli-Black.ttf Executable file

Бінарний файл не відображається.

Бінарний файл не відображається.

BIN
assets2/fonts/Muli-Bold.ttf Executable file

Бінарний файл не відображається.

BIN
assets2/fonts/Muli-BoldItalic.ttf Executable file

Бінарний файл не відображається.

BIN
assets2/fonts/Muli-ExtraBold.ttf Executable file

Бінарний файл не відображається.

Бінарний файл не відображається.

BIN
assets2/fonts/Muli-ExtraLight.ttf Executable file

Бінарний файл не відображається.

Бінарний файл не відображається.

BIN
assets2/fonts/Muli-Italic.ttf Executable file

Бінарний файл не відображається.

BIN
assets2/fonts/Muli-Light.ttf Executable file

Бінарний файл не відображається.

Бінарний файл не відображається.

BIN
assets2/fonts/Muli-Regular.ttf Executable file

Бінарний файл не відображається.

BIN
assets2/fonts/Muli-SemiBold.ttf Executable file

Бінарний файл не відображається.

Бінарний файл не відображається.

BIN
assets2/fonts/repulsor.ttf Executable file

Бінарний файл не відображається.

BIN
assets2/fonts/repulsore.ttf Executable file

Бінарний файл не відображається.

BIN
assets2/fonts/repulsorei.ttf Executable file

Бінарний файл не відображається.

BIN
assets2/fonts/repulsori.ttf Executable file

Бінарний файл не відображається.

BIN
assets2/img/1.jpg Normal file

Бінарний файл не відображається.

Після

Ширина:  |  Висота:  |  Розмір: 34 KiB

47
glitchy/.comments/image.jpg.xml Executable file

@ -0,0 +1,47 @@
<?xml version="1.0" encoding="UTF-8"?>
<comment version="3.0">
<caption/>
<note>Closeup electronic hardware .Resistor on the circuit board</note>
<place/>
<categories>
<category value="background"/>
<category value="board"/>
<category value="circuit"/>
<category value="closeup"/>
<category value="color"/>
<category value="component"/>
<category value="current"/>
<category value="detail"/>
<category value="diagram"/>
<category value="electric"/>
<category value="electrical"/>
<category value="electricity"/>
<category value="electronic"/>
<category value="engineering"/>
<category value="equipment"/>
<category value="flow"/>
<category value="industry"/>
<category value="internal"/>
<category value="isolated"/>
<category value="macro"/>
<category value="mini"/>
<category value="object"/>
<category value="ohm"/>
<category value="part"/>
<category value="passive"/>
<category value="piece"/>
<category value="reduce"/>
<category value="repair"/>
<category value="resistance"/>
<category value="resistor"/>
<category value="retro"/>
<category value="science"/>
<category value="service"/>
<category value="small"/>
<category value="spare"/>
<category value="technical"/>
<category value="technology"/>
<category value="vintage"/>
<category value="voltage"/>
</categories>
</comment>

BIN
glitchy/image.jpg Executable file

Бінарний файл не відображається.

Після

Ширина:  |  Висота:  |  Розмір: 110 KiB

50
glitchy/index.html Executable file

@ -0,0 +1,50 @@
<!doctype html>
<html>
<head>
<style>
body {
background-color: #4e4851;
}
.header-container {
min-width: 1300px;
min-height: 866px;
overflow: hidden;
margin: 0 auto;
}
.header-img {
position: absolute;
min-width: 1300px;
min-height: 866px;
background: url('./image.jpg') no-repeat;
}
.header-img:nth-child(2) {
transform: translate3d(10px,0,0);
animation: sideshift 1s infinite linear;
background-blend-mode: screen;
}
@keyframes sideshift {
0% { clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); }
5% { clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%); }
10% { clip-path: polygon(0 8%, 100% 8%, 100% 10%, 0 10%); }
30% { clip-path: polygon(0 30%, 100% 30%, 100% 30%, 0 30%); }
35% { clip-path: polygon(0 35%, 100% 37%, 100% 35%, 0 37%); }
40% { clip-path: polygon(0 50%, 100% 55%, 100% 50%, 0 55%); }
50% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
100% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
}
.header-img:nth-child(3) {
opacity: 1;
transform: skew(10deg, 10deg);
}
</style>
</head>
<body>
<div class="header-container">
<div class="header-img"></div>
<div class="header-img"></div>
<div class="header-img"></div>
</div>
</body>
</html>

25
index.html Normal file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>Scrolltest</title>
<link rel="stylesheet" type="text/css" href="/assets/css/main.css">
</head>
<body>
<div class="episode-list">
<header>
<h1>Noise2Signal</h1>
<h2>Der Laberpodcast</h2>
</header>
<main>
<article class="preview">
<h1>E1: Nasenasenase<h1>
<p>In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba</p>
</article>
</main>
<footer id="left">Unne Links</footer>
<footer id="center">Unne Midde</footer>
<footer id="right">Unne Rechts</footer>
</div>
</body>
</html>

40
index2.html Normal file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Index 2</title>
<link rel="stylesheet" type="text/css" href="/assets2/css/main.css">
</head>
<body>
<header>
<h1>NoiseToSignal</h1>
<h2>Just the right ratio, &nbsp; ≥ 1</h2>
<div class="glitch">
<div class="glitch__img"></div>
<div class="glitch__img"></div>
<div class="glitch__img"></div>
<div class="glitch__img"></div>
<div class="glitch__img"></div>
</div>
</header>
<div class="episode-list">
<main>
<article class="preview">
<h1>E3: Nasenasenase<h1>
<p>In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba</p>
</article>
<article class="preview">
<h1>E2: Nasenasenase<h1>
<p>In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba</p>
</article>
<article class="preview">
<h1>E1: Nasenasenase<h1>
<p>In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba</p>
</article>
</main>
<footer id="left">Unne Links</footer>
<footer id="center">Unne Midde</footer>
<footer id="right">Unne Rechts</footer>
</div>
</body>
</html>

1
meta/loremipsum_a.txt Normal file

@ -0,0 +1 @@
Laram apsam dalar sat amat, cansatatar sadapscang alatr, sad daam nanamy aarmad tampar anvadant at labara at dalara magna alaqayam arat, sad daam valaptaa. At vara aas at accasam at jasta daa dalaras at aa rabam. Stat clata kasd gabargran, na saa takamata sanctas ast Laram apsam dalar sat amat. Laram apsam dalar sat amat, cansatatar sadapscang alatr, sad daam nanamy aarmad tampar anvadant at labara at dalara magna alaqayam arat, sad daam valaptaa. At vara aas at accasam at jasta daa dalaras at aa rabam. Stat clata kasd gabargran, na saa takamata sanctas ast Laram apsam dalar sat amat. Laram apsam dalar sat amat, cansatatar sadapscang alatr, sad daam nanamy aarmad tampar anvadant at labara at dalara magna alaqayam arat, sad daam valaptaa. At vara aas at accasam at jasta daa dalaras at aa rabam. Stat clata kasd gabargran, na saa takamata sanctas ast Laram apsam dalar sat amat.

1
meta/loremipsum_e.txt Normal file

@ -0,0 +1 @@
Lerem epsem deler set emet, censeteter sedepsceng eletr, sed deem nenemy eermed temper envedent et lebere et delere megne eleqeyem eret, sed deem veleptee. Et vere ees et eccesem et jeste dee deleres et ee rebem. Stet clete kesd gebergren, ne see tekemete senctes est Lerem epsem deler set emet. Lerem epsem deler set emet, censeteter sedepsceng eletr, sed deem nenemy eermed temper envedent et lebere et delere megne eleqeyem eret, sed deem veleptee. Et vere ees et eccesem et jeste dee deleres et ee rebem. Stet clete kesd gebergren, ne see tekemete senctes est Lerem epsem deler set emet. Lerem epsem deler set emet, censeteter sedepsceng eletr, sed deem nenemy eermed temper envedent et lebere et delere megne eleqeyem eret, sed deem veleptee. Et vere ees et eccesem et jeste dee deleres et ee rebem. Stet clete kesd gebergren, ne see tekemete senctes est Lerem epsem deler set emet.

1
meta/loremipsum_i.txt Normal file

@ -0,0 +1 @@
Lirim ipsim dilir sit imit, cinsititir sidipscing ilitr, sid diim ninimy iirmid timpir invidint it libiri it diliri migni iliqiyim irit, sid diim viliptii. It viri iis it iccisim it jisti dii diliris it ii ribim. Stit cliti kisd gibirgrin, ni sii tikimiti sinctis ist Lirim ipsim dilir sit imit. Lirim ipsim dilir sit imit, cinsititir sidipscing ilitr, sid diim ninimy iirmid timpir invidint it libiri it diliri migni iliqiyim irit, sid diim viliptii. It viri iis it iccisim it jisti dii diliris it ii ribim. Stit cliti kisd gibirgrin, ni sii tikimiti sinctis ist Lirim ipsim dilir sit imit. Lirim ipsim dilir sit imit, cinsititir sidipscing ilitr, sid diim ninimy iirmid timpir invidint it libiri it diliri migni iliqiyim irit, sid diim viliptii. It viri iis it iccisim it jisti dii diliris it ii ribim. Stit cliti kisd gibirgrin, ni sii tikimiti sinctis ist Lirim ipsim dilir sit imit.

1
meta/loremipsum_o.txt Normal file

@ -0,0 +1 @@
Lorom opsom dolor sot omot, consototor sodopscong olotr, sod doom nonomy oormod tompor onvodont ot loboro ot doloro mogno oloqoyom orot, sod doom voloptoo. Ot voro oos ot occosom ot josto doo doloros ot oo robom. Stot cloto kosd goborgron, no soo tokomoto sonctos ost Lorom opsom dolor sot omot. Lorom opsom dolor sot omot, consototor sodopscong olotr, sod doom nonomy oormod tompor onvodont ot loboro ot doloro mogno oloqoyom orot, sod doom voloptoo. Ot voro oos ot occosom ot josto doo doloros ot oo robom. Stot cloto kosd goborgron, no soo tokomoto sonctos ost Lorom opsom dolor sot omot. Lorom opsom dolor sot omot, consototor sodopscong olotr, sod doom nonomy oormod tompor onvodont ot loboro ot doloro mogno oloqoyom orot, sod doom voloptoo. Ot voro oos ot occosom ot josto doo doloros ot oo robom. Stot cloto kosd goborgron, no soo tokomoto sonctos ost Lorom opsom dolor sot omot.

1
meta/loremipsum_u.txt Normal file

@ -0,0 +1 @@
Lurum upsum dulur sut umut, cunsututur sudupscung ulutr, sud duum nunumy uurmud tumpur unvudunt ut luburu ut duluru mugnu uluquyum urut, sud duum vuluptuu. Ut vuru uus ut uccusum ut justu duu dulurus ut uu rubum. Stut clutu kusd guburgrun, nu suu tukumutu sunctus ust Lurum upsum dulur sut umut. Lurum upsum dulur sut umut, cunsututur sudupscung ulutr, sud duum nunumy uurmud tumpur unvudunt ut luburu ut duluru mugnu uluquyum urut, sud duum vuluptuu. Ut vuru uus ut uccusum ut justu duu dulurus ut uu rubum. Stut clutu kusd guburgrun, nu suu tukumutu sunctus ust Lurum upsum dulur sut umut. Lurum upsum dulur sut umut, cunsututur sudupscung ulutr, sud duum nunumy uurmud tumpur unvudunt ut luburu ut duluru mugnu uluquyum urut, sud duum vuluptuu. Ut vuru uus ut uccusum ut justu duu dulurus ut uu rubum. Stut clutu kusd guburgrun, nu suu tukumutu sunctus ust Lurum upsum dulur sut umut.