This commit is contained in:
parent
cc751486d0
commit
a9c8eb8084
3 changed files with 471 additions and 196 deletions
577
styles/base.css
577
styles/base.css
|
|
@ -80,6 +80,7 @@
|
|||
animation: unset !important;
|
||||
transition: unset !important;
|
||||
}
|
||||
|
||||
.window:hover {
|
||||
transition: unset !important;
|
||||
animation: unset !important;
|
||||
|
|
@ -89,6 +90,7 @@
|
|||
.navbar {
|
||||
transition: unset !important;
|
||||
}
|
||||
|
||||
.navbar:hover {
|
||||
transition: unset !important;
|
||||
animation: unset !important;
|
||||
|
|
@ -141,13 +143,15 @@ body {
|
|||
font-family: var(--font-family);
|
||||
font-size: 1.125rem;
|
||||
text-transform: lowercase;
|
||||
margin: unset !important; /* idk why it does that */
|
||||
margin: unset !important;
|
||||
/* idk why it does that */
|
||||
}
|
||||
|
||||
/* text formatting and config stuff */
|
||||
|
||||
/* headings */
|
||||
h1, h1 a {
|
||||
h1,
|
||||
h1 a {
|
||||
color: var(--foreground);
|
||||
font-size: 2rem;
|
||||
text-decoration: none;
|
||||
|
|
@ -155,18 +159,22 @@ 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 {
|
||||
h2,
|
||||
h2 a {
|
||||
color: var(--foreground);
|
||||
font-size: 2rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h3, h3 a {
|
||||
h3,
|
||||
h3 a {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
/* text */
|
||||
p, li, button {
|
||||
p,
|
||||
li,
|
||||
button {
|
||||
font-size: 1.125rem;
|
||||
|
||||
[class^="tabler--"] {
|
||||
|
|
@ -187,7 +195,8 @@ a:hover {
|
|||
}
|
||||
|
||||
/* smol text */
|
||||
small, small a {
|
||||
small,
|
||||
small a {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
|
|
@ -210,7 +219,8 @@ h1 a:hover {
|
|||
}
|
||||
|
||||
/* the tabler icons svgs styling */
|
||||
.tabler-icon, .icon .icon-tabler {
|
||||
.tabler-icon,
|
||||
.icon .icon-tabler {
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
padding-bottom: .2rem;
|
||||
|
|
@ -247,17 +257,27 @@ h1 a:hover {
|
|||
margin-bottom: .1rem;
|
||||
}
|
||||
|
||||
/* seperator */
|
||||
.seperator::before {
|
||||
border-bottom: .1rem solid var(--border);
|
||||
content: '';
|
||||
display: block;
|
||||
height: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
margin-top: -.7rem;
|
||||
min-width: max-content;
|
||||
/* Dashed border */
|
||||
hr.dashed {
|
||||
border-top: .1rem dashed var(--border);
|
||||
}
|
||||
|
||||
/* Dotted border */
|
||||
hr.dotted {
|
||||
border-top: .1rem dotted var(--border);
|
||||
}
|
||||
|
||||
/* Solid border */
|
||||
hr.solid {
|
||||
border-top: .1rem solid var(--border);
|
||||
}
|
||||
|
||||
/* Rounded border */
|
||||
hr.rounded {
|
||||
border-top: .2rem solid var(--border);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* audio */
|
||||
audio {
|
||||
border-radius: 3rem;
|
||||
|
|
@ -266,7 +286,7 @@ audio {
|
|||
/* summary styling */
|
||||
summary {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------
|
||||
- alt text popup -
|
||||
|
|
@ -311,11 +331,10 @@ summary {
|
|||
min-width: 100%;
|
||||
position: fixed;
|
||||
top: 0 !important;
|
||||
padding: .4rem 0 .4rem 0;
|
||||
z-index: 10;
|
||||
|
||||
align-content: center;
|
||||
background-color: color-mix(in srgb, var(--accent) 30%, transparent);
|
||||
border-bottom: .2rem solid var(--accent);
|
||||
color: var(--foreground);
|
||||
vertical-align: middle;
|
||||
|
||||
|
|
@ -325,77 +344,152 @@ summary {
|
|||
padding: 0px .2em !important;
|
||||
max-width: fit-content;
|
||||
align-content: center;
|
||||
outline: .13rem solid var(--border);
|
||||
border-radius: 1rem;
|
||||
height: 1.9rem;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
margin-left: .6rem !important;
|
||||
padding: 0px .5rem .1rem !important;
|
||||
text-decoration: unset !important;
|
||||
padding: 0px .4rem .1rem !important;
|
||||
border-bottom-right-radius: 1rem;
|
||||
height: 1.9rem;
|
||||
}
|
||||
.nav-left::before {
|
||||
background: var(--background);
|
||||
content: '';
|
||||
display: block;
|
||||
left: 5rem;
|
||||
margin-left: .67rem;
|
||||
min-height: 2rem;
|
||||
min-width: 10rem;
|
||||
position: absolute;
|
||||
top: 0rem;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.nav-baselink {
|
||||
background-color: var(--accent);
|
||||
color: var(--background);
|
||||
margin-left: .4rem !important;
|
||||
outline-color: color-mix(in srgb, var(--accent) 60%, transparent);
|
||||
padding: .13rem;
|
||||
|
||||
svg {
|
||||
color: var(--background) !important;
|
||||
.synth-icon {
|
||||
height: 2rem;
|
||||
margin-right: 1rem;
|
||||
pointer-events: none;
|
||||
transform: scaleX(-1) scale(1.5) translateX(-.2rem) translateY(.1rem);
|
||||
transition: all .2s ease-out;
|
||||
width: 2rem;
|
||||
}
|
||||
}
|
||||
.nav-baselink-mobile {
|
||||
|
||||
.nav-baselink:hover {
|
||||
.synth-icon {
|
||||
transition: all .2s ease-out;
|
||||
transform: scaleX(-1) scale(1.5) translateX(-.2rem) translateY(.2rem) rotate(10deg);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-desktop {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav-mobile-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
overflow: clip;
|
||||
position: relative;
|
||||
text-shadow: none;
|
||||
transition: all .3s;
|
||||
|
||||
.text {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
transition: all .3s;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[class^="tabler--"] {
|
||||
transform: scale(1.1);
|
||||
transition: all .3s;
|
||||
}
|
||||
}
|
||||
.nav-links a {
|
||||
|
||||
.nav-links:hover {
|
||||
padding-right: 9rem !important;
|
||||
padding-bottom: 7rem !important;
|
||||
transition: all .3s;
|
||||
|
||||
.text {
|
||||
opacity: 1;
|
||||
transform: scale(1.5) translateX(-.4rem);
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
[class^="tabler--"] {
|
||||
transform: scale(5) translateY(.9rem) translateX(.4rem) rotate(10deg);
|
||||
transition: all .3s;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-home:hover {
|
||||
background-color: color-mix(in srgb, var(--accent) 20%, var(--background));
|
||||
color: var(--foreground);
|
||||
text-decoration: unset !important;
|
||||
outline-color: color-mix(in srgb, var(--accent) 60%, transparent);
|
||||
}
|
||||
.nav-links a:hover {
|
||||
color: var(--accent);
|
||||
text-decoration: underline !important;
|
||||
|
||||
.nav-notebook:hover {
|
||||
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-webmaster:hover {
|
||||
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.1) translateX(-.8rem);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-donate:hover {
|
||||
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-right {
|
||||
margin-left: auto !important;
|
||||
padding: 0px .4rem !important;
|
||||
border-bottom-left-radius: 1rem;
|
||||
height: 2rem;
|
||||
padding: 0px .5rem .1rem !important;
|
||||
margin-right: .6rem !important;
|
||||
}
|
||||
.nav-accessibility {
|
||||
|
||||
.nav-settings {
|
||||
background-color: var(--accent);
|
||||
color: var(--background);
|
||||
position: absolute;
|
||||
right: 7.7rem;
|
||||
margin-left: auto !important;
|
||||
outline-color: color-mix(in srgb, var(--accent) 60%, transparent);
|
||||
|
||||
span {
|
||||
transform: scale(1.3) translateY(-.05rem) translateX(.2rem);
|
||||
transform: scale(1.5);
|
||||
padding: 0 .5rem !important;
|
||||
}
|
||||
|
||||
ul {
|
||||
background-color: var(--background);
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-bottom: var(--accent) solid .15rem;
|
||||
border-left: var(--accent) solid .15rem;
|
||||
border-radius: 1rem;
|
||||
border: var(--accent) solid .15rem;
|
||||
max-height: 27rem;
|
||||
min-height: 27rem;
|
||||
min-width: 17rem;
|
||||
max-width: 17rem;
|
||||
overflow: scroll;
|
||||
position: absolute;
|
||||
right: -7.6rem;
|
||||
top: .94rem;
|
||||
width: auto;
|
||||
right: .4rem;
|
||||
top: 2.2rem;
|
||||
|
||||
li {
|
||||
color: var(--foreground);
|
||||
|
|
@ -404,43 +498,38 @@ summary {
|
|||
padding: .4rem;
|
||||
|
||||
span {
|
||||
padding: .1rem 0px;
|
||||
padding: .1rem 0px .1rem 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-accessibility::before {
|
||||
background: var(--accent);
|
||||
content: '';
|
||||
display: block;
|
||||
margin-left: .67rem;
|
||||
min-height: 2rem;
|
||||
min-width: 10rem;
|
||||
position: absolute;
|
||||
top: 0rem;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.nav-systray {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
padding: 0px .1rem;
|
||||
min-width: 6.45rem;
|
||||
margin-right: .4rem !important;
|
||||
}
|
||||
|
||||
a, p {
|
||||
a,
|
||||
p {
|
||||
margin: unset !important;
|
||||
}
|
||||
|
||||
small {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
svg {
|
||||
color: var(--foreground) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar:hover {
|
||||
transition: .2s background-color;
|
||||
background-color: var(--accent);
|
||||
transition: .2s all;
|
||||
background-color: color-mix(in srgb, var(--accent) 40%, transparent);
|
||||
border-bottom: solid .2rem var(--accent);
|
||||
|
||||
.nav-accessibility {
|
||||
border-left: .2rem solid var(--background);
|
||||
|
|
@ -501,7 +590,7 @@ summary {
|
|||
div:nth-child(3) {
|
||||
margin-left: auto !important;
|
||||
padding: .2rem .5rem .2rem 0rem;
|
||||
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
|
@ -512,7 +601,7 @@ summary {
|
|||
span:nth-child(2) {
|
||||
opacity: .6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* close button */
|
||||
|
|
@ -542,7 +631,9 @@ summary {
|
|||
}
|
||||
}
|
||||
|
||||
main, section, article {
|
||||
main,
|
||||
section,
|
||||
article {
|
||||
padding: .8rem;
|
||||
}
|
||||
|
||||
|
|
@ -648,11 +739,13 @@ footer {
|
|||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
details > summary > a {
|
||||
details>summary>a {
|
||||
padding: .3rem 0rem .3rem 1rem !important;
|
||||
}
|
||||
|
||||
main, section, article {
|
||||
main,
|
||||
section,
|
||||
article {
|
||||
padding: 1rem !important;
|
||||
}
|
||||
|
||||
|
|
@ -664,47 +757,57 @@ footer {
|
|||
margin-bottom: .5em;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
[href="https://fediring.net"] {
|
||||
color: var(--foreground);
|
||||
background: color-mix(in srgb, var(--purple) 25%, transparent);
|
||||
padding: 0px 10px 0px 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
[href="https://keithhacks.cyou/furryring.php"] {
|
||||
color: var(--foreground);
|
||||
background: color-mix(in srgb, var(--sapphire) 25%, transparent);
|
||||
padding: 0px 10px 0px 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
[href="https://stellophiliac.github.io/roboring"] {
|
||||
color: var(--foreground);
|
||||
background: color-mix(in srgb, var(--comment) 25%, transparent);
|
||||
padding: 0px 10px 0px 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
[href*="prev"] {
|
||||
background: color-mix(in srgb, var(--orange) 25%, transparent);
|
||||
padding: 5px 6px;
|
||||
border-radius: 5px;
|
||||
|
||||
span {
|
||||
background-color: var(--orange) !important;
|
||||
}
|
||||
}
|
||||
|
||||
[href*="next"] {
|
||||
background: color-mix(in srgb, var(--green) 25%, transparent);
|
||||
padding: 5px 6px;
|
||||
border-radius: 5px;
|
||||
|
||||
span {
|
||||
background-color: var(--green) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
p, a {
|
||||
|
||||
p,
|
||||
a {
|
||||
text-align: center;
|
||||
font-size: 0.938rem;
|
||||
margin: .2em 0px .2em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
padding-top: 18px;
|
||||
max-width: 30%;
|
||||
|
|
@ -713,13 +816,16 @@ footer {
|
|||
margin-right: auto;
|
||||
transition: 1s animation;
|
||||
}
|
||||
|
||||
img:hover {
|
||||
animation: spin 5s infinite linear;
|
||||
}
|
||||
|
||||
.inner-footer {
|
||||
text-align: center;
|
||||
padding-top: 14px;
|
||||
padding-bottom: 14px;
|
||||
|
||||
a {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
|
|
@ -749,19 +855,39 @@ footer {
|
|||
/ animations - reusable css animations */
|
||||
|
||||
@keyframes window-appear {
|
||||
0% { opacity: 0; transform: scale(0.5, 0.5); }
|
||||
100% { opacity: 1; transform: scale(1, 1); }
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.5, 0.5);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
|
||||
100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
|
||||
0% {
|
||||
filter: hue-rotate(0deg) contrast(150%) saturate(150%);
|
||||
}
|
||||
|
||||
100% {
|
||||
filter: hue-rotate(360deg) contrast(150%) saturate(150%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bg-gradient {
|
||||
0% { background-position: 0% 27% }
|
||||
50% { background-position: 100% 74% }
|
||||
100% { background-position: 0% 27% }
|
||||
0% {
|
||||
background-position: 0% 27%
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 74%
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 27%
|
||||
}
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------
|
||||
|
|
@ -776,7 +902,8 @@ footer {
|
|||
/ │ \ \__,_|_| |_| |_|\___|\__,_|_|\__,_| │
|
||||
/ │ \____/ │
|
||||
/ ╰────────────────────────────────────────╯
|
||||
/ @media / at-media - styling depending on browser configuration / settings */
|
||||
/ @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 */
|
||||
|
||||
|
|
@ -787,109 +914,183 @@ footer {
|
|||
-moz-animation: unset !important;
|
||||
-webkit-animation: unset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html:not([data-theme="light"]) {
|
||||
.navbar {
|
||||
.nav-home:hover {
|
||||
background-color: var(--accent);
|
||||
color: var(--background);
|
||||
}
|
||||
.nav-notebook:hover {
|
||||
background-color: var(--purple);
|
||||
color: var(--background);
|
||||
}
|
||||
.nav-webmaster:hover {
|
||||
background-color: var(--green);
|
||||
color: var(--background);
|
||||
}
|
||||
.nav-donate:hover {
|
||||
background-color: var(--pink);
|
||||
color: var(--background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
.navbar {
|
||||
.nav-home:hover {
|
||||
background-color: var(--accent);
|
||||
color: var(--background);
|
||||
}
|
||||
.nav-notebook:hover {
|
||||
background-color: var(--purple);
|
||||
color: var(--background);
|
||||
}
|
||||
.nav-webmaster:hover {
|
||||
background-color: var(--green);
|
||||
color: var(--background);
|
||||
}
|
||||
.nav-donate:hover {
|
||||
background-color: var(--pink);
|
||||
color: var(--background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* modify widths and spacing depending on the size of the display */
|
||||
|
||||
@media screen and (max-width: 1083px) {
|
||||
.navbar {
|
||||
min-height: 1.8em !important;
|
||||
max-height: 1.8em !important;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.nav-base {
|
||||
padding: .27em .2em !important;
|
||||
}
|
||||
.nav-left {
|
||||
height: 1.9rem;
|
||||
left: -.4rem;
|
||||
}
|
||||
.nav-left::before {
|
||||
margin-left: -10rem !important;
|
||||
}
|
||||
.nav-baselink {
|
||||
.nav-desktop {
|
||||
display: none !important;
|
||||
}
|
||||
.nav-baselink-mobile {
|
||||
display: block !important;
|
||||
position: absolute;
|
||||
max-width: 40em;
|
||||
width: max-content;
|
||||
z-index: 9999;
|
||||
padding: unset !important;
|
||||
|
||||
a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--foreground);
|
||||
padding: .6em .7em;
|
||||
text-decoration: none;
|
||||
.nav-mobile-menu {
|
||||
display: inline-block;
|
||||
max-width: 3rem;
|
||||
min-width: 3rem;
|
||||
position: relative;
|
||||
|
||||
input[type="checkbox"] {
|
||||
left: -100vw;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
label {
|
||||
border-radius: 1rem;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
left: -.5rem;
|
||||
margin-right: .1rem;
|
||||
max-height: 2rem;
|
||||
max-width: 3rem;
|
||||
min-height: 2rem;
|
||||
min-width: 3rem;
|
||||
overflow: hidden !important;
|
||||
padding-right: 1rem;
|
||||
position: relative;
|
||||
|
||||
.synth-icon {
|
||||
transform: scaleX(-1) scale(1.5) translateX(-.5rem) translateY(.1rem);
|
||||
}
|
||||
}
|
||||
|
||||
label:hover {
|
||||
.synth-icon {
|
||||
transform: scaleX(-1) scale(1.5) translateX(-.5rem) translateY(.2rem) rotate(10deg);
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
background-color: var(--background);
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-right: var(--accent) solid .15rem;
|
||||
border-bottom: var(--accent) solid .15rem;
|
||||
max-width: 10em;
|
||||
width: auto;
|
||||
margin-top: unset !important;
|
||||
border-radius: 1rem;
|
||||
border: var(--accent) solid .15rem;
|
||||
display: none;
|
||||
height: max-content;
|
||||
left: 0;
|
||||
margin-top: .4rem !important;
|
||||
position: absolute;
|
||||
width: max-content;
|
||||
|
||||
li {
|
||||
border-radius: 1rem;
|
||||
list-style-type: none;
|
||||
margin-left: -2em;
|
||||
padding-bottom: unset !important;
|
||||
span {
|
||||
padding-right: .4em;
|
||||
margin: .5rem .5rem .5rem -1.9rem;
|
||||
overflow: clip;
|
||||
padding: .7rem;
|
||||
transition: .2s all;
|
||||
|
||||
a {
|
||||
color: var(--foreground);
|
||||
text-decoration: none;
|
||||
text-shadow: unset;
|
||||
}
|
||||
|
||||
[class^="tabler--"] {
|
||||
padding-right: .3em;
|
||||
transition: .2s all;
|
||||
}
|
||||
}
|
||||
|
||||
li:hover {
|
||||
transition: .2s all;
|
||||
|
||||
[class^="tabler--"] {
|
||||
transform: scale(2.5) translateX(-.1rem) translateY(.1rem) rotate(15deg);
|
||||
transition: .2s all;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-home:hover {
|
||||
background-color: color-mix(in srgb, var(--accent) 20%, transparent);
|
||||
a {
|
||||
color: var(--foreground);
|
||||
}
|
||||
}
|
||||
.nav-notebook:hover {
|
||||
background-color: color-mix(in srgb, var(--purple) 20%, transparent);
|
||||
a {
|
||||
color: var(--foreground);
|
||||
}
|
||||
}
|
||||
.nav-webmaster:hover {
|
||||
background-color: color-mix(in srgb, var(--green) 20%, transparent);
|
||||
a {
|
||||
color: var(--foreground);
|
||||
}
|
||||
}
|
||||
.nav-donate:hover {
|
||||
background-color: color-mix(in srgb, var(--pink) 20%, transparent);
|
||||
a {
|
||||
color: var(--foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-baselink-mobile::before {
|
||||
display: none;
|
||||
}
|
||||
.nav-baselink-mobile summary {
|
||||
display: block !important;
|
||||
margin-top: 0px !important;
|
||||
background-color: var(--accent);
|
||||
text-decoration: unset !important;
|
||||
color: var(--background);
|
||||
padding: .3em;
|
||||
border-bottom-right-radius: 1rem;
|
||||
width: 5.7em;
|
||||
|
||||
i:not(:first-child) {
|
||||
margin-left: -.5em;
|
||||
margin-right: -.9em;
|
||||
opacity: .6;
|
||||
input[type="checkbox"]:checked~ul {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
height: 1.4rem;
|
||||
}
|
||||
.nav-accessibility {
|
||||
right: 7.6rem;
|
||||
min-width: 1.6rem;
|
||||
.nav-settings {
|
||||
span {
|
||||
transform: scale(1.3) translateY(-.05rem) translateX(.2rem);
|
||||
padding: 0 .4rem !important;
|
||||
}
|
||||
}
|
||||
.nav-systray {
|
||||
padding: .27em .5em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.window:not(#footer) {
|
||||
summary {
|
||||
summary {
|
||||
div:first-child {
|
||||
padding: .3rem .4rem .3rem .4rem;
|
||||
}
|
||||
|
|
@ -904,17 +1105,19 @@ footer {
|
|||
}
|
||||
|
||||
animation: unset !important;
|
||||
|
||||
main, section, article {
|
||||
|
||||
main,
|
||||
section,
|
||||
article {
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
|
||||
border-top: var(--accent) solid .15rem;
|
||||
border-bottom: var(--accent) solid .15rem;
|
||||
border-left: unset !important;
|
||||
border-right: unset !important;
|
||||
border-radius: unset !important;
|
||||
|
||||
|
||||
margin-bottom: .8em;
|
||||
}
|
||||
|
||||
|
|
@ -922,6 +1125,42 @@ footer {
|
|||
.window:nth-child(2) {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html:not([data-theme="light"]) {
|
||||
.navbar .nav-mobile-menu ul {
|
||||
.nav-home:hover a {
|
||||
color: var(--accent);
|
||||
}
|
||||
.nav-notebook:hover a {
|
||||
color: var(--purple);
|
||||
}
|
||||
.nav-webmaster:hover a {
|
||||
color: var(--green);
|
||||
}
|
||||
.nav-donate:hover a {
|
||||
color: var(--pink);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
.navbar .nav-mobile-menu ul {
|
||||
.nav-home:hover a {
|
||||
color: var(--accent);
|
||||
}
|
||||
.nav-notebook:hover a {
|
||||
color: var(--purple);
|
||||
}
|
||||
.nav-webmaster:hover a {
|
||||
color: var(--green);
|
||||
}
|
||||
.nav-donate:hover a {
|
||||
color: var(--pink);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 540px) {
|
||||
|
|
@ -931,7 +1170,7 @@ footer {
|
|||
border-left: unset !important;
|
||||
border-right: unset !important;
|
||||
border-radius: unset !important;
|
||||
|
||||
|
||||
margin-bottom: .8em;
|
||||
}
|
||||
}
|
||||
|
|
@ -976,7 +1215,9 @@ footer {
|
|||
/ home - specific styling for the main synth.download home page (index.md) */
|
||||
|
||||
#site.window.home {
|
||||
main, section {
|
||||
|
||||
main,
|
||||
section {
|
||||
a:nth-child(2) {
|
||||
cursor: default;
|
||||
}
|
||||
|
|
@ -1005,6 +1246,7 @@ footer {
|
|||
li a {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
li a:hover {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
|
@ -1019,6 +1261,7 @@ footer {
|
|||
#buttons.window.home section {
|
||||
text-align: center;
|
||||
font-size: 0px;
|
||||
|
||||
img {
|
||||
margin-right: 5px;
|
||||
image-rendering: auto;
|
||||
|
|
@ -1033,7 +1276,9 @@ footer {
|
|||
}
|
||||
|
||||
@media screen and (max-width: 59em) {
|
||||
#site.window.home > main, #site.window.home > section {
|
||||
|
||||
#site.window.home>main,
|
||||
#site.window.home>section {
|
||||
#logo {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
@ -1057,7 +1302,8 @@ details.notebook.article-category {
|
|||
overflow: clip;
|
||||
border-radius: .8rem .4rem .8rem .4rem;
|
||||
background-color: color-mix(in srgb, var(--accent) 15%, transparent);
|
||||
padding-bottom: .01rem; /* weird bug ??? without this there is no space underneath so */
|
||||
padding-bottom: .01rem;
|
||||
/* weird bug ??? without this there is no space underneath so */
|
||||
|
||||
summary {
|
||||
span {
|
||||
|
|
@ -1135,8 +1381,9 @@ details.notebook.article-category {
|
|||
opacity: .8;
|
||||
}
|
||||
|
||||
p:first-child, p:last-child {
|
||||
p:first-child,
|
||||
p:last-child {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue