update synth.download assets, clean up css, a bit more 11ty configuration
This commit is contained in:
parent
dc38acd93b
commit
79f0cc7475
66 changed files with 8543 additions and 2868 deletions
|
|
@ -1,84 +0,0 @@
|
|||
/* ---------------------------------
|
||||
- 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-animations:checked) {
|
||||
.window {
|
||||
animation: unset !important;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
/* 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% }
|
||||
}
|
||||
|
|
@ -1,161 +0,0 @@
|
|||
/* ---------------------------------------------------------------
|
||||
- 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;
|
||||
}
|
||||
}
|
||||
1032
styles/base.css
Normal file
1032
styles/base.css
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -1,4 +1,17 @@
|
|||
/* font config, JetBrains Mono */
|
||||
/* ╭───────────────────────╮
|
||||
/ │ __ _ │
|
||||
/ │ / _| ___ _ __ | |_ │
|
||||
/ │ | |_ / _ \| '_ \| __| │
|
||||
/ │ | _| (_) | | | | |_ │
|
||||
/ │ |_| \___/|_| |_|\__| │
|
||||
/ ╰───────────────────────╯
|
||||
/ font - font configuration, stuff, whatever */
|
||||
|
||||
/* --------------------------------------------------------------------
|
||||
=======================================================================
|
||||
-------------------------------------------------------------------- */
|
||||
|
||||
/* - JetBrains Mono - */
|
||||
|
||||
@font-face {
|
||||
font-family: "JetBrains Mono";
|
||||
|
|
|
|||
|
|
@ -1,81 +0,0 @@
|
|||
/* 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
/* about me section/first terminal */
|
||||
|
||||
#site > section {
|
||||
#logo {
|
||||
width: 40rem;
|
||||
height: auto;
|
||||
line-break: strict;
|
||||
margin-bottom: .5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: -1rem;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
ul {
|
||||
text-align: left;
|
||||
|
||||
li a {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
li a:hover {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
}
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* buttons section !! */
|
||||
|
||||
.buttons {
|
||||
text-align: center;
|
||||
font-size: 0px;
|
||||
img {
|
||||
margin-right: 5px;
|
||||
image-rendering: auto;
|
||||
image-rendering: crisp-edges;
|
||||
image-rendering: pixelated;
|
||||
transition: transform .2s;
|
||||
}
|
||||
|
||||
img:hover {
|
||||
transform: scale(2);
|
||||
}
|
||||
}
|
||||
|
||||
/* modify widths and spacing depending on the size of the display */
|
||||
|
||||
@media screen and (max-width: 59em) {
|
||||
#site > section {
|
||||
#logo {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,148 +0,0 @@
|
|||
/* ---------------------------------------------------------------
|
||||
- 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);
|
||||
}
|
||||
}
|
||||
186
styles/style.css
186
styles/style.css
|
|
@ -1,186 +0,0 @@
|
|||
/* style.css - For The Absolute Basics:tm: */
|
||||
|
||||
/* ----------------------------------
|
||||
- background wallpaper, global font -
|
||||
---------------------------------- */
|
||||
|
||||
body {
|
||||
background: linear-gradient(var(--background), color-mix(in srgb, var(--accent) 25%, var(--background)));
|
||||
min-height: calc(100vh - 4rem);
|
||||
font-family: var(--font-family);
|
||||
font-size: 1.125rem;
|
||||
text-transform: lowercase;
|
||||
margin: unset !important; /* idk why it does that */
|
||||
}
|
||||
|
||||
/* text formatting and config stuff */
|
||||
|
||||
/* headings */
|
||||
h1, h1 a {
|
||||
color: var(--foreground);
|
||||
font-size: 2rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
color: var(--foreground);
|
||||
font-size: 2rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h3, h3 a {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
/* text */
|
||||
p, li, button {
|
||||
font-size: 1.125rem;
|
||||
|
||||
[class^="tabler--"] {
|
||||
transform: scale(1.13);
|
||||
}
|
||||
}
|
||||
|
||||
/* links should look good i think */
|
||||
a {
|
||||
font-size: 1.125rem;
|
||||
color: var(--accent);
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
transition: 0.2s;
|
||||
text-shadow: 0em 0em 0.25em var(--accent);
|
||||
}
|
||||
|
||||
/* smol text */
|
||||
small, small a {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* lists need some styling */
|
||||
li {
|
||||
margin-left: -1em;
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
|
||||
/* gay ass text */
|
||||
.rainbow {
|
||||
animation: 2s linear infinite rainbow;
|
||||
-webkit-animation: 2s linear infinite rainbow;
|
||||
-moz-animation: 2s linear infinite rainbow;
|
||||
}
|
||||
|
||||
/* heading 1 is also clickable */
|
||||
h1 a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* the tabler icons svgs styling */
|
||||
.tabler-icon, .icon .icon-tabler {
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
padding-bottom: .2rem;
|
||||
vertical-align: middle !important;
|
||||
color: var(--foreground) !important;
|
||||
}
|
||||
|
||||
/* code (enforced monospace) */
|
||||
.code {
|
||||
font-family: 'JetBrains Mono', monospace, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif !important;
|
||||
}
|
||||
|
||||
/* caption styled text */
|
||||
.caption {
|
||||
font-size: small;
|
||||
opacity: .8;
|
||||
|
||||
.section {
|
||||
font-size: smaller;
|
||||
opacity: .9;
|
||||
}
|
||||
}
|
||||
|
||||
/* the dot */
|
||||
.dot {
|
||||
display: inline-flex;
|
||||
width: .4rem;
|
||||
height: .4rem;
|
||||
background-color: var(--foreground);
|
||||
border-radius: 100%;
|
||||
vertical-align: middle;
|
||||
margin-left: .2rem;
|
||||
margin-right: .2rem;
|
||||
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;
|
||||
}
|
||||
|
||||
/* audio */
|
||||
audio {
|
||||
border-radius: 3rem;
|
||||
}
|
||||
|
||||
/* summary styling */
|
||||
summary {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* -----------------------
|
||||
- styled summary styling -
|
||||
----------------------- */
|
||||
|
||||
details.styled {
|
||||
|
||||
summary {
|
||||
max-width: 30%;
|
||||
font-size: 1.5rem;
|
||||
padding: .5rem;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
details.styled[open] {
|
||||
background-color: color-mix(in srgb, var(--background) 90%, var(--accent));
|
||||
|
||||
summary {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: .5rem;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------
|
||||
- alt text popup -
|
||||
--------------- */
|
||||
|
||||
.alt-popup {
|
||||
position: fixed;
|
||||
text-transform: none !important;
|
||||
background-color: color-mix(in srgb, var(--background) 85%, transparent);
|
||||
backdrop-filter: blur(.5rem);
|
||||
color: var(--foreground);
|
||||
padding: .5rem;
|
||||
border: solid .01rem var(--accent);
|
||||
border-radius: .5rem;
|
||||
font-size: 1rem;
|
||||
max-width: 30rem;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s;
|
||||
}
|
||||
|
|
@ -1,187 +0,0 @@
|
|||
/* ---------------
|
||||
- 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