Manuel Dossinger 1 year ago
commit
f7a22abf66

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

File diff suppressed because it is too large
+ 32 - 0
assets/img/noisy_background.svg


BIN
assets2/.DS_Store


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


+ 135 - 0
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 */

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


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

BIN
assets2/fonts/Muli-Black.ttf


BIN
assets2/fonts/Muli-BlackItalic.ttf


BIN
assets2/fonts/Muli-Bold.ttf


BIN
assets2/fonts/Muli-BoldItalic.ttf


BIN
assets2/fonts/Muli-ExtraBold.ttf


BIN
assets2/fonts/Muli-ExtraBoldItalic.ttf


BIN
assets2/fonts/Muli-ExtraLight.ttf


BIN
assets2/fonts/Muli-ExtraLightItalic.ttf


BIN
assets2/fonts/Muli-Italic.ttf


BIN
assets2/fonts/Muli-Light.ttf


BIN
assets2/fonts/Muli-LightItalic.ttf


BIN
assets2/fonts/Muli-Regular.ttf


BIN
assets2/fonts/Muli-SemiBold.ttf


BIN
assets2/fonts/Muli-SemiBoldItalic.ttf


BIN
assets2/fonts/repulsor.ttf


BIN
assets2/fonts/repulsore.ttf


BIN
assets2/fonts/repulsorei.ttf


BIN
assets2/fonts/repulsori.ttf


BIN
assets2/img/1.jpg


+ 47 - 0
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>

BIN
glitchy/image.jpg


+ 50 - 0
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>
+

+ 25 - 0
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>

+ 40 - 0
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>

File diff suppressed because it is too large
+ 1 - 0
meta/loremipsum_a.txt


File diff suppressed because it is too large
+ 1 - 0
meta/loremipsum_e.txt


File diff suppressed because it is too large
+ 1 - 0
meta/loremipsum_i.txt


File diff suppressed because it is too large
+ 1 - 0
meta/loremipsum_o.txt


File diff suppressed because it is too large
+ 1 - 0
meta/loremipsum_u.txt