💩

2019-02-06 22:55:40 +01:00 · 2019-02-06 22:55:40 +01:00 · 3f5622a54d
--- a/assets2/css/.gitignore
+++ b/assets2/css/.gitignore
@ -0,0 +1 @@
+.sass-cache
--- a/assets2/css/.sass-cache/e56160acf74a575162b20368611eee56cf128392/main.scssc
+++ b/assets2/css/.sass-cache/e56160acf74a575162b20368611eee56cf128392/main.scssc
--- a/assets2/css/_fonts.scss
+++ b/assets2/css/_fonts.scss
@ -0,0 +1,23 @@
+
+@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');
+}
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Muli Light'), local('Muli-Light'), url(/assets2/fonts/Muli-Light.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-weight: 800;
+  src: local('Muli ExtraBold'), local('Muli-ExtraBold'), url(/assets2/fonts/Muli-ExtraBold.ttf) format('truetype');
+}
--- a/assets2/css/_glitch.scss
+++ b/assets2/css/_glitch.scss
@ -0,0 +1,74 @@
+/** glitch **/
+$gap-horizontal: 10px;
+
+header {
+  animation-name: glitch-anim-text;
+  animation-duration: 2s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+
+}
+
+@keyframes glitch-anim-text {
+  0% { 
+    transform: translate3d(calc(-1 * #{$gap-horizontal}),0,0) scale3d(-1,-1,1);
+    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
+    clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
+  }
+  2% {
+    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
+    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
+  }
+  4% {
+    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
+    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
+  }
+  5% {
+    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
+    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
+  }
+  6% {
+    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
+    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
+  }
+  7% {
+    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
+    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
+  }
+  8% {
+    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
+    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
+  }
+  9% {
+    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
+    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
+  }
+  9.9% {
+    transform: translate3d(calc(-1 * #{$gap-horizontal}),0,0) scale3d(-1,-1,1);
+  }
+  10%, 46% {
+    transform: translate3d(0,0,0) scale3d(1,1,1);
+    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+  }
+
+
+  47% {
+    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
+    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
+  }
+  48% {
+    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
+    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
+  }
+  49% {
+    transform: translate3d(calc(-1 * #{$gap-horizontal}),0,0) scale3d(-1,-1,1);
+  }
+
+
+  50%, 100% {
+    transform: translate3d(0,0,0) scale3d(1,1,1);
+    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+  }
+}
--- a/assets2/css/_previews.scss
+++ b/assets2/css/_previews.scss
@ -0,0 +1,38 @@
+article.preview {
+  width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 2*$gutter;
+
+  padding: $gutter;
+  border: 1px solid $blue;
+
+  background: transparentize($black, 0.6);
+  background-blend-mode: lighten;
+
+  div.episode-displacement {
+    position: relative;
+  }
+  div.episode-counter {
+    height: 0;
+    overflow: visible;
+    position: absolute;
+    left: -80px;
+    top: 1px;
+    font-weight: bold;
+    font-size: 50px;
+    color: $yellow;
+    opacity: .8;
+    z-index: -1;
+  }
+
+  h1 {
+    margin: 0;
+    font-weight: lighter;
+    color: $white;
+  }
+
+  p {
+    color: $white;
+  }
+}
--- a/assets2/css/main.css
+++ b/assets2/css/main.css
@ -1,3 +1,54 @@
+/** glitch **/
+header {
+  animation-name: glitch-anim-text;
+  animation-duration: 2s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite; }
+
+@keyframes glitch-anim-text {
+  0% {
+    transform: translate3d(calc(-1 * 10px), 0, 0) scale3d(-1, -1, 1);
+    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
+    clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); }
+  2% {
+    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
+    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); }
+  4% {
+    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
+    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
+  5% {
+    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
+    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); }
+  6% {
+    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
+    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); }
+  7% {
+    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
+    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
+  8% {
+    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
+    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }
+  9% {
+    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
+    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
+  9.9% {
+    transform: translate3d(calc(-1 * 10px), 0, 0) scale3d(-1, -1, 1); }
+  10%, 46% {
+    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
+    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
+  47% {
+    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
+    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
+  48% {
+    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
+    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }
+  49% {
+    transform: translate3d(calc(-1 * 10px), 0, 0) scale3d(-1, -1, 1); }
+  50%, 100% {
+    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
+    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } }
@font-face {
  font-family: "repulsor";
  src: url("/assets2/fonts/repulsore.ttf") format("truetype"); }
@ -6,6 +57,45 @@
  font-style: normal;
  font-weight: 400;
  src: local("Muli Regular"), local("Muli-Regular"), url(/assets2/fonts/Muli-Regular.ttf) format("truetype"); }
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-weight: 100;
+  src: local("Muli Light"), local("Muli-Light"), url(/assets2/fonts/Muli-Light.ttf) format("truetype"); }
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-weight: 800;
+  src: local("Muli ExtraBold"), local("Muli-ExtraBold"), url(/assets2/fonts/Muli-ExtraBold.ttf) format("truetype"); }
+article.preview {
+  width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 24px;
+  padding: 12px;
+  border: 1px solid #004e66;
+  background: rgba(14, 14, 14, 0.4);
+  background-blend-mode: lighten; }
+  article.preview div.episode-displacement {
+    position: relative; }
+  article.preview div.episode-counter {
+    height: 0;
+    overflow: visible;
+    position: absolute;
+    left: -80px;
+    top: 1px;
+    font-weight: bold;
+    font-size: 50px;
+    color: #ffb400;
+    opacity: .8;
+    z-index: -1; }
+  article.preview h1 {
+    margin: 0;
+    font-weight: lighter;
+    color: #fff7e5; }
+  article.preview p {
+    color: #fff7e5; }
+
 html {
  padding: 0;
  margin: 0;
@ -40,96 +130,4 @@ header {
    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 */
--- a/assets2/css/main.css.map
+++ b/assets2/css/main.css.map
@ -1,7 +1,7 @@
 {
 "version": 3,
-"mappings": "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",
-"sources": ["main.scss"],
+"mappings": "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",
+"sources": ["_glitch.scss","_fonts.scss","_previews.scss","main.scss"],
 "names": [],
 "file": "main.css"
 }
--- a/assets2/css/main.scss
+++ b/assets2/css/main.scss
@ -2,17 +2,13 @@
 $white: #fff7e5;
 $yellow: #ffb400;
 $blue: #004e66;
+$black: #0e0e0e;

-@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');
-}
+$gutter: 12px;
+
+@import 'glitch';
+@import 'fonts';
+@import 'previews';

 // mixins
@mixin radial-background() {
@ -58,154 +54,3 @@ header {
  }
 }

-/** 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);
-      }
-    }
-
-  }
-
-}
--- a/glitchy/index.html
+++ b/glitchy/index.html
@ -19,20 +19,20 @@
  	}
  	.header-img:nth-child(2) {
 		transform: translate3d(10px,0,0);
-		animation: sideshift 1s infinite linear;
+		animation: sideshift 2s 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%); }	
+  	@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%); }
-	}
+  	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);
--- a/index2.html
+++ b/index2.html
@ -9,28 +9,57 @@
  <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>
+        <div class="episode-displacement">
+          <div class="episode-counter">#E3</div>
+        </div>
+        <h1>
+          Nasenasenase
+        </h1>
+        <p>In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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>
+        <div class="episode-displacement">
+          <div class="episode-counter">#E2</div>
+        </div>
+        <h1>
+          Nasenasenase
+        </h1>
+        <p>In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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>
+        <div class="episode-displacement">
+          <div class="episode-counter">#E1</div>
+        </div>
+        <h1>
+          Nasenasenase
+        </h1>
+        <p>In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </article>
+      
    </main>
    <footer id="left">Unne Links</footer>
    <footer id="center">Unne Midde</footer>