diff --git a/assets2/css/.gitignore b/assets2/css/.gitignore
new file mode 100644
index 0000000..5df1b9b
--- /dev/null
+++ b/assets2/css/.gitignore
@@ -0,0 +1 @@
+.sass-cache
diff --git a/assets2/css/.sass-cache/e56160acf74a575162b20368611eee56cf128392/main.scssc b/assets2/css/.sass-cache/e56160acf74a575162b20368611eee56cf128392/main.scssc
deleted file mode 100644
index 6d28359..0000000
Binary files a/assets2/css/.sass-cache/e56160acf74a575162b20368611eee56cf128392/main.scssc and /dev/null differ
diff --git a/assets2/css/_fonts.scss b/assets2/css/_fonts.scss
new file mode 100644
index 0000000..3fed95d
--- /dev/null
+++ 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');
+}
diff --git a/assets2/css/_glitch.scss b/assets2/css/_glitch.scss
new file mode 100644
index 0000000..bc0760b
--- /dev/null
+++ 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%);
+ }
+}
diff --git a/assets2/css/_previews.scss b/assets2/css/_previews.scss
new file mode 100644
index 0000000..18b9645
--- /dev/null
+++ 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;
+ }
+}
diff --git a/assets2/css/main.css b/assets2/css/main.css
index a03c332..28a13cf 100644
--- 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 */
diff --git a/assets2/css/main.css.map b/assets2/css/main.css.map
index 4993e21..888bef6 100644
--- 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"
}
\ No newline at end of file
diff --git a/assets2/css/main.scss b/assets2/css/main.scss
index bc2e1b2..42bbf03 100644
--- 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);
- }
- }
-
- }
-
-}
diff --git a/glitchy/index.html b/glitchy/index.html
index 7b3dded..68e6f85 100755
--- 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);
diff --git a/index2.html b/index2.html
index 0029d4e..37a95db 100644
--- a/index2.html
+++ b/index2.html
@@ -9,28 +9,57 @@
NoiseToSignal
Just the right ratio, ≥ 1
-
- E3: Nasenasenase
-
In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba
+
+
+ Nasenasenase
+
+ 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.
+
- E2: Nasenasenase
-
In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba
+
+
+ Nasenasenase
+
+ 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.
+
- E1: Nasenasenase
-
In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba
+
+
+ Nasenasenase
+
+ 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.
+