Icesynth!
- Beep! A small instance themed around synths, but accepts all. Not to be confused with our Sharkey instance.
- +Icesynth!
+ Beep! A small instance themed around synths, but accepts all. Not to be confused with our Sharkey instance.
+ +Mastodon-FE Akkoma-FE Phanpy pl-fe
++
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+
+
+
+
Table-of-Contents
+-
+
- + Instance information + +
- + Features + +
- + Rules + +
- + Alternative frontends + +
- + Bubble timeline + +
- + Moderation + +
Beepkey!
- Beep! A small instance themed around synths, but accepts all. Not to be confused with our Iceshrimp instance.
- +Beepkey!
+ Beep! A small instance themed around synths, but accepts all. Not to be confused with our Iceshrimp instance.
+ +Note: Alternative clients are noted to be unstable with Sharkey.
+ ++
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Table-of-Contents
+-
+
- + Instance information + +
- + Features + +
- + Rules + +
- + Bubble timeline + +
- + Moderation + +
Friends!
-
+
@@ -200,7 +200,7 @@ permalink: "/~sneexy/"
@@ -200,7 +200,7 @@ permalink: "/~sneexy/"
Misc.
-
+
@@ -234,7 +234,7 @@ permalink: "/~sneexy/"
@@ -234,7 +234,7 @@ permalink: "/~sneexy/"
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 0000000..d9dbfac
Binary files /dev/null and b/assets/buttons/sites/akko.wtf.png differ
diff --git a/assets/buttons/sites/duke.social.webp b/assets/buttons/sites/duke.social.webp
new file mode 100644
index 0000000..933d032
Binary files /dev/null and b/assets/buttons/sites/duke.social.webp differ
diff --git a/assets/buttons/sites/labyrinth.zone.gif b/assets/buttons/sites/labyrinth.zone.gif
new file mode 100644
index 0000000..0b5f967
Binary files /dev/null and b/assets/buttons/sites/labyrinth.zone.gif differ