From 41940bc5251f1e499f6baf880b24d0920fe0d3af Mon Sep 17 00:00:00 2001 From: Ruben Date: Wed, 2 Apr 2025 14:17:31 -0500 Subject: [PATCH] css and colors cleanup --- blog.css | 8 +- blog/index.html | 12 +-- colors.css | 176 ++++++++++++++++++++++---------------------- donate/index.html | 14 ++-- home.css | 8 +- index.html | 28 +++---- me/dni/index.html | 16 ++-- me/index.html | 43 +++++------ me/ruben/index.html | 24 +++--- ruben.css | 96 ++---------------------- style.css | 126 +++++++++++++++---------------- 11 files changed, 232 insertions(+), 319 deletions(-) diff --git a/blog.css b/blog.css index 334cb1d..cbb0232 100644 --- a/blog.css +++ b/blog.css @@ -1,5 +1,5 @@ a[href="./rss.xml"]:hover { - color: var(--ayu-error) !important; + color: var(--red) !important; } /* article cards styling */ @@ -16,7 +16,7 @@ a[href="./rss.xml"]:hover { } h3 a { - color: var(--ayu-e-fg); + color: var(--foreground); text-decoration: unset; } @@ -45,8 +45,8 @@ a[href="./rss.xml"]:hover { } .wip { - background-color: color-mix(in srgb, var(--ayu-s-special) 20%, transparent); - color: var(--ayu-s-special); + background-color: color-mix(in srgb, var(--yellow) 20%, transparent); + color: var(--yellow); padding: .2rem; border-radius: 5px; } diff --git a/blog/index.html b/blog/index.html index 29b3fe1..d564487 100644 --- a/blog/index.html +++ b/blog/index.html @@ -29,7 +29,7 @@
synth download!
- s
d! + s
d!
  • home @@ -97,11 +97,11 @@

    furryring

    roboring

    - - - - - + + + + +

    Synth species created by Vader-San, synth.download is not affiliated with the creator in any way.

    made with love, lack of sleep and procrastination

    diff --git a/colors.css b/colors.css index 79f63de..9c3b948 100644 --- a/colors.css +++ b/colors.css @@ -1,99 +1,97 @@ -/* 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: +custom color scheme, based off of both Ayu Light & Dark and Catppuccin Latte & Mocha. +it's basically a mix and mash of the both of them together, and slightly modified. +it doesn't have a name, call it "synth.download color scheme official real" ---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) { - /* ayu light */ - :root { - --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; - } +:root { + /* base colors */ + --background: #fafafa; + --foreground: #3d454d; + --selection: #f0eee4; + --comment: #abb0b6; + --accent: #ffaa33; + + /* original ayu colors */ + --orange: #ff9940; + --green: #86b300; + --blue: #4cbf99; + --purple: #a37acc; + --red: #f34646; + + /* extended catppuccin based colors */ + --flamingo: #ff7d7d; + --rosewater: #ffbfb3; + --pink: #ff8adb; + --mauve: #ba8aff; + --maroon: #e06c75; + --peach: #ffac6b; + --yellow: #e5c07b; + --teal: #2bbac5; + --sky: #3eacce; + --sapphire: #4db5d0; + --lavender: #a9b1ff; + + /* ui accent colors */ + --ui-orange: #fa8d3e; + --ui-green: #91b362; + --ui-blue: #6994bf; + --ui-purple: #7e57c2; + --ui-teal: #56c2c0; + --ui-lavender: #9d8cdb; + + /* misc. */ + --border: #e4e4e4; + --shadow: rgba(0, 0, 0, 0.1); + --hover: rgba(0, 0, 0, 0.05); + --active: rgba(0, 0, 0, 0.1); + --focus: #86b300; } @media (prefers-color-scheme: dark) { - /* ayu dark */ :root { - --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; + /* base colors */ + --background: #0a0e14; + --foreground: #b3b1ad; + --selection: #253340; + --comment: #5c6773; + --accent: #e6b450; + + /* original ayu colors */ + --orange: #ffb454; + --green: #aad94c; + --blue: #59c2ff; + --purple: #d2a6ff; + --red: #f07178; + + /* extended catppuccin based colors */ + --flamingo: #f2cdcd; + --rosewater: #f5e0dc; + --pink: #ffc9e3; + --mauve: #cba6f7; + --maroon: #eba0ac; + --peach: #ffcca8; + --yellow: #f9e2af; + --teal: #8ddedc; + --sky: #89dceb; + --sapphire: #74c7ec; + --lavender: #b4befe; + + /* ui accent colors */ + --ui-orange: #e6b450; + --ui-green: #aad94c; + --ui-blue: #39bae6; + --ui-purple: #a37acc; + --ui-teal: #7adbd3; + --ui-lavender: #ada0f3; + + /* misc. */ + --border: #1a1f29; + --shadow: rgba(0, 0, 0, 0.4); + --hover: rgba(255, 255, 255, 0.05); + --active: rgba(255, 255, 255, 0.1); + --focus: #ffb454; } } \ No newline at end of file diff --git a/donate/index.html b/donate/index.html index 9e3a73b..729d9ef 100644 --- a/donate/index.html +++ b/donate/index.html @@ -28,7 +28,7 @@
    synth download!
    - s
    d!     + s
    d!
    • home @@ -79,7 +79,7 @@

      hi! i'm ruben. currently just a student running synth.download in my spare time because i like doing so.

      -

      if you'd like to donate, you may choose so through either ko-fi, or directly donate to me via the widget below:

      +

      if you'd like to donate, you may choose so through either ko-fi or directly donate to me via stripe with the widget below:

      please don't feel like you need to donate. currently, i am able to pay things on my own, but donations do help.

      @@ -97,11 +97,11 @@

      furryring

      roboring

      - - - - - + + + + +

      Synth species created by Vader-San, synth.download is not affiliated with the creator in any way.

      made with love, lack of sleep and procrastination

      diff --git a/home.css b/home.css index a4bf482..22a14b9 100644 --- a/home.css +++ b/home.css @@ -36,10 +36,10 @@ } } div:first-child { - background-color: color-mix(in srgb, var(--ayu-s-special) 20%, transparent); + background-color: color-mix(in srgb, var(--yellow) 20%, transparent); } div:last-child { - background-color: color-mix(in srgb, var(--ayu-s-constant) 20%, transparent); + background-color: color-mix(in srgb, var(--sapphire) 20%, transparent); margin-left: 1.5em; } } @@ -95,13 +95,13 @@ margin-left: auto; margin-right: auto; - border: var(--ayu-accent) solid .15rem !important; + border: var(--accent) solid .15rem !important; border-radius: .6rem; transition: .2s box-shadow; } #links > section > iframe:hover { - box-shadow: var(--ayu-accent) 0px 0px 0px .3rem; + box-shadow: var(--accent) 0px 0px 0px .3rem; transition: .2s box-shadow; } diff --git a/index.html b/index.html index 92fdc36..5d68369 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@
      synth download!
      - s
      d!       + s
      d!
      • home @@ -83,12 +83,12 @@

        most services here are public facing, anything that requires registration is most likely only for friends of mine.

        we currently run...

          -
        • redlib, a simple frontend for reddit,
          • -
        • forgejo, a home for git repositories,
          • -
        • iceshrimp, a microblogging based fediverse (activitypub) software with many features,
          • -
        • sharkey, another microblogging based fediverse (activitypub) software with many features, based off of misskey,
          • -
        • ask-js, a platform for asking other users questions,
          • -
        • a dark room, a text adventure game.
          • +
        • redlib, a simple frontend for reddit,
          • +
        • forgejo, a home for git repositories,
          • +
        • iceshrimp, a microblogging based fediverse (activitypub) software with many features,
          • +
        • sharkey, another microblogging based fediverse (activitypub) software with many features, based off of misskey,
          • +
        • ask-js, a platform for asking other users questions,
          • +
        • a dark room, a text adventure game.
      @@ -110,7 +110,7 @@
      - if any are broken and/or missing, poke me. + if any are broken and/or missing, poke me.

      friends!

      23Sonics @@ -205,7 +205,7 @@ Tucows Yoshi Lore
      -

      me! (click to copy html)

      +

      me! (click to copy html)