split up css files and add window animations
All checks were successful
/ build (push) Successful in 30s
All checks were successful
/ build (push) Successful in 30s
This commit is contained in:
parent
1226f94934
commit
2c11c4d07d
18 changed files with 752 additions and 743 deletions
90
accessibility.css
Normal file
90
accessibility.css
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
/* ---------------------------------
|
||||
- choosable accessibility settings -
|
||||
---------------------------------- */
|
||||
|
||||
/* - font settings - */
|
||||
|
||||
/* jetbrains mono */
|
||||
:root:has(#font-jbm:checked) {
|
||||
--font-family: 'JetBrains Mono', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
|
||||
|
||||
.navbar .nav-base.nav-right.nav-systray span {
|
||||
margin: 0px -.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* atkinson hyperlegible next */
|
||||
:root:has(#font-ahn:checked) {
|
||||
--font-family: 'Atkinson Hyperlegible Next', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
|
||||
}
|
||||
|
||||
/* inter */
|
||||
:root:has(#font-inter:checked) {
|
||||
--font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
|
||||
}
|
||||
|
||||
/* (browser) sans serif */
|
||||
:root:has(#font-sans-serif:checked) {
|
||||
--font-family: sans-serif, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui;
|
||||
}
|
||||
|
||||
/* (browser) serif */
|
||||
:root:has(#font-serif:checked) {
|
||||
--font-family: serif, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
|
||||
}
|
||||
|
||||
/* (browser) monospace */
|
||||
:root:has(#font-monospace:checked) {
|
||||
--font-family: monospace, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
|
||||
}
|
||||
|
||||
/* - misc - */
|
||||
|
||||
/* disable forced uncapitalization */
|
||||
:root:has(#uncapitalization:checked) {
|
||||
body {
|
||||
text-transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* disable background gradient */
|
||||
:root:has(#disable-bg:checked) {
|
||||
body {
|
||||
background: var(--background) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* disable window animations */
|
||||
:root:has(#disable-window-animations:checked) {
|
||||
.window {
|
||||
animation: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* disable focus animations */
|
||||
:root:has(#disable-focus-animations:checked) {
|
||||
.window {
|
||||
transition: unset !important;
|
||||
}
|
||||
.window:hover {
|
||||
transition: unset !important;
|
||||
animation: unset !important;
|
||||
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
transition: unset !important;
|
||||
}
|
||||
.navbar:hover {
|
||||
transition: unset !important;
|
||||
animation: unset !important;
|
||||
background-color: color-mix(in srgb, var(--accent) 30%, transparent) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* disable custom alt text popup */
|
||||
:root:has(#disable-alttext:checked) {
|
||||
.alt-popup {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
17
animations.css
Normal file
17
animations.css
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
/* various reusable animations */
|
||||
|
||||
@keyframes window-appear {
|
||||
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%); }
|
||||
}
|
||||
|
||||
@keyframes bg-gradient {
|
||||
0% { background-position: 0% 27% }
|
||||
50% { background-position: 100% 74% }
|
||||
100% { background-position: 0% 27% }
|
||||
}
|
||||
161
at-media.css
Normal file
161
at-media.css
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
/* ---------------------------------------------------------------
|
||||
- the @media section of things and anything else related to that -
|
||||
--------------------------------------------------------------- */
|
||||
|
||||
/* disable certain animations if user has animations disabled on their system */
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
body {
|
||||
background: var(--background) !important;
|
||||
animation: unset !important;
|
||||
-moz-animation: unset !important;
|
||||
-webkit-animation: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
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;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
margin-left: -2em;
|
||||
padding-bottom: unset !important;
|
||||
span {
|
||||
padding-right: .4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.nav-links {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
height: 1.4rem;
|
||||
}
|
||||
.nav-accessibility {
|
||||
right: 7.6rem;
|
||||
min-width: 1.6rem;
|
||||
span {
|
||||
transform: scale(1.3) translateY(-.05rem) translateX(.2rem);
|
||||
}
|
||||
}
|
||||
.nav-systray {
|
||||
padding: .27em .5em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.window:not(#footer) {
|
||||
summary {
|
||||
div:first-child {
|
||||
padding: .3rem .4rem .3rem .4rem;
|
||||
}
|
||||
|
||||
div:nth-child(3) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
div:nth-child(4) {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
animation: unset !important;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
/* window when its the first one on the page */
|
||||
.window:nth-child(2) {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 540px) {
|
||||
details#footer.window {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<link rel="icon" type="image/png" href="/assets/favicon.png">
|
||||
<link rel="stylesheet" type="text/css" href="/colors.css">
|
||||
<link rel="stylesheet" type="text/css" href="/font.css">
|
||||
<link rel="stylesheet" type="text/css" href="/tabler.css">
|
||||
<link rel="stylesheet" type="text/css" href="/icons.css">
|
||||
<link rel="stylesheet" type="text/css" href="/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="/blog.css">
|
||||
<link rel="canonical" href="https://synth.download/">
|
||||
|
|
|
|||
|
|
@ -6,11 +6,16 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>donate @ Synth Download!</title>
|
||||
<link rel="icon" type="image/png" href="/assets/favicon.png">
|
||||
<link rel="stylesheet" type="text/css" href="/accessibility.css">
|
||||
<link rel="stylesheet" type="text/css" href="/animations.css">
|
||||
<link rel="stylesheet" type="text/css" href="/at-media.css">
|
||||
<link rel="stylesheet" type="text/css" href="/colors.css">
|
||||
<link rel="stylesheet" type="text/css" href="/font.css">
|
||||
<link rel="stylesheet" type="text/css" href="/tabler.css">
|
||||
<link rel="stylesheet" type="text/css" href="/footer.css">
|
||||
<link rel="stylesheet" type="text/css" href="/icons.css">
|
||||
<link rel="stylesheet" type="text/css" href="/navbar.css">
|
||||
<link rel="stylesheet" type="text/css" href="/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="/site.css">
|
||||
<link rel="stylesheet" type="text/css" href="/window.css">
|
||||
<link rel="canonical" href="https://synth.download/">
|
||||
<link rel="me" href="https://booping.synth.download/@sneexy">
|
||||
<link rel="me" href="https://beeping.synth.download/@sneexy">
|
||||
|
|
@ -117,6 +122,10 @@
|
|||
<input type="checkbox" id="disable-bg" name="disable-bg" />
|
||||
<label for="disable-bg">Disable background gradient</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="checkbox" id="disable-window-animations" name="window-animations" />
|
||||
<label for="disable-window-animations">Disable window animations</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="checkbox" id="disable-focus-animations" name="focus-animations" />
|
||||
<label for="disable-focus-animations">Disable focus animations</label><br>
|
||||
|
|
|
|||
81
footer.css
Normal file
81
footer.css
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
/* footer/credits */
|
||||
|
||||
footer {
|
||||
.fediring {
|
||||
a {
|
||||
display: inline-grid;
|
||||
font-size: 1.5rem;
|
||||
color: var(--green);
|
||||
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 {
|
||||
text-align: center;
|
||||
font-size: 0.938rem;
|
||||
margin: .2em 0px .2em;
|
||||
text-decoration: none;
|
||||
}
|
||||
img {
|
||||
padding-top: 18px;
|
||||
max-width: 30%;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
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;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
align-content: center;
|
||||
border-radius: .5rem;
|
||||
|
||||
span {
|
||||
transform: scale(1.58);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
15
index.html
15
index.html
|
|
@ -6,12 +6,17 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Synth Download!</title>
|
||||
<link rel="icon" type="image/png" href="/assets/favicon.png">
|
||||
<link rel="stylesheet" type="text/css" href="/accessibility.css">
|
||||
<link rel="stylesheet" type="text/css" href="/animations.css">
|
||||
<link rel="stylesheet" type="text/css" href="/at-media.css">
|
||||
<link rel="stylesheet" type="text/css" href="/colors.css">
|
||||
<link rel="stylesheet" type="text/css" href="/font.css">
|
||||
<link rel="stylesheet" type="text/css" href="/tabler.css">
|
||||
<link rel="stylesheet" type="text/css" href="/footer.css">
|
||||
<link rel="stylesheet" type="text/css" href="/icons.css">
|
||||
<link rel="stylesheet" type="text/css" href="/index.css">
|
||||
<link rel="stylesheet" type="text/css" href="/navbar.css">
|
||||
<link rel="stylesheet" type="text/css" href="/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="/accessibility.css">
|
||||
<link rel="stylesheet" type="text/css" href="/site.css">
|
||||
<link rel="stylesheet" type="text/css" href="/window.css">
|
||||
<link rel="canonical" href="https://synth.download/">
|
||||
<link rel="me" href="https://booping.synth.download/@sneexy">
|
||||
<link rel="me" href="https://beeping.synth.download/@sneexy">
|
||||
|
|
@ -119,6 +124,10 @@
|
|||
<input type="checkbox" id="disable-bg" name="disable-bg" />
|
||||
<label for="disable-bg">Disable background gradient</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="checkbox" id="disable-window-animations" name="window-animations" />
|
||||
<label for="disable-window-animations">Disable window animations</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="checkbox" id="disable-focus-animations" name="focus-animations" />
|
||||
<label for="disable-focus-animations">Disable focus animations</label><br>
|
||||
|
|
|
|||
|
|
@ -6,13 +6,18 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>me @ Synth Download!</title>
|
||||
<link rel="icon" type="image/png" href="/assets/favicon.png">
|
||||
<link rel="stylesheet" type="text/css" href="/accessibility.css">
|
||||
<link rel="stylesheet" type="text/css" href="/animations.css">
|
||||
<link rel="stylesheet" type="text/css" href="/at-media.css">
|
||||
<link rel="stylesheet" type="text/css" href="/colors-ruben.css">
|
||||
<link rel="stylesheet" type="text/css" href="/colors.css">
|
||||
<link rel="stylesheet" type="text/css" href="/ruben.css">
|
||||
<link rel="stylesheet" type="text/css" href="/font.css">
|
||||
<link rel="stylesheet" type="text/css" href="/tabler.css">
|
||||
<link rel="stylesheet" type="text/css" href="/tabler.css">
|
||||
<link rel="stylesheet" type="text/css" href="/footer.css">
|
||||
<link rel="stylesheet" type="text/css" href="/icons.css">
|
||||
<link rel="stylesheet" type="text/css" href="/navbar.css">
|
||||
<link rel="stylesheet" type="text/css" href="/page-me.css">
|
||||
<link rel="stylesheet" type="text/css" href="/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="/home.css">
|
||||
<link rel="stylesheet" type="text/css" href="/window.css">
|
||||
<link rel="canonical" href="https://synth.download/">
|
||||
<link rel="me" href="https://booping.synth.download/@sneexy">
|
||||
<link rel="me" href="https://beeping.synth.download/@sneexy">
|
||||
|
|
@ -119,6 +124,10 @@
|
|||
<input type="checkbox" id="disable-bg" name="disable-bg" />
|
||||
<label for="disable-bg">Disable background gradient</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="checkbox" id="disable-window-animations" name="window-animations" />
|
||||
<label for="disable-window-animations">Disable window animations</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="checkbox" id="disable-focus-animations" name="focus-animations" />
|
||||
<label for="disable-focus-animations">Disable focus animations</label><br>
|
||||
|
|
|
|||
|
|
@ -6,11 +6,17 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>ruben lore @ Synth Download!</title>
|
||||
<link rel="icon" type="image/png" href="/assets/favicon.png">
|
||||
<link rel="stylesheet" type="text/css" href="/accessibility.css">
|
||||
<link rel="stylesheet" type="text/css" href="/animations.css">
|
||||
<link rel="stylesheet" type="text/css" href="/at-media.css">
|
||||
<link rel="stylesheet" type="text/css" href="/colors-ruben.css">
|
||||
<link rel="stylesheet" type="text/css" href="/colors.css">
|
||||
<link rel="stylesheet" type="text/css" href="/ruben.css">
|
||||
<link rel="stylesheet" type="text/css" href="/font.css">
|
||||
<link rel="stylesheet" type="text/css" href="/tabler.css">
|
||||
<link rel="stylesheet" type="text/css" href="/footer.css">
|
||||
<link rel="stylesheet" type="text/css" href="/icons.css">
|
||||
<link rel="stylesheet" type="text/css" href="/navbar.css">
|
||||
<link rel="stylesheet" type="text/css" href="/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="/window.css">
|
||||
<link rel="canonical" href="https://synth.download/">
|
||||
<link rel="me" href="https://booping.synth.download/@sneexy">
|
||||
<link rel="me" href="https://beeping.synth.download/@sneexy">
|
||||
|
|
@ -116,6 +122,10 @@
|
|||
<input type="checkbox" id="disable-bg" name="disable-bg" />
|
||||
<label for="disable-bg">Disable background gradient</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="checkbox" id="disable-window-animations" name="window-animations" />
|
||||
<label for="disable-window-animations">Disable window animations</label><br>
|
||||
</span>
|
||||
<span>
|
||||
<input type="checkbox" id="disable-focus-animations" name="focus-animations" />
|
||||
<label for="disable-focus-animations">Disable focus animations</label><br>
|
||||
|
|
|
|||
148
navbar.css
Normal file
148
navbar.css
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
/* ---------------------------------------------------------------
|
||||
- top navbar styling, attempts to look like a window manager bar -
|
||||
--------------------------------------------------------------- */
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
max-height: 1.8em !important;
|
||||
max-width: 100%;
|
||||
min-height: 1.8em !important;
|
||||
min-width: 100%;
|
||||
position: fixed;
|
||||
top: 0 !important;
|
||||
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;
|
||||
|
||||
transition: .2s background-color;
|
||||
|
||||
.nav-base {
|
||||
padding: 0px .2em !important;
|
||||
max-width: fit-content;
|
||||
align-content: center;
|
||||
}
|
||||
.nav-left {
|
||||
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);
|
||||
|
||||
svg {
|
||||
color: var(--background) !important;
|
||||
}
|
||||
}
|
||||
.nav-baselink-mobile {
|
||||
display: none;
|
||||
}
|
||||
.nav-links {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
}
|
||||
.nav-links a {
|
||||
color: var(--foreground);
|
||||
text-decoration: unset !important;
|
||||
}
|
||||
.nav-links a:hover {
|
||||
color: var(--accent);
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
margin-left: auto !important;
|
||||
padding: 0px .4rem !important;
|
||||
border-bottom-left-radius: 1rem;
|
||||
height: 2rem;
|
||||
}
|
||||
.nav-accessibility {
|
||||
background-color: var(--accent);
|
||||
color: var(--background);
|
||||
position: absolute;
|
||||
right: 7.7rem;
|
||||
span {
|
||||
transform: scale(1.3) translateY(-.05rem) translateX(.2rem);
|
||||
}
|
||||
|
||||
ul {
|
||||
background-color: var(--background);
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-bottom: var(--accent) solid .15rem;
|
||||
border-left: var(--accent) solid .15rem;
|
||||
max-height: 27rem;
|
||||
min-height: 27rem;
|
||||
min-width: 17rem;
|
||||
overflow: scroll;
|
||||
position: absolute;
|
||||
right: -7.6rem;
|
||||
top: .94rem;
|
||||
width: auto;
|
||||
|
||||
li {
|
||||
color: var(--foreground);
|
||||
list-style-type: none;
|
||||
margin-left: -2rem;
|
||||
padding: .4rem;
|
||||
|
||||
span {
|
||||
padding: .1rem 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
a, p {
|
||||
margin: unset !important;
|
||||
}
|
||||
small {
|
||||
opacity: .7;
|
||||
}
|
||||
svg {
|
||||
color: var(--foreground) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar:hover {
|
||||
transition: .2s background-color;
|
||||
background-color: var(--accent);
|
||||
|
||||
.nav-accessibility {
|
||||
border-left: .2rem solid var(--background);
|
||||
}
|
||||
}
|
||||
|
|
@ -4,6 +4,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
const themeInputs = document.querySelectorAll('input[name="theme-setting"]');
|
||||
const uncapitalizationCheckbox = document.getElementById('uncapitalization');
|
||||
const disableBgCheckbox = document.getElementById('disable-bg');
|
||||
const disableWindowAnimationsCheckbox = document.getElementById('disable-window-animations');
|
||||
const disableFocusAnimationsCheckbox = document.getElementById('disable-focus-animations');
|
||||
const disableAlttextCheckbox = document.getElementById('disable-alttext');
|
||||
|
||||
|
|
@ -25,6 +26,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
|
||||
uncapitalizationCheckbox.addEventListener('change', saveSettings);
|
||||
disableBgCheckbox.addEventListener('change', saveSettings);
|
||||
disableWindowAnimationsCheckbox.addEventListener('change', saveSettings);
|
||||
disableFocusAnimationsCheckbox.addEventListener('change', saveSettings);
|
||||
disableAlttextCheckbox.addEventListener('change', saveSettings);
|
||||
|
||||
|
|
@ -41,6 +43,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
// save toggle states
|
||||
localStorage.setItem('accessibility-uncapitalization', uncapitalizationCheckbox.checked);
|
||||
localStorage.setItem('accessibility-disable-bg', disableBgCheckbox.checked);
|
||||
localStorage.setItem('accessibility-disable-window-animations', disableWindowAnimationsCheckbox.checked);
|
||||
localStorage.setItem('accessibility-disable-focus-animations', disableFocusAnimationsCheckbox.checked);
|
||||
localStorage.setItem('accessibility-disable-alttext', disableAlttextCheckbox.checked);
|
||||
}
|
||||
|
|
@ -69,6 +72,10 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
if (localStorage.getItem('accessibility-disable-bg') === 'true') {
|
||||
disableBgCheckbox.checked = true;
|
||||
}
|
||||
|
||||
if (localStorage.getItem('accessibility-disable-window-animations') === 'true') {
|
||||
disableWindowAnimationsCheckbox.checked = true;
|
||||
}
|
||||
|
||||
if (localStorage.getItem('accessibility-disable-focus-animations') === 'true') {
|
||||
disableFocusAnimationsCheckbox.checked = true;
|
||||
|
|
|
|||
743
style.css
743
style.css
|
|
@ -1,83 +1,4 @@
|
|||
/* style.css - general, reusable styling */
|
||||
|
||||
/* ---------------------------------
|
||||
- choosable accessibility settings -
|
||||
---------------------------------- */
|
||||
|
||||
/* - font settings - */
|
||||
|
||||
/* jetbrains mono */
|
||||
:root:has(#font-jbm:checked) {
|
||||
--font-family: 'JetBrains Mono', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
|
||||
|
||||
.navbar .nav-base.nav-right.nav-systray span {
|
||||
margin: 0px -.1rem;
|
||||
}
|
||||
}
|
||||
/* atkinson hyperlegible next */
|
||||
:root:has(#font-ahn:checked) {
|
||||
--font-family: 'Atkinson Hyperlegible Next', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
|
||||
}
|
||||
/* inter */
|
||||
:root:has(#font-inter:checked) {
|
||||
--font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
|
||||
}
|
||||
|
||||
/* (browser) sans serif */
|
||||
:root:has(#font-sans-serif:checked) {
|
||||
--font-family: sans-serif, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui;
|
||||
}
|
||||
|
||||
/* (browser) serif */
|
||||
:root:has(#font-serif:checked) {
|
||||
--font-family: serif, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
|
||||
}
|
||||
|
||||
/* (browser) monospace */
|
||||
:root:has(#font-monospace:checked) {
|
||||
--font-family: monospace, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
|
||||
}
|
||||
|
||||
/* - misc - */
|
||||
|
||||
/* disable forced uncapitalization */
|
||||
:root:has(#uncapitalization:checked) {
|
||||
body {
|
||||
text-transform: none !important;
|
||||
}
|
||||
}
|
||||
/* disable background gradient */
|
||||
:root:has(#disable-bg:checked) {
|
||||
body {
|
||||
background: var(--background) !important;
|
||||
}
|
||||
}
|
||||
/* disable focus animations */
|
||||
:root:has(#disable-focus-animations:checked) {
|
||||
.window {
|
||||
transition: unset !important;
|
||||
}
|
||||
.window:hover {
|
||||
transition: unset !important;
|
||||
animation: unset !important;
|
||||
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
transition: unset !important;
|
||||
}
|
||||
.navbar:hover {
|
||||
transition: unset !important;
|
||||
animation: unset !important;
|
||||
background-color: color-mix(in srgb, var(--accent) 30%, transparent) !important;
|
||||
}
|
||||
}
|
||||
/* disable custom alt text popup */
|
||||
:root:has(#disable-alttext:checked) {
|
||||
.alt-popup {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
/* style.css - For The Absolute Basics:tm: */
|
||||
|
||||
/* ----------------------------------
|
||||
- background wallpaper, global font -
|
||||
|
|
@ -92,311 +13,7 @@ body {
|
|||
margin: unset !important; /* idk why it does that */
|
||||
}
|
||||
|
||||
/* ---------------
|
||||
- window styling -
|
||||
---------------- */
|
||||
|
||||
.window {
|
||||
summary {
|
||||
display: inline-flex;
|
||||
min-width: 100%;
|
||||
background-color: color-mix(in srgb, var(--accent) 20%, var(--background));
|
||||
opacity: .8;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
overflow: clip;
|
||||
transition: .2s opacity;
|
||||
|
||||
div:first-child {
|
||||
background: color-mix(in srgb, var(--accent) 40%, transparent);
|
||||
padding: .4rem .4rem .2rem 1rem;
|
||||
border-right: .2rem solid var(--accent);
|
||||
border-bottom-right-radius: 1rem;
|
||||
|
||||
span {
|
||||
background-color: var(--foreground);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
padding: .3rem 0rem .3rem .5rem;
|
||||
text-decoration: none;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
[class^="tabler--"] {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
div:nth-child(3) {
|
||||
margin-left: auto !important;
|
||||
padding: .2rem .5rem .2rem 0rem;
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background-color: var(--foreground);
|
||||
}
|
||||
|
||||
/* maximize button (which does nothing) */
|
||||
span:nth-child(2) {
|
||||
opacity: .6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
/* close button */
|
||||
div:nth-child(4) {
|
||||
background: color-mix(in srgb, var(--accent) 40%, transparent);
|
||||
padding: .4rem .5rem .2rem .6rem;
|
||||
border-left: .2rem solid var(--accent);
|
||||
border-bottom-left-radius: 1rem;
|
||||
color: var(--foreground);
|
||||
|
||||
transition: background .2s;
|
||||
transition: background-color .2s;
|
||||
}
|
||||
|
||||
/* close button (animated on hover) */
|
||||
div:nth-child(4):hover {
|
||||
background: var(--red);
|
||||
|
||||
transition: background .2s;
|
||||
|
||||
span {
|
||||
background-color: var(--background);
|
||||
transition: background-color .2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section, article {
|
||||
padding: .8rem;
|
||||
}
|
||||
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
|
||||
border: var(--accent) solid .15rem;
|
||||
border-radius: .6rem;
|
||||
|
||||
max-width: 60em;
|
||||
overflow: clip;
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 2em;
|
||||
|
||||
transition: .2s box-shadow;
|
||||
|
||||
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
|
||||
}
|
||||
|
||||
/* window styling when hovered */
|
||||
.window:hover {
|
||||
summary {
|
||||
opacity: 1;
|
||||
transition: .2s opacity;
|
||||
}
|
||||
}
|
||||
|
||||
/* window styling when open (default state) */
|
||||
.window[open] {
|
||||
summary {
|
||||
opacity: 1;
|
||||
border-bottom: .1rem solid var(--accent);
|
||||
|
||||
transition: .2s opacity;
|
||||
}
|
||||
|
||||
border-radius: 2rem .6rem 2rem .6rem;
|
||||
}
|
||||
|
||||
.window:hover {
|
||||
box-shadow: var(--accent) 0px 0px 0px .3rem;
|
||||
|
||||
transition: .2s box-shadow;
|
||||
}
|
||||
|
||||
/* window when its the first one on the page */
|
||||
.window:nth-child(2) {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
|
||||
/* ------------------
|
||||
- the footer window -
|
||||
------------------ */
|
||||
|
||||
footer {
|
||||
max-width: 30em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
details > summary > a {
|
||||
padding: .3rem 0rem .3rem 1rem !important;
|
||||
}
|
||||
|
||||
section, article {
|
||||
padding: 1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------
|
||||
- top navbar styling, attempts to look like a window manager bar -
|
||||
--------------------------------------------------------------- */
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: fixed;
|
||||
top: 0 !important;
|
||||
z-index: 10;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
min-height: 1.8em !important;
|
||||
max-height: 1.8em !important;
|
||||
|
||||
align-content: center;
|
||||
vertical-align: middle;
|
||||
background-color: color-mix(in srgb, var(--accent) 30%, transparent);
|
||||
border-bottom: .2rem solid var(--accent);
|
||||
color: var(--foreground);
|
||||
|
||||
transition: .2s background-color;
|
||||
|
||||
.nav-base {
|
||||
padding: 0px .2em !important;
|
||||
max-width: fit-content;
|
||||
align-content: center;
|
||||
}
|
||||
.nav-left {
|
||||
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);
|
||||
|
||||
svg {
|
||||
color: var(--background) !important;
|
||||
}
|
||||
}
|
||||
.nav-baselink-mobile {
|
||||
display: none;
|
||||
}
|
||||
.nav-links {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
}
|
||||
.nav-links a {
|
||||
color: var(--foreground);
|
||||
text-decoration: unset !important;
|
||||
}
|
||||
.nav-links a:hover {
|
||||
color: var(--accent);
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
margin-left: auto !important;
|
||||
padding: 0px .4rem !important;
|
||||
border-bottom-left-radius: 1rem;
|
||||
height: 2rem;
|
||||
}
|
||||
.nav-accessibility {
|
||||
background-color: var(--accent);
|
||||
color: var(--background);
|
||||
position: absolute;
|
||||
right: 7.7rem;
|
||||
span {
|
||||
transform: scale(1.3) translateY(-.05rem) translateX(.2rem);
|
||||
}
|
||||
|
||||
ul {
|
||||
background-color: var(--background);
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-bottom: var(--accent) solid .15rem;
|
||||
border-left: var(--accent) solid .15rem;
|
||||
max-height: 27rem;
|
||||
min-height: 27rem;
|
||||
min-width: 17rem;
|
||||
overflow: scroll;
|
||||
position: absolute;
|
||||
right: -7.6rem;
|
||||
top: .94rem;
|
||||
width: auto;
|
||||
|
||||
li {
|
||||
color: var(--foreground);
|
||||
list-style-type: none;
|
||||
margin-left: -2rem;
|
||||
padding: .4rem;
|
||||
|
||||
span {
|
||||
padding: .1rem 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
a, p {
|
||||
margin: unset !important;
|
||||
}
|
||||
small {
|
||||
opacity: .7;
|
||||
}
|
||||
svg {
|
||||
color: var(--foreground) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar:hover {
|
||||
transition: .2s background-color;
|
||||
background-color: var(--accent);
|
||||
|
||||
.nav-accessibility {
|
||||
border-left: .2rem solid var(--background);
|
||||
}
|
||||
}
|
||||
|
||||
/* text formatting and config stuff
|
||||
font-family and <p> is set under .terminal */
|
||||
/* text formatting and config stuff */
|
||||
|
||||
/* headings */
|
||||
h1, h1 a {
|
||||
|
|
@ -510,8 +127,12 @@ h1 a:hover {
|
|||
min-width: max-content;
|
||||
}
|
||||
|
||||
/* summary styling */
|
||||
/* audio */
|
||||
audio {
|
||||
border-radius: 3rem;
|
||||
}
|
||||
|
||||
/* summary styling */
|
||||
summary {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -543,7 +164,10 @@ details.styled[open] {
|
|||
}
|
||||
}
|
||||
|
||||
/* alt text popup */
|
||||
/* ---------------
|
||||
- alt text popup -
|
||||
--------------- */
|
||||
|
||||
.alt-popup {
|
||||
position: fixed;
|
||||
text-transform: none !important;
|
||||
|
|
@ -559,347 +183,4 @@ details.styled[open] {
|
|||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s;
|
||||
}
|
||||
|
||||
/* audio */
|
||||
audio {
|
||||
border-radius: 3rem;
|
||||
}
|
||||
|
||||
/* footer/credits */
|
||||
|
||||
footer {
|
||||
.fediring {
|
||||
a {
|
||||
display: inline-grid;
|
||||
font-size: 1.5rem;
|
||||
color: var(--green);
|
||||
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 {
|
||||
text-align: center;
|
||||
font-size: 0.938rem;
|
||||
margin: .2em 0px .2em;
|
||||
text-decoration: none;
|
||||
}
|
||||
img {
|
||||
padding-top: 18px;
|
||||
max-width: 30%;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
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;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
align-content: center;
|
||||
border-radius: .5rem;
|
||||
|
||||
span {
|
||||
transform: scale(1.58);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* various reusable animations */
|
||||
|
||||
@keyframes blink {
|
||||
0% { opacity: 0; }
|
||||
50% { opacity: 1.0; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes blink-navbar-text {
|
||||
0% { opacity: 0; }
|
||||
50% { opacity: .8; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes spin-y {
|
||||
/* values: 128px, 256px, 348px, 396px*/
|
||||
0% { transform: perspective(396px) rotateY(0); }
|
||||
100% { transform: perspective(396px) rotateY(360deg); }
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
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% }
|
||||
}
|
||||
|
||||
@-moz-keyframes blink {
|
||||
0% { opacity: 0; }
|
||||
50% { opacity: 1.0; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@-moz-keyframes blink-navbar-text {
|
||||
0% { opacity: 0; }
|
||||
50% { opacity: .8; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@-moz-keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@-moz-keyframes spin-y {
|
||||
/* values: 128px, 256px, 348px, 396px*/
|
||||
0% { transform: perspective(396px) rotateY(0); }
|
||||
100% { transform: perspective(396px) rotateY(360deg); }
|
||||
}
|
||||
|
||||
@-moz-keyframes rainbow {
|
||||
0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
|
||||
100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
|
||||
}
|
||||
|
||||
@-moz-keyframes bg-gradient {
|
||||
0% { background-position: 0% 27% }
|
||||
50% { background-position: 100% 74% }
|
||||
100% { background-position: 0% 27% }
|
||||
}
|
||||
|
||||
@-webkit-keyframes blink {
|
||||
0% { opacity: 0; }
|
||||
50% { opacity: 1.0; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes blink-navbar-text {
|
||||
0% { opacity: 0; }
|
||||
50% { opacity: .8; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin-y {
|
||||
/* values: 128px, 256px, 348px, 396px*/
|
||||
0% { transform: perspective(396px) rotateY(0); }
|
||||
100% { transform: perspective(396px) rotateY(360deg); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes rainbow {
|
||||
0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
|
||||
100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes bg-gradient {
|
||||
0% { background-position: 0% 27% }
|
||||
50% { background-position: 100% 74% }
|
||||
100% { background-position: 0% 27% }
|
||||
}
|
||||
|
||||
/* disable certain animations if user has animations disabled on their system */
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
body {
|
||||
background: var(--background) !important;
|
||||
animation: unset !important;
|
||||
-moz-animation: unset !important;
|
||||
-webkit-animation: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
.nav-baselink {
|
||||
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;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
margin-left: -2em;
|
||||
padding-bottom: unset !important;
|
||||
span {
|
||||
padding-right: .4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.nav-links {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
height: 1.4rem;
|
||||
}
|
||||
.nav-accessibility {
|
||||
right: 7.6rem;
|
||||
min-width: 1.6rem;
|
||||
span {
|
||||
transform: scale(1.3) translateY(-.05rem) translateX(.2rem);
|
||||
}
|
||||
}
|
||||
.nav-systray {
|
||||
padding: .27em .5em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.window:not(#footer) {
|
||||
summary {
|
||||
div:first-child {
|
||||
padding: .3rem .4rem .3rem .4rem;
|
||||
}
|
||||
|
||||
div:nth-child(3) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
div:nth-child(4) {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
/* window when its the first one on the page */
|
||||
.window:nth-child(2) {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 540px) {
|
||||
details#footer.window {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
187
window.css
Normal file
187
window.css
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
/* ---------------
|
||||
- window styling -
|
||||
---------------- */
|
||||
|
||||
.window {
|
||||
summary {
|
||||
display: inline-flex;
|
||||
min-width: 100%;
|
||||
background-color: color-mix(in srgb, var(--accent) 20%, var(--background));
|
||||
opacity: .8;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
overflow: clip;
|
||||
transition: .2s opacity;
|
||||
|
||||
div:first-child {
|
||||
background: color-mix(in srgb, var(--accent) 40%, transparent);
|
||||
padding: .4rem .4rem .2rem 1rem;
|
||||
border-right: .2rem solid var(--accent);
|
||||
border-bottom-right-radius: 1rem;
|
||||
|
||||
span {
|
||||
background-color: var(--foreground);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
padding: .3rem 0rem .3rem .5rem;
|
||||
text-decoration: none;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
[class^="tabler--"] {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
div:nth-child(3) {
|
||||
margin-left: auto !important;
|
||||
padding: .2rem .5rem .2rem 0rem;
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background-color: var(--foreground);
|
||||
}
|
||||
|
||||
/* maximize button (which does nothing) */
|
||||
span:nth-child(2) {
|
||||
opacity: .6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
/* close button */
|
||||
div:nth-child(4) {
|
||||
background: color-mix(in srgb, var(--accent) 40%, transparent);
|
||||
padding: .4rem .5rem .2rem .6rem;
|
||||
border-left: .2rem solid var(--accent);
|
||||
border-bottom-left-radius: 1rem;
|
||||
color: var(--foreground);
|
||||
|
||||
transition: background .2s;
|
||||
transition: background-color .2s;
|
||||
}
|
||||
|
||||
/* close button (animated on hover) */
|
||||
div:nth-child(4):hover {
|
||||
background: var(--red);
|
||||
|
||||
transition: background .2s;
|
||||
|
||||
span {
|
||||
background-color: var(--background);
|
||||
transition: background-color .2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section, article {
|
||||
padding: .8rem;
|
||||
}
|
||||
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
|
||||
border: var(--accent) solid .15rem;
|
||||
border-radius: .6rem;
|
||||
|
||||
max-width: 60em;
|
||||
overflow: clip;
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 2em;
|
||||
|
||||
transition: .2s box-shadow;
|
||||
animation-fill-mode: backwards;
|
||||
|
||||
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
|
||||
}
|
||||
|
||||
/* window styling when hovered */
|
||||
.window:hover {
|
||||
summary {
|
||||
opacity: 1;
|
||||
transition: .2s opacity;
|
||||
}
|
||||
}
|
||||
|
||||
/* window styling when open (default state) */
|
||||
.window[open] {
|
||||
summary {
|
||||
opacity: 1;
|
||||
border-bottom: .1rem solid var(--accent);
|
||||
|
||||
transition: .2s opacity;
|
||||
}
|
||||
|
||||
border-radius: 2rem .6rem 2rem .6rem;
|
||||
}
|
||||
|
||||
.window:hover {
|
||||
box-shadow: var(--accent) 0px 0px 0px .3rem;
|
||||
|
||||
transition: .2s box-shadow;
|
||||
}
|
||||
|
||||
/* window when its the first one on the page */
|
||||
.window:nth-child(2) {
|
||||
margin-top: 5rem;
|
||||
|
||||
animation: .3s ease-out .2s 1 window-appear;
|
||||
animation-fill-mode: backwards;
|
||||
}
|
||||
|
||||
/* rest of the windows if they exist, to finish the rest of the animations */
|
||||
.window:nth-child(3) {
|
||||
animation: .3s ease-out .4s 1 window-appear;
|
||||
animation-fill-mode: backwards;
|
||||
}
|
||||
|
||||
.window:nth-child(4) {
|
||||
animation: .3s ease-out .6s 1 window-appear;
|
||||
animation-fill-mode: backwards;
|
||||
}
|
||||
|
||||
.window:nth-child(5) {
|
||||
animation: .3s ease-out .8s 1 window-appear;
|
||||
animation-fill-mode: backwards;
|
||||
}
|
||||
|
||||
.window:nth-child(6) {
|
||||
animation: .3s ease-out 1s 1 window-appear;
|
||||
animation-fill-mode: backwards;
|
||||
}
|
||||
|
||||
.window:nth-child(7) {
|
||||
animation: .3s ease-out 1.2s 1 window-appear;
|
||||
animation-fill-mode: backwards;
|
||||
}
|
||||
|
||||
.window:nth-child(8) {
|
||||
animation: .3s ease-out 1.4s 1 window-appear;
|
||||
animation-fill-mode: backwards;
|
||||
}
|
||||
|
||||
/* ------------------
|
||||
- the footer window -
|
||||
------------------ */
|
||||
|
||||
footer {
|
||||
max-width: 30em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
details > summary > a {
|
||||
padding: .3rem 0rem .3rem 1rem !important;
|
||||
}
|
||||
|
||||
section, article {
|
||||
padding: 1rem !important;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue