Emil Williams
208e0da00d
img -- -- rm rm -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- fuck lfs, it really sucks -- -- -- -- -- -- -- -- -- -- -- -- daata -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
150 lines
3.2 KiB
CSS
150 lines
3.2 KiB
CSS
/* Base */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: #002e00;
|
|
}
|
|
h2, h3, h4, h5, h6 {
|
|
padding-left: 5em;
|
|
}
|
|
p, div {
|
|
padding: 0em 2em 0em 2em;
|
|
}
|
|
a:link {
|
|
color: blue;
|
|
text-decoration: none;
|
|
}
|
|
a:visited {
|
|
color: red;
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
color: hotpink;
|
|
text-decoration: none;
|
|
}
|
|
a:active {
|
|
color: green;
|
|
text-decoration: none;
|
|
}
|
|
/* Class */
|
|
.box {
|
|
width: 70em;
|
|
padding: 1em 0.5em 0em 0.5em;
|
|
border: 0.2em solid #333;
|
|
border-style: inset;
|
|
border-color: #1a1d0a;
|
|
margin: 1em auto;
|
|
background-color: #c0bbc015;
|
|
}
|
|
.box2 {
|
|
width: 50em;
|
|
border: 0.2em solid #333;
|
|
border-style: inset;
|
|
border-color: #1a1d0a;
|
|
margin: 1em auto;
|
|
background-color: #c0bbc015;
|
|
}
|
|
.subbox {
|
|
background-color: #fdffff;
|
|
width: 20em;
|
|
padding: 1em;
|
|
border: 0.2em solid #333;
|
|
border-color: #1a4f0a;
|
|
border-style: double;
|
|
margin: 0em auto;
|
|
}
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
.right {
|
|
text-align: right;
|
|
}
|
|
.container {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto auto auto;
|
|
padding: 1em;
|
|
}
|
|
.container > div {
|
|
background-color: #f1f1f1;
|
|
border: 0.1em solid black;
|
|
padding: 0.2em;
|
|
text-align: center;
|
|
}
|
|
.small {
|
|
width: 9em;
|
|
height: 9em;
|
|
}
|
|
.back {
|
|
float: left;
|
|
padding-left: 5em;
|
|
font-size: 11px;
|
|
}
|
|
.links {
|
|
background-color: #05660515;;
|
|
padding-left: 1em;
|
|
}
|
|
/* Anim */
|
|
@keyframes shake {
|
|
0% { transform: rotate(0deg); }
|
|
10% { transform: skewY(0.2deg); }
|
|
25% { transform: rotate(-0.01deg); }
|
|
50% { transform: translate(2px, 1px) rotate(-0.03deg); }
|
|
75% { transform: rotate(0.01deg); }
|
|
100% { transform: rotate(-0.1deg); }
|
|
}
|
|
@keyframes shake-angry {
|
|
0% { transform: translate(0, 0) rotate(0deg); }
|
|
25% { transform: translate(5px, 5px) rotate(5deg); }
|
|
50% { transform: translate(0, 0) rotate(0eg); }
|
|
75% { transform: translate(-5px, 5px) rotate(-5deg); }
|
|
100% { transform: translate(0, 0) rotate(0deg); }
|
|
}
|
|
@keyframes blink {
|
|
0% { opacity: 1; background-color: white; filter: invert(0%); }
|
|
33% { opacity: 1; background-color: yellow; filter: invert(0%); }
|
|
66% { opacity: 1; background-color: white; filter: invert(100%); }
|
|
100% { opacity: 1; background-color: white; filter: invert(0%); }
|
|
}
|
|
@keyframes shake {
|
|
0% { transform: rotate(0deg); }
|
|
10% { transform: skewY(0.2deg); }
|
|
25% { transform: rotate(-0.01deg); }
|
|
50% { transform: translate(2px, 1px) rotate(-0.03deg); }
|
|
75% { transform: rotate(0.01deg); }
|
|
100% { transform: rotate(-0.1deg); }
|
|
}
|
|
/* Anim Classes */
|
|
.shake {
|
|
animation: shake 1s step-start infinite;
|
|
}
|
|
.shake-angry {
|
|
animation: shake-angry 1s step-start infinite;
|
|
}
|
|
.blinking-text {
|
|
animation: blink 3s step-start infinite;
|
|
}
|
|
.blinking-text:nth-child(1) { animation-delay: 1.9s; }
|
|
/* Anim offsets */
|
|
.shake:nth-child(1) { animation-delay: .8s; }
|
|
.shake:nth-child(2) { animation-delay: 1.3s; }
|
|
.shake:nth-child(3) { animation-delay: .5s; }
|
|
.shake:nth-child(4) { animation-delay: .9s; }
|
|
.shake:nth-child(5) { animation-delay: 1.1s; }
|
|
.shake:nth-child(6) { animation-delay: 8.5s; }
|
|
.shake:nth-child(7) { animation-delay: 0.5s; }
|
|
.shake:nth-child(8) { animation-delay: .99s; }
|
|
/* Anim Base */
|
|
p:hover, h1:hover, img:hover, div.container:hover > div {
|
|
animation: shake-angry 1s step-start infinite;
|
|
}
|
|
lo.shake > li, li:hover {
|
|
animation: shake-angry 10s step-start infinite;
|
|
}
|
|
p:hover {
|
|
animation: shake-angry 0.1s infinite;
|
|
}
|
|
.subbox:hover {
|
|
animation: shake-angry 0.2s infinite;
|
|
}
|
|
img:hover {
|
|
animation: shake-angry 0.03s infinite;
|
|
}
|