From a2d12ebead63507f46aca55ede90a6d205dda886 Mon Sep 17 00:00:00 2001 From: Ruben Date: Tue, 1 Jul 2025 02:45:02 -0500 Subject: [PATCH] improve instance pages, start work on proper toc element --- _includes/layouts/iceshrimp.njk | 56 ++++- _includes/layouts/sharkey.njk | 40 +++- _includes/layouts/sneexy/page.njk | 6 +- _includes/styles/base.css | 299 +++--------------------- _includes/styles/footer.css | 11 + _includes/styles/icons.css | 2 + _includes/styles/navbar.css | 220 ++++++++++++++++- _includes/styles/pages/sneexy.css | 17 -- _includes/styles/toc.css | 93 ++++++++ _includes/styles/windows.css | 36 +++ assets/buttons/sites/akko.wtf.png | Bin 0 -> 5104 bytes assets/buttons/sites/duke.social.webp | Bin 0 -> 796 bytes assets/buttons/sites/labyrinth.zone.gif | Bin 0 -> 1018 bytes 13 files changed, 489 insertions(+), 291 deletions(-) create mode 100644 _includes/styles/toc.css create mode 100644 assets/buttons/sites/akko.wtf.png create mode 100644 assets/buttons/sites/duke.social.webp create mode 100644 assets/buttons/sites/labyrinth.zone.gif diff --git a/_includes/layouts/iceshrimp.njk b/_includes/layouts/iceshrimp.njk index 614419c..7be190d 100644 --- a/_includes/layouts/iceshrimp.njk +++ b/_includes/layouts/iceshrimp.njk @@ -4,6 +4,20 @@ layout: "layouts/base.njk" permalink: "/iceshrimp/" --- + +
@@ -20,10 +34,44 @@ permalink: "/iceshrimp/"
-
-

Iceshrimp.NET sourceIcesynth!

-

Beep! A small instance themed around synths, but accepts all. Not to be confused with our Sharkey instance.

-

Log in Register

+
+

Iceshrimp.NET sourceIcesynth!

+

Beep! A small instance themed around synths, but accepts all. Not to be confused with our Sharkey instance.

+

Log in Register

+

Mastodon-FE Akkoma-FE Phanpy pl-fe

+
+
+ Synth.Download! + Oomfie City + Labyrinth Zone + Luna Nova + Duke Social +
+
+ Table-of-Contents +
+ +
+
diff --git a/_includes/layouts/sharkey.njk b/_includes/layouts/sharkey.njk index a1c3619..7aa80cb 100644 --- a/_includes/layouts/sharkey.njk +++ b/_includes/layouts/sharkey.njk @@ -20,10 +20,42 @@ permalink: "/sharkey/" -
-

Sharkey's websiteBeepkey!

-

Beep! A small instance themed around synths, but accepts all. Not to be confused with our Iceshrimp instance.

-

Visit

+
+

Sharkey's websiteBeepkey!

+

Beep! A small instance themed around synths, but accepts all. Not to be confused with our Iceshrimp instance.

+

Visit Tips & Tricks

+

Note: Alternative clients are noted to be unstable with Sharkey.

+

Mastodon-FE Phanpy pl-fe

+
+
+ Synth.Download! + Oomfie City + Labyrinth Zone + Luna Nova + Duke Social +
+
+ Table-of-Contents +
+ +
+
diff --git a/_includes/layouts/sneexy/page.njk b/_includes/layouts/sneexy/page.njk index cff4a28..135cb9a 100644 --- a/_includes/layouts/sneexy/page.njk +++ b/_includes/layouts/sneexy/page.njk @@ -136,7 +136,7 @@ permalink: "/~sneexy/"
If any are broken and/or missing, poke me.

Friends!

-
+
23Sonics authenyo Autumn Town Café @@ -200,7 +200,7 @@ permalink: "/~sneexy/" zvava

Misc.

-
+
Get Firefox uBlock Origin Now! @@ -234,7 +234,7 @@ permalink: "/~sneexy/" Yoshi Lore

Me! (Click to copy HTML)

-
+
diff --git a/_includes/styles/base.css b/_includes/styles/base.css index 7461af6..f90aa61 100644 --- a/_includes/styles/base.css +++ b/_includes/styles/base.css @@ -342,6 +342,10 @@ details.styled { section { padding: 1.4rem; text-align: start !important; + + ul { + margin: -.5rem -.5rem -.5rem -1rem; + } } .card { @@ -385,22 +389,22 @@ details.styled { /* Dashed border */ hr.dashed { - border-top: .1rem dashed var(--border); + border: .1rem dashed var(--border); } /* Dotted border */ hr.dotted { - border-top: .1rem dotted var(--border); + border: .1rem dotted var(--border); } /* Solid border */ hr.solid { - border-top: .1rem solid var(--border); + border: .1rem solid var(--border); } /* Rounded border */ hr.rounded { - border-top: .2rem solid var(--border); + border: .2rem solid var(--border); border-radius: 5px; } @@ -414,7 +418,7 @@ summary { display: flex; } -/* link "button" styling */ +/* button link styling */ .button { background-color: color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 1rem; @@ -423,6 +427,12 @@ summary { text-decoration: none; text-shadow: none; transition: all .2s; + white-space: nowrap; + line-height: 3rem; + + .icon { + transform: scale(1.13) translateY(.7rem); + } } .button:hover { @@ -438,6 +448,24 @@ summary { z-index: 999999 !important; } +/* image-button grid */ +.img-buttons { + 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); + } +} + /* --------------- - alt text popup - --------------- */ @@ -497,266 +525,13 @@ summary { } } -/* different styling for elements in dark mode - must also be applied to the html element below - needed as to not break with users using their browser settings or manually setting the theme through the website */ - -html:not([data-theme="light"]) { - @media (prefers-color-scheme: dark) { - .navbar { - .nav-home:hover, .nav-home:focus-visible { - background-color: var(--accent); - color: var(--background); - } - .nav-notebook:hover, .nav-notebook:focus-visible { - background-color: var(--purple); - color: var(--background); - } - .nav-webmaster:hover, .nav-webmaster:focus-visible { - background-color: var(--green); - color: var(--background); - } - .nav-donate:hover,.nav-donate:focus-visible { - background-color: var(--pink); - color: var(--background); - } - } - } -} - -html[data-theme="dark"] { - .navbar { - .nav-home:hover, .nav-home:focus-visible { - background-color: var(--accent); - color: var(--background); - } - .nav-notebook:hover, .nav-notebook:focus-visible { - background-color: var(--purple); - color: var(--background); - } - .nav-webmaster:hover, .nav-webmaster:focus-visible { - background-color: var(--green); - color: var(--background); - } - .nav-donate:hover, .nav-donate:focus-visible { - background-color: var(--pink); - color: var(--background); - } - } -} - -/* modify widths and spacing depending on the size of the display */ - @media screen and (max-width: 1083px) { - .navbar { - .nav-desktop { - display: none !important; - } - - .nav-mobile-menu { - display: inline-block !important; - max-width: 3rem; - min-width: 3rem; - position: relative; - - input[type="checkbox"] { - left: -100vw; - position: absolute; - } - - label { - border-radius: 1rem; - cursor: pointer; - display: inline-block; - left: -.5rem; - margin-right: .1rem; - max-height: 2rem; - max-width: 3rem; - min-height: 2rem; - min-width: 3rem; - overflow: hidden !important; - padding-right: 1rem; - position: relative; - - .synth-icon { - transform: scaleX(-1) scale(1.5) translateX(-.5rem) translateY(.1rem); - } - } - - label:hover { - .synth-icon { - transform: scaleX(-1) scale(1.5) translateX(-.5rem) translateY(.2rem) rotate(10deg); - } - } - + details.styled { + section { + /* reset margins for list on mobile view */ ul { - background-color: var(--background); - border-radius: 1rem; - border: var(--accent) solid .15rem; - height: max-content; - left: 0; - margin-top: .4rem !important; - position: absolute; - visibility: hidden; - width: max-content; - - /* inital "hidden" state, used for providing animation when activated */ - opacity: 0; - scale: .5; - transform-origin: top left; - transition: opacity .3s, scale .3s, visibility .3s; - - li { - border-radius: 1rem; - list-style-type: none; - margin: .5rem .5rem .5rem -1.9rem; - overflow: clip; - padding: .7rem; - transition: .2s all; - - a { - color: var(--foreground); - text-decoration: none; - text-shadow: unset; - } - - .icon { - padding-right: .3em; - transition: .2s all; - } - } - - li:hover { - transition: .2s all; - - .icon { - transform: scale(2.5) translateX(-.1rem) translateY(.1rem) rotate(15deg); - transition: .2s all; - } - } - - .nav-home:hover, .nav-home:focus-visible { - background-color: color-mix(in srgb, var(--accent) 20%, transparent); - a { - color: var(--foreground); - } - } - .nav-notebook:hover, .nav-home:focus-visible { - background-color: color-mix(in srgb, var(--purple) 20%, transparent); - a { - color: var(--foreground); - } - } - .nav-webmaster:hover, .nav-home:focus-visible { - background-color: color-mix(in srgb, var(--green) 20%, transparent); - a { - color: var(--foreground); - } - } - .nav-donate:hover, .nav-home:focus-visible { - background-color: color-mix(in srgb, var(--pink) 20%, transparent); - a { - color: var(--foreground); - } - } - } - - input[type="checkbox"]:checked ~ ul { - /* makes the menu visibile when activated and makes it appear from the top right */ - opacity: 1; - scale: 1; - transition: opacity .3s, scale .3s, visibility .3s; - visibility: visible; + margin: unset !important; } } - - .nav-links { - display: none !important; - } - - .nav-settings { - span { - padding: 0 .4rem !important; - } - } - } - - .window:not(#footer) { - .header { - .icon { - padding: .3rem .4rem .3rem .4rem; - } - - .window-buttons { - display: none !important; - } - - .close-button { - margin-left: auto !important; - } - } - - main, section, article { - padding: .5rem; - } - - animation: unset !important; - border-bottom: var(--accent) solid .15rem; - border-left: unset !important; - border-radius: unset !important; - border-right: unset !important; - border-top: var(--accent) solid .15rem; - margin-bottom: .8em; - } - - /* window when its the first one on the page */ - .window:first-child { - margin-top: 3.4rem !important; - } - - @media (prefers-color-scheme: dark) { - html:not([data-theme="light"]) { - .navbar .nav-mobile-menu ul { - .nav-home:hover a, .nav-home:focus-visible a { - color: var(--accent); - } - .nav-notebook:hover a, .nav-notebook:focus-visible a { - color: var(--purple); - } - .nav-webmaster:hover a, .nav-webmaster:focus-visible a { - color: var(--green); - } - .nav-donate:hover a, .nav-donate:focus-visible a { - color: var(--pink); - } - } - } - } - - html[data-theme="dark"] { - .navbar .nav-mobile-menu ul { - .nav-home:hover a, .nav-home:focus-visible a { - color: var(--accent); - } - .nav-notebook:hover a, .nav-notebook:focus-visible a { - color: var(--purple); - } - .nav-webmaster:hover a, .nav-webmaster:focus-visible a { - color: var(--green); - } - .nav-donate:hover a, .nav-donate:focus-visible a { - color: var(--pink); - } - } - } -} - -@media screen and (max-width: 540px) { - #footer { - 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/_includes/styles/footer.css b/_includes/styles/footer.css index 1c092e0..d960961 100644 --- a/_includes/styles/footer.css +++ b/_includes/styles/footer.css @@ -109,4 +109,15 @@ footer { } } } +} + +@media screen and (max-width: 540px) { + #footer { + 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/_includes/styles/icons.css b/_includes/styles/icons.css index 74b2ffd..bdd97dc 100644 --- a/_includes/styles/icons.css +++ b/_includes/styles/icons.css @@ -37,6 +37,7 @@ .tabler--brand-metabrainz { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 7v10l7 4V3zm18 0v10l-7 4V3z'/%3E%3C/svg%3E"); } .tabler--brand-tabler { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m8 9l3 3l-3 3m5 0h3'/%3E%3Cpath d='M3 7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4z'/%3E%3C/g%3E%3C/svg%3E"); } .tabler--building-bank { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 21h18M3 10h18M5 6l7-3l7 3M4 10v11m16-11v11M8 14v3m4-3v3m4-3v3'/%3E%3C/svg%3E"); } +.tabler--bulb { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12h1m8-9v1m8 8h1M5.6 5.6l.7.7m12.1-.7l-.7.7M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0-1 3a2 2 0 0 1-4 0a3.5 3.5 0 0 0-1-3m.7 1h4.6'/%3E%3C/svg%3E"); } .tabler--corner-down-right { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 6v6a3 3 0 0 0 3 3h10l-4-4m0 8l4-4'/%3E%3C/svg%3E"); } .tabler--currency-dollar { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M16.7 8A3 3 0 0 0 14 6h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1-2.7-2M12 3v3m0 12v3'/%3E%3C/svg%3E"); } .tabler--external-link { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6m-7 1l9-9m-5 0h5v5'/%3E%3C/svg%3E"); } @@ -48,6 +49,7 @@ .tabler--letter-case { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14 15.5a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0M3 19V8.5a3.5 3.5 0 0 1 7 0V19m-7-6h7m11-1v7'/%3E%3C/svg%3E"); } .tabler--link { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 15l6-6m-4-3l.463-.536a5 5 0 0 1 7.071 7.072L18 13m-5 5l-.397.534a5.07 5.07 0 0 1-7.127 0a4.97 4.97 0 0 1 0-7.071L6 11'/%3E%3C/svg%3E"); } .tabler--link { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 15l6-6m-4-3l.463-.536a5 5 0 0 1 7.071 7.072L18 13m-5 5l-.397.534a5.07 5.07 0 0 1-7.127 0a4.97 4.97 0 0 1 0-7.071L6 11'/%3E%3C/svg%3E"); } +.tabler--list-tree { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 6h11m-8 6h8m-5 6h5M5 6v.01M8 12v.01M11 18v.01'/%3E%3C/svg%3E"); } .tabler--login { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M15 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2'/%3E%3Cpath d='M21 12H8l3-3m0 6l-3-3'/%3E%3C/g%3E%3C/svg%3E");} .tabler--mail { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='m3 7l9 6l9-6'/%3E%3C/g%3E%3C/svg%3E"); } .tabler--maximize { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8V6a2 2 0 0 1 2-2h2M4 16v2a2 2 0 0 0 2 2h2m8-16h2a2 2 0 0 1 2 2v2m-4 12h2a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E"); } diff --git a/_includes/styles/navbar.css b/_includes/styles/navbar.css index fd748b2..a68266b 100644 --- a/_includes/styles/navbar.css +++ b/_includes/styles/navbar.css @@ -227,7 +227,7 @@ } } - input[type="checkbox"]:checked ~ ul { + input[type="checkbox"]#nav-settings-menu:checked ~ ul { /* makes the menu visibile when activated and makes it appear from the top right */ opacity: 1; scale: 1; @@ -262,4 +262,222 @@ transition: .2s all; background-color: color-mix(in srgb, var(--accent) 40%, transparent); border-bottom: solid .2rem var(--accent); +} + +/* different styling for elements in dark mode + must also be applied to the html element below - needed as to not break with users using their browser settings or manually setting the theme through the website */ +html:not([data-theme="light"]) { + @media (prefers-color-scheme: dark) { + .navbar { + .nav-home:hover, .nav-home:focus-visible { + background-color: var(--accent); + color: var(--background); + } + .nav-notebook:hover, .nav-notebook:focus-visible { + background-color: var(--purple); + color: var(--background); + } + .nav-webmaster:hover, .nav-webmaster:focus-visible { + background-color: var(--green); + color: var(--background); + } + .nav-donate:hover,.nav-donate:focus-visible { + background-color: var(--pink); + color: var(--background); + } + } + } +} + +html[data-theme="dark"] { + .navbar { + .nav-home:hover, .nav-home:focus-visible { + background-color: var(--accent); + color: var(--background); + } + .nav-notebook:hover, .nav-notebook:focus-visible { + background-color: var(--purple); + color: var(--background); + } + .nav-webmaster:hover, .nav-webmaster:focus-visible { + background-color: var(--green); + color: var(--background); + } + .nav-donate:hover, .nav-donate:focus-visible { + background-color: var(--pink); + color: var(--background); + } + } +} + +/* modify widths and spacing depending on the size of the display */ +@media screen and (max-width: 1083px) { + .navbar { + .nav-desktop { + display: none !important; + } + + .nav-mobile-menu { + display: inline-block !important; + max-width: 3rem; + min-width: 3rem; + position: relative; + + input[type="checkbox"] { + left: -100vw; + position: absolute; + } + + label { + border-radius: 1rem; + cursor: pointer; + display: inline-block; + left: -.5rem; + margin-right: .1rem; + max-height: 2rem; + max-width: 3rem; + min-height: 2rem; + min-width: 3rem; + overflow: hidden !important; + padding-right: 1rem; + position: relative; + + .synth-icon { + transform: scaleX(-1) scale(1.5) translateX(-.5rem) translateY(.1rem); + } + } + + label:hover { + .synth-icon { + transform: scaleX(-1) scale(1.5) translateX(-.5rem) translateY(.2rem) rotate(10deg); + } + } + + ul { + background-color: var(--background); + border-radius: 1rem; + border: var(--accent) solid .15rem; + height: max-content; + left: 0; + margin-top: .4rem !important; + position: absolute; + visibility: hidden; + width: max-content; + + /* inital "hidden" state, used for providing animation when activated */ + opacity: 0; + scale: .5; + transform-origin: top left; + transition: opacity .3s, scale .3s, visibility .3s; + + li { + border-radius: 1rem; + list-style-type: none; + margin: .5rem .5rem .5rem -1.9rem; + overflow: clip; + padding: .7rem; + transition: .2s all; + + a { + color: var(--foreground); + text-decoration: none; + text-shadow: unset; + } + + .icon { + padding-right: .3em; + transition: .2s all; + } + } + + li:hover { + transition: .2s all; + + .icon { + transform: scale(2.5) translateX(-.1rem) translateY(.1rem) rotate(15deg); + transition: .2s all; + } + } + + .nav-home:hover, .nav-home:focus-visible { + background-color: color-mix(in srgb, var(--accent) 20%, transparent); + a { + color: var(--foreground); + } + } + .nav-notebook:hover, .nav-home:focus-visible { + background-color: color-mix(in srgb, var(--purple) 20%, transparent); + a { + color: var(--foreground); + } + } + .nav-webmaster:hover, .nav-home:focus-visible { + background-color: color-mix(in srgb, var(--green) 20%, transparent); + a { + color: var(--foreground); + } + } + .nav-donate:hover, .nav-home:focus-visible { + background-color: color-mix(in srgb, var(--pink) 20%, transparent); + a { + color: var(--foreground); + } + } + } + + input[type="checkbox"]:checked ~ ul { + /* makes the menu visibile when activated and makes it appear from the top right */ + opacity: 1; + scale: 1; + transition: opacity .3s, scale .3s, visibility .3s; + visibility: visible; + } + } + + .nav-links { + display: none !important; + } + + .nav-settings { + span { + padding: 0 .4rem !important; + } + } + } + + @media (prefers-color-scheme: dark) { + html:not([data-theme="light"]) { + .navbar .nav-mobile-menu ul { + .nav-home:hover a, .nav-home:focus-visible a { + color: var(--accent); + } + .nav-notebook:hover a, .nav-notebook:focus-visible a { + color: var(--purple); + } + .nav-webmaster:hover a, .nav-webmaster:focus-visible a { + color: var(--green); + } + .nav-donate:hover a, .nav-donate:focus-visible a { + color: var(--pink); + } + } + } + } + + html[data-theme="dark"] { + .navbar .nav-mobile-menu ul { + .nav-home:hover a, .nav-home:focus-visible a { + color: var(--accent); + } + .nav-notebook:hover a, .nav-notebook:focus-visible a { + color: var(--purple); + } + .nav-webmaster:hover a, .nav-webmaster:focus-visible a { + color: var(--green); + } + .nav-donate:hover a, .nav-donate:focus-visible a { + color: var(--pink); + } + } + } } \ No newline at end of file diff --git a/_includes/styles/pages/sneexy.css b/_includes/styles/pages/sneexy.css index 7403620..6fc3e4f 100644 --- a/_includes/styles/pages/sneexy.css +++ b/_includes/styles/pages/sneexy.css @@ -117,23 +117,6 @@ html[page-is="goopy"] { transition: .2s box-shadow; } - #buttons 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); - } - } - /* goop coloring for theme issues stuff */ @media (prefers-color-scheme: light) { .nav-baselink, .nav-accessibility { diff --git a/_includes/styles/toc.css b/_includes/styles/toc.css new file mode 100644 index 0000000..1e982b5 --- /dev/null +++ b/_includes/styles/toc.css @@ -0,0 +1,93 @@ +/* ╭──────────────────────────────────────╮ +/ │ _ │ +/ │ _ __ __ ___ _| |__ __ _ _ __ │ +/ │ | '_ \ / _` \ \ / / '_ \ / _` | '__| │ +/ │ | | | | (_| |\ V /| |_) | (_| | | │ +/ │ |_| |_|\__,_| \_/ |_.__/ \__,_|_| │ +/ ╰──────────────────────────────────────╯ +/ table of contents - styling for the table of contents button and list that appears on some pages */ + +.toc { + align-content: center; + background-color: var(--accent); + border-radius: 1rem; + color: var(--background); + cursor: pointer; + height: 1.9rem; + margin-left: auto !important; + outline: .13rem solid color-mix(in srgb, var(--accent) 60%, transparent); + position: absolute; + top: 1rem; + right: 1rem; + padding: 0px .2em !important; + /* unset the padding for the button itself so the button can take the padding to make the entire button clickable */ + + input[type="checkbox"]#toc-menu { + left: -100vw; + position: absolute; + } + + input[type="checkbox"]#toc-menu:focus-visible { + left: unset !important; + } + + label[data-toggle="toc"] { + cursor: pointer; + overflow: hidden !important; + padding: .3rem .5rem !important; + position: relative; + + .icon { + padding: 0 .5rem !important; + pointer-events: none; + transform: translateY(.1rem) scale(1.5); + } + } + + ul { + background-color: var(--background); + border-radius: 1rem; + border: var(--accent) solid .15rem; + cursor: initial !important; + /* reset the cursor otherwise it uses the pointer cursor */ + margin-top: 1.2rem !important; + max-height: 27rem; + max-width: 17rem; + min-height: 27rem; + min-width: 17rem; + overflow: scroll; + position: absolute; + right: .4rem; + visibility: hidden; + + /* inital "hidden" state, used for providing animation when activated */ + opacity: 0; + scale: .5; + transform-origin: top right; + transition: opacity .3s, scale .3s, visibility .3s; + + li { + border-radius: 1rem; + color: var(--foreground); + list-style-type: none; + margin-left: -2rem; + padding: .4rem; + + span { + padding: .1rem 0px .1rem 0px !important; + } + + h2 { + margin: 0 !important; + } + } + } + + input[type="checkbox"]#toc-menu:checked~ul { + /* makes the menu visibile when activated and makes it appear from the top right */ + opacity: 1; + scale: 1; + transition: opacity .3s, scale .3s, visibility .3s; + visibility: visible; + } +} \ No newline at end of file diff --git a/_includes/styles/windows.css b/_includes/styles/windows.css index d3dd9a5..464c3d9 100644 --- a/_includes/styles/windows.css +++ b/_includes/styles/windows.css @@ -160,4 +160,40 @@ .window:nth-child(10) { animation: .3s ease-out 2s 1 window-appear; animation-fill-mode: backwards; +} + +/* modify widths and spacing depending on the size of the display */ +@media screen and (max-width: 1083px) { + .window:not(#footer) { + .header { + .icon { + padding: .3rem .4rem .3rem .4rem; + } + + .window-buttons { + display: none !important; + } + + .close-button { + margin-left: auto !important; + } + } + + main, section, article { + padding: .5rem; + } + + animation: unset !important; + border-bottom: var(--accent) solid .15rem; + border-left: unset !important; + border-radius: unset !important; + border-right: unset !important; + border-top: var(--accent) solid .15rem; + margin-bottom: .8em; + } + + /* window when its the first one on the page */ + .window:first-child { + margin-top: 3.4rem !important; + } } \ No newline at end of file diff --git a/assets/buttons/sites/akko.wtf.png b/assets/buttons/sites/akko.wtf.png new file mode 100644 index 0000000000000000000000000000000000000000..d9dbfac017a61d2ebf988ef3d0faf458b20fcc1b GIT binary patch literal 5104 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 S{h>wx0000;hoZft2i8EP~Z*S7wvvgUvQ{{GlC zg=h&q#Q-EkVUjn9F;il8Wvjq$#hW^EH?qy@rFgbBXR*t{ov(0i`*uL;jYtH}Mj|7j zda1voWCk7;^I1r~|e8=^J;FFtE(3@5G`z@W8Hl%Jyr& zF+nHXX2O*|QB|?IF1N?y5rf014`Y+6`U&;yDJk&U|7%NzUzZ`gYZWJ#Z=an^pKx=V z3y5z)F%^P+w+2cIQn0rCo7&N`uOvjb@ScUyAC{+$TX4P+4;Qeqd4rAc!PH>ArIxXE zT9fFN^!WcVWYVanO@7Y}6_`)SN5OJ%WP^apOvn#`z5N1W7c*b!)!o^yyzJ=PQuAq| zAYudbHVyjP3 a%T+ft1dvJXQ>hSh4Cz0X(u8=30002VMv55# literal 0 HcmV?d00001 diff --git a/assets/buttons/sites/labyrinth.zone.gif b/assets/buttons/sites/labyrinth.zone.gif new file mode 100644 index 0000000000000000000000000000000000000000..0b5f967fe4152c376a21730c3c10a7c7e92bad56 GIT binary patch literal 1018 zcmV-F*&j5U?e9x)?w6wIU&wTv+{Qv*|000000000000000 z000000000000000A^8LW3IHDfEC2ui09XJY000I4ARvm!^Gpw-B0>w8Xf3d0ZeRYQ*cyufmexITzh(tW@ulEPK1S*TXj`)o0)c9V33b~hg)q#Pnc7j zo|<%xprWI0ot3CZQUi7&kR`T=Zqi&bq3TqOJ`1(D?nX_ z#WKRr-@j-AAygn&aG*zo0ihLa=+2qIgAM*OniSbkQ?OX(4u14#ZkkAx3=~92H#6PB zUDZsI3<@-5!iMdjk?eIX0YIMW6b}4JEv5mT?D|FZN7N|Mu2uo=vPe>C)vgDnrqeo* zYf5(wBUCWi?&QC6VZ9c`E41X#plRE-t5(`|&8cUw+_-@IIk)K8L z88%>1p_p@CFaV&j2+Kqni!05T0)We~0av9qO<>V!WZ^dZ8dQM-U8WJwe)jsGatjOdB22Yhl_n%RVQ%OOLdWpyxqV60~CUP*Y$n;blvW_MmKtI*8yJdb@{&T_^Wr) zx()z%AAf*&^1F;z-aVIDc9=;-@&2dF0tWEsTQ#QX_8mE=9Wa1}7B=SE034Rb;e8;& z<=1TN6{y>L-yOi8iU&0C8*7yXh+l;&Ug)1`90JhchaQ6XA&BoWP#k;<=J$_+DmKXC z04}~~8aWn{hDwbVhNqf^JLb6KeLwmLqIO0az#xN0CduNNXEp$(X$LTvsAHshf=JE+ZDxuonrCjx z>7h3|*5PV|9)}@^kVdNNq#go*X@i)0%IU0WiV&)f`k^AKidH&?A(o=5Dr}Zm?#E}W znJ!7|rv+Sy<7&Gekm#xYda*j}wK*b-?6OoQt6~EUII9}8yK0E5pf_4;t)$o*tEsnz za?2vP(o$xx2=?BK?T*FL>8hp!$f~To;3~S>!3c{(tfKpls_47h5-P8S4HQs7!T?x& oF#zCJ>~R4fYb^4}B$q5Q01^}+K?5tV-0{ocx(qJJFNXjCI}%CJmH+?% literal 0 HcmV?d00001