356 lines
5.7 KiB
CSS
356 lines
5.7 KiB
CSS
/* Fonts */
|
|
|
|
@font-face {
|
|
font-family: "Gaiatype";
|
|
src: url("./assets/fonts/Gaiatype.woff2") format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "04b03";
|
|
src: url("./assets/fonts/04B_03__.woff2") format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "MomsTypewriter";
|
|
src: url("./assets/fonts/MomsTypewriter.woff2") format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "ChronoType";
|
|
src: url("./assets/fonts/ChronoType.woff2") format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "ChronoType";
|
|
src: url("./assets/fonts/ChronoType.woff2") format('woff2');
|
|
}
|
|
/* Actual Style */
|
|
|
|
html {
|
|
color: #f8feff;
|
|
font-family: "Roboto", monospace;
|
|
background-image: linear-gradient(to bottom,
|
|
rgba(11, 11, 11, 0.78),
|
|
rgba(11, 11, 11, 0.78)),
|
|
url(./assets/bgs/bgtile2.gif);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
body {
|
|
cursor: url(./assets/cursors/Reimu/default.png), default;
|
|
margin-top: 0px;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
h1 {
|
|
font-family: "Gaiatype";
|
|
text-align: center;
|
|
position: relative;
|
|
font-size: 1.8em;
|
|
color: rgb(255, 175, 206);
|
|
margin-top: 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
h2 {
|
|
font-family: "Gaiatype";
|
|
font-size: 1.6em;
|
|
color: rgb(70, 200, 180);
|
|
margin-top: 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
h3 {
|
|
font-family: "";
|
|
font-size: 1.4em;
|
|
color: rgb(70, 170, 180);
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
h4 {
|
|
font-family: "Gaiatype";
|
|
font-size: 1.2em;
|
|
color: rgb(70, 170, 180);
|
|
margin-top: 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
p {
|
|
/* font-family: "04b03"; */
|
|
font-size: 0.9em;
|
|
line-height: 1.55em;
|
|
/* margin-top: 12px; */
|
|
/* margin-bottom: 12px; */
|
|
}
|
|
|
|
a {
|
|
font-size: 0.9em;
|
|
line-height: 1.55em;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
/* Remove default bullets */
|
|
}
|
|
|
|
/* https://www.w3schools.com/howto/howto_css_bullet_color.asp */
|
|
ul li::before {
|
|
content: "\2A00";
|
|
/* Add content: \2022 is the CSS Code/unicode for a bullet */
|
|
color: rgb(197, 136, 221);
|
|
/* Change the color */
|
|
font-weight: bold;
|
|
/* If you want it to be bold */
|
|
display: inline-block;
|
|
/* Needed to add space between the bullet and the text */
|
|
width: 1em;
|
|
/* Also needed for space (tweak if needed) */
|
|
margin-left: -1.5em;
|
|
/* Also needed for space (tweak if needed) */
|
|
}
|
|
|
|
s {
|
|
text-decoration: line-through;
|
|
color: red;
|
|
}
|
|
|
|
:link {
|
|
cursor: url(./assets/cursors/Reimu/pointer.png), pointer;
|
|
color: #ffc0cb;
|
|
}
|
|
|
|
:visited {
|
|
cursor: url(./assets/cursors/Reimu/pointer.png), pointer;
|
|
color: #ffc0cb;
|
|
}
|
|
|
|
li {
|
|
margin-top: 1vh;
|
|
margin-bottom: 1vh;
|
|
font-size: 0.9em;
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 1em;
|
|
}
|
|
|
|
code {
|
|
color: #adff2f;
|
|
}
|
|
|
|
|
|
#donate>* {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
#uptime-up {
|
|
text-shadow: 0 0 10px #ffffff45, 0 0 20px #ffffff40, 0 0 30px lime, 0 0 40px #04e669,
|
|
0 0 50px #34ff1b, 0 0 60px #25fa2b, 0 0 70px #02ec55;
|
|
color: greenyellow;
|
|
}
|
|
|
|
#uptime-down {
|
|
text-shadow: 0 0 10px #ffffff45, 0 0 20px #ffffff40, 0 0 30px red, 0 0 40px #e61704,
|
|
0 0 50px #ff391b, 0 0 60px #fa3725, 0 0 70px #ec0202;
|
|
color: red;
|
|
}
|
|
|
|
|
|
@keyframes erm {
|
|
0% {
|
|
transform: rotate(2deg);
|
|
}
|
|
|
|
50% {
|
|
transform: rotate(-2deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(2deg);
|
|
}
|
|
}
|
|
|
|
.tilttext {
|
|
animation: erm 10s infinite;
|
|
}
|
|
|
|
.rainbowtext {
|
|
background-image: linear-gradient(90deg,
|
|
rgba(255, 0, 0, 1) 0%,
|
|
rgba(255, 154, 0, 1) 10%,
|
|
rgba(208, 222, 33, 1) 20%,
|
|
rgba(79, 220, 74, 1) 30%,
|
|
rgba(63, 218, 216, 1) 40%,
|
|
rgba(47, 201, 226, 1) 50%,
|
|
rgba(28, 127, 238, 1) 60%,
|
|
rgba(95, 21, 242, 1) 70%,
|
|
rgba(186, 12, 248, 1) 80%,
|
|
rgba(251, 7, 217, 1) 90%,
|
|
rgba(255, 0, 0, 1) 100%);
|
|
color: transparent;
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
}
|
|
|
|
.lastupdate {
|
|
text-align: center;
|
|
font-size: 1.2ch;
|
|
color: #80d7ff;
|
|
|
|
}
|
|
|
|
.content {
|
|
padding: 20px 20px;
|
|
margin: 0 auto;
|
|
max-width: 780px;
|
|
width: 70%;
|
|
min-height: 60vh;
|
|
word-wrap: break-word;
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.center {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 50%;
|
|
height: auto;
|
|
}
|
|
|
|
.qa {
|
|
margin-top: 1vh;
|
|
margin-bottom: 1vh;
|
|
}
|
|
|
|
.THEYGLOW {
|
|
text-shadow: 0 0 10px #ffffff45, 0 0 20px #ffffff40, 0 0 30px lime, 0 0 40px #04e669,
|
|
0 0 50px #34ff1b, 0 0 60px #25fa2b, 0 0 70px #02ec55;
|
|
}
|
|
|
|
.langglow {
|
|
text-shadow: 1px 2px 11px rgb(255, 255, 255);
|
|
}
|
|
|
|
.top {
|
|
font-size: 0.7em;
|
|
margin-top: 1ch;
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.box {
|
|
position: relative;
|
|
text-align: center;
|
|
width: 1%;
|
|
margin-top: 9ch;
|
|
border: 4px solid #60976b83;
|
|
margin: auto;
|
|
}
|
|
|
|
.selfhosted {
|
|
color: rgb(190, 255, 145);
|
|
}
|
|
|
|
.notif {
|
|
color: #90ee90;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.notice {
|
|
color: #ffb060;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.warn {
|
|
color: #ff5d60;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#fade {
|
|
opacity: 1;
|
|
animation: fadeOut 7s linear;
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes slide {
|
|
0% {
|
|
transform: translateX(100vw);
|
|
/* opacity: 1; */
|
|
}
|
|
|
|
/* 50% {
|
|
opacity: 1;
|
|
} */
|
|
100% {
|
|
transform: translateX(-100%);
|
|
/* opacity: 0; */
|
|
}
|
|
}
|
|
|
|
/* https://systemspace.dimden.dev/res/css/scanlines.css
|
|
|
|
/* Scanlines */
|
|
body:before {
|
|
content: "";
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 1000;
|
|
background-image: url(/assets/bgs/overlay.png);
|
|
background-repeat: all;
|
|
background-position: 0px 0px;
|
|
animation-name: Static;
|
|
animation-duration: 2s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: steps(4);
|
|
opacity: 0.35;
|
|
/* box-shadow: inset 0px 0px 10em rgba(0, 0, 0, 0); */
|
|
}
|
|
|
|
body:after {
|
|
content: "";
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 1000;
|
|
background-image: url(/assets/bgs/overlay2.png);
|
|
background-repeat: all;
|
|
background-position: 0px 0px;
|
|
animation-name: Static;
|
|
animation-duration: 0.8s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: steps(4);
|
|
opacity: 0.35;
|
|
}
|
|
|
|
@keyframes Static {
|
|
0% {
|
|
background-position: 0px 0px;
|
|
}
|
|
|
|
100% {
|
|
background-position: 0px 4px;
|
|
}
|
|
}
|