diff --git a/sass/_comments.scss b/sass/_comments.scss index 5d80932..b066f75 100644 --- a/sass/_comments.scss +++ b/sass/_comments.scss @@ -155,17 +155,13 @@ section#comments { svg { vertical-align: -0.125em; - transition: var(--transition-long); + transition: var(--transition-longer); margin-inline-end: 0.25rem; } &:hover { box-shadow: var(--edge-highlight); text-decoration: none; - - svg { - rotate: 360deg; - } } &:active { @@ -174,18 +170,26 @@ section#comments { } .boosts { - color: var(--purple-fg); + color: var(--boosts-fg); &:hover { - background-color: var(--purple-bg); + background-color: var(--boosts-bg); + + svg { + rotate: 180deg; + } } } .faves { - color: var(--orange-fg); + color: var(--faves-fg); &:hover { - background-color: var(--orange-bg); + background-color: var(--faves-bg); + + svg { + rotate: 72deg; + } } } } diff --git a/sass/_crt.scss b/sass/_crt.scss index f047152..9bf3a97 100644 --- a/sass/_crt.scss +++ b/sass/_crt.scss @@ -5,7 +5,7 @@ background: radial-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.85)), var(--primary-color); pre { - animation: flicker 250ms alternate infinite; + animation: flicker 0.25s alternate infinite; margin: unset; box-shadow: unset; // Unset some
stuff @@ -52,7 +52,7 @@ top: 0; left: 0; z-index: 1; - animation: scanlines 250ms linear infinite; + animation: scanlines 0.25s linear infinite; background: repeating-linear-gradient(to top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 1px, transparent 3px, transparent 4px); width: 100%; height: calc(100% + 0.5rem); diff --git a/sass/_variables.scss b/sass/_variables.scss index cfea8ac..74a1e1f 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -8,14 +8,16 @@ --fg-muted-4: rgba(0, 0, 0, 0.5); --fg-muted-5: rgba(0, 0, 0, 0.6); --nav-bg: rgba(242, 242, 242, 0.7); - --orange-bg: rgba(255, 120, 0, 0.1); - --orange-fg: rgb(255, 120, 0); --purple-bg: rgba(145, 65, 172, 0.1); --purple-fg: rgb(145, 65, 172); --red-bg: rgba(224, 27, 36, 0.1); --red-fg: rgb(224, 27, 36); --yellow-bg: rgba(156, 110, 3, 0.1); --yellow-fg: rgb(156, 110, 3); + --boosts-bg: rgba(145, 65, 172, 0.1); + --boosts-fg: rgb(145, 65, 172); + --faves-bg: rgba(229, 165, 10, 0.1); + --faves-fg: rgb(229, 165, 10); // VARIABLES --active: 0.9; @@ -31,10 +33,10 @@ --rounded-corner: 12px; --shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px 2px rgba(0, 0, 0, 0.14), 0 4px 12px 4px rgba(0, 0, 0, 0.06); --shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07), 0 2px 6px 2px rgba(0, 0, 0, 0.03); - --transition-bezier: 350ms cubic-bezier(0.17, 0.89, 0.32, 1.28); - --transition-long: 800ms; - --transition-longer: 400ms; - --transition: 200ms; + --transition-bezier: 0.35s cubic-bezier(0.17, 0.89, 0.32, 1.28); + --transition-long: 0.8s; + --transition-longer: 0.4s; + --transition: 0.2s; @media (prefers-reduced-motion) { // VARIABLES @@ -54,14 +56,16 @@ --fg-muted-4: rgba(255, 255, 255, 0.5); --fg-muted-5: rgba(255, 255, 255, 0.6); --nav-bg: rgba(25, 25, 25, 0.7); - --orange-bg: rgba(255, 190, 111, 0.1); - --orange-fg: rgb(255, 190, 111); --purple-bg: rgba(220, 138, 221, 0.1); --purple-fg: rgb(220, 138, 221); --red-bg: rgba(226, 97, 81, 0.1); --red-fg: rgb(246, 97, 81); --yellow-bg: rgba(248, 228, 92, 0.1); --yellow-fg: rgb(248, 228, 92); + --boosts-bg: rgba(220, 138, 221, 0.1); + --boosts-fg: rgb(220, 138, 221); + --faves-bg: rgba(249, 240, 107, 0.1); + --faves-fg: rgb(249, 240, 107); color-scheme: dark; }