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

+
+
#E3
+
+

+ 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

+
+
#E2
+
+

+ 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

+
+
#E1
+
+

+ 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.

+