185 lines
2.8 KiB
CSS
185 lines
2.8 KiB
CSS
/*
|
|
|
|
Pixelated.sh
|
|
Copyright (c) 2024-2025 FreedTapestry21
|
|
|
|
*/
|
|
|
|
@font-face {
|
|
font-family: 'Jetbrains Mono';
|
|
src: local(''),
|
|
url('./fonts/jbmono.woff2')
|
|
}
|
|
|
|
:root {
|
|
--accent-color: #b4befe;
|
|
--accent-color-dark: #9198cd;
|
|
--text-color: #b8c0ff;
|
|
--background-color: #191724;
|
|
}
|
|
|
|
html {
|
|
font-family: 'Jetbrains Mono';
|
|
}
|
|
|
|
body {
|
|
background-color: var(--background-color);
|
|
}
|
|
|
|
p {
|
|
font-size: 18px;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
a {
|
|
font-weight: bolder;
|
|
color: var(--text-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
background-color: var(--text-color);
|
|
color: var(--background-color);
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
}
|
|
|
|
footer p {
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Custom classes */
|
|
.box {
|
|
width: min(80%, 1400px);
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.title {
|
|
font-size: 18px;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.invert {
|
|
background-color: var(--text-color);
|
|
color: var(--background-color);
|
|
}
|
|
|
|
.psst {
|
|
font-style: italic;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.tag {
|
|
font-style: italic;
|
|
font-size: 14px;
|
|
user-select: none;
|
|
}
|
|
|
|
.no-select {
|
|
user-select: none;
|
|
}
|
|
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
|
|
.rule {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.smoll {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.bold {font-weight: bold;}
|
|
|
|
.no-background a:hover {background-color: transparent;}
|
|
|
|
/* Top bar */
|
|
.menu {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
|
|
background-color: var(--accent-color);
|
|
color: var(--background-color);
|
|
|
|
margin: auto;
|
|
width: min(80%, 1400px);
|
|
}
|
|
|
|
.menu a {
|
|
color: var(--background-color);
|
|
text-decoration: none;
|
|
|
|
user-select: none;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.menu a:hover {
|
|
color: var(--accent-color);
|
|
background-color: var(--background-color);
|
|
}
|
|
|
|
.branding {text-align: left; width: 45%; padding: 10px;}
|
|
.index {text-align: right; width: 45%; padding: 10px;}
|
|
|
|
/* Mobile */
|
|
@media (max-width: 800px) {
|
|
p {font-size: 14px;}
|
|
|
|
footer p {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.title {
|
|
font-size: 16px;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.psst {
|
|
font-style: italic;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.tag {
|
|
font-style: italic;
|
|
font-size: 12px;
|
|
user-select: none;
|
|
}
|
|
|
|
.rule {
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.box {
|
|
width: 90%;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.menu {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
background-color: var(--accent-color);
|
|
color: var(--background-color);
|
|
|
|
width: 90%;
|
|
}
|
|
|
|
.menu a {
|
|
color: var(--background-color);
|
|
text-decoration: none;
|
|
|
|
user-select: none;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.branding {text-align: center; width: 100%;}
|
|
.index {text-align: center; background-color: var(--accent-color-dark); width: 100%; padding: 0px;}
|
|
}
|