This commit is contained in:
parent
371e7de0e9
commit
0a3a0adfd7
GPG key ID:
8ECFA045E63BC583
3 changed files with 136 additions and 285 deletions
|
|
@ -32,29 +32,55 @@
|
|||
&:has(#font-serif:checked) { /* serif */
|
||||
--font-family: serif, sans-serif, system-ui, -apple-system;
|
||||
}
|
||||
}
|
||||
|
||||
/* - misc - */
|
||||
/* appearance */
|
||||
&:has(#uncapitalization:checked) { /* disable forced uncapitalization */
|
||||
body {
|
||||
text-transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* disable forced uncapitalization */
|
||||
:root:has(#uncapitalization:checked) {
|
||||
body {
|
||||
text-transform: none !important;
|
||||
|
||||
&:has(#disable-bg:checked) { /* disable background gradient */
|
||||
body {
|
||||
background: var(--background) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:has(#disable-animations:checked) { /* disable site animations */
|
||||
body {
|
||||
animation: unset !important;
|
||||
-moz-animation: unset !important;
|
||||
-webkit-animation: unset !important;
|
||||
}
|
||||
|
||||
/* animations aren't important for anything so we can simply just disable them on every element then choose which ones not to disable */
|
||||
* {
|
||||
transition: none !important;
|
||||
animation: unset !important;
|
||||
-moz-animation: unset !important;
|
||||
-webkit-animation: unset !important;
|
||||
}
|
||||
|
||||
/* fedi icon on /me should keep its animation (temp, find a better solution later) */
|
||||
.fedi-icon {
|
||||
animation: opacity-blink 4s infinite !important;
|
||||
}
|
||||
.fedi-icon-2 {
|
||||
animation: opacity-blink-reverse 4s infinite !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:has(#disable-alttext:checked) { /* disable custom alt text popup */
|
||||
.alt-popup {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* disable background gradient */
|
||||
:root:has(#disable-bg:checked) {
|
||||
/* reduce animations on browser preference */
|
||||
@media (prefers-reduced-motion: reduce) { /* copy-pasted from disable animations option */
|
||||
body {
|
||||
background: var(--background) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* disable window animations
|
||||
copy pasted from "@media (prefers-reduced-motion: reduce)" in base.css */
|
||||
:root:has(#disable-animations:checked) {
|
||||
body {
|
||||
background: var(--background) !important;
|
||||
animation: unset !important;
|
||||
-moz-animation: unset !important;
|
||||
-webkit-animation: unset !important;
|
||||
|
|
@ -72,14 +98,8 @@
|
|||
.fedi-icon {
|
||||
animation: opacity-blink 4s infinite !important;
|
||||
}
|
||||
|
||||
.fedi-icon-2 {
|
||||
animation: opacity-blink-reverse 4s infinite !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* disable custom alt text popup */
|
||||
:root:has(#disable-alttext:checked) {
|
||||
.alt-popup {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -640,7 +640,7 @@ checkbox-button-group {
|
|||
content: '';
|
||||
display: inline-flex;
|
||||
height: 1rem;
|
||||
margin-bottom: -.1rem;
|
||||
margin-bottom: -.15rem;
|
||||
margin-left: .2rem;
|
||||
margin-right: .3rem;
|
||||
position: relative;
|
||||
|
|
@ -670,44 +670,7 @@ checkbox-button-group {
|
|||
}
|
||||
}
|
||||
|
||||
/* ╭────────────────────────────────────────╮
|
||||
/ │ ____ _ _ │
|
||||
/ │ / __ \ _ __ ___ ___ __| (_) __ _ │
|
||||
/ │ / / _` | '_ ` _ \ / _ \/ _` | |/ _` | │
|
||||
/ │ | | (_| | | | | | | __/ (_| | | (_| | │
|
||||
/ │ \ \__,_|_| |_| |_|\___|\__,_|_|\__,_| │
|
||||
/ │ \____/ │
|
||||
/ ╰────────────────────────────────────────╯
|
||||
/ @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: reduce) {
|
||||
body {
|
||||
background: var(--background) !important;
|
||||
animation: unset !important;
|
||||
-moz-animation: unset !important;
|
||||
-webkit-animation: unset !important;
|
||||
}
|
||||
|
||||
/* animations aren't important for anything so we can simply just disable them on every element then choose which ones not to disable */
|
||||
* {
|
||||
transition: none !important;
|
||||
animation: unset !important;
|
||||
-moz-animation: unset !important;
|
||||
-webkit-animation: unset !important;
|
||||
}
|
||||
|
||||
/* fedi icon on /me should keep its animation (temp, find a better solution later) */
|
||||
.fedi-icon {
|
||||
animation: opacity-blink 4s infinite !important;
|
||||
}
|
||||
|
||||
.fedi-icon-2 {
|
||||
animation: opacity-blink-reverse 4s infinite !important;
|
||||
}
|
||||
}
|
||||
/* atmedia*/
|
||||
|
||||
@media screen and (max-width: 1083px) {
|
||||
details.styled {
|
||||
|
|
|
|||
|
|
@ -70,6 +70,76 @@
|
|||
}
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
align-items: center;
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
overflow: clip;
|
||||
padding: 0 .4rem !important;
|
||||
text-shadow: none;
|
||||
transition: all .3s;
|
||||
|
||||
span {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
transition: all .3s;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
icon-tabler {
|
||||
transition: all .3s;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
&:hover, &:focus-visible {
|
||||
color: light-dark(var(--foreground), var(--background));
|
||||
padding-bottom: 7rem !important;
|
||||
padding-right: 9rem !important;
|
||||
transition: .3s;
|
||||
|
||||
span {
|
||||
opacity: 1;
|
||||
transform: scale(1.5) translateX(.7rem) translateY(.1rem);
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
icon-tabler {
|
||||
transform: scale(5) translateY(.85rem) translateX(.5rem) rotate(10deg);
|
||||
transition: .3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-home {
|
||||
&:hover, &:focus-visible {
|
||||
background-color: light-dark(color-mix(in srgb, var(--accent) 25%, var(--background)), var(--accent));
|
||||
outline-color: color-mix(in srgb, var(--accent) 60%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-services {
|
||||
&:hover, &:focus-visible {
|
||||
background-color: light-dark(color-mix(in srgb, var(--blue) 25%, var(--background)), var(--blue));
|
||||
outline-color: color-mix(in srgb, var(--blue) 60%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-webmaster {
|
||||
&:hover, &:focus-visible {
|
||||
background-color: light-dark(color-mix(in srgb, var(--green) 25%, var(--background)), var(--green));
|
||||
outline-color: color-mix(in srgb, var(--green) 60%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-donate {
|
||||
&:hover, &:focus-visible {
|
||||
background-color: light-dark(color-mix(in srgb, var(--purple) 25%, var(--background)), var(--purple));
|
||||
outline-color: color-mix(in srgb, var(--purple) 60%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-mobile-menu {
|
||||
display: none;
|
||||
position: relative;
|
||||
|
|
@ -114,63 +184,44 @@
|
|||
text-shadow: unset;
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding-right: .3em;
|
||||
transition: .2s all;
|
||||
icon-tabler {
|
||||
transition: .2s;
|
||||
}
|
||||
}
|
||||
|
||||
li:hover {
|
||||
transition: .2s all;
|
||||
transition: .2s;
|
||||
|
||||
.icon {
|
||||
icon-tabler {
|
||||
transform: scale(2.5) translateX(-.1rem) translateY(.1rem) rotate(15deg);
|
||||
transition: .2s all;
|
||||
}
|
||||
|
||||
a {
|
||||
color: light-dark(var(--foreground), var(--background));
|
||||
}
|
||||
}
|
||||
|
||||
.nav-home:hover,
|
||||
.nav-home:focus-visible {
|
||||
background-color: color-mix(in srgb, var(--accent) 20%, transparent);
|
||||
|
||||
a {
|
||||
color: var(--foreground);
|
||||
.nav-home {
|
||||
&:hover, &:focus-visible {
|
||||
background-color: light-dark(color-mix(in srgb, var(--accent) 25%, var(--background)), var(--accent));
|
||||
}
|
||||
}
|
||||
|
||||
.nav-notebook:hover,
|
||||
.nav-home:focus-visible {
|
||||
background-color: color-mix(in srgb, var(--purple) 20%, transparent);
|
||||
|
||||
a {
|
||||
color: var(--foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-services:hover,
|
||||
.nav-services:focus-visible {
|
||||
background-color: color-mix(in srgb, var(--blue) 20%, transparent);
|
||||
|
||||
a {
|
||||
color: var(--foreground);
|
||||
.nav-services {
|
||||
&:hover, &:focus-visible {
|
||||
background-color: light-dark(color-mix(in srgb, var(--blue) 25%, var(--background)), var(--blue));
|
||||
}
|
||||
}
|
||||
|
||||
.nav-webmaster:hover,
|
||||
.nav-home:focus-visible {
|
||||
background-color: color-mix(in srgb, var(--green) 20%, transparent);
|
||||
|
||||
a {
|
||||
color: var(--foreground);
|
||||
.nav-webmaster {
|
||||
&:hover, &:focus-visible {
|
||||
background-color: light-dark(color-mix(in srgb, var(--green) 25%, var(--background)), var(--green));
|
||||
}
|
||||
}
|
||||
|
||||
.nav-donate:hover,
|
||||
.nav-home:focus-visible {
|
||||
background-color: color-mix(in srgb, var(--pink) 20%, transparent);
|
||||
|
||||
a {
|
||||
color: var(--foreground);
|
||||
.nav-donate {
|
||||
&:hover, &:focus-visible {
|
||||
background-color: light-dark(color-mix(in srgb, var(--purple) 25%, var(--background)), var(--purple));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -184,93 +235,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
align-items: center;
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
overflow: clip;
|
||||
padding: 0 .4rem !important;
|
||||
text-shadow: none;
|
||||
transition: all .3s;
|
||||
|
||||
span {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
transition: all .3s;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
icon-tabler {
|
||||
transition: all .3s;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
&:hover, &:focus-visible {
|
||||
padding-right: 9rem !important;
|
||||
padding-bottom: 7rem !important;
|
||||
transition: .3s;
|
||||
|
||||
span {
|
||||
opacity: 1;
|
||||
transform: scale(1.5) translateX(.7rem) translateY(.1rem);
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
icon-tabler {
|
||||
transform: scale(5) translateY(.85rem) translateX(.5rem) rotate(10deg);
|
||||
transition: .3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-home:hover, .nav-home:focus-visible {
|
||||
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, .nav-notebook:focus-visible {
|
||||
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-services:hover, .nav-services:focus-visible {
|
||||
background-color: color-mix(in srgb, var(--blue) 20%, var(--background));
|
||||
color: var(--foreground);
|
||||
outline-color: color-mix(in srgb, var(--blue) 60%, transparent);
|
||||
|
||||
.text {
|
||||
transform: scale(1.5) translateX(0rem);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-webmaster:hover, .nav-webmaster:focus-visible {
|
||||
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.5) translateX(-.2rem);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-donate:hover, .nav-donate:focus-visible {
|
||||
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-settings {
|
||||
input[type="checkbox"]#nav-settings-menu {
|
||||
left: -100vw;
|
||||
|
|
@ -336,60 +300,6 @@
|
|||
border-bottom: solid .2rem var(--accent);
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
html:not([data-theme="light"]) {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.navbar {
|
||||
.nav-home:hover, .nav-home:focus-visible {
|
||||
background-color: var(--accent);
|
||||
color: var(--background);
|
||||
}
|
||||
.nav-notebook:hover, .nav-notebook:focus-visible {
|
||||
background-color: var(--purple);
|
||||
color: var(--background);
|
||||
}
|
||||
.nav-services:hover, .nav-services:focus-visible {
|
||||
background-color: var(--blue);
|
||||
color: var(--background);
|
||||
}
|
||||
.nav-webmaster:hover, .nav-webmaster:focus-visible {
|
||||
background-color: var(--green);
|
||||
color: var(--background);
|
||||
}
|
||||
.nav-donate:hover,.nav-donate:focus-visible {
|
||||
background-color: var(--pink);
|
||||
color: var(--background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
.navbar {
|
||||
.nav-home:hover, .nav-home:focus-visible {
|
||||
background-color: var(--accent);
|
||||
color: var(--background);
|
||||
}
|
||||
.nav-notebook:hover, .nav-notebook:focus-visible {
|
||||
background-color: var(--purple);
|
||||
color: var(--background);
|
||||
}
|
||||
.nav-services:hover, .nav-services:focus-visible {
|
||||
background-color: var(--blue);
|
||||
color: var(--background);
|
||||
}
|
||||
.nav-webmaster:hover, .nav-webmaster:focus-visible {
|
||||
background-color: var(--green);
|
||||
color: var(--background);
|
||||
}
|
||||
.nav-donate:hover, .nav-donate:focus-visible {
|
||||
background-color: var(--pink);
|
||||
color: var(--background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* modify widths and spacing depending on the size of the display */
|
||||
@media screen and (max-width: 35rem) {
|
||||
.navbar {
|
||||
|
|
@ -411,46 +321,4 @@ html[data-theme="dark"] {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html:not([data-theme="light"]) {
|
||||
.navbar .nav-mobile-menu ul {
|
||||
.nav-home:hover a, .nav-home:focus-visible a {
|
||||
color: var(--accent);
|
||||
}
|
||||
.nav-notebook:hover a, .nav-notebook:focus-visible a {
|
||||
color: var(--purple);
|
||||
}
|
||||
.nav-services:hover a, .nav-services:focus-visible a {
|
||||
color: var(--blue);
|
||||
}
|
||||
.nav-webmaster:hover a, .nav-webmaster:focus-visible a {
|
||||
color: var(--green);
|
||||
}
|
||||
.nav-donate:hover a, .nav-donate:focus-visible a {
|
||||
color: var(--pink);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
.navbar .nav-mobile-menu ul {
|
||||
.nav-home:hover a, .nav-home:focus-visible a {
|
||||
color: var(--accent);
|
||||
}
|
||||
.nav-notebook:hover a, .nav-notebook:focus-visible a {
|
||||
color: var(--purple);
|
||||
}
|
||||
.nav-services:hover a, .nav-services:focus-visible a {
|
||||
color: var(--blue);
|
||||
}
|
||||
.nav-webmaster:hover a, .nav-webmaster:focus-visible a {
|
||||
color: var(--green);
|
||||
}
|
||||
.nav-donate:hover a, .nav-donate:focus-visible a {
|
||||
color: var(--pink);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue