diff --git a/navbar.css b/navbar.css
new file mode 100644
index 0000000..0329001
--- /dev/null
+++ b/navbar.css
@@ -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);
+ }
+}
\ No newline at end of file
diff --git a/blog.css b/page-blog.css
similarity index 100%
rename from blog.css
rename to page-blog.css
diff --git a/home.css b/page-me.css
similarity index 100%
rename from home.css
rename to page-me.css
diff --git a/settings.js b/settings.js
index 475e8fb..6afdde4 100644
--- a/settings.js
+++ b/settings.js
@@ -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;
diff --git a/style.css b/style.css
index b004481..1209c41 100644
--- a/style.css
+++ b/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 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;
- }
-}
+}
\ No newline at end of file
diff --git a/window.css b/window.css
new file mode 100644
index 0000000..2218d2f
--- /dev/null
+++ b/window.css
@@ -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;
+ }
+}
\ No newline at end of file