196 lines
3.0 KiB
CSS
196 lines
3.0 KiB
CSS
@font-face {
|
|
font-family: "BlockZone";
|
|
src: url("../fonts/BlockZone.ttf") format("truetype");
|
|
}
|
|
|
|
/* Root */
|
|
:root
|
|
{
|
|
/* Dark mode */
|
|
--dark-bg: #191919;
|
|
--dark-text: #BBBBBB;
|
|
--dark-link: #191919;
|
|
--dark-link-bg: #f08080;
|
|
--dark-title: #f08080;
|
|
|
|
/* Light mode */
|
|
--light-bg: #ffdab9;
|
|
--light-text: #191919;
|
|
--light-link: #191919;
|
|
--light-link-bg: #DE6E7C;
|
|
--light-title: #DE6E7C;
|
|
|
|
/* Default mode */
|
|
--bg-color: var(--dark-bg);
|
|
--text-color: var(--dark-text);
|
|
--link-color: var(--dark-link);
|
|
--link-bg-color: var(--dark-link-bg);
|
|
--title-color: var(--dark-title);
|
|
}
|
|
|
|
|
|
/* Page default disposition */
|
|
body
|
|
{
|
|
background-color: var(--bg-color);
|
|
color: var(--text-color);
|
|
border: 1px solid var(--link-bg-color);
|
|
|
|
font-size: calc(10px + 0.390625vw);
|
|
font-family: "BlockZone";
|
|
|
|
width: 90vw;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Navbar, Contact, Error */
|
|
#error {
|
|
text-align: center;
|
|
}
|
|
|
|
#contact, #error
|
|
{
|
|
margin-top: 2vh;
|
|
}
|
|
|
|
nav ul, #contact ul
|
|
{
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
nav a, #contact a, #error a
|
|
{
|
|
padding: 0.1rem 1rem;
|
|
margin: 0rem 0.3rem;
|
|
|
|
text-align: center;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
|
|
color: var(--link-color);
|
|
background-color: var(--link-bg-color);
|
|
}
|
|
|
|
nav a:hover, #contact a:hover, #error a:hover
|
|
{
|
|
color: var(--link-bg-color);
|
|
background-color: var(--link-color);
|
|
border: 1px solid var(--link-bg-color);
|
|
}
|
|
|
|
/* pre */
|
|
pre
|
|
{
|
|
color: var(--link-bg-color);
|
|
}
|
|
|
|
pre:hover
|
|
{
|
|
animation: fadePreColor 4s infinite alternate;
|
|
}
|
|
|
|
@keyframes fadePreColor {
|
|
0% {color: var(--lightred);}
|
|
25% {color: #ff5a5f;}
|
|
50% {color: #c81d25;}
|
|
100% {color: #370617;}
|
|
}
|
|
|
|
/* top */
|
|
.top
|
|
{
|
|
background-color: var(--link-bg-color);
|
|
color: var(--link-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.top:after {
|
|
content: "HTTPS://ARKA.ROCKS"
|
|
}
|
|
|
|
/* main */
|
|
main
|
|
{
|
|
margin: 2vw;
|
|
text-align: left;
|
|
}
|
|
|
|
main a
|
|
{
|
|
color: var(--link-bg-color);
|
|
}
|
|
|
|
/* titles */
|
|
h1, h2, h3, h4 {
|
|
color: var(--title-color);
|
|
}
|
|
|
|
h1 {
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
|
|
text-align: center;
|
|
border: 1px solid var(--title-color);
|
|
}
|
|
|
|
main div.h1-content {
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
#contact ul
|
|
{
|
|
margin-bottom: 2vh;
|
|
}
|
|
|
|
@media screen and (max-width: 700px)
|
|
{
|
|
body
|
|
{
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 600px)
|
|
{
|
|
nav ul, #contact ul
|
|
{
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
}
|
|
|
|
/* Night mode */
|
|
@media (prefers-color-scheme: dark)
|
|
{
|
|
:root
|
|
{
|
|
--bg-color: var(--dark-bg);
|
|
--text-color: var(--dark-text);
|
|
--link-color: var(--dark-link);
|
|
--link-bg-color: var(--dark-link-bg);
|
|
--title-color: var(--dark-title);
|
|
}
|
|
}
|
|
|
|
/* Day mode */
|
|
@media (prefers-color-scheme: light)
|
|
{
|
|
:root
|
|
{
|
|
--bg-color: var(--light-bg);
|
|
--text-color: var(--light-text);
|
|
--link-color: var(--light-link);
|
|
--link-bg-color: var(--light-link-bg);
|
|
--title-color: var(--light-title);
|
|
}
|
|
}
|