commit f7a22abf662a9b1e61721f38d0607ce54d6f54f3
Author: Manuel Dossinger <manuel@manuel-hoffmann.info>
Date:   Wed Feb 6 22:14:50 2019 +0100

    first

diff --git a/assets/css/main.css b/assets/css/main.css
new file mode 100644
index 0000000..b61193c
--- /dev/null
+++ b/assets/css/main.css
@@ -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;
+}
\ No newline at end of file
diff --git a/assets/img/noisy_background.svg b/assets/img/noisy_background.svg
new file mode 100644
index 0000000..24d208b
--- /dev/null
+++ b/assets/img/noisy_background.svg
@@ -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>
\ No newline at end of file
diff --git a/assets2/.DS_Store b/assets2/.DS_Store
new file mode 100644
index 0000000..1733daa
Binary files /dev/null and b/assets2/.DS_Store differ
diff --git a/assets2/css/.sass-cache/e56160acf74a575162b20368611eee56cf128392/main.scssc b/assets2/css/.sass-cache/e56160acf74a575162b20368611eee56cf128392/main.scssc
new file mode 100644
index 0000000..6d28359
Binary files /dev/null and b/assets2/css/.sass-cache/e56160acf74a575162b20368611eee56cf128392/main.scssc differ
diff --git a/assets2/css/main.css b/assets2/css/main.css
new file mode 100644
index 0000000..a03c332
--- /dev/null
+++ b/assets2/css/main.css
@@ -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 */
diff --git a/assets2/css/main.css.map b/assets2/css/main.css.map
new file mode 100644
index 0000000..4993e21
--- /dev/null
+++ b/assets2/css/main.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "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",
+"sources": ["main.scss"],
+"names": [],
+"file": "main.css"
+}
\ No newline at end of file
diff --git a/assets2/css/main.scss b/assets2/css/main.scss
new file mode 100644
index 0000000..bc2e1b2
--- /dev/null
+++ b/assets2/css/main.scss
@@ -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);
+      }
+    }
+
+  }
+
+}
diff --git a/assets2/fonts/Muli-Black.ttf b/assets2/fonts/Muli-Black.ttf
new file mode 100755
index 0000000..0aa7547
Binary files /dev/null and b/assets2/fonts/Muli-Black.ttf differ
diff --git a/assets2/fonts/Muli-BlackItalic.ttf b/assets2/fonts/Muli-BlackItalic.ttf
new file mode 100755
index 0000000..72daf88
Binary files /dev/null and b/assets2/fonts/Muli-BlackItalic.ttf differ
diff --git a/assets2/fonts/Muli-Bold.ttf b/assets2/fonts/Muli-Bold.ttf
new file mode 100755
index 0000000..aaaf361
Binary files /dev/null and b/assets2/fonts/Muli-Bold.ttf differ
diff --git a/assets2/fonts/Muli-BoldItalic.ttf b/assets2/fonts/Muli-BoldItalic.ttf
new file mode 100755
index 0000000..9beaed4
Binary files /dev/null and b/assets2/fonts/Muli-BoldItalic.ttf differ
diff --git a/assets2/fonts/Muli-ExtraBold.ttf b/assets2/fonts/Muli-ExtraBold.ttf
new file mode 100755
index 0000000..244bd38
Binary files /dev/null and b/assets2/fonts/Muli-ExtraBold.ttf differ
diff --git a/assets2/fonts/Muli-ExtraBoldItalic.ttf b/assets2/fonts/Muli-ExtraBoldItalic.ttf
new file mode 100755
index 0000000..8166773
Binary files /dev/null and b/assets2/fonts/Muli-ExtraBoldItalic.ttf differ
diff --git a/assets2/fonts/Muli-ExtraLight.ttf b/assets2/fonts/Muli-ExtraLight.ttf
new file mode 100755
index 0000000..37d5387
Binary files /dev/null and b/assets2/fonts/Muli-ExtraLight.ttf differ
diff --git a/assets2/fonts/Muli-ExtraLightItalic.ttf b/assets2/fonts/Muli-ExtraLightItalic.ttf
new file mode 100755
index 0000000..e759638
Binary files /dev/null and b/assets2/fonts/Muli-ExtraLightItalic.ttf differ
diff --git a/assets2/fonts/Muli-Italic.ttf b/assets2/fonts/Muli-Italic.ttf
new file mode 100755
index 0000000..f826f0b
Binary files /dev/null and b/assets2/fonts/Muli-Italic.ttf differ
diff --git a/assets2/fonts/Muli-Light.ttf b/assets2/fonts/Muli-Light.ttf
new file mode 100755
index 0000000..d957a80
Binary files /dev/null and b/assets2/fonts/Muli-Light.ttf differ
diff --git a/assets2/fonts/Muli-LightItalic.ttf b/assets2/fonts/Muli-LightItalic.ttf
new file mode 100755
index 0000000..04dc236
Binary files /dev/null and b/assets2/fonts/Muli-LightItalic.ttf differ
diff --git a/assets2/fonts/Muli-Regular.ttf b/assets2/fonts/Muli-Regular.ttf
new file mode 100755
index 0000000..fef22b0
Binary files /dev/null and b/assets2/fonts/Muli-Regular.ttf differ
diff --git a/assets2/fonts/Muli-SemiBold.ttf b/assets2/fonts/Muli-SemiBold.ttf
new file mode 100755
index 0000000..881580d
Binary files /dev/null and b/assets2/fonts/Muli-SemiBold.ttf differ
diff --git a/assets2/fonts/Muli-SemiBoldItalic.ttf b/assets2/fonts/Muli-SemiBoldItalic.ttf
new file mode 100755
index 0000000..1d754fb
Binary files /dev/null and b/assets2/fonts/Muli-SemiBoldItalic.ttf differ
diff --git a/assets2/fonts/repulsor.ttf b/assets2/fonts/repulsor.ttf
new file mode 100755
index 0000000..20901cc
Binary files /dev/null and b/assets2/fonts/repulsor.ttf differ
diff --git a/assets2/fonts/repulsore.ttf b/assets2/fonts/repulsore.ttf
new file mode 100755
index 0000000..6145dfd
Binary files /dev/null and b/assets2/fonts/repulsore.ttf differ
diff --git a/assets2/fonts/repulsorei.ttf b/assets2/fonts/repulsorei.ttf
new file mode 100755
index 0000000..6e5d7bd
Binary files /dev/null and b/assets2/fonts/repulsorei.ttf differ
diff --git a/assets2/fonts/repulsori.ttf b/assets2/fonts/repulsori.ttf
new file mode 100755
index 0000000..de1efcd
Binary files /dev/null and b/assets2/fonts/repulsori.ttf differ
diff --git a/assets2/img/1.jpg b/assets2/img/1.jpg
new file mode 100644
index 0000000..6dd851c
Binary files /dev/null and b/assets2/img/1.jpg differ
diff --git a/glitchy/.comments/image.jpg.xml b/glitchy/.comments/image.jpg.xml
new file mode 100755
index 0000000..6d4aee3
--- /dev/null
+++ b/glitchy/.comments/image.jpg.xml
@@ -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>
diff --git a/glitchy/image.jpg b/glitchy/image.jpg
new file mode 100755
index 0000000..822012b
Binary files /dev/null and b/glitchy/image.jpg differ
diff --git a/glitchy/index.html b/glitchy/index.html
new file mode 100755
index 0000000..7b3dded
--- /dev/null
+++ b/glitchy/index.html
@@ -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>
+
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c3d8bb9
--- /dev/null
+++ b/index.html
@@ -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>
\ No newline at end of file
diff --git a/index2.html b/index2.html
new file mode 100644
index 0000000..0029d4e
--- /dev/null
+++ b/index2.html
@@ -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>
\ No newline at end of file
diff --git a/meta/loremipsum_a.txt b/meta/loremipsum_a.txt
new file mode 100644
index 0000000..c16514b
--- /dev/null
+++ b/meta/loremipsum_a.txt
@@ -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.
diff --git a/meta/loremipsum_e.txt b/meta/loremipsum_e.txt
new file mode 100644
index 0000000..b072525
--- /dev/null
+++ b/meta/loremipsum_e.txt
@@ -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.
diff --git a/meta/loremipsum_i.txt b/meta/loremipsum_i.txt
new file mode 100644
index 0000000..8330fb0
--- /dev/null
+++ b/meta/loremipsum_i.txt
@@ -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.
diff --git a/meta/loremipsum_o.txt b/meta/loremipsum_o.txt
new file mode 100644
index 0000000..32c172a
--- /dev/null
+++ b/meta/loremipsum_o.txt
@@ -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.
diff --git a/meta/loremipsum_u.txt b/meta/loremipsum_u.txt
new file mode 100644
index 0000000..2e2bb99
--- /dev/null
+++ b/meta/loremipsum_u.txt
@@ -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.