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 */
|
&:has(#font-serif:checked) { /* serif */
|
||||||
--font-family: serif, sans-serif, system-ui, -apple-system;
|
--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) {
|
&:has(#disable-bg:checked) { /* disable background gradient */
|
||||||
body {
|
body {
|
||||||
text-transform: none !important;
|
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 */
|
/* reduce animations on browser preference */
|
||||||
:root:has(#disable-bg:checked) {
|
@media (prefers-reduced-motion: reduce) { /* copy-pasted from disable animations option */
|
||||||
body {
|
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;
|
animation: unset !important;
|
||||||
-moz-animation: unset !important;
|
-moz-animation: unset !important;
|
||||||
-webkit-animation: unset !important;
|
-webkit-animation: unset !important;
|
||||||
|
|
@ -72,14 +98,8 @@
|
||||||
.fedi-icon {
|
.fedi-icon {
|
||||||
animation: opacity-blink 4s infinite !important;
|
animation: opacity-blink 4s infinite !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fedi-icon-2 {
|
.fedi-icon-2 {
|
||||||
animation: opacity-blink-reverse 4s infinite !important;
|
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: '';
|
content: '';
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
margin-bottom: -.1rem;
|
margin-bottom: -.15rem;
|
||||||
margin-left: .2rem;
|
margin-left: .2rem;
|
||||||
margin-right: .3rem;
|
margin-right: .3rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -670,44 +670,7 @@ checkbox-button-group {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ╭────────────────────────────────────────╮
|
/* atmedia*/
|
||||||
/ │ ____ _ _ │
|
|
||||||
/ │ / __ \ _ __ ___ ___ __| (_) __ _ │
|
|
||||||
/ │ / / _` | '_ ` _ \ / _ \/ _` | |/ _` | │
|
|
||||||
/ │ | | (_| | | | | | | __/ (_| | | (_| | │
|
|
||||||
/ │ \ \__,_|_| |_| |_|\___|\__,_|_|\__,_| │
|
|
||||||
/ │ \____/ │
|
|
||||||
/ ╰────────────────────────────────────────╯
|
|
||||||
/ @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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 1083px) {
|
@media screen and (max-width: 1083px) {
|
||||||
details.styled {
|
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 {
|
.nav-mobile-menu {
|
||||||
display: none;
|
display: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -114,63 +184,44 @@
|
||||||
text-shadow: unset;
|
text-shadow: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
icon-tabler {
|
||||||
padding-right: .3em;
|
transition: .2s;
|
||||||
transition: .2s all;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
li:hover {
|
li:hover {
|
||||||
transition: .2s all;
|
transition: .2s;
|
||||||
|
|
||||||
.icon {
|
icon-tabler {
|
||||||
transform: scale(2.5) translateX(-.1rem) translateY(.1rem) rotate(15deg);
|
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 {
|
||||||
.nav-home:focus-visible {
|
&:hover, &:focus-visible {
|
||||||
background-color: color-mix(in srgb, var(--accent) 20%, transparent);
|
background-color: light-dark(color-mix(in srgb, var(--accent) 25%, var(--background)), var(--accent));
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--foreground);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-notebook:hover,
|
.nav-services {
|
||||||
.nav-home:focus-visible {
|
&:hover, &:focus-visible {
|
||||||
background-color: color-mix(in srgb, var(--purple) 20%, transparent);
|
background-color: light-dark(color-mix(in srgb, var(--blue) 25%, var(--background)), var(--blue));
|
||||||
|
|
||||||
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-webmaster:hover,
|
.nav-webmaster {
|
||||||
.nav-home:focus-visible {
|
&:hover, &:focus-visible {
|
||||||
background-color: color-mix(in srgb, var(--green) 20%, transparent);
|
background-color: light-dark(color-mix(in srgb, var(--green) 25%, var(--background)), var(--green));
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--foreground);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-donate:hover,
|
.nav-donate {
|
||||||
.nav-home:focus-visible {
|
&:hover, &:focus-visible {
|
||||||
background-color: color-mix(in srgb, var(--pink) 20%, transparent);
|
background-color: light-dark(color-mix(in srgb, var(--purple) 25%, var(--background)), var(--purple));
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--foreground);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -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 {
|
.nav-settings {
|
||||||
input[type="checkbox"]#nav-settings-menu {
|
input[type="checkbox"]#nav-settings-menu {
|
||||||
left: -100vw;
|
left: -100vw;
|
||||||
|
|
@ -336,60 +300,6 @@
|
||||||
border-bottom: solid .2rem var(--accent);
|
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 */
|
/* modify widths and spacing depending on the size of the display */
|
||||||
@media screen and (max-width: 35rem) {
|
@media screen and (max-width: 35rem) {
|
||||||
.navbar {
|
.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