diff --git a/blog.css b/blog.css index bc39c7f..334cb1d 100644 --- a/blog.css +++ b/blog.css @@ -1,5 +1,5 @@ a[href="./rss.xml"]:hover { - color: var(--red) !important; + color: var(--ayu-error) !important; } /* article cards styling */ @@ -16,7 +16,7 @@ a[href="./rss.xml"]:hover { } h3 a { - color: var(--text); + color: var(--ayu-e-fg); text-decoration: unset; } @@ -45,8 +45,8 @@ a[href="./rss.xml"]:hover { } .wip { - background-color: color-mix(in srgb, var(--yellow) 20%, transparent); - color: var(--yellow); + background-color: color-mix(in srgb, var(--ayu-s-special) 20%, transparent); + color: var(--ayu-s-special); padding: .2rem; border-radius: 5px; } diff --git a/blog/index.html b/blog/index.html index 8b2890e..076f181 100644 --- a/blog/index.html +++ b/blog/index.html @@ -25,9 +25,9 @@
- synth dot download! + synth download!
- s
d! + s
d!
-
- +
+ +

blog

@@ -89,26 +115,31 @@

read it!

- -
+ diff --git a/colors.css b/colors.css index 69e8aa6..79f63de 100644 --- a/colors.css +++ b/colors.css @@ -1,65 +1,99 @@ -/* i use catppuccin color schemes because i LOVE catppuccin */ +/* i use ayu since i feel like it fits the theme better +https://raw.githubusercontent.com/ayu-theme/ayu-colors +for a quick ref/cheatsheet try https://raw.githubusercontent.com/ayu-theme/ayu-colors/refs/heads/master/colors.svg +(only works in chromium for some reason) + +and also: + +--ayu-s-tag for blue +--ayu-v-added for green +--ayu-s-constant for purple +--ayu-s-keyword for orange +--ayu-s-special for yellow +--ayu-s-markup OR --ayu-error for red + +--ayu-e-bg AND --ayu-ui-fg used for "regular" viewing colors, otherwise use +--ayu-ui-fg AND --ayu-ui-bg for more "unimportant" sections +--ayu-uip-bg can be used as a "subbackground" color of sorts +--ayu-accent for the "accent" yellow, used for the "branding" +*/ @media (prefers-color-scheme: light) { - /* catppuccin latte */ + /* ayu light */ :root { - --rosewater: #dc8a78; - --flamingo: #dd7878; - --pink: #ea76cb; - --mauve: #8839ef; - --red: #d20f39; - --maroon: #e64553; - --peach: #fe640b; - --yellow: #df8e1d; - --green: #40a02b; - --teal: #179299; - --sky: #04a5e5; - --sapphire: #209fb5; - --blue: #1e66f5; - --lavender: #7287fd; - --text: #4c4f69; - --subtext1: #5c5f77; - --subtext0: #6c6f85; - --overlay2: #7c7f93; - --overlay1: #8c8fa1; - --overlay0: #9ca0b0; - --surface2: #acb0be; - --surface1: #bcc0cc; - --surface0: #ccd0da; - --base: #eff1f5; - --mantle: #e6e9ef; - --crust: #dce0e8; + --ayu-s-tag: #55B4D4; + --ayu-s-func: #F2AE49; + --ayu-s-entity: #399EE6; + --ayu-s-string: #86B300; + --ayu-s-regexp: #4CBF99; + --ayu-s-markup: #F07171; + --ayu-s-keyword: #FA8D3E; + --ayu-s-special: #E6BA7E; + --ayu-s-comment: #787B8099; + --ayu-s-constant: #A37ACC; + --ayu-s-operator: #ED9366; + --ayu-v-added: #6CBF43; + --ayu-v-modified: #478ACC; + --ayu-v-removed: #FF7383; + --ayu-e-fg: #5C6166; + --ayu-e-bg: #FCFCFC; + --ayu-e-line: #8A91991A; + --ayu-es-active: #035BD626; + --ayu-es-inactive: #035BD612; + --ayu-efm-active: #9F40FF2B; + --ayu-efm-inactive: #9F40FFCC; + --ayu-eg-active: #8A9199CC; + --ayu-eg-normal: #8A919966; + --ayu-eig-active: #8A919959; + --ayu-eig-normal: #8A91992E; + --ayu-ui-fg: #8A9199; + --ayu-ui-bg: #F8F9FA; + --ayu-ui-line: #6B7D8F1F; + --ayu-uis-active: #56728F1F; + --ayu-uis-normal: #6B7D8F1F; + --ayu-uip-bg: #F3F4F5; + --ayu-uip-shadow: #00000026; + --ayu-accent: #FFAA33; + --ayu-error: #E65050; } } @media (prefers-color-scheme: dark) { - /* catppuccin mocha */ + /* ayu dark */ :root { - --rosewater: #f5e0dc; - --flamingo: #f2cdcd; - --pink: #f5c2e7; - --mauve: #cba6f7; - --red: #f38ba8; - --maroon: #eba0ac; - --peach: #fab387; - --yellow: #f9e2af; - --green: #a6e3a1; - --teal: #94e2d5; - --sky: #89dceb; - --sapphire: #74c7ec; - --blue: #89b4fa; - --lavender: #b4befe; - --text: #cdd6f4; - --subtext1: #bac2de; - --subtext0: #a6adc8; - --overlay2: #9399b2; - --overlay1: #7f849c; - --overlay0: #6c7086; - --surface2: #585b70; - --surface1: #45475a; - --surface0: #313244; - --base: #1e1e2e; - --mantle: #181825; - --crust: #11111b; + --ayu-s-tag: #39BAE6; + --ayu-s-func: #FFB454; + --ayu-s-entity: #59C2FF; + --ayu-s-string: #AAD94C; + --ayu-s-regexp: #95E6CB; + --ayu-s-markup: #F07178; + --ayu-s-keyword: #FF8F40; + --ayu-s-special: #E6B673; + --ayu-s-comment: #ACB6BF8C; + --ayu-s-constant: #D2A6FF; + --ayu-s-operator: #F29668; + --ayu-v-added: #7FD962; + --ayu-v-modified: #73B8FF; + --ayu-v-removed: #F26D78; + --ayu-e-fg: #BFBDB6; + --ayu-e-bg: #0D1017; + --ayu-e-line: #131721; + --ayu-es-active: #409FFF4D; + --ayu-es-inactive: #409FFF21; + --ayu-efm-active: #6C5980; + --ayu-efm-inactive: #6C598066; + --ayu-eg-active: #6C7380E6; + --ayu-eg-normal: #6C738099; + --ayu-eig-active: #6C738080; + --ayu-eig-normal: #6C738033; + --ayu-ui-fg: #565B66; + --ayu-ui-bg: #0B0E14; + --ayu-ui-line: #11151C; + --ayu-uis-active: #47526640; + --ayu-uis-normal: #47526633; + --ayu-uip-bg: #0F131A; + --ayu-uip-shadow: #00000080; + --ayu-accent: #E6B450; + --ayu-error: #D95757; } } \ No newline at end of file diff --git a/home.css b/home.css index 434e85a..243b169 100644 --- a/home.css +++ b/home.css @@ -36,10 +36,10 @@ } } div:first-child { - background-color: color-mix(in srgb, var(--flamingo) 20%, transparent); + background-color: color-mix(in srgb, var(--ayu-s-special) 20%, transparent); } div:last-child { - background-color: color-mix(in srgb, var(--lavender) 20%, transparent); + background-color: color-mix(in srgb, var(--ayu-s-constant) 20%, transparent); margin-left: 1.5em; } } diff --git a/index.html b/index.html index ac5c602..16554d8 100644 --- a/index.html +++ b/index.html @@ -24,9 +24,9 @@
- synth dot download! + synth download!
- s
d! + s
d!
-
- - - +
+ +

hey! welcome to

this is a website managed by sneexy with some things hosted here and there for friends.

- -
+ -
- +
+ +
- - if any are broken and/or missing, poke me. + if any are broken and/or missing, poke me.

friends!

-
- authenyo +
Autumn Town Café av70 benjae @@ -131,7 +178,7 @@ Volpeon Won't Work!/ShittyKopper winter -23Sonics + 23Sonics

misc.

@@ -165,33 +212,38 @@ Doin Your Mom! Hey all, Scott here!
-

me! (click to copy html)

+

me! (click to copy html)

- -
+ diff --git a/me/dni/index.html b/me/dni/index.html index bcd02ff..cc0012a 100644 --- a/me/dni/index.html +++ b/me/dni/index.html @@ -23,9 +23,9 @@
- synth dot download! + synth download!
- s
d! + s
d!
-
- +
+ +
-

do not interact

my own dni list. also includes specific bits for other platforms such as the fediverse.

@@ -90,10 +113,10 @@

instances that i look out for:

  • - mastodon.social, mastodon.online, mas.to, and most other large "general" mastodon instances are ignored + mastodon.social, mastodon.online, mas.to, and most other large "general" mastodon instances are ignored
  • - hachyderm.io, fosstodon.org, floss.social and most "foss supporting" instances are discouraged + hachyderm.io, fosstodon.org, floss.social and most "foss supporting" instances are discouraged
  • transfem.social and woem.men go though heavy vibe checking @@ -102,26 +125,31 @@

    feel free to send a follow request if you think you pass all of the above or aren't on an instance i dislike a bit too much!

    if you'd like to ask for reasons with the list above, feel free to send a DM.

- -
+ diff --git a/me/index.html b/me/index.html index e2ff205..cdc2be7 100644 --- a/me/index.html +++ b/me/index.html @@ -23,9 +23,9 @@
- synth dot download! + synth download!
- s
d! + s
d!
- - -
-
- - -
-
- - - +
+ +


@@ -105,34 +104,60 @@

pronouns

    -
  • he/him
    • +
  • he/him
  • they/them
    • -
  • anything else
    • +
  • anything else

names

    -
  • ruben
    • +
  • ruben
  • sneexy, sneex*
    • -
  • rube, rubie (ruby)
    • -
  • variations/anything else
    • +
  • rube, rubie (ruby)
    • +
  • variations/anything else
- - + -
- +
+ +
-

about me

some gay 18 year old synth computer enjoyer with adhd (and probably autism), with access to the internet and nothing to do. i like big round things.

i consider myself to be a Professional Computer Toucher™. in both soulless boxes running either corporate or free software and robot-aligned beings (you know, synths or protogens. love em!).

@@ -140,78 +165,136 @@

also a nerd into Linux stuff, mostly touched Arch and a little bit of NixOS but have found to stuck with Fedora.

enthusiast in open, decentralized and federated projects, networks or services. favorites include the fediverse and listenbrainz.

started to run my own services on this domain, synth.download, and enjoying it so far!

-

i absolutely despise corporations and capitalism with every single fiber in my living synthentic body

+

i absolutely despise corporations and capitalism with every single fiber in my living synthentic body

very much a furry connoisseur and into other robot beings like protogens and other fellow synths. being a human fucking SUCKS.

Certified™ idiot (i think this one is obvious)

usually pretty tired and sometimes full of ideas that i just can't bring myself to execute.

- -
+ - + -
- - +
+ +

"fun" facts

  • my profile pictures used to be random characters from different types of media that i would just grayscaled. ever since then, i realized that i've very much enjoyed being a synth instead.
  • i used to have an inside joke with some old friends where i loved cheese. 🧀
  • originally starting going online when i was young and my only method of getting wifi was by using my netbook in the kitchen and connecting to a nearby stores local wifi connection.
    • -
  • joined fedi around 2020 or so, originally on mas.to before closing shop and moving to types.pl which has a nice local community, before moving to miruku.cafe for a short while before finally landing at lea.pet.
    • +
  • joined fedi around 2020 or so, originally on mas.to before closing shop and moving to types.pl which has a nice local community, before moving to miruku.cafe for a short before setting home on lea.pet for a nice while, before finally landing on my own self hosted instance at booping.synth.download.
  • i prefer lowercase when possible. it just feels more natural.
  • i am still terrible at spelling. still made mistakes even when making this site. online dictionaries my beloved.
- -
+ diff --git a/me/lore/index.html b/me/lore/index.html index 4bee6c5..2a283be 100644 --- a/me/lore/index.html +++ b/me/lore/index.html @@ -9,7 +9,6 @@ - @@ -23,9 +22,9 @@
- synth dot download! + synth download!
- s
d! + s
d!
- - -
-
- - -
-
- - +
+ +
-

lore

-

like. of ruben. the synth, yknow

+

ruben

+

gooey synth. known fatass.

general "documentation" of my synth characters and extra details and such dumped into this page, so kinda like some glorified fact sheet i suppose.

sorry i don't know how to like. put an interactable model here or something nor do i feel like flooding this with renders of my synth so here's the blockbench model i make and edit which sorta resembles my idea of him.

also, do note that even though i refer to my synthsona (fursona...?) by third person ("he", "him", "his"), my synth is indeed me and should be treated as such.

- -
+ -
- - +
+ +
-

creation, some history

+

known history about ruben

(this part is more of "quickly created slop" if i'm being entirely honest with myself. this is simply entirely fictional "filler" content to allow piecing together any fictional gaps. my synth is entirely based on personal feelings and actual scenarios, so is this section inspired on)

ruben was made by [creator], who realized they would need some sort of companion that would fit their needs perfectly. his starting state of mind was trained of some of [creator]'s traits and such. their time together was quite short, as after a short while [creator] started experiencing severe depression before shortly after commiting suicide, leaving ruben to take care of everything. he did take some mental damage from this, and tried his best to take [creator]'s place, but eventually realized it was too much of a task for himself to carry, and decided to find a way to get out, making a brand new life entirely on his own.

as it currently stands, ruben tries to enjoy himself and explore new things he likes, finding some friends and exploring other things for himself. although he has also developed his own mental issues he attempts to fight. he lives with a few friends he ended up meeting up, and is under fine care.

- -
+ -
- - + +
+ +

features (general)

ruben is Fat. a chubby synth. he prefers himself that way.

@@ -139,16 +199,16 @@

his goo is reactive with his mood and can change colors along with the accents on his system and emits different scents as well. it's also edible! with different flavors depending on the mood.

  • - neutral/happy is a green-ish color, and tastes similar to a mint flavor. + neutral/happy is a green-ish color, and tastes similar to a mint flavor.
  • - angry/ticked off is red, and tastes similar to a cooked cayenne pepper, although not as spicy. he can also get somewhat warm in this mood. + angry/ticked off is red, and tastes similar to a cooked cayenne pepper, although not as spicy. he can also get somewhat warm in this mood.
  • sad/disappointed is a blue-ish grey color, having an "undescribable" flavor by others, but causes those to taste it feeling somewhat gloomy themselves.
  • - excited/shocked/embarassed is yellow, it tastes like pineapple and getting close to the goo can feel similar to getting up close to a CRT television. + excited/shocked/embarassed is yellow, it tastes like pineapple and getting close to the goo can feel similar to getting up close to a CRT television.
  • love is a purple-ish color, and tastes similarly to a mixed berry smoothie. he warms up around others in this mood as well. @@ -166,17 +226,44 @@

    if he expereinces a mix of different emotions, the reaction of each emotion can mix as a gradient passing from the top of his body to the bottom.

    the goo has an activated thin outside layer that prevents itself from dripping or allowing things to simply get sucked into it. it gets lost if he is under intense feelings/emotions or simply starts losing energy to keep it activated.

- -
+ -
- - +
+ +

personality

usually embarassed, quite asocial and only feels comfortable around friends or creatures he thinks are cool. always in a mix of "wanting to meet more creatures and make friends" but also "afraid of being around others, always assumuing others secretly hate him".

@@ -185,26 +272,31 @@

mostly larzy. sometimes may try to do something else and is well known for slacking off and doing other things that aren't important and avoiding the things that are important.

very beepy and cuddly. has a tendancy to beep and merp around, and also very needy of cuddles and snuggles.

- -
+ diff --git a/style.css b/style.css index a138fc6..5be924f 100644 --- a/style.css +++ b/style.css @@ -1,164 +1,150 @@ /* background wallpaper, global font */ body { - background: linear-gradient(125deg, - color-mix(in srgb, var(--rosewater) 30%, var(--base)), - color-mix(in srgb, var(--flamingo) 30%, var(--base)), - color-mix(in srgb, var(--pink) 30%, var(--base)), - color-mix(in srgb, var(--mauve) 30%, var(--base)), - color-mix(in srgb, var(--red) 30%, var(--base)), - color-mix(in srgb, var(--maroon) 30%, var(--base)), - color-mix(in srgb, var(--peach) 30%, var(--base)), - color-mix(in srgb, var(--yellow) 30%, var(--base)), - color-mix(in srgb, var(--green) 30%, var(--base)), - color-mix(in srgb, var(--teal) 30%, var(--base)), - color-mix(in srgb, var(--sky) 30%, var(--base)), - color-mix(in srgb, var(--sapphire) 30%, var(--base)), - color-mix(in srgb, var(--blue) 30%, var(--base)), - color-mix(in srgb, var(--lavender) 30%, var(--base))); - background-size: 1000% 1000%; - animation: bg-gradient 40s ease infinite; - -moz-animation: bg-gradient 40s ease infinite; - -webkit-animation: bg-gradient 40s ease infinite; + background: linear-gradient(var(--ayu-ui-bg), color-mix(in srgb, var(--ayu-accent) 25%, var(--ayu-uip-bg))); font-family: 'JetBrains Mono', monospace, system-ui, sans-serif; font-size: 1.125rem; margin: unset !important; /* idk why it does that */ } -/* terminal window styling */ +/* window stylign */ +.window { + summary { + display: inline-flex; + min-width: 100%; + background-color: color-mix(in srgb, var(--ayu-accent) 10%, var(--ayu-uip-bg)); + opacity: .8; + text-align: center; + vertical-align: middle; + overflow: clip; + transition: .2s opacity; -.terminal { - /* the titlebar of the terminals */ - .term-titlebar { - display: grid; - grid-template-columns: 2fr auto 2fr; - grid-template-areas: - "term-icon term-title term-buttons"; - - margin: -10px 0px -20px; - - /* terminal icon */ - .tabler-icon { - width: 25px !important; - height: 25px !important; - align-self: center !important; + .titlebar-icon { + background: color-mix(in srgb, var(--ayu-accent) 40%, transparent); + padding: .3rem .4rem .3rem .8rem; + border-right: .2rem solid var(--ayu-accent); + border-bottom-right-radius: 1rem; + color: var(--ayu-e-fg); } - - /* title text */ - p, a { - font-family: 'Lexend Deca', system-ui, sans-serif; - font-size: 16px; - color: var(--text); + a { + padding: .3rem 0rem .3rem .5rem; text-decoration: none; - - grid-column: 2; + color: var(--ayu-e-fg); } a:hover { - text-shadow: 0em 0em 0.25em var(--text); + text-decoration: underline; } - /* window buttons */ div { - display: flex; - - height: 22px; - align-self: center; margin-left: auto; + padding: .2rem .5rem .2rem 0rem; - #minimize-btn, #maximize-btn, #close-btn { - width: 22px; - height: 22px; + span { + svg { + text-align: center; + vertical-align: middle; + color: var(--ayu-e-fg); + } - background: var(--surface2); - border-radius: 50%; - - transition: .2s background; - } - - #maximize-btn, #close-btn { - margin-left: 10px; + /* maximize button (which does nothing) */ + svg:nth-child(2) { + opacity: .6; + cursor: not-allowed; + } } } - } - /* the prompt */ - .term-input { - .folder { - color: var(--sapphire) !important; - background-color: var(--crust); - border-radius: 3em; - padding: 0px 12px 0px 12px; + + /* close button */ + svg:nth-child(4) { + background: color-mix(in srgb, var(--ayu-accent) 40%, transparent); + padding: .3rem .5rem .3rem .6rem; + border-left: .2rem solid var(--ayu-accent); + border-bottom-left-radius: 1rem; + color: var(--ayu-e-fg); + + transition: background .2s; + transition: color .2s; } - .status { - color: var(--green); - font-size: 24px; - margin-left: 3px; - margin-right: -8px; - vertical-align: middle; - } - .blink { - display: none; - color: var(--text); - margin-left: 3px; - padding-bottom: 4px; - animation: blink .8s linear infinite; - -moz-animation: blink .8s linear infinite; - -webkit-animation: blink .8s linear infinite; - } - svg { - fill: var(--sapphire) !important; + + /* close button (animated on hover) */ + svg:nth-child(4):hover { + background: var(--ayu-error); + color: var(--ayu-ui-bg); + + transition: background .2s; + transition: color .2s; } } - background-color: var(--base); - color: var(--text); + section, article { + padding: .8rem; + } - border: var(--mantle) solid 3px; - border-radius: 20px; + background-color: var(--ayu-e-bg); + color: var(--ayu-e-fg); - max-width: 48em; - padding: 14px 24px; + border: var(--ayu-accent) solid .15rem; + border-radius: .6rem; + + max-width: 60em; + overflow: clip; margin-left: auto; margin-right: auto; - margin-bottom: 3.4em; + margin-bottom: 2em; - transition: .2s border-color; + transition: .2s box-shadow; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; } -.terminal:hover { - .term-titlebar { - div { - #minimize-btn { - background: var(--yellow); - transition: .2s background; - } - - #maximize-btn { - background: var(--green); - transition: .2s background; - } - - #close-btn { - background: var(--red); - transition: .2s background; - } - } +/* window styling when hovered */ +.window:hover { + summary { + opacity: 1; + transition: .2s opacity; } - .term-input { - .blink { - display: unset; - } - } - border-color: var(--green); - - transition: .2s border-color; } -.terminal > .term-titlebar > p:hover, a:hover { - text-decoration: underline; + +/* window styling when open (default state) */ +.window[open] { + summary { + opacity: 1; + border-bottom: .1rem solid var(--ayu-accent); + + transition: .2s opacity; + } + + border-radius: 2rem .6rem 2rem .6rem; +} + +.window:hover { + box-shadow: var(--ayu-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; +} + + +/* the footer window */ +footer { + max-width: 30em; + margin-left: auto; + margin-right: auto; + + details > summary > a { + padding: .3rem 0rem .3rem 1rem !important; + } + + section, article { + padding: 1rem !important; + } } /* top navbar styling, attempts to look like a window manager bar */ @@ -173,65 +159,66 @@ body { max-width: 100%; min-height: 1.8em !important; max-height: 1.8em !important; - margin-top: .5em; font-family: 'Lexend Deca', system-ui, sans-serif; align-content: center; vertical-align: middle; - color: var(--text); + background-color: color-mix(in srgb, var(--ayu-accent) 10%, transparent); + border-bottom: .2rem solid var(--ayu-accent); + color: var(--ayu-e-fg); .nav-base { padding: 0px .2em !important; - border-radius: 8px; - box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 15px; max-width: fit-content; align-content: center; } .nav-baselink { - background-color: var(--green); + background-color: var(--ayu-accent); text-decoration: unset !important; - color: var(--crust); - margin-left: .5em !important; + color: var(--ayu-e-bg); + padding: 0px .4rem !important; + border-bottom-right-radius: 1rem; svg { - color: var(--base) !important; + color: var(--ayu-e-bg) !important; } } + .nav-baselink::before { + content: ''; + background: var(--ayu-e-bg); + min-width: 14rem; + min-height: 1.8rem; + display: block; + z-index: -1; + position: absolute; + } .nav-baselink-mobile { display: none; } .nav-links { - background-color: var(--base); - color: var(--text); - padding: 0px 5px 0px; - margin-left: .5em !important; + background-color: var(--ayu-e-bg); + color: var(--ayu-e-fg); + padding: 0px .4rem !important; + border-bottom-right-radius: 1rem; } .nav-links a { - color: var(--text); + color: var(--ayu-e-fg); text-decoration: unset !important; } .nav-links a:hover { - color: var(--green); + color: var(--ayu-accent); text-decoration: underline !important; } .nav-systray { - background-color: var(--base); - color: var(--text); + background-color: var(--ayu-e-bg); + color: var(--ayu-e-fg); margin-left: auto !important; - margin-right: .5em !important; + padding: 0px .4rem !important; + border-bottom-left-radius: 1rem; i { padding: 0px 2px 0px 2px; } } - .nav-powerbutton { - background-color: var(--red) !important; - margin-left: .07rem !important; - padding-right: .4rem !important; - padding-left: .4rem !important; - svg { - color: var(--base) !important; - } - } a, p { margin: unset !important; @@ -240,91 +227,16 @@ body { opacity: .7; } svg { - color: var(--text) !important; + color: var(--ayu-e-fg) !important; } } -/* table of contents button */ - -.toc details { - display: block !important; - position: fixed; - margin: 2em 0px 0px .4em !important; - min-width: 2em; - border-radius: 8px; - z-index: 9999; - padding: unset !important; - box-shadow: unset !important; - right: .5em; - top: 1em; - - a { - display: inline-flex; - align-items: center; - color: var(--text); - padding: .6em .7em; - text-decoration: none; - } - - a:hover { - color: var(--green); - text-decoration: underline; - } - - i { - padding-right: .4em; - } - - ul { - background-color: var(--base); - box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 15px; - border-radius: 8px; - margin-top: 2.5em; - max-width: 40em; - width: max-content; - z-index: 9999; - - li { - margin-left: -.5em; - padding-bottom: unset !important; - } - - li::marker { - color: var(--text); - } - } -} - -.toc details summary { - display: block !important; - right: 0em !important; - position: absolute; - font-family: 'Lexend Deca', system-ui, sans-serif; - background-color: var(--green); - box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 15px; - text-decoration: unset !important; - color: var(--crust); - padding: .3em; - border-radius: 8px; - width: 1.2em; - - i:not(:first-child) { - margin-left: -.5em; - margin-right: -.9em; - opacity: .6; - } -} - -.toc details summary::after { - margin-left: unset; -} - /* text formatting and config stuff font-family and

is set under .terminal */ /* headings */ h1, h1 a { - color: var(--text); + color: var(--ayu-e-fg); font-size: 2rem; text-decoration: none; } @@ -332,7 +244,7 @@ h1, h1 a { /* 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(--text); + color: var(--ayu-e-fg); font-size: 2rem; text-decoration: none; } @@ -349,13 +261,13 @@ p, li, button { /* links should look good i think */ a { font-size: 1.125rem; - color: var(--green); + color: var(--ayu-accent); transition: 0.2s; } a:hover { transition: 0.2s; - text-shadow: 0em 0em 0.25em var(--green); + text-shadow: 0em 0em 0.25em var(--ayu-accent); } /* smol text */ @@ -387,7 +299,7 @@ h1 a:hover { height: 1.3rem; padding-bottom: .2rem; vertical-align: middle !important; - color: var(--text) !important; + color: var(--ayu-e-fg) !important; } /* the dot */ @@ -395,7 +307,7 @@ h1 a:hover { display: inline-flex; width: .4rem; height: .4rem; - background-color: var(--text); + background-color: var(--ayu-e-fg); border-radius: 100%; vertical-align: middle; margin-left: .2rem; @@ -454,20 +366,6 @@ audio { border-radius: 3rem; } -/* padding above first terminal */ - -body:has(div.toc) { - .terminal:nth-child(3) { - margin-top: 4.8em; - } -} - -body:not(:has(div.toc)) { - .terminal:nth-child(2) { - margin-top: 3.8em; - } -} - /* footer/credits */ footer { @@ -475,42 +373,42 @@ footer { a { display: inline-grid; font-size: 1.5rem; - color: var(--green); + color: var(--ayu-v-added); margin-bottom: .5em; vertical-align: bottom; } [href="https://fediring.net"] { - color: var(--text); - background: color-mix(in srgb, var(--flamingo) 25%, transparent); + color: var(--ayu-e-fg); + background: color-mix(in srgb, var(--ayu-s-tag) 25%, transparent); padding: 0px 10px 0px 10px; border-radius: 5px; } [href="https://keithhacks.cyou/furryring.php"] { - color: var(--text); - background: color-mix(in srgb, var(--rosewater) 25%, transparent); + color: var(--ayu-e-fg); + background: color-mix(in srgb, var(--ayu-s-constant) 25%, transparent); padding: 0px 10px 0px 10px; border-radius: 5px; } [href="https://stellophiliac.github.io/roboring"] { - color: var(--text); - background: color-mix(in srgb, var(--overlay1) 25%, transparent); + color: var(--ayu-e-fg); + background: color-mix(in srgb, var(--ayu-eg-active) 25%, transparent); padding: 0px 10px 0px 10px; border-radius: 5px; } [href*="prev"] { - background: color-mix(in srgb, var(--yellow) 25%, transparent); + background: color-mix(in srgb, var(--ayu-s-special) 25%, transparent); padding: 4px 6px; border-radius: 5px; svg { - color: var(--peach) !important; + color: var(--ayu-s-operator) !important; } } [href*="next"] { - background: color-mix(in srgb, var(--green) 25%, transparent); + background: color-mix(in srgb, var(--ayu-v-added) 25%, transparent); padding: 4px 5px; border-radius: 5px; svg { - color: var(--green) !important; + color: var(--ayu-v-added) !important; } } } @@ -660,56 +558,16 @@ footer { @media (prefers-reduced-motion) { body { - background: var(--crust) !important; + background: var(--ayu-ui-bg) !important; animation: unset !important; -moz-animation: unset !important; -webkit-animation: unset !important; } - - .terminal { - .term-titlebar { - div { - #minimize-btn, #maximize-btn, #close-btn { - transition: 0s background !important; - } - } - } - - .term-input { - .blink { - animation: unset !important; - -moz-animation: unset !important; - -webkit-animation: unset !important; - } - } - - transition: 0s border-color !important; - } - - .terminal:hover { - .term-titlebar { - div { - #minimize-btn { - background: var(--yellow); - transition: 0s background !important; - } - #maximize-btn { - background: var(--green); - transition: 0s background !important; - } - #close-btn { - background: var(--red); - transition: 0s background !important; - } - } - } - transition: 0s border-color !important; - } } /* modify widths and spacing depending on the size of the display */ -@media screen and (max-width: 59em) { +@media screen and (max-width: 1083px) { .navbar { min-height: 1.8em !important; max-height: 1.8em !important; @@ -724,25 +582,21 @@ footer { .nav-baselink-mobile { display: block !important; position: absolute; - margin: 2em 0px 0px .4em !important; max-width: 40em; width: max-content; - border-radius: 8px; z-index: 9999; padding: unset !important; - box-shadow: unset !important; - top: -2em; a { display: inline-flex; align-items: center; - color: var(--text); + color: var(--ayu-e-fg); padding: .6em .7em; text-decoration: none; } a:hover { - color: var(--green); + color: var(--ayu-accent); text-decoration: underline; } @@ -751,8 +605,7 @@ footer { } ul { - background-color: var(--base); - box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 15px; + background-color: var(--ayu-e-bg); border-radius: 8px; max-width: 10em; width: auto; @@ -769,12 +622,11 @@ footer { display: block !important; margin-top: 0px !important; font-family: 'Lexend Deca', system-ui, sans-serif; - background-color: var(--green); - box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 15px; + background-color: var(--ayu-accent); text-decoration: unset !important; - color: var(--crust); + color: var(--ayu-e-bg); padding: .3em; - border-radius: 8px; + border-bottom-right-radius: 1rem; width: 4.7em; i:not(:first-child) { @@ -788,23 +640,48 @@ footer { } } - body:has(.toc) { - .terminal:nth-child(3) { - margin-top: 5.4em !important; + .window:not(#footer) { + summary { + .titlebar-icon { + padding: .3rem .4rem .3rem .4rem; + } + + div { + span { + svg { + display: none !important; + } + } + } } - } - body:not(:has(.toc)) { - .terminal:nth-child(2) { - margin-top: 2.7em !important; + section, article { + padding: .5rem; } + + border-top: var(--ayu-accent) solid .15rem; + border-bottom: var(--ayu-accent) solid .15rem; + border-left: unset !important; + border-right: unset !important; + border-radius: unset !important; + + margin-bottom: .8em; } - .terminal { - .term-titlebar { - margin: -16px 0px -24px; - } - margin: 0px .7em .7em; - padding: 10px 16px; + /* 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(--ayu-accent) solid .15rem; + border-bottom: var(--ayu-accent) solid .15rem; + border-left: unset !important; + border-right: unset !important; + border-radius: unset !important; + + margin-bottom: .8em; + } +} \ No newline at end of file