这个提交包含在:
Manuel Dossinger 2019-02-06 22:14:50 +01:00
当前提交 f7a22abf66
共有 36 个文件被更改,包括 642 次插入0 次删除

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

查看文件

@ -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>

之后

宽度:  |  高度:  |  大小: 6.0 KiB

二进制
assets2/.DS_Store vendored 普通文件

二进制文件未显示。

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

7
assets2/css/main.css.map 普通文件
查看文件

@ -0,0 +1,7 @@
{
"version": 3,
"mappings": "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",
"sources": ["main.scss"],
"names": [],
"file": "main.css"
}

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

二进制
assets2/fonts/Muli-Black.ttf 可执行文件

二进制文件未显示。

二进制
assets2/fonts/Muli-BlackItalic.ttf 可执行文件

二进制文件未显示。

二进制
assets2/fonts/Muli-Bold.ttf 可执行文件

二进制文件未显示。

二进制
assets2/fonts/Muli-BoldItalic.ttf 可执行文件

二进制文件未显示。

二进制
assets2/fonts/Muli-ExtraBold.ttf 可执行文件

二进制文件未显示。

二进制
assets2/fonts/Muli-ExtraBoldItalic.ttf 可执行文件

二进制文件未显示。

二进制
assets2/fonts/Muli-ExtraLight.ttf 可执行文件

二进制文件未显示。

二进制
assets2/fonts/Muli-ExtraLightItalic.ttf 可执行文件

二进制文件未显示。

二进制
assets2/fonts/Muli-Italic.ttf 可执行文件

二进制文件未显示。

二进制
assets2/fonts/Muli-Light.ttf 可执行文件

二进制文件未显示。

二进制
assets2/fonts/Muli-LightItalic.ttf 可执行文件

二进制文件未显示。

二进制
assets2/fonts/Muli-Regular.ttf 可执行文件

二进制文件未显示。

二进制
assets2/fonts/Muli-SemiBold.ttf 可执行文件

二进制文件未显示。

二进制
assets2/fonts/Muli-SemiBoldItalic.ttf 可执行文件

二进制文件未显示。

二进制
assets2/fonts/repulsor.ttf 可执行文件

二进制文件未显示。

二进制
assets2/fonts/repulsore.ttf 可执行文件

二进制文件未显示。

二进制
assets2/fonts/repulsorei.ttf 可执行文件

二进制文件未显示。

二进制
assets2/fonts/repulsori.ttf 可执行文件

二进制文件未显示。

二进制
assets2/img/1.jpg 普通文件

二进制文件未显示。

之后

宽度:  |  高度:  |  大小: 34 KiB

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

二进制
glitchy/image.jpg 可执行文件

二进制文件未显示。

之后

宽度:  |  高度:  |  大小: 110 KiB

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

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

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

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

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

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