a.stupid.cat/css/index.css

109 lines
1.8 KiB
CSS

@import url("fonts.css");
@import url(theme-switcher.css);
@import url("picker.css");
@import url(themes/mocha.css);
@import url(themes/macciato.css);
@import url(themes/frappe.css);
@import url(themes/latte.css);
html, body {
height: 100%;
overflow: hidden;
}
html {
background: linear-gradient(135deg, var(--base) 0%, var(--mantle) 60%, var(--crust) 100%);
}
body {
font-family: 'Comic Code', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
height: 100dvh;
margin: 0;
padding: 1.5rem 1rem;
background: linear-gradient(135deg, var(--base) 0%, var(--mantle) 60%, var(--crust) 100%);
color: var(--text);
}
/* Estrogen watermark blended into the background */
body::before {
content: "";
position: fixed;
inset: 0;
background: url(/assets/theme/estrogen.svg) center / cover no-repeat;
filter: invert(86%) sepia(8%) saturate(900%) hue-rotate(190deg) brightness(105%);
opacity: 0.05;
pointer-events: none;
z-index: 0;
}
.intro {
margin-top: 20vh;
color: var(--text);
text-align: center;
padding: 5vh
}
.intro-header {
font-size: 2.5rem;
font-weight: 700;
}
.HiIm {
color: var(--text);
display: inline-block;
}
.name {
color: var(--mauve);
display: inline-block;
}
.pronouns {
font-size: 1.6rem;
color: var(--overlay-1);
display: inline-block;
}
.intro-text {
padding: 1vh;
}
@media (max-width: 600px) {
.intro {
margin-top: 10vh;
color: var(--text);
text-align: center;
padding: 5vh
}
.intro-text {
margin-top: 1vh;
padding: 1vh;
}
}
.desktop-break {
display: none;
}
@media (min-width: 768px) {
.desktop-break {
display: block;
}
.intro-text {
margin-top: 1vh;
}
}