134 lines
4.4 KiB
CSS
134 lines
4.4 KiB
CSS
/** 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"); }
|
|
@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"); }
|
|
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;
|
|
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; }
|
|
|
|
/*# sourceMappingURL=main.css.map */
|