diff --git a/_includes/layouts/notebook.njk b/_includes/layouts/notebook.njk
new file mode 100644
index 0000000..1854475
--- /dev/null
+++ b/_includes/layouts/notebook.njk
@@ -0,0 +1,26 @@
+---
+title: notebook
+layout: "layouts/base.njk"
+---
+
+
+
+
+
+
+ Notebook
+
+
+
+
+
+
+
+
+ A public facing journal for myself, as probably the best way to put it. A blog-ish, writeup-ish, rant-ish place to dump personal thoughts and such into for myself .
+
+
\ No newline at end of file
diff --git a/_site/assets/buttons/88x31_web.svg b/_site/assets/buttons/88x31_web.svg
new file mode 100644
index 0000000..f541913
--- /dev/null
+++ b/_site/assets/buttons/88x31_web.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/_site/assets/buttons/synth.download.png b/_site/assets/buttons/synth.download.png
index 0c48357..ac2df13 100644
Binary files a/_site/assets/buttons/synth.download.png and b/_site/assets/buttons/synth.download.png differ
diff --git a/_site/assets/buttons/synth.download.svg b/_site/assets/buttons/synth.download.svg
index a23fd79..3ac2e69 100644
--- a/_site/assets/buttons/synth.download.svg
+++ b/_site/assets/buttons/synth.download.svg
@@ -1 +1,478 @@
-
\ No newline at end of file
+
+
diff --git a/_site/assets/synth.download/88x31.svg b/_site/assets/synth.download/88x31.svg
new file mode 100644
index 0000000..a3b1dda
--- /dev/null
+++ b/_site/assets/synth.download/88x31.svg
@@ -0,0 +1,773 @@
+
+
+
+
diff --git a/_site/assets/synth.download/88x31_web.svg b/_site/assets/synth.download/88x31_web.svg
new file mode 100644
index 0000000..f541913
--- /dev/null
+++ b/_site/assets/synth.download/88x31_web.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/_site/assets/synth.download/logo sharkey.png b/_site/assets/synth.download/logo sharkey.png
new file mode 100644
index 0000000..566d15a
Binary files /dev/null and b/_site/assets/synth.download/logo sharkey.png differ
diff --git a/_site/assets/synth.download/logo.svg b/_site/assets/synth.download/logo.svg
index df9bd7e..c0ebf5e 100644
--- a/_site/assets/synth.download/logo.svg
+++ b/_site/assets/synth.download/logo.svg
@@ -10,6 +10,9 @@
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
sodipodi:docname="logo.svg"
xml:space="preserve"
+ inkscape:export-filename="logo-test.svg"
+ inkscape:export-xdpi="106.90569"
+ inkscape:export-ydpi="106.90569"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -24,14 +27,14 @@
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#505050"
inkscape:document-units="px"
- inkscape:zoom="0.58833495"
- inkscape:cx="673.08597"
- inkscape:cy="472.51995"
- inkscape:window-width="1920"
- inkscape:window-height="1054"
+ inkscape:zoom="0.49130775"
+ inkscape:cx="656.41138"
+ inkscape:cy="476.27988"
+ inkscape:window-width="1278"
+ inkscape:window-height="768"
inkscape:window-x="0"
inkscape:window-y="0"
- inkscape:window-maximized="1"
+ inkscape:window-maximized="0"
inkscape:current-layer="layer1" />
+
+
+
+ transform="rotate(14.011399)"
+ inkscape:label="top nose intake" />
diff --git a/_site/assets/synth.download/synth_web.svg b/_site/assets/synth.download/synth_web.svg
index 33aca74..79a009b 100644
--- a/_site/assets/synth.download/synth_web.svg
+++ b/_site/assets/synth.download/synth_web.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/_site/donate/index.html b/_site/donate/index.html
index f8215bf..13480bc 100644
--- a/_site/donate/index.html
+++ b/_site/donate/index.html
@@ -4,7 +4,7 @@
donate • synth download!
-
+
@@ -13,20 +13,14 @@
-
-
-
-
-
-
-
-
+
+
diff --git a/_site/feed.xml b/_site/feed.xml
new file mode 100644
index 0000000..a5b3f6a
--- /dev/null
+++ b/_site/feed.xml
@@ -0,0 +1,13 @@
+
+
+ a gooey synth's notebooks
+ a blog-ish writeup-ish rant-ish page to store random writings and thoughts in.
+ 2025-04-21T14:50:19Z
+ https://synth.download/
+
+ Sneexy
+ sneexy@synth.download
+
+
\ No newline at end of file
diff --git a/_site/index.html b/_site/index.html
index 8131c6b..6797e46 100644
--- a/_site/index.html
+++ b/_site/index.html
@@ -4,7 +4,7 @@
home • synth download!
-
+
@@ -13,20 +13,14 @@
-
-
-
-
-
-
-
-
+
+
@@ -150,7 +144,7 @@
-
+
@@ -167,7 +161,7 @@
Hey! Welcome to...
- This is a website managed by sneexy with some services hosted here and there, mainly for friends.
Most services here are public facing, anything that requires registration is most likely only for friends of mine for the sake of not being a complete hassle to maintain anything myself.
We currently run...
@@ -183,7 +177,7 @@
-
+
diff --git a/_site/me/index.html b/_site/me/index.html
index d7cd7e9..dc1d047 100644
--- a/_site/me/index.html
+++ b/_site/me/index.html
@@ -4,7 +4,7 @@
about me • synth download!
-
+
@@ -13,20 +13,14 @@
-
-
-
-
-
-
-
-
+
+
diff --git a/_site/me/ruben/index.html b/_site/me/ruben/index.html
index ea970b4..1b3caca 100644
--- a/_site/me/ruben/index.html
+++ b/_site/me/ruben/index.html
@@ -4,7 +4,7 @@
ruben lore • synth download!
-
+
@@ -13,20 +13,14 @@
-
-
-
-
-
-
-
-
+
+
diff --git a/_site/notebook/index.html b/_site/notebook/index.html
new file mode 100644
index 0000000..a72f0e6
--- /dev/null
+++ b/_site/notebook/index.html
@@ -0,0 +1,199 @@
+
+
+
+
+
+
notebook • synth download!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Notebook
+
+
+
+
+
+
+
+
+ A public facing journal for myself, as probably the best way to put it. A blog-ish, writeup-ish, rant-ish place to dump personal thoughts and such into for myself .
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/_site/scripts/imageMapResizer.min.js b/_site/scripts/imageMapResizer.min.js
new file mode 100644
index 0000000..09ad956
--- /dev/null
+++ b/_site/scripts/imageMapResizer.min.js
@@ -0,0 +1,8 @@
+/*! Image Map Resizer (imageMapResizer.min.js ) - v1.0.10 - 2019-04-10
+ * Desc: Resize HTML imageMap to scaled image.
+ * Copyright: (c) 2019 David J. Bradshaw - dave@bradshaw.net
+ * License: MIT
+ */
+
+!function(){"use strict";function r(){function e(){var r={width:u.width/u.naturalWidth,height:u.height/u.naturalHeight},a={width:parseInt(window.getComputedStyle(u,null).getPropertyValue("padding-left"),10),height:parseInt(window.getComputedStyle(u,null).getPropertyValue("padding-top"),10)};i.forEach(function(e,t){var n=0;o[t].coords=e.split(",").map(function(e){var t=1==(n=1-n)?"width":"height";return a[t]+Math.floor(Number(e)*r[t])}).join(",")})}function t(e){return e.coords.replace(/ *, */g,",").replace(/ +/g,",")}function n(){clearTimeout(d),d=setTimeout(e,250)}function r(e){return document.querySelector('img[usemap="'+e+'"]')}var a=this,o=null,i=null,u=null,d=null;"function"!=typeof a._resize?(o=a.getElementsByTagName("area"),i=Array.prototype.map.call(o,t),u=r("#"+a.name)||r(a.name),a._resize=e,u.addEventListener("load",e,!1),window.addEventListener("focus",e,!1),window.addEventListener("resize",n,!1),window.addEventListener("readystatechange",e,!1),document.addEventListener("fullscreenchange",e,!1),u.width===u.naturalWidth&&u.height===u.naturalHeight||e()):a._resize()}function e(){function t(e){e&&(!function(e){if(!e.tagName)throw new TypeError("Object is not a valid DOM element");if("MAP"!==e.tagName.toUpperCase())throw new TypeError("Expected
tag, found <"+e.tagName+">.")}(e),r.call(e),n.push(e))}var n;return function(e){switch(n=[],typeof e){case"undefined":case"string":Array.prototype.forEach.call(document.querySelectorAll(e||"map"),t);break;case"object":t(e);break;default:throw new TypeError("Unexpected data type ("+typeof e+").")}return n}}"function"==typeof define&&define.amd?define([],e):"object"==typeof module&&"object"==typeof module.exports?module.exports=e():window.imageMapResize=e(),"jQuery"in window&&(window.jQuery.fn.imageMapResize=function(){return this.filter("map").each(r).end()})}();
+//# sourceMappingURL=imageMapResizer.map
\ No newline at end of file
diff --git a/_site/styles/accessibility.css b/_site/styles/accessibility.css
index 476f05b..e69de29 100644
--- a/_site/styles/accessibility.css
+++ b/_site/styles/accessibility.css
@@ -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;
- }
-}
\ No newline at end of file
diff --git a/_site/styles/animations.css b/_site/styles/animations.css
index 5591adf..8e7e462 100644
--- a/_site/styles/animations.css
+++ b/_site/styles/animations.css
@@ -1,17 +1,2 @@
/* 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/_site/styles/at-media.css b/_site/styles/at-media.css
index e519f08..fa9fd04 100644
--- a/_site/styles/at-media.css
+++ b/_site/styles/at-media.css
@@ -2,160 +2,3 @@
- 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/_site/styles/base.css b/_site/styles/base.css
new file mode 100644
index 0000000..14ca2a2
--- /dev/null
+++ b/_site/styles/base.css
@@ -0,0 +1,1032 @@
+/* ╭──────────────────────────────────────╮
+/ │ _ _ │
+/ │ ___| |_ _ _| | ___ ___ ___ ___ │
+/ │ / __| __| | | | |/ _ \ / __/ __/ __| │
+/ │ \__ \ |_| |_| | | __/| (__\__ \__ \ │
+/ │ |___/\__|\__, |_|\___(_)___|___/___/ │
+/ │ |___/ │
+/ ╰──────────────────────────────────────╯
+/ style.css - synth.download styling featuring these fancy ass thingies because why the hell not */
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* ╭───────────────────────────────────────────────────────╮
+/ │ _ _ _ _ _ _ │
+/ │ __ _ ___ ___ ___ ___ ___(_) |__ (_) (_) |_ _ _ │
+/ │ / _` |/ __/ __/ _ \/ __/ __| | '_ \| | | | __| | | | │
+/ │ | (_| | (_| (_| __/\__ \__ \ | |_) | | | | |_| |_| | │
+/ │ \__,_|\___\___\___||___/___/_|_.__/|_|_|_|\__|\__, | │
+/ │ |___/ │
+/ ╰───────────────────────────────────────────────────────╯
+/ accessibility - 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;
+ }
+}
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* ╭─────────────────────────────────╮
+/ │ _ _ _ │
+/ │ ___| |_ _ _| (_)_ __ __ _ │
+/ │ / __| __| | | | | | '_ \ / _` | │
+/ │ \__ \ |_| |_| | | | | | | (_| | │
+/ │ |___/\__|\__, |_|_|_| |_|\__, | │
+/ │ |___/ |___/ │
+/ ╰─────────────────────────────────╯
+/ styling - regular styling for regular/global html elements */
+
+/* ----------------------------------
+- 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;
+}
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* ╭──────────────────────────────────────╮
+/ │ _ │
+/ │ _ __ __ ___ _| |__ __ _ _ __ │
+/ │ | '_ \ / _` \ \ / / '_ \ / _` | '__| │
+/ │ | | | | (_| |\ V /| |_) | (_| | | │
+/ │ |_| |_|\__,_| \_/ |_.__/ \__,_|_| │
+/ ╰──────────────────────────────────────╯
+/ navbar - styling the navigation bar / panel that sits on the top of the page at all times */
+
+.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);
+ }
+}
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* ╭────────────────────────────────────────────╮
+/ │ _ _ │
+/ │ __ _(_)_ __ __| | _____ _____ │
+/ │ \ \ /\ / / | '_ \ / _` |/ _ \ \ /\ / / __| │
+/ │ \ V V /| | | | | (_| | (_) \ V V /\__ \ │
+/ │ \_/\_/ |_|_| |_|\__,_|\___/ \_/\_/ |___/ │
+/ ╰────────────────────────────────────────────╯
+/ windows - related styling for the windows on pages */
+
+.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;
+}
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* ╭────────────────────────────────╮
+/ │ __ _ │
+/ │ / _| ___ ___ | |_ ___ _ __ │
+/ │ | |_ / _ \ / _ \| __/ _ \ '__| │
+/ │ | _| (_) | (_) | || __/ | │
+/ │ |_| \___/ \___/ \__\___|_| │
+/ ╰────────────────────────────────╯
+/ footer - related styling for the footer window on all pages */
+
+footer {
+ max-width: 30em;
+ margin-left: auto;
+ margin-right: auto;
+
+ details > summary > a {
+ padding: .3rem 0rem .3rem 1rem !important;
+ }
+
+ section, article {
+ padding: 1rem !important;
+ }
+
+ .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);
+ }
+ }
+ }
+}
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* ╭───────────────────────────────────────────────────────╮
+/ │ _ _ _ │
+/ │ __ _ _ __ (_)_ __ ___ __ _| |_(_) ___ _ __ ___ │
+/ │ / _` | '_ \| | '_ ` _ \ / _` | __| |/ _ \| '_ \/ __| │
+/ │ | (_| | | | | | | | | | | (_| | |_| | (_) | | | \__ \ │
+/ │ \__,_|_| |_|_|_| |_| |_|\__,_|\__|_|\___/|_| |_|___/ │
+/ ╰───────────────────────────────────────────────────────╯
+/ animations - reusable css 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% }
+}
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* ╭────────────────────────────────────────╮
+/ │ ____ _ _ │
+/ │ / __ \ _ __ ___ ___ __| (_) __ _ │
+/ │ / / _` | '_ ` _ \ / _ \/ _` | |/ _` | │
+/ │ | | (_| | | | | | | __/ (_| | | (_| | │
+/ │ \ \__,_|_| |_| |_|\___|\__,_|_|\__,_| │
+/ │ \____/ │
+/ ╰────────────────────────────────────────╯
+/ @media / at-media - styling depending on browser configuration / settings */
+
+/* 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;
+ }
+}
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* ╭──────────────────────────────╮
+/ │ _ │
+/ │ | |__ ___ _ __ ___ ___ │
+/ │ | '_ \ / _ \| '_ ` _ \ / _ \ │
+/ │ | | | | (_) | | | | | | __/ │
+/ │ |_| |_|\___/|_| |_| |_|\___| │
+/ ╰──────────────────────────────╯
+/ home - specific styling for the main synth.download home page (index.md) */
+
+#site.window.home {
+ section {
+ a:nth-child(2) {
+ cursor: default;
+ }
+
+ #logo {
+ width: 40rem;
+ height: auto;
+ line-break: strict;
+ margin-bottom: 0.5rem;
+ text-align: center;
+ cursor: default;
+ }
+
+ 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.window.home section {
+ text-align: center;
+ font-size: 0px;
+ img {
+ margin-right: 5px;
+ image-rendering: auto;
+ image-rendering: crisp-edges;
+ image-rendering: pixelated;
+ transition: transform 0.2s;
+ }
+
+ img:hover {
+ transform: scale(2);
+ }
+}
+
+@media screen and (max-width: 59em) {
+ #site.window.home > section {
+ #logo {
+ max-width: 100%;
+ }
+ }
+}
\ No newline at end of file
diff --git a/_site/styles/font.css b/_site/styles/font.css
index 901bcb4..268f79c 100644
--- a/_site/styles/font.css
+++ b/_site/styles/font.css
@@ -1,4 +1,17 @@
-/* font config, JetBrains Mono */
+/* ╭───────────────────────╮
+/ │ __ _ │
+/ │ / _| ___ _ __ | |_ │
+/ │ | |_ / _ \| '_ \| __| │
+/ │ | _| (_) | | | | |_ │
+/ │ |_| \___/|_| |_|\__| │
+/ ╰───────────────────────╯
+/ font - font configuration, stuff, whatever */
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* - JetBrains Mono - */
@font-face {
font-family: "JetBrains Mono";
diff --git a/_site/styles/footer.css b/_site/styles/footer.css
index 1948088..d235f5b 100644
--- a/_site/styles/footer.css
+++ b/_site/styles/footer.css
@@ -1,81 +1,5 @@
/* 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/_site/styles/index.css b/_site/styles/index.css
index 06dac9d..9d15f45 100644
--- a/_site/styles/index.css
+++ b/_site/styles/index.css
@@ -1,61 +1,2 @@
/* 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%;
- }
- }
-}
diff --git a/_site/styles/navbar.css b/_site/styles/navbar.css
index 0329001..50a348a 100644
--- a/_site/styles/navbar.css
+++ b/_site/styles/navbar.css
@@ -2,147 +2,3 @@
- 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/_site/styles/style.css b/_site/styles/style.css
index 1209c41..c56aa84 100644
--- a/_site/styles/style.css
+++ b/_site/styles/style.css
@@ -1,4 +1,120 @@
-/* style.css - For The Absolute Basics:tm: */
+/* ╭──────────────────────────────────────╮
+/ │ _ _ │
+/ │ ___| |_ _ _| | ___ ___ ___ ___ │
+/ │ / __| __| | | | |/ _ \ / __/ __/ __| │
+/ │ \__ \ |_| |_| | | __/| (__\__ \__ \ │
+/ │ |___/\__|\__, |_|\___(_)___|___/___/ │
+/ ╰──────────────────────────────────────╯
+/ style.css - synth.download styling featuring these fancy ass thingies because why the hell not */
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* ╭───────────────────────────────────────────────────────╮
+/ │ _ _ _ _ _ _ │
+/ │ __ _ ___ ___ ___ ___ ___(_) |__ (_) (_) |_ _ _ │
+/ │ / _` |/ __/ __/ _ \/ __/ __| | '_ \| | | | __| | | | │
+/ │ | (_| | (_| (_| __/\__ \__ \ | |_) | | | | |_| |_| | │
+/ │ \__,_|\___\___\___||___/___/_|_.__/|_|_|_|\__|\__, | │
+/ │ |___/ │
+/ ╰───────────────────────────────────────────────────────╯
+/ accessibility - 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;
+ }
+}
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* ╭─────────────────────────────────╮
+/ │ _ _ _ │
+/ │ ___| |_ _ _| (_)_ __ __ _ │
+/ │ / __| __| | | | | | '_ \ / _` | │
+/ │ \__ \ |_| |_| | | | | | | (_| | │
+/ │ |___/\__|\__, |_|_|_| |_|\__, | │
+/ │ |___/ |___/ │
+/ ╰─────────────────────────────────╯
+/ styling - regular styling for regular/global html elements */
/* ----------------------------------
- background wallpaper, global font -
@@ -183,4 +299,647 @@ details.styled[open] {
pointer-events: none;
opacity: 0;
transition: opacity 0.4s;
+}
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* ╭──────────────────────────────────────╮
+/ │ _ │
+/ │ _ __ __ ___ _| |__ __ _ _ __ │
+/ │ | '_ \ / _` \ \ / / '_ \ / _` | '__| │
+/ │ | | | | (_| |\ V /| |_) | (_| | | │
+/ │ |_| |_|\__,_| \_/ |_.__/ \__,_|_| │
+/ ╰──────────────────────────────────────╯
+/ navbar - styling the navigation bar / panel that sits on the top of the page at all times */
+
+.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);
+ }
+}
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* ╭────────────────────────────────────────────╮
+/ │ _ _ │
+/ │ __ _(_)_ __ __| | _____ _____ │
+/ │ \ \ /\ / / | '_ \ / _` |/ _ \ \ /\ / / __| │
+/ │ \ V V /| | | | | (_| | (_) \ V V /\__ \ │
+/ │ \_/\_/ |_|_| |_|\__,_|\___/ \_/\_/ |___/ │
+/ ╰────────────────────────────────────────────╯
+/ windows - related styling for the windows on pages */
+
+.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;
+}
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* ╭────────────────────────────────╮
+/ │ __ _ │
+/ │ / _| ___ ___ | |_ ___ _ __ │
+/ │ | |_ / _ \ / _ \| __/ _ \ '__| │
+/ │ | _| (_) | (_) | || __/ | │
+/ │ |_| \___/ \___/ \__\___|_| │
+/ ╰────────────────────────────────╯
+/ footer - related styling for the footer window on all pages */
+
+footer {
+ max-width: 30em;
+ margin-left: auto;
+ margin-right: auto;
+
+ details > summary > a {
+ padding: .3rem 0rem .3rem 1rem !important;
+ }
+
+ section, article {
+ padding: 1rem !important;
+ }
+
+ .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);
+ }
+ }
+ }
+}
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* ╭───────────────────────────────────────────────────────╮
+/ │ _ _ _ │
+/ │ __ _ _ __ (_)_ __ ___ __ _| |_(_) ___ _ __ ___ │
+/ │ / _` | '_ \| | '_ ` _ \ / _` | __| |/ _ \| '_ \/ __| │
+/ │ | (_| | | | | | | | | | | (_| | |_| | (_) | | | \__ \ │
+/ │ \__,_|_| |_|_|_| |_| |_|\__,_|\__|_|\___/|_| |_|___/ │
+/ ╰───────────────────────────────────────────────────────╯
+/ animations - reusable css 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% }
+}
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* ╭────────────────────────────────────────╮
+/ │ ____ _ _ │
+/ │ / __ \ _ __ ___ ___ __| (_) __ _ │
+/ │ / / _` | '_ ` _ \ / _ \/ _` | |/ _` | │
+/ │ | | (_| | | | | | | __/ (_| | | (_| | │
+/ │ \ \__,_|_| |_| |_|\___|\__,_|_|\__,_| │
+/ │ \____/ │
+/ ╰────────────────────────────────────────╯
+/ @media / at-media - styling depending on browser configuration / settings */
+
+/* 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/_site/styles/window.css b/_site/styles/window.css
index 2218d2f..d7d3964 100644
--- a/_site/styles/window.css
+++ b/_site/styles/window.css
@@ -2,186 +2,3 @@
- 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
diff --git a/assets/buttons/synth.download.png b/assets/buttons/synth.download.png
index 0c48357..ac2df13 100644
Binary files a/assets/buttons/synth.download.png and b/assets/buttons/synth.download.png differ
diff --git a/assets/buttons/synth.download.svg b/assets/buttons/synth.download.svg
index a23fd79..3ac2e69 100644
--- a/assets/buttons/synth.download.svg
+++ b/assets/buttons/synth.download.svg
@@ -1 +1,478 @@
-
+
+
+ blog @ Synth Download!
-
-
-
-
- blog
-
-
-
-
-
-
-
-
- alternatively; rantpage
- okay, so, this was going to be a blog, but i ended up not having interesting or good to write about. maybe i'll bring this back up in a future but more focused on just being a place to dump thoughts or random writings into without being entirely "Blog" focused, sorry.
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/eleventy.config.js b/eleventy.config.js
index 5555ad7..a595db1 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -1,7 +1,26 @@
-import CleanCSS from "clean-css";
+import { feedPlugin } from "@11ty/eleventy-plugin-rss";
export default function(eleventyConfig) {
eleventyConfig.addPassthroughCopy("assets/");
eleventyConfig.addPassthroughCopy("styles/");
eleventyConfig.addPassthroughCopy("scripts/");
+
+ eleventyConfig.addPlugin(feedPlugin, {
+ type: "atom", // or "rss", "json"
+ outputPath: "/feed.xml",
+ collection: {
+ name: "posts", // iterate over `collections.posts`
+ limit: 0, // 0 means no limit
+ },
+ metadata: {
+ language: "en",
+ title: "a gooey synth's notebooks",
+ subtitle: "a blog-ish writeup-ish rant-ish page to store random writings and thoughts in.",
+ base: "https://synth.download/",
+ author: {
+ name: "Sneexy",
+ email: "sneexy@synth.download", // Optional
+ }
+ }
+ });
};
\ No newline at end of file
diff --git a/notebook/index.md b/notebook/index.md
new file mode 100644
index 0000000..92f2787
--- /dev/null
+++ b/notebook/index.md
@@ -0,0 +1,4 @@
+---
+title: notebook
+layout: "layouts/notebook.njk"
+---
\ No newline at end of file
diff --git a/blog/rss.xml b/notebook/rss.xml
similarity index 100%
rename from blog/rss.xml
rename to notebook/rss.xml
diff --git a/package-lock.json b/package-lock.json
index 0ddad56..dceb001 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
"license": "ISC",
"dependencies": {
"@11ty/eleventy": "^3.0.0",
- "clean-css": "^5.3.3"
+ "@11ty/eleventy-plugin-rss": "^2.0.3"
}
},
"node_modules/@11ty/dependency-tree": {
@@ -150,6 +150,35 @@
"url": "https://opencollective.com/11ty"
}
},
+ "node_modules/@11ty/eleventy-plugin-rss": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-rss/-/eleventy-plugin-rss-2.0.3.tgz",
+ "integrity": "sha512-ubK97uahCLpKhORLfblgxLcoaNqTcKde1cH8CeRKNTFoUuuDSEjWZtodV9fKrg+uOp5X74dO43z1/io6hhs5Bw==",
+ "license": "MIT",
+ "dependencies": {
+ "@11ty/eleventy-utils": "^2.0.0",
+ "@11ty/posthtml-urls": "^1.0.1",
+ "debug": "^4.4.0",
+ "posthtml": "^0.16.6"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/11ty"
+ }
+ },
+ "node_modules/@11ty/eleventy-plugin-rss/node_modules/@11ty/eleventy-utils": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-2.0.1.tgz",
+ "integrity": "sha512-hicG0vPyqfLvgHJQLtoh3XAj6wUbLX4yY2se8bQLdhCIcxK46mt4zDpgcrYVP3Sjx4HPifQOdwRfOEECoUcyXQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=18"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/11ty"
+ }
+ },
"node_modules/@11ty/eleventy-utils": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.3.tgz",
@@ -531,18 +560,6 @@
"fsevents": "~2.3.2"
}
},
- "node_modules/clean-css": {
- "version": "5.3.3",
- "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
- "integrity": "sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==",
- "license": "MIT",
- "dependencies": {
- "source-map": "~0.6.0"
- },
- "engines": {
- "node": ">= 10.0"
- }
- },
"node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1890,15 +1907,6 @@
"node": ">=8.0.0"
}
},
- "node_modules/source-map": {
- "version": "0.6.1",
- "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
- "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
- "license": "BSD-3-Clause",
- "engines": {
- "node": ">=0.10.0"
- }
- },
"node_modules/sprintf-js": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
diff --git a/package.json b/package.json
index 4371b8a..57cacf4 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,6 @@
"type": "module",
"dependencies": {
"@11ty/eleventy": "^3.0.0",
- "clean-css": "^5.3.3"
+ "@11ty/eleventy-plugin-rss": "^2.0.3"
}
}
diff --git a/styles/accessibility.css b/styles/accessibility.css
deleted file mode 100644
index 476f05b..0000000
--- a/styles/accessibility.css
+++ /dev/null
@@ -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;
- }
-}
\ No newline at end of file
diff --git a/styles/animations.css b/styles/animations.css
deleted file mode 100644
index 5591adf..0000000
--- a/styles/animations.css
+++ /dev/null
@@ -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% }
-}
\ No newline at end of file
diff --git a/styles/at-media.css b/styles/at-media.css
deleted file mode 100644
index e519f08..0000000
--- a/styles/at-media.css
+++ /dev/null
@@ -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;
- }
-}
\ No newline at end of file
diff --git a/styles/base.css b/styles/base.css
new file mode 100644
index 0000000..14ca2a2
--- /dev/null
+++ b/styles/base.css
@@ -0,0 +1,1032 @@
+/* ╭──────────────────────────────────────╮
+/ │ _ _ │
+/ │ ___| |_ _ _| | ___ ___ ___ ___ │
+/ │ / __| __| | | | |/ _ \ / __/ __/ __| │
+/ │ \__ \ |_| |_| | | __/| (__\__ \__ \ │
+/ │ |___/\__|\__, |_|\___(_)___|___/___/ │
+/ │ |___/ │
+/ ╰──────────────────────────────────────╯
+/ style.css - synth.download styling featuring these fancy ass thingies because why the hell not */
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* ╭───────────────────────────────────────────────────────╮
+/ │ _ _ _ _ _ _ │
+/ │ __ _ ___ ___ ___ ___ ___(_) |__ (_) (_) |_ _ _ │
+/ │ / _` |/ __/ __/ _ \/ __/ __| | '_ \| | | | __| | | | │
+/ │ | (_| | (_| (_| __/\__ \__ \ | |_) | | | | |_| |_| | │
+/ │ \__,_|\___\___\___||___/___/_|_.__/|_|_|_|\__|\__, | │
+/ │ |___/ │
+/ ╰───────────────────────────────────────────────────────╯
+/ accessibility - 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;
+ }
+}
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* ╭─────────────────────────────────╮
+/ │ _ _ _ │
+/ │ ___| |_ _ _| (_)_ __ __ _ │
+/ │ / __| __| | | | | | '_ \ / _` | │
+/ │ \__ \ |_| |_| | | | | | | (_| | │
+/ │ |___/\__|\__, |_|_|_| |_|\__, | │
+/ │ |___/ |___/ │
+/ ╰─────────────────────────────────╯
+/ styling - regular styling for regular/global html elements */
+
+/* ----------------------------------
+- 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;
+}
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* ╭──────────────────────────────────────╮
+/ │ _ │
+/ │ _ __ __ ___ _| |__ __ _ _ __ │
+/ │ | '_ \ / _` \ \ / / '_ \ / _` | '__| │
+/ │ | | | | (_| |\ V /| |_) | (_| | | │
+/ │ |_| |_|\__,_| \_/ |_.__/ \__,_|_| │
+/ ╰──────────────────────────────────────╯
+/ navbar - styling the navigation bar / panel that sits on the top of the page at all times */
+
+.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);
+ }
+}
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* ╭────────────────────────────────────────────╮
+/ │ _ _ │
+/ │ __ _(_)_ __ __| | _____ _____ │
+/ │ \ \ /\ / / | '_ \ / _` |/ _ \ \ /\ / / __| │
+/ │ \ V V /| | | | | (_| | (_) \ V V /\__ \ │
+/ │ \_/\_/ |_|_| |_|\__,_|\___/ \_/\_/ |___/ │
+/ ╰────────────────────────────────────────────╯
+/ windows - related styling for the windows on pages */
+
+.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;
+}
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* ╭────────────────────────────────╮
+/ │ __ _ │
+/ │ / _| ___ ___ | |_ ___ _ __ │
+/ │ | |_ / _ \ / _ \| __/ _ \ '__| │
+/ │ | _| (_) | (_) | || __/ | │
+/ │ |_| \___/ \___/ \__\___|_| │
+/ ╰────────────────────────────────╯
+/ footer - related styling for the footer window on all pages */
+
+footer {
+ max-width: 30em;
+ margin-left: auto;
+ margin-right: auto;
+
+ details > summary > a {
+ padding: .3rem 0rem .3rem 1rem !important;
+ }
+
+ section, article {
+ padding: 1rem !important;
+ }
+
+ .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);
+ }
+ }
+ }
+}
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* ╭───────────────────────────────────────────────────────╮
+/ │ _ _ _ │
+/ │ __ _ _ __ (_)_ __ ___ __ _| |_(_) ___ _ __ ___ │
+/ │ / _` | '_ \| | '_ ` _ \ / _` | __| |/ _ \| '_ \/ __| │
+/ │ | (_| | | | | | | | | | | (_| | |_| | (_) | | | \__ \ │
+/ │ \__,_|_| |_|_|_| |_| |_|\__,_|\__|_|\___/|_| |_|___/ │
+/ ╰───────────────────────────────────────────────────────╯
+/ animations - reusable css 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% }
+}
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* ╭────────────────────────────────────────╮
+/ │ ____ _ _ │
+/ │ / __ \ _ __ ___ ___ __| (_) __ _ │
+/ │ / / _` | '_ ` _ \ / _ \/ _` | |/ _` | │
+/ │ | | (_| | | | | | | __/ (_| | | (_| | │
+/ │ \ \__,_|_| |_| |_|\___|\__,_|_|\__,_| │
+/ │ \____/ │
+/ ╰────────────────────────────────────────╯
+/ @media / at-media - styling depending on browser configuration / settings */
+
+/* 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;
+ }
+}
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* ╭──────────────────────────────╮
+/ │ _ │
+/ │ | |__ ___ _ __ ___ ___ │
+/ │ | '_ \ / _ \| '_ ` _ \ / _ \ │
+/ │ | | | | (_) | | | | | | __/ │
+/ │ |_| |_|\___/|_| |_| |_|\___| │
+/ ╰──────────────────────────────╯
+/ home - specific styling for the main synth.download home page (index.md) */
+
+#site.window.home {
+ section {
+ a:nth-child(2) {
+ cursor: default;
+ }
+
+ #logo {
+ width: 40rem;
+ height: auto;
+ line-break: strict;
+ margin-bottom: 0.5rem;
+ text-align: center;
+ cursor: default;
+ }
+
+ 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.window.home section {
+ text-align: center;
+ font-size: 0px;
+ img {
+ margin-right: 5px;
+ image-rendering: auto;
+ image-rendering: crisp-edges;
+ image-rendering: pixelated;
+ transition: transform 0.2s;
+ }
+
+ img:hover {
+ transform: scale(2);
+ }
+}
+
+@media screen and (max-width: 59em) {
+ #site.window.home > section {
+ #logo {
+ max-width: 100%;
+ }
+ }
+}
\ No newline at end of file
diff --git a/styles/font.css b/styles/font.css
index 901bcb4..268f79c 100644
--- a/styles/font.css
+++ b/styles/font.css
@@ -1,4 +1,17 @@
-/* font config, JetBrains Mono */
+/* ╭───────────────────────╮
+/ │ __ _ │
+/ │ / _| ___ _ __ | |_ │
+/ │ | |_ / _ \| '_ \| __| │
+/ │ | _| (_) | | | | |_ │
+/ │ |_| \___/|_| |_|\__| │
+/ ╰───────────────────────╯
+/ font - font configuration, stuff, whatever */
+
+/* --------------------------------------------------------------------
+=======================================================================
+-------------------------------------------------------------------- */
+
+/* - JetBrains Mono - */
@font-face {
font-family: "JetBrains Mono";
diff --git a/styles/footer.css b/styles/footer.css
deleted file mode 100644
index 1948088..0000000
--- a/styles/footer.css
+++ /dev/null
@@ -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);
- }
- }
- }
-}
\ No newline at end of file
diff --git a/styles/index.css b/styles/index.css
deleted file mode 100644
index 06dac9d..0000000
--- a/styles/index.css
+++ /dev/null
@@ -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%;
- }
- }
-}
diff --git a/styles/navbar.css b/styles/navbar.css
deleted file mode 100644
index 0329001..0000000
--- a/styles/navbar.css
+++ /dev/null
@@ -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);
- }
-}
\ No newline at end of file
diff --git a/styles/style.css b/styles/style.css
deleted file mode 100644
index 1209c41..0000000
--- a/styles/style.css
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/styles/window.css b/styles/window.css
deleted file mode 100644
index 2218d2f..0000000
--- a/styles/window.css
+++ /dev/null
@@ -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;
- }
-}
\ No newline at end of file
+ 