198 lines
3.6 KiB
CSS
198 lines
3.6 KiB
CSS
:root {
|
|
--primary: #ffb7c5;
|
|
--secondary: #ff003f;
|
|
--background: #534b4f;
|
|
--background-alt: #645452;
|
|
--foreground: #faf0e6;
|
|
@media (prefers-color-scheme: light) {
|
|
--primary: #ff91a4;
|
|
--secondary: #dc143c;
|
|
--foreground: #534b4f;
|
|
--background: #faf0e6;
|
|
--background-alt: #f0ead6;
|
|
}
|
|
}
|
|
|
|
@font-face {
|
|
font-family: DepartureMono;
|
|
src: url(./DepartureMono-Regular.woff2);
|
|
}
|
|
|
|
@keyframes banner {
|
|
0%,
|
|
100% {
|
|
background-color: var(--primary);
|
|
color: var(--background);
|
|
border-top-right-radius: 50px;
|
|
border-bottom-left-radius: 50px;
|
|
border-top-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
25% {
|
|
color: var(--secondary);
|
|
}
|
|
50% {
|
|
color: var(--background);
|
|
border-top-left-radius: 50px;
|
|
border-bottom-right-radius: 50px;
|
|
border-top-right-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
75% {
|
|
color: var(--secondary);
|
|
}
|
|
}
|
|
|
|
html {
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
::selection,
|
|
::-moz-selection {
|
|
background-color: var(--primary);
|
|
color: var(--background);
|
|
}
|
|
|
|
font-family: DepartureMono;
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
h1 {
|
|
color: var(--primary);
|
|
font-size: 32px;
|
|
}
|
|
p,
|
|
a {
|
|
font-size: 20px;
|
|
}
|
|
a {
|
|
color: var(--primary);
|
|
text-decoration: underline;
|
|
text-decoration-style: wavy;
|
|
&::selection,
|
|
&::-moz-selection {
|
|
background-color: var(--secondary);
|
|
color: var(--primary);
|
|
}
|
|
&:hover,
|
|
&:active {
|
|
background-color: var(--primary);
|
|
color: var(--background);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
body {
|
|
main {
|
|
margin: 5% 15%;
|
|
@media (max-width: 799px) {
|
|
margin: 5% 5%;
|
|
}
|
|
#banner {
|
|
user-select: none;
|
|
-moz-user-select: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
img {
|
|
max-height: 80px;
|
|
max-width: 80px;
|
|
}
|
|
h1 {
|
|
font-size: 48px;
|
|
padding: 10px;
|
|
animation: banner 10s infinite;
|
|
}
|
|
}
|
|
#description {
|
|
* {
|
|
font-size: 20px;
|
|
}
|
|
padding: 10px;
|
|
margin: 20px 0;
|
|
#ideology {
|
|
padding: 10px;
|
|
margin: 10px;
|
|
ul {
|
|
list-style-position: inside;
|
|
}
|
|
}
|
|
}
|
|
|
|
#subdomains {
|
|
padding: 5px;
|
|
h1,
|
|
p {
|
|
padding: 5px;
|
|
}
|
|
#sd-grid {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
justify-content: stretch;
|
|
flex-wrap: wrap;
|
|
.sd-grid-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background-color: var(--background-alt);
|
|
padding: 5px;
|
|
margin: 5px;
|
|
border-radius: 5px;
|
|
border: 1px solid var(--primary);
|
|
width: 300px;
|
|
.sd-grid-card-title {
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 25px;
|
|
color: var(--primary);
|
|
width: 100%;
|
|
* {
|
|
padding: 10px;
|
|
}
|
|
}
|
|
.sd-grid-card-description {
|
|
padding: 5px;
|
|
text-align: left;
|
|
}
|
|
.sd-grid-card-action {
|
|
padding: 5px;
|
|
width: 90%;
|
|
border: 4px dotted var(--secondary);
|
|
border-radius: 4px;
|
|
font-size: 22px;
|
|
font-weight: bolder;
|
|
text-decoration: none;
|
|
color: var(--secondary);
|
|
&:hover,
|
|
&:active {
|
|
background-color: var(--secondary);
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#credits {
|
|
h1 {
|
|
padding: 5px;
|
|
}
|
|
p,
|
|
li,
|
|
a {
|
|
font-size: 18px;
|
|
}
|
|
ul {
|
|
margin-left: 10px;
|
|
list-style-position: inside;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|