From 2c11c4d07d49c3242a7491cd1c1387c605aa611d Mon Sep 17 00:00:00 2001 From: Ruben Date: Wed, 9 Apr 2025 22:23:12 -0500 Subject: [PATCH] split up css files and add window animations --- accessibility.css | 90 ++++ animations.css | 17 + at-media.css | 161 ++++++++ blog/index.html | 2 +- ruben.css => colors-ruben.css | 0 donate/index.html | 13 +- footer.css | 81 ++++ tabler.css => icons.css | 0 site.css => index.css | 0 index.html | 15 +- me/index.html | 17 +- me/ruben/index.html | 14 +- navbar.css | 148 +++++++ blog.css => page-blog.css | 0 home.css => page-me.css | 0 settings.js | 7 + style.css | 743 +--------------------------------- window.css | 187 +++++++++ 18 files changed, 752 insertions(+), 743 deletions(-) create mode 100644 accessibility.css create mode 100644 animations.css create mode 100644 at-media.css rename ruben.css => colors-ruben.css (100%) create mode 100644 footer.css rename tabler.css => icons.css (100%) rename site.css => index.css (100%) create mode 100644 navbar.css rename blog.css => page-blog.css (100%) rename home.css => page-me.css (100%) create mode 100644 window.css diff --git a/accessibility.css b/accessibility.css new file mode 100644 index 0000000..6d71394 --- /dev/null +++ b/accessibility.css @@ -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; + } +} \ No newline at end of file diff --git a/animations.css b/animations.css new file mode 100644 index 0000000..5591adf --- /dev/null +++ b/animations.css @@ -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% } +} \ No newline at end of file diff --git a/at-media.css b/at-media.css new file mode 100644 index 0000000..e519f08 --- /dev/null +++ b/at-media.css @@ -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; + } +} \ No newline at end of file diff --git a/blog/index.html b/blog/index.html index 00ee4c7..c01aff6 100644 --- a/blog/index.html +++ b/blog/index.html @@ -8,7 +8,7 @@ - + diff --git a/ruben.css b/colors-ruben.css similarity index 100% rename from ruben.css rename to colors-ruben.css diff --git a/donate/index.html b/donate/index.html index 2d00703..1f37dd3 100644 --- a/donate/index.html +++ b/donate/index.html @@ -6,11 +6,16 @@ donate @ Synth Download! + + + - + + + - + @@ -117,6 +122,10 @@
+ + +
+
diff --git a/footer.css b/footer.css new file mode 100644 index 0000000..1948088 --- /dev/null +++ b/footer.css @@ -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); + } + } + } +} \ No newline at end of file diff --git a/tabler.css b/icons.css similarity index 100% rename from tabler.css rename to icons.css diff --git a/site.css b/index.css similarity index 100% rename from site.css rename to index.css diff --git a/index.html b/index.html index b4f13ea..a8e09fd 100644 --- a/index.html +++ b/index.html @@ -6,12 +6,17 @@ Synth Download! + + + - + + + + - - + @@ -119,6 +124,10 @@
+ + +
+
diff --git a/me/index.html b/me/index.html index 333d386..04cef89 100644 --- a/me/index.html +++ b/me/index.html @@ -6,13 +6,18 @@ me @ Synth Download! + + + + - - - + + + + - + @@ -119,6 +124,10 @@
+ + +
+
diff --git a/me/ruben/index.html b/me/ruben/index.html index 7fe4c8b..27232c4 100644 --- a/me/ruben/index.html +++ b/me/ruben/index.html @@ -6,11 +6,17 @@ ruben lore @ Synth Download! + + + + - - + + + + @@ -116,6 +122,10 @@
+ + +
+
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