sd/site
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
site/_site/styles/base.css

1032 lines
28 KiB
CSS
Raw Normal View History

update synth.download assets, clean up css, a bit more 11ty configuration
2025-04-21 09:51:22 -05:00
/* ╭──────────────────────────────────────╮
/ │ _ _ │
/ │ ___| |_ _ _| | ___ ___ ___ ___ │
/ │ / __| __| | | | |/ _ \ / __/ __/ __| │
/ │ \__ \ |_| |_| | | __/| (__\__ \__ \ │
/ │ |___/\__|\__, |_|\___(_)___|___/___/ │
/ │ |___/ │
/ ╰──────────────────────────────────────╯
/ style.css - synth.download styling featuring these fancy ass thingies because why the hell not */
/* --------------------------------------------------------------------
=======================================================================
-------------------------------------------------------------------- */
/* ╭───────────────────────────────────────────────────────╮
/ │ _ _ _ _ _ _ │
/ │ __ _ ___ ___ ___ ___ ___(_) |__ (_) (_) |_ _ _ │
/ │ / _` |/ __/ __/ _ \/ __/ __| | '_ \| | | | __| | | | │
/ │ | (_| | (_| (_| __/\__ \__ \ | |_) | | | | |_| |_| | │
/ │ \__,_|\___\___\___||___/___/_|_.__/|_|_|_|\__|\__, | │
/ │ |___/ │
/ ╰───────────────────────────────────────────────────────╯
/ accessibility - choosable accessibility settings */
/* - font settings - */
/* jetbrains mono */
:root:has(#font-jbm:checked) {
--font-family: 'JetBrains Mono', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
.navbar .nav-base.nav-right.nav-systray span {
margin: 0px -.1rem;
}
}
/* atkinson hyperlegible next */
:root:has(#font-ahn:checked) {
--font-family: 'Atkinson Hyperlegible Next', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
}
/* inter */
:root:has(#font-inter:checked) {
--font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
}
/* (browser) sans serif */
:root:has(#font-sans-serif:checked) {
--font-family: sans-serif, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui;
}
/* (browser) serif */
:root:has(#font-serif:checked) {
--font-family: serif, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
}
/* (browser) monospace */
:root:has(#font-monospace:checked) {
--font-family: monospace, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
}
/* - misc - */
/* disable forced uncapitalization */
:root:has(#uncapitalization:checked) {
body {
text-transform: none !important;
}
}
/* disable background gradient */
:root:has(#disable-bg:checked) {
body {
background: var(--background) !important;
}
}
/* disable window animations */
:root:has(#disable-animations:checked) {
.window {
animation: unset !important;
transition: unset !important;
}
.window:hover {
transition: unset !important;
animation: unset !important;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
}
.navbar {
transition: unset !important;
}
.navbar:hover {
transition: unset !important;
animation: unset !important;
background-color: color-mix(in srgb, var(--accent) 30%, transparent) !important;
}
}
/* disable custom alt text popup */
:root:has(#disable-alttext:checked) {
.alt-popup {
display: none !important;
}
}
/* --------------------------------------------------------------------
=======================================================================
-------------------------------------------------------------------- */
/* ╭─────────────────────────────────╮
/ │ _ _ _ │
/ │ ___| |_ _ _| (_)_ __ __ _ │
/ │ / __| __| | | | | | '_ \ / _` | │
/ │ \__ \ |_| |_| | | | | | | (_| | │
/ │ |___/\__|\__, |_|_|_| |_|\__, | │
/ │ |___/ |___/ │
/ ╰─────────────────────────────────╯
/ styling - regular styling for regular/global html elements */
/* ----------------------------------
- background wallpaper, global font -
---------------------------------- */
body {
background: linear-gradient(var(--background), color-mix(in srgb, var(--accent) 25%, var(--background)));
min-height: calc(100vh - 4rem);
font-family: var(--font-family);
font-size: 1.125rem;
text-transform: lowercase;
margin: unset !important; /* idk why it does that */
}
/* text formatting and config stuff */
/* headings */
h1, h1 a {
color: var(--foreground);
font-size: 2rem;
text-decoration: none;
}
/* apparently having more than one h1 is against web standards
but i prefer how it looks so i just use the same styling again */
h2, h2 a {
color: var(--foreground);
font-size: 2rem;
text-decoration: none;
}
h3, h3 a {
font-size: 2rem;
}
/* text */
p, li, button {
font-size: 1.125rem;
[class^="tabler--"] {
transform: scale(1.13);
}
}
/* links should look good i think */
a {
font-size: 1.125rem;
color: var(--accent);
transition: 0.2s;
}
a:hover {
transition: 0.2s;
text-shadow: 0em 0em 0.25em var(--accent);
}
/* smol text */
small, small a {
font-size: 0.875rem;
}
/* lists need some styling */
li {
margin-left: -1em;
padding-bottom: 18px;
}
/* gay ass text */
.rainbow {
animation: 2s linear infinite rainbow;
-webkit-animation: 2s linear infinite rainbow;
-moz-animation: 2s linear infinite rainbow;
}
/* heading 1 is also clickable */
h1 a:hover {
text-decoration: underline;
}
/* the tabler icons svgs styling */
.tabler-icon, .icon .icon-tabler {
width: 1.3rem;
height: 1.3rem;
padding-bottom: .2rem;
vertical-align: middle !important;
color: var(--foreground) !important;
}
/* code (enforced monospace) */
.code {
font-family: 'JetBrains Mono', monospace, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif !important;
}
/* caption styled text */
.caption {
font-size: small;
opacity: .8;
.section {
font-size: smaller;
opacity: .9;
}
}
/* the dot */
.dot {
display: inline-flex;
width: .4rem;
height: .4rem;
background-color: var(--foreground);
border-radius: 100%;
vertical-align: middle;
margin-left: .2rem;
margin-right: .2rem;
margin-bottom: .1rem;
}
/* seperator */
.seperator::before {
border-bottom: .1rem solid var(--border);
content: '';
display: block;
height: .5rem;
margin-bottom: .5rem;
margin-top: -.7rem;
min-width: max-content;
}
/* audio */
audio {
border-radius: 3rem;
}
/* summary styling */
summary {
display: flex;
}
/* -----------------------
- styled summary styling -
----------------------- */
details.styled {
summary {
max-width: 30%;
font-size: 1.5rem;
padding: .5rem;
border-radius: .5rem;
}
}
details.styled[open] {
background-color: color-mix(in srgb, var(--background) 90%, var(--accent));
summary {
border-radius: .5rem;
}
section {
padding: .5rem;
border-radius: .5rem;
}
}
/* ---------------
- alt text popup -
--------------- */
.alt-popup {
position: fixed;
text-transform: none !important;
background-color: color-mix(in srgb, var(--background) 85%, transparent);
backdrop-filter: blur(.5rem);
color: var(--foreground);
padding: .5rem;
border: solid .01rem var(--accent);
border-radius: .5rem;
font-size: 1rem;
max-width: 30rem;
z-index: 1000;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s;
}
/* --------------------------------------------------------------------
=======================================================================
-------------------------------------------------------------------- */
/* ╭──────────────────────────────────────╮
/ │ _ │
/ │ _ __ __ ___ _| |__ __ _ _ __ │
/ │ | '_ \ / _` \ \ / / '_ \ / _` | '__| │
/ │ | | | | (_| |\ V /| |_) | (_| | | │
/ │ |_| |_|\__,_| \_/ |_.__/ \__,_|_| │
/ ╰──────────────────────────────────────╯
/ navbar - styling the navigation bar / panel that sits on the top of the page at all times */
.navbar {
display: flex;
flex-direction: row;
max-height: 1.8em !important;
max-width: 100%;
min-height: 1.8em !important;
min-width: 100%;
position: fixed;
top: 0 !important;
z-index: 10;
align-content: center;
background-color: color-mix(in srgb, var(--accent) 30%, transparent);
border-bottom: .2rem solid var(--accent);
color: var(--foreground);
vertical-align: middle;
transition: .2s background-color;
.nav-base {
padding: 0px .2em !important;
max-width: fit-content;
align-content: center;
}
.nav-left {
text-decoration: unset !important;
padding: 0px .4rem .1rem !important;
border-bottom-right-radius: 1rem;
height: 1.9rem;
}
.nav-left::before {
background: var(--background);
content: '';
display: block;
left: 5rem;
margin-left: .67rem;
min-height: 2rem;
min-width: 10rem;
position: absolute;
top: 0rem;
z-index: -1;
}
.nav-baselink {
background-color: var(--accent);
color: var(--background);
svg {
color: var(--background) !important;
}
}
.nav-baselink-mobile {
display: none;
}
.nav-links {
background-color: var(--background);
color: var(--foreground);
}
.nav-links a {
color: var(--foreground);
text-decoration: unset !important;
}
.nav-links a:hover {
color: var(--accent);
text-decoration: underline !important;
}
.nav-right {
margin-left: auto !important;
padding: 0px .4rem !important;
border-bottom-left-radius: 1rem;
height: 2rem;
}
.nav-accessibility {
background-color: var(--accent);
color: var(--background);
position: absolute;
right: 7.7rem;
span {
transform: scale(1.3) translateY(-.05rem) translateX(.2rem);
}
ul {
background-color: var(--background);
border-bottom-left-radius: 1rem;
border-bottom: var(--accent) solid .15rem;
border-left: var(--accent) solid .15rem;
max-height: 27rem;
min-height: 27rem;
min-width: 17rem;
overflow: scroll;
position: absolute;
right: -7.6rem;
top: .94rem;
width: auto;
li {
color: var(--foreground);
list-style-type: none;
margin-left: -2rem;
padding: .4rem;
span {
padding: .1rem 0px;
}
}
}
}
.nav-accessibility::before {
background: var(--accent);
content: '';
display: block;
margin-left: .67rem;
min-height: 2rem;
min-width: 10rem;
position: absolute;
top: 0rem;
z-index: -1;
}
.nav-systray {
background-color: var(--background);
color: var(--foreground);
padding: 0px .1rem;
min-width: 6.45rem;
}
a, p {
margin: unset !important;
}
small {
opacity: .7;
}
svg {
color: var(--foreground) !important;
}
}
.navbar:hover {
transition: .2s background-color;
background-color: var(--accent);
.nav-accessibility {
border-left: .2rem solid var(--background);
}
}
/* --------------------------------------------------------------------
=======================================================================
-------------------------------------------------------------------- */
/* ╭────────────────────────────────────────────╮
/ │ _ _ │
/ │ __ _(_)_ __ __| | _____ _____ │
/ │ \ \ /\ / / | '_ \ / _` |/ _ \ \ /\ / / __| │
/ │ \ V V /| | | | | (_| | (_) \ V V /\__ \ │
/ │ \_/\_/ |_|_| |_|\__,_|\___/ \_/\_/ |___/ │
/ ╰────────────────────────────────────────────╯
/ windows - related styling for the windows on pages */
.window {
summary {
display: inline-flex;
min-width: 100%;
background-color: color-mix(in srgb, var(--accent) 20%, var(--background));
opacity: .8;
text-align: center;
vertical-align: middle;
overflow: clip;
transition: .2s opacity;
div:first-child {
background: color-mix(in srgb, var(--accent) 40%, transparent);
padding: .4rem .4rem .2rem 1rem;
border-right: .2rem solid var(--accent);
border-bottom-right-radius: 1rem;
span {
background-color: var(--foreground);
}
}
a {
padding: .3rem 0rem .3rem .5rem;
text-decoration: none;
color: var(--foreground);
}
a:hover {
text-decoration: underline;
}
[class^="tabler--"] {
transform: scale(1.1);
}
div:nth-child(3) {
margin-left: auto !important;
padding: .2rem .5rem .2rem 0rem;
span {
text-align: center;
vertical-align: middle;
background-color: var(--foreground);
}
/* maximize button (which does nothing) */
span:nth-child(2) {
opacity: .6;
cursor: not-allowed;
}
}
/* close button */
div:nth-child(4) {
background: color-mix(in srgb, var(--accent) 40%, transparent);
padding: .4rem .5rem .2rem .6rem;
border-left: .2rem solid var(--accent);
border-bottom-left-radius: 1rem;
color: var(--foreground);
transition: background .2s;
transition: background-color .2s;
}
/* close button (animated on hover) */
div:nth-child(4):hover {
background: var(--red);
transition: background .2s;
span {
background-color: var(--background);
transition: background-color .2s;
}
}
}
section, article {
padding: .8rem;
}
background-color: var(--background);
color: var(--foreground);
border: var(--accent) solid .15rem;
border-radius: .6rem;
max-width: 60em;
overflow: clip;
margin-left: auto;
margin-right: auto;
margin-bottom: 2em;
transition: .2s box-shadow;
animation-fill-mode: backwards;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
/* window styling when hovered */
.window:hover {
summary {
opacity: 1;
transition: .2s opacity;
}
}
/* window styling when open (default state) */
.window[open] {
summary {
opacity: 1;
border-bottom: .1rem solid var(--accent);
transition: .2s opacity;
}
border-radius: 2rem .6rem 2rem .6rem;
}
.window:hover {
box-shadow: var(--accent) 0px 0px 0px .3rem;
transition: .2s box-shadow;
}
/* window when its the first one on the page */
.window:nth-child(2) {
margin-top: 5rem;
animation: .3s ease-out .2s 1 window-appear;
animation-fill-mode: backwards;
}
/* rest of the windows if they exist, to finish the rest of the animations */
.window:nth-child(3) {
animation: .3s ease-out .4s 1 window-appear;
animation-fill-mode: backwards;
}
.window:nth-child(4) {
animation: .3s ease-out .6s 1 window-appear;
animation-fill-mode: backwards;
}
.window:nth-child(5) {
animation: .3s ease-out .8s 1 window-appear;
animation-fill-mode: backwards;
}
.window:nth-child(6) {
animation: .3s ease-out 1s 1 window-appear;
animation-fill-mode: backwards;
}
.window:nth-child(7) {
animation: .3s ease-out 1.2s 1 window-appear;
animation-fill-mode: backwards;
}
.window:nth-child(8) {
animation: .3s ease-out 1.4s 1 window-appear;
animation-fill-mode: backwards;
}
/* --------------------------------------------------------------------
=======================================================================
-------------------------------------------------------------------- */
/* ╭────────────────────────────────╮
/ │ __ _ │
/ │ / _| ___ ___ | |_ ___ _ __ │
/ │ | |_ / _ \ / _ \| __/ _ \ '__| │
/ │ | _| (_) | (_) | || __/ | │
/ │ |_| \___/ \___/ \__\___|_| │
/ ╰────────────────────────────────╯
/ footer - related styling for the footer window on all pages */
footer {
max-width: 30em;
margin-left: auto;
margin-right: auto;
details > summary > a {
padding: .3rem 0rem .3rem 1rem !important;
}
section, article {
padding: 1rem !important;
}
.fediring {
a {
display: inline-grid;
font-size: 1.5rem;
color: var(--green);
margin-bottom: .5em;
vertical-align: bottom;
}
[href="https://fediring.net"] {
color: var(--foreground);
background: color-mix(in srgb, var(--purple) 25%, transparent);
padding: 0px 10px 0px 10px;
border-radius: 5px;
}
[href="https://keithhacks.cyou/furryring.php"] {
color: var(--foreground);
background: color-mix(in srgb, var(--sapphire) 25%, transparent);
padding: 0px 10px 0px 10px;
border-radius: 5px;
}
[href="https://stellophiliac.github.io/roboring"] {
color: var(--foreground);
background: color-mix(in srgb, var(--comment) 25%, transparent);
padding: 0px 10px 0px 10px;
border-radius: 5px;
}
[href*="prev"] {
background: color-mix(in srgb, var(--orange) 25%, transparent);
padding: 5px 6px;
border-radius: 5px;
span {
background-color: var(--orange) !important;
}
}
[href*="next"] {
background: color-mix(in srgb, var(--green) 25%, transparent);
padding: 5px 6px;
border-radius: 5px;
span {
background-color: var(--green) !important;
}
}
}
p, a {
text-align: center;
font-size: 0.938rem;
margin: .2em 0px .2em;
text-decoration: none;
}
img {
padding-top: 18px;
max-width: 30%;
display: flex;
margin-left: auto;
margin-right: auto;
transition: 1s animation;
}
img:hover {
animation: spin 5s infinite linear;
}
.inner-footer {
text-align: center;
padding-top: 14px;
padding-bottom: 14px;
a {
width: 3rem;
height: 3rem;
display: inline-block;
vertical-align: middle;
align-content: center;
border-radius: .5rem;
span {
transform: scale(1.58);
}
}
}
}
/* --------------------------------------------------------------------
=======================================================================
-------------------------------------------------------------------- */
/* ╭───────────────────────────────────────────────────────╮
/ │ _ _ _ │
/ │ __ _ _ __ (_)_ __ ___ __ _| |_(_) ___ _ __ ___ │
/ │ / _` | '_ \| | '_ ` _ \ / _` | __| |/ _ \| '_ \/ __| │
/ │ | (_| | | | | | | | | | | (_| | |_| | (_) | | | \__ \ │
/ │ \__,_|_| |_|_|_| |_| |_|\__,_|\__|_|\___/|_| |_|___/ │
/ ╰───────────────────────────────────────────────────────╯
/ animations - reusable css animations */
@keyframes window-appear {
0% { opacity: 0; transform: scale(0.5, 0.5); }
100% { opacity: 1; transform: scale(1, 1); }
}
@keyframes rainbow {
0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
}
@keyframes bg-gradient {
0% { background-position: 0% 27% }
50% { background-position: 100% 74% }
100% { background-position: 0% 27% }
}
/* --------------------------------------------------------------------
=======================================================================
-------------------------------------------------------------------- */
/* ╭────────────────────────────────────────╮
/ │ ____ _ _ │
/ │ / __ \ _ __ ___ ___ __| (_) __ _ │
/ │ / / _` | '_ ` _ \ / _ \/ _` | |/ _` | │
/ │ | | (_| | | | | | | __/ (_| | | (_| | │
/ │ \ \__,_|_| |_| |_|\___|\__,_|_|\__,_| │
/ │ \____/ │
/ ╰────────────────────────────────────────╯
/ @media / at-media - styling depending on browser configuration / settings */
/* disable certain animations if user has animations disabled on their system */
@media (prefers-reduced-motion) {
body {
background: var(--background) !important;
animation: unset !important;
-moz-animation: unset !important;
-webkit-animation: unset !important;
}
}
/* modify widths and spacing depending on the size of the display */
@media screen and (max-width: 1083px) {
.navbar {
min-height: 1.8em !important;
max-height: 1.8em !important;
flex-wrap: wrap;
.nav-base {
padding: .27em .2em !important;
}
.nav-left {
height: 1.9rem;
left: -.4rem;
}
.nav-left::before {
margin-left: -10rem !important;
}
.nav-baselink {
display: none !important;
}
.nav-baselink-mobile {
display: block !important;
position: absolute;
max-width: 40em;
width: max-content;
z-index: 9999;
padding: unset !important;
a {
display: inline-flex;
align-items: center;
color: var(--foreground);
padding: .6em .7em;
text-decoration: none;
}
a:hover {
color: var(--accent);
text-decoration: underline;
}
ul {
background-color: var(--background);
border-bottom-right-radius: 1rem;
border-right: var(--accent) solid .15rem;
border-bottom: var(--accent) solid .15rem;
max-width: 10em;
width: auto;
margin-top: unset !important;
li {
list-style-type: none;
margin-left: -2em;
padding-bottom: unset !important;
span {
padding-right: .4em;
}
}
}
}
.nav-baselink-mobile::before {
display: none;
}
.nav-baselink-mobile summary {
display: block !important;
margin-top: 0px !important;
background-color: var(--accent);
text-decoration: unset !important;
color: var(--background);
padding: .3em;
border-bottom-right-radius: 1rem;
width: 5.7em;
i:not(:first-child) {
margin-left: -.5em;
margin-right: -.9em;
opacity: .6;
}
}
.nav-links {
display: none !important;
}
.nav-right {
height: 1.4rem;
}
.nav-accessibility {
right: 7.6rem;
min-width: 1.6rem;
span {
transform: scale(1.3) translateY(-.05rem) translateX(.2rem);
}
}
.nav-systray {
padding: .27em .5em !important;
}
}
.window:not(#footer) {
summary {
div:first-child {
padding: .3rem .4rem .3rem .4rem;
}
div:nth-child(3) {
display: none !important;
}
div:nth-child(4) {
margin-left: auto !important;
}
}
animation: unset !important;
section, article {
padding: .5rem;
}
border-top: var(--accent) solid .15rem;
border-bottom: var(--accent) solid .15rem;
border-left: unset !important;
border-right: unset !important;
border-radius: unset !important;
margin-bottom: .8em;
}
/* window when its the first one on the page */
.window:nth-child(2) {
margin-top: 4rem;
}
}
@media screen and (max-width: 540px) {
details#footer.window {
border-top: var(--accent) solid .15rem;
border-bottom: var(--accent) solid .15rem;
border-left: unset !important;
border-right: unset !important;
border-radius: unset !important;
margin-bottom: .8em;
}
}
/* --------------------------------------------------------------------
=======================================================================
-------------------------------------------------------------------- */
/* --------------------------------------------------------------------
=======================================================================
-------------------------------------------------------------------- */
/* --------------------------------------------------------------------
=======================================================================
-------------------------------------------------------------------- */
/* ╭──────────────────────────────╮
/ │ _ │
/ │ | |__ ___ _ __ ___ ___ │
/ │ | '_ \ / _ \| '_ ` _ \ / _ \ │
/ │ | | | | (_) | | | | | | __/ │
/ │ |_| |_|\___/|_| |_| |_|\___| │
/ ╰──────────────────────────────╯
/ home - specific styling for the main synth.download home page (index.md) */
#site.window.home {
section {
a:nth-child(2) {
cursor: default;
}
#logo {
width: 40rem;
height: auto;
line-break: strict;
margin-bottom: 0.5rem;
text-align: center;
cursor: default;
}
h1 {
margin-top: -1rem;
margin-bottom: 1px;
}
p {
margin-top: 3px;
}
ul {
text-align: left;
li a {
text-decoration: none !important;
}
li a:hover {
text-decoration: underline !important;
}
}
text-align: center;
}
}
/* - buttons section - */
#buttons.window.home section {
text-align: center;
font-size: 0px;
img {
margin-right: 5px;
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
transition: transform 0.2s;
}
img:hover {
transform: scale(2);
}
}
@media screen and (max-width: 59em) {
#site.window.home > section {
#logo {
max-width: 100%;
}
}
}
Reference in a new issue Copy permalink