Manuel Dossinger 1 year ago
parent
commit
3f5622a54d

+ 1 - 0
assets2/css/.gitignore

@@ -0,0 +1 @@
+.sass-cache

BIN
assets2/css/.sass-cache/e56160acf74a575162b20368611eee56cf128392/main.scssc


+ 23 - 0
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');
+}

+ 74 - 0
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%);
+  }
+}

+ 38 - 0
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;
+  }
+}

+ 90 - 92
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 */

File diff suppressed because it is too large
+ 2 - 2
assets2/css/main.css.map


+ 6 - 161
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);
-      }
-    }
-
-  }
-
-}

+ 11 - 11
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);

+ 42 - 13
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>