sd/site
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
site/styles/base.css
Ruben a9c8eb8084
All checks were successful
/ build (push) Successful in 38s
Details
revamp the navbar
2025-05-27 00:53:32 -05:00

1389 lines
No EOL
38 KiB
CSS
Raw Blame History

/* ╭──────────────────────────────────────╮
/ │ _ _ │
/ │ ___| |_ _ _| | ___ ___ ___ ___ │
/ │ / __| __| | | | |/ _ \ / __/ __/ __| │
/ │ \__ \ |_| |_| | | __/| (__\__ \__ \ │
/ │ |___/\__|\__, |_|\___(_)___|___/___/ │
/ │ |___/ │
/ ╰──────────────────────────────────────╯
/ 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 */
:root {
--pagefind-ui-font: var(--font-family);
--pagefind-ui-primary: var(--foreground);
--pagefind-ui-text: var(--foreground);
--pagefind-ui-background: var(--background);
--pagefind-ui-border: var(--accent);
--pagefind-ui-tag: var(--background);
}
/* ----------------------------------
- background wallpaper, global font -
---------------------------------- */
html {
background: var(--background) linear-gradient(var(--background) 50%, color-mix(in srgb, var(--accent) 25%, var(--background)) 50%);
background-attachment: fixed;
}
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;
}
/* Dashed border */
hr.dashed {
border-top: .1rem dashed var(--border);
}
/* Dotted border */
hr.dotted {
border-top: .1rem dotted var(--border);
}
/* Solid border */
hr.solid {
border-top: .1rem solid var(--border);
}
/* Rounded border */
hr.rounded {
border-top: .2rem solid var(--border);
border-radius: 5px;
}
/* audio */
audio {
border-radius: 3rem;
}
/* summary styling */
summary {
display: flex;
}
/* ---------------
- 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;
padding: .4rem 0 .4rem 0;
z-index: 10;
align-content: center;
color: var(--foreground);
vertical-align: middle;
transition: .2s background-color;
.nav-base {
padding: 0px .2em !important;
max-width: fit-content;
align-content: center;
outline: .13rem solid var(--border);
border-radius: 1rem;
height: 1.9rem;
}
.nav-left {
margin-left: .6rem !important;
padding: 0px .5rem .1rem !important;
text-decoration: unset !important;
}
.nav-baselink {
background-color: var(--accent);
color: var(--background);
margin-left: .4rem !important;
outline-color: color-mix(in srgb, var(--accent) 60%, transparent);
padding: .13rem;
.synth-icon {
height: 2rem;
margin-right: 1rem;
pointer-events: none;
transform: scaleX(-1) scale(1.5) translateX(-.2rem) translateY(.1rem);
transition: all .2s ease-out;
width: 2rem;
}
}
.nav-baselink:hover {
.synth-icon {
transition: all .2s ease-out;
transform: scaleX(-1) scale(1.5) translateX(-.2rem) translateY(.2rem) rotate(10deg);
}
}
.nav-desktop {
overflow: hidden;
}
.nav-mobile-menu {
display: none;
}
.nav-links {
background-color: var(--background);
color: var(--foreground);
overflow: clip;
position: relative;
text-shadow: none;
transition: all .3s;
.text {
opacity: 0;
position: absolute;
transition: all .3s;
pointer-events: none;
white-space: nowrap;
}
[class^="tabler--"] {
transform: scale(1.1);
transition: all .3s;
}
}
.nav-links:hover {
padding-right: 9rem !important;
padding-bottom: 7rem !important;
transition: all .3s;
.text {
opacity: 1;
transform: scale(1.5) translateX(-.4rem);
transition: all .3s;
}
[class^="tabler--"] {
transform: scale(5) translateY(.9rem) translateX(.4rem) rotate(10deg);
transition: all .3s;
}
}
.nav-home:hover {
background-color: color-mix(in srgb, var(--accent) 20%, var(--background));
color: var(--foreground);
outline-color: color-mix(in srgb, var(--accent) 60%, transparent);
}
.nav-notebook:hover {
background-color: color-mix(in srgb, var(--purple) 20%, var(--background));
color: var(--foreground);
outline-color: color-mix(in srgb, var(--purple) 60%, transparent);
.text {
transform: scale(1.5) translateX(0rem);
}
}
.nav-webmaster:hover {
background-color: color-mix(in srgb, var(--green) 20%, var(--background));
color: var(--foreground);
outline-color: color-mix(in srgb, var(--green) 60%, transparent);
.text {
transform: scale(1.1) translateX(-.8rem);
}
}
.nav-donate:hover {
background-color: color-mix(in srgb, var(--pink) 20%, var(--background));
color: var(--foreground);
outline-color: color-mix(in srgb, var(--pink) 60%, transparent);
.text {
transform: scale(1.5) translateX(-.2rem);
}
}
.nav-right {
padding: 0px .5rem .1rem !important;
margin-right: .6rem !important;
}
.nav-settings {
background-color: var(--accent);
color: var(--background);
margin-left: auto !important;
outline-color: color-mix(in srgb, var(--accent) 60%, transparent);
span {
transform: scale(1.5);
padding: 0 .5rem !important;
}
ul {
background-color: var(--background);
border-radius: 1rem;
border: var(--accent) solid .15rem;
max-height: 27rem;
min-height: 27rem;
min-width: 17rem;
max-width: 17rem;
overflow: scroll;
position: absolute;
right: .4rem;
top: 2.2rem;
li {
color: var(--foreground);
list-style-type: none;
margin-left: -2rem;
padding: .4rem;
span {
padding: .1rem 0px .1rem 0px !important;
}
}
}
}
.nav-systray {
background-color: var(--background);
color: var(--foreground);
padding: 0px .1rem;
min-width: 6.45rem;
margin-right: .4rem !important;
}
a,
p {
margin: unset !important;
}
small {
opacity: .7;
}
svg {
color: var(--foreground) !important;
}
}
.navbar:hover {
transition: .2s all;
background-color: color-mix(in srgb, var(--accent) 40%, transparent);
border-bottom: solid .2rem 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: .2rem solid var(--accent);
border-bottom-right-radius: 1rem;
margin-bottom: -.2rem;
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: .2rem solid var(--accent);
border-bottom-left-radius: 1rem;
margin-bottom: -.2rem;
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;
}
}
}
main,
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;
}
main,
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
/ other sorts of "Theming Jank" also goes in here for the sake of uniforming everything */
/* 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;
}
}
/* different styling for elements in dark mode
must also be applied to the html element below - needed as to not break with users using their browser settings or manually setting the theme through the website */
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) {
.navbar {
.nav-home:hover {
background-color: var(--accent);
color: var(--background);
}
.nav-notebook:hover {
background-color: var(--purple);
color: var(--background);
}
.nav-webmaster:hover {
background-color: var(--green);
color: var(--background);
}
.nav-donate:hover {
background-color: var(--pink);
color: var(--background);
}
}
}
}
html[data-theme="dark"] {
.navbar {
.nav-home:hover {
background-color: var(--accent);
color: var(--background);
}
.nav-notebook:hover {
background-color: var(--purple);
color: var(--background);
}
.nav-webmaster:hover {
background-color: var(--green);
color: var(--background);
}
.nav-donate:hover {
background-color: var(--pink);
color: var(--background);
}
}
}
/* modify widths and spacing depending on the size of the display */
@media screen and (max-width: 1083px) {
.navbar {
.nav-desktop {
display: none !important;
}
.nav-mobile-menu {
display: inline-block;
max-width: 3rem;
min-width: 3rem;
position: relative;
input[type="checkbox"] {
left: -100vw;
position: absolute;
}
label {
border-radius: 1rem;
cursor: pointer;
display: inline-block;
left: -.5rem;
margin-right: .1rem;
max-height: 2rem;
max-width: 3rem;
min-height: 2rem;
min-width: 3rem;
overflow: hidden !important;
padding-right: 1rem;
position: relative;
.synth-icon {
transform: scaleX(-1) scale(1.5) translateX(-.5rem) translateY(.1rem);
}
}
label:hover {
.synth-icon {
transform: scaleX(-1) scale(1.5) translateX(-.5rem) translateY(.2rem) rotate(10deg);
}
}
ul {
background-color: var(--background);
border-radius: 1rem;
border: var(--accent) solid .15rem;
display: none;
height: max-content;
left: 0;
margin-top: .4rem !important;
position: absolute;
width: max-content;
li {
border-radius: 1rem;
list-style-type: none;
margin: .5rem .5rem .5rem -1.9rem;
overflow: clip;
padding: .7rem;
transition: .2s all;
a {
color: var(--foreground);
text-decoration: none;
text-shadow: unset;
}
[class^="tabler--"] {
padding-right: .3em;
transition: .2s all;
}
}
li:hover {
transition: .2s all;
[class^="tabler--"] {
transform: scale(2.5) translateX(-.1rem) translateY(.1rem) rotate(15deg);
transition: .2s all;
}
}
.nav-home:hover {
background-color: color-mix(in srgb, var(--accent) 20%, transparent);
a {
color: var(--foreground);
}
}
.nav-notebook:hover {
background-color: color-mix(in srgb, var(--purple) 20%, transparent);
a {
color: var(--foreground);
}
}
.nav-webmaster:hover {
background-color: color-mix(in srgb, var(--green) 20%, transparent);
a {
color: var(--foreground);
}
}
.nav-donate:hover {
background-color: color-mix(in srgb, var(--pink) 20%, transparent);
a {
color: var(--foreground);
}
}
}
input[type="checkbox"]:checked~ul {
display: block;
}
}
.nav-links {
display: none !important;
}
.nav-settings {
span {
padding: 0 .4rem !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;
main,
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 (prefers-color-scheme: dark) {
html:not([data-theme="light"]) {
.navbar .nav-mobile-menu ul {
.nav-home:hover a {
color: var(--accent);
}
.nav-notebook:hover a {
color: var(--purple);
}
.nav-webmaster:hover a {
color: var(--green);
}
.nav-donate:hover a {
color: var(--pink);
}
}
}
}
html[data-theme="dark"] {
.navbar .nav-mobile-menu ul {
.nav-home:hover a {
color: var(--accent);
}
.nav-notebook:hover a {
color: var(--purple);
}
.nav-webmaster:hover a {
color: var(--green);
}
.nav-donate:hover a {
color: var(--pink);
}
}
}
}
@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;
}
}
/* --------------------------------------------------------------------
=======================================================================
-------------------------------------------------------------------- */
/* ╭────────────────────────────────────────────╮
/ │ __ _ _ │
/ │ _ __ __ _ __ _ ___ / _(_)_ __ __| | │
/ │ | '_ \ / _` |/ _` |/ _ \ |_| | '_ \ / _` | │
/ │ | |_) | (_| | (_| | __/ _| | | | | (_| | │
/ │ | .__/ \__,_|\__, |\___|_| |_|_| |_|\__,_| │
/ │ |_| |___/ │
/ ╰────────────────────────────────────────────╯
/ pagefind - pagefind search widget styling */
/* #search {
padding: .2rem;
} */
/* --------------------------------------------------------------------
=======================================================================
-------------------------------------------------------------------- */
/* --------------------------------------------------------------------
=======================================================================
-------------------------------------------------------------------- */
/* --------------------------------------------------------------------
=======================================================================
-------------------------------------------------------------------- */
/* ╭──────────────────────────────╮
/ │ _ │
/ │ | |__ ___ _ __ ___ ___ │
/ │ | '_ \ / _ \| '_ ` _ \ / _ \ │
/ │ | | | | (_) | | | | | | __/ │
/ │ |_| |_|\___/|_| |_| |_|\___| │
/ ╰──────────────────────────────╯
/ home - specific styling for the main synth.download home page (index.md) */
#site.window.home {
main,
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>main,
#site.window.home>section {
#logo {
max-width: 100%;
}
}
}
/* --------------------------------------------------------------------
=======================================================================
-------------------------------------------------------------------- */
/* ╭──────────────────────────────────────────────╮
/ │ _ _ _ │
/ │ _ __ ___ | |_ ___| |__ ___ ___ | | __ │
/ │ | '_ \ / _ \| __/ _ \ '_ \ / _ \ / _ \| |/ / │
/ │ | | | | (_) | || __/ |_) | (_) | (_) | < │
/ │ |_| |_|\___/ \__\___|_.__/ \___/ \___/|_|\_\ │
/ ╰──────────────────────────────────────────────╯
/ notebook - specific styling for the notebook page where blogish things live */
details.notebook.article-category {
overflow: clip;
border-radius: .8rem .4rem .8rem .4rem;
background-color: color-mix(in srgb, var(--accent) 15%, transparent);
padding-bottom: .01rem;
/* weird bug ??? without this there is no space underneath so */
summary {
span {
padding-right: .6rem;
}
padding: .5rem;
background: linear-gradient(color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--accent) 30%, transparent));
border-bottom: unset !important;
cursor: pointer;
}
.article-card {
padding: 1rem;
margin: 1.4rem;
border-radius: 1rem;
background-color: var(--background);
h2 {
margin-top: 0rem !important;
}
.tags-holder {
margin-top: -.7rem !important;
a {
margin-top: -1rem !important;
transition: all .2s;
opacity: .9;
padding: .3rem;
border: solid .1rem var(--accent);
border-radius: .4rem;
font-size: .8rem;
}
a:hover {
opacity: 1;
text-shadow: none;
}
}
.read {
transition: all .2s;
text-decoration: none;
}
.read:hover {
transition: all .2s;
text-decoration: underline;
}
}
}
@media screen and (max-width: 59em) {
details.notebook {
.article-card {
padding: .5rem;
margin: .6rem;
}
}
}
/* ------------------------------------
- addition to above (the post pages ) -
------------------------------------ */
#information.window {
.post-info {
p {
margin: 0rem !important;
}
span {
color: var(--ui-green);
opacity: .8;
}
p:first-child,
p:last-child {
opacity: .5;
}
}
}
Reference in a new issue View git blame Copy permalink