This commit is contained in:
parent
cc751486d0
commit
a9c8eb8084
3 changed files with 471 additions and 196 deletions
|
|
@ -1,40 +1,38 @@
|
|||
<!-- top navbar -->
|
||||
<div class="navbar">
|
||||
<a class="nav-base nav-left nav-baselink" href="/"><span class="tabler--grid-dots"></span> Synth Download!</a>
|
||||
<details class="nav-base nav-left nav-baselink-mobile">
|
||||
<summary><span class="tabler--grid-dots"></span> s <span aria-hidden="true" class="dot" style="background-color: var(--background) !important;"></span> d!</summary>
|
||||
<nav class="navbar">
|
||||
<a class="nav-base nav-left nav-baselink nav-desktop" aria-label="Synth.download Homepage" href="/"><img aria-hidden="true" src="/assets/synth.download/synth_web.svg" class="synth-icon" /></a>
|
||||
<div class="nav-base nav-left nav-baselink nav-mobile-menu">
|
||||
<input type="checkbox" id="nav-mobile-menu-dropdown" value="" name="nav-mobile-menu-dropdown">
|
||||
<label aria-label="Menu" for="nav-mobile-menu-dropdown" data-toggle="nav-mobile-menu">
|
||||
<img aria-hidden="true" src="/assets/synth.download/synth_web.svg" class="synth-icon" />
|
||||
</label>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/"><span class="tabler--home"></span> Home</a>
|
||||
<li class="nav-home">
|
||||
<a href="/"><span class="tabler--home"></span> <span class="text">Home</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/me"><span class="tabler--user"></span> About me</a>
|
||||
<li class="nav-notebook" >
|
||||
<a href="/notebook"><span class="tabler--notebook"></span> <span class="text">Notebook</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/notebook"><span class="tabler--notebook"></span> Notebook</a>
|
||||
<li class="nav-webmaster">
|
||||
<a href="/me"><span class="tabler--user"></span> <span class="text">The webmaster</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/me#links"><span class="tabler--link"></span> Links</a>
|
||||
<li class="nav-donate">
|
||||
<a href="/donate"><span class="tabler--currency-dollar"></span> <span class="text">Donate</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
<nav class="nav-base nav-left nav-links">
|
||||
<a href="/"><span class="tabler--home"></span> Home</a>
|
||||
<div class="dot"></div>
|
||||
<a href="/me"><span class="tabler--user"></span> About me</a>
|
||||
<div class="dot"></div>
|
||||
<a href="/notebook"><span class="tabler--notebook"></span> Notebook</a>
|
||||
<div class="dot"></div>
|
||||
<a href="/me#links"><span class="tabler--link"></span> Links</a>
|
||||
</nav>
|
||||
<details aria-label="Accessibility Settings" class="nav-base nav-right nav-accessibility">
|
||||
<summary><span aria-label="Accessibility Settings" class="tabler--accessible"></span></summary>
|
||||
</div>
|
||||
<a class="nav-base nav-left nav-links nav-home" href="/"><span class="tabler--home"></span> <span class="text">Home</span></a>
|
||||
<a class="nav-base nav-left nav-links nav-notebook" href="/notebook"><span class="tabler--notebook"></span> <span class="text">Notebook</span></a>
|
||||
<a class="nav-base nav-left nav-links nav-webmaster" href="/me"><span class="tabler--user"></span> <span class="text">The webmaster</span></a>
|
||||
<a class="nav-base nav-left nav-links nav-donate" href="/donate"><span class="tabler--currency-dollar"></span> <span class="text">Donate</span></a>
|
||||
<details aria-label="Settings" class="nav-base nav-right nav-settings">
|
||||
<summary><span aria-label="Settings" class="tabler--settings"></span></summary>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Accessibility Settings</p>
|
||||
<p>Settings</p>
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden="true" class="seperator"></span>
|
||||
<hr class="solid">
|
||||
<p class="caption section" style="font-size: smaller; opacity: .9;">Theme</p>
|
||||
<p class="caption" style="color: var(--red);">Only works with JavaScript.</p>
|
||||
|
||||
|
|
@ -52,7 +50,7 @@
|
|||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden="true" class="seperator"></span>
|
||||
<hr class="solid">
|
||||
<p class="caption section" style="font-size: smaller; opacity: .9;">Font</p>
|
||||
|
||||
<span>
|
||||
|
|
@ -82,7 +80,7 @@
|
|||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden="true" class="seperator"></span>
|
||||
<hr class="solid">
|
||||
<span>
|
||||
<input type="checkbox" id="uncapitalization" name="uncapitalization" />
|
||||
<label for="uncapitalization">Disable forced uncapitalization</label><br>
|
||||
|
|
@ -101,7 +99,7 @@
|
|||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span aria-hidden="true" class="seperator"></span>
|
||||
<hr class="solid">
|
||||
<p class="caption">Disabling the alt-text popup or forced uncapitalization does not affect "normal" accessibility. The alt-text pop-up is custom made in replacement of using the <span class="code">title</span> attribute, and forced uncapitalization is done using CSS's <span class="code">text-transform</span>.</p>
|
||||
<p class="caption" style="padding: .6rem 0px;">These settings are done entirely with CSS (except the Theme settings), and will be saved into your browser if you have JavaScript enabled. Otherwise, <span style="color: var(--red);">your settings will not be saved.</span></p>
|
||||
</li>
|
||||
|
|
@ -113,4 +111,4 @@
|
|||
<span class="tabler--wifi"></span>
|
||||
<span class="tabler--battery-filled"></span>
|
||||
</p>
|
||||
</div>
|
||||
</nav>
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -21,6 +21,21 @@ uses Tabler icons via https://icon-sets.iconify.design/tabler to generate reusab
|
|||
-webkit-mask-size: 100% 100%;
|
||||
mask-size: 100% 100%;
|
||||
}
|
||||
/* ti-settings */
|
||||
.tabler--settings {
|
||||
display: inline-block;
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
vertical-align: top;
|
||||
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065'/%3E%3Cpath d='M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0'/%3E%3C/g%3E%3C/svg%3E");
|
||||
background-color: currentColor;
|
||||
-webkit-mask-image: var(--svg);
|
||||
mask-image: var(--svg);
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: 100% 100%;
|
||||
mask-size: 100% 100%;
|
||||
}
|
||||
/* ti-grid-dots */
|
||||
.tabler--grid-dots {
|
||||
display: inline-block;
|
||||
|
|
@ -670,4 +685,19 @@ uses Tabler icons via https://icon-sets.iconify.design/tabler to generate reusab
|
|||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: 100% 100%;
|
||||
mask-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
/* ti-currency-dollar */
|
||||
.tabler--currency-dollar {
|
||||
display: inline-block;
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
vertical-align: top;
|
||||
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M16.7 8A3 3 0 0 0 14 6h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1-2.7-2M12 3v3m0 12v3'/%3E%3C/svg%3E");
|
||||
background-color: currentColor;
|
||||
-webkit-mask-image: var(--svg);
|
||||
mask-image: var(--svg);
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: 100% 100%;
|
||||
mask-size: 100% 100%;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue