improve instance pages, start work on proper toc element
All checks were successful
/ build (push) Successful in 1m19s
All checks were successful
/ build (push) Successful in 1m19s
This commit is contained in:
parent
2e4dc59d4c
commit
a2d12ebead
13 changed files with 489 additions and 291 deletions
|
|
@ -4,6 +4,20 @@ layout: "layouts/base.njk"
|
|||
permalink: "/iceshrimp/"
|
||||
---
|
||||
|
||||
<!-- table of contents - wip
|
||||
<div class="toc">
|
||||
<input type="checkbox" id="toc-menu" value="" name="toc-menu">
|
||||
<label aria-label="Table of Contents" for="toc-menu" data-toggle="toc">
|
||||
<span class="icon tabler--settings">
|
||||
</label>
|
||||
<ul>
|
||||
<li>
|
||||
<p>hi</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<!-- iceshrimp introduction -->
|
||||
<div id="iceshrimp" class="window">
|
||||
<div class="header">
|
||||
|
|
@ -20,10 +34,44 @@ permalink: "/iceshrimp/"
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<section style="text-align:center;">
|
||||
<h1><a href="https://iceshrimp.net" target="_blank" style="vertical-align:middle;"><img src="/assets/isnet.png" alt="Iceshrimp.NET source" style="height:2rem;margin-right:.4rem;border-radius:.2rem" /></a>Icesynth!</h1>
|
||||
<p>Beep! A small instance themed around <a href="https://synthspecies.com">synths</a>, but accepts all. <small>Not to be confused with our <a href="/sharkey">Sharkey</a> instance.</small></p>
|
||||
<p><a class="button" href="https://beeping.synth.download/login"><span class="icon tabler--login"></span> Log in</a> <a class="button" href="https://beeping.synth.download/register"><span class="icon tabler--user-plus"></span> Register</a></p>
|
||||
<section>
|
||||
<h1 style="text-align:center;"><a href="https://iceshrimp.net" target="_blank" style="vertical-align:middle;"><img src="/assets/isnet.png" alt="Iceshrimp.NET source" style="height:2rem;margin-right:.4rem;border-radius:.2rem" /></a>Icesynth!</h1>
|
||||
<p style="text-align:center;">Beep! A small instance themed around <a href="https://synthspecies.com">synths</a>, but accepts all. <small>Not to be confused with our <a href="/sharkey">Sharkey</a> instance.</small></p>
|
||||
<p style="text-align:center;"><a class="button" href="https://beeping.synth.download/login"><span class="icon tabler--login"></span> Log in</a> <a class="button" href="https://beeping.synth.download/register"><span class="icon tabler--user-plus"></span> Register</a></p>
|
||||
<p style="text-align:center;"><a class="button" href="https://masto.beeping.synth.download"><span class="icon tabler--brand-mastodon"></span> Mastodon-FE</a> <a class="button" href="https://akko.beeping.synth.download"><span class="icon tabler--external-link"></span> Akkoma-FE</a> <a class="button" href="https://phanpy.beeping.synth.download"><span class="icon tabler--external-link"></span> Phanpy</a> <a class="button" href="https://pl-fe.beeping.synth.download"><span class="icon tabler--external-link"></span> pl-fe</a></p>
|
||||
<hr class="solid">
|
||||
<div class="img-buttons" style="margin-top:1rem;">
|
||||
<a href="https://synth.download"><img src="/assets/buttons/synth.download.svg" alt="Synth.Download!"></a>
|
||||
<a href="https://oomfie.city"><img src="/assets/buttons/sites/oomfie.city.png" alt="Oomfie City"></a>
|
||||
<a href="https://labyrinth.zone"><img src="/assets/buttons/sites/labyrinth.zone.gif" alt="Labyrinth Zone"></a>
|
||||
<a href="https://akko.wtf"><img src="/assets/buttons/sites/akko.wtf.png" alt="Luna Nova"></a>
|
||||
<a href="https://java.duke.social"><img src="/assets/buttons/sites/duke.social.webp" alt="Duke Social"></a>
|
||||
</div>
|
||||
<details class="styled" style="margin-top:2rem;">
|
||||
<summary><span class="icon tabler--list-tree"></span>Table-of-Contents <span class="icon tabler--arrow-autofit-height"></span></summary>
|
||||
<section>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#information">Instance information</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#features">Features</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#rules">Rules</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#frontends">Alternative frontends</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#bubble">Bubble timeline</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#moderation">Moderation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</details>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -20,10 +20,42 @@ permalink: "/sharkey/"
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<section style="text-align:center;">
|
||||
<h1><a href="https://joinsharkey.org" target="_blank" style="vertical-align:middle;"><img src="/assets/sharkey_sh.svg" alt="Sharkey's website" style="height:2rem;margin-right:.4rem;border-radius:.2rem" /></a>Beepkey!</h1>
|
||||
<p>Beep! A small instance themed around <a href="https://synthspecies.com">synths</a>, but accepts all. <small>Not to be confused with our <a href="/iceshrimp">Iceshrimp</a> instance.</small></p>
|
||||
<p><a class="button" href="https://booping.synth.download"><span class="icon tabler--external-link"></span> Visit</a></p>
|
||||
<section>
|
||||
<h1 style="text-align:center;"><a href="https://joinsharkey.org" target="_blank" style="vertical-align:middle;"><img src="/assets/sharkey_sh.svg" alt="Sharkey's website" style="height:2rem;margin-right:.4rem;border-radius:.2rem" /></a>Beepkey!</h1>
|
||||
<p style="text-align:center;">Beep! A small instance themed around <a href="https://synthspecies.com">synths</a>, but accepts all. <small>Not to be confused with our <a href="/iceshrimp">Iceshrimp</a> instance.</small></p>
|
||||
<p style="text-align:center;"><a class="button" href="https://booping.synth.download"><span class="icon tabler--external-link"></span> Visit</a> <a class="button" href="https://booping.synth.download/@sneexy/pages/users-guide"><span class="icon tabler--bulb"></span> Tips & Tricks</a></p>
|
||||
<p style="text-align:center;margin-bottom:-1rem;opacity:.8;"><small><b>Note:</b> Alternative clients are noted to be unstable with Sharkey.</small></p>
|
||||
<p style="text-align:center;"><a class="button" href="https://masto.booping.synth.download"><span class="icon tabler--brand-mastodon"></span> Mastodon-FE</a> <a class="button" href="https://phanpy.booping.synth.download"><span class="icon tabler--external-link"></span> Phanpy</a> <a class="button" href="https://pl-fe.booping.synth.download"><span class="icon tabler--external-link"></span> pl-fe</a></p>
|
||||
<hr class="solid">
|
||||
<div class="img-buttons" style="margin-top:1rem;">
|
||||
<a href="https://synth.download"><img src="/assets/buttons/synth.download.svg" alt="Synth.Download!"></a>
|
||||
<a href="https://oomfie.city"><img src="/assets/buttons/sites/oomfie.city.png" alt="Oomfie City"></a>
|
||||
<a href="https://labyrinth.zone"><img src="/assets/buttons/sites/labyrinth.zone.gif" alt="Labyrinth Zone"></a>
|
||||
<a href="https://akko.wtf"><img src="/assets/buttons/sites/akko.wtf.png" alt="Luna Nova"></a>
|
||||
<a href="https://java.duke.social"><img src="/assets/buttons/sites/duke.social.webp" alt="Duke Social"></a>
|
||||
</div>
|
||||
<details class="styled" style="margin-top:2rem;">
|
||||
<summary><span class="icon tabler--list-tree"></span>Table-of-Contents <span class="icon tabler--arrow-autofit-height"></span></summary>
|
||||
<section>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#information">Instance information</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#features">Features</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#rules">Rules</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#bubble">Bubble timeline</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#moderation">Moderation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</details>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ permalink: "/~sneexy/"
|
|||
<section>
|
||||
<span style="color: var(--red);">If any are broken and/or missing, poke me.</span>
|
||||
<p style="text-align: center;">Friends!</p>
|
||||
<div class="buttons">
|
||||
<div class="img-buttons">
|
||||
<a href="https://23sonics.zone"><img src="/assets/buttons/friends/23sonics.gif" alt="23Sonics"></a>
|
||||
<a href="https://authenyo.xyz"><img src="/assets/buttons/friends/authen.gif" alt="authenyo"></a>
|
||||
<a href="https://autumn.town"><img src="/assets/buttons/friends/autumn.webp" alt="Autumn Town Café"></a>
|
||||
|
|
@ -200,7 +200,7 @@ permalink: "/~sneexy/"
|
|||
<a href="https://zvava.org"><img src="/assets/buttons/friends/zvava.png" alt="zvava"></a>
|
||||
</div>
|
||||
<p style="text-align: center;"><small>Misc.</small></p>
|
||||
<div class="buttons">
|
||||
<div class="img-buttons">
|
||||
<!-- software/browsers -->
|
||||
<a href="https://www.mozilla.org/en-US/firefox/new"><img src="/assets/buttons/software/firefox.png" alt="Get Firefox"></a>
|
||||
<a href="https://ublockorigin.com"><img src="/assets/buttons/software/ublockoriginnow.png" alt="uBlock Origin Now!"></a>
|
||||
|
|
@ -234,7 +234,7 @@ permalink: "/~sneexy/"
|
|||
<img src="/assets/buttons/random/yoshilore.gif" alt="Yoshi Lore">
|
||||
</div>
|
||||
<p style="text-align: center;"><small><span style="color: var(--green);">Me!</span> (Click to copy HTML)</small></p>
|
||||
<div class="buttons">
|
||||
<div class="img-buttons">
|
||||
<button style="cursor: pointer; background: unset; border-width: 0px; padding: 0px; display: inline-flex;" onclick="copyButtonSneexy()">
|
||||
<img src="/assets/buttons/sneexy.svg" alt="Sneexy">
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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"); }
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
93
_includes/styles/toc.css
Normal file
93
_includes/styles/toc.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
BIN
assets/buttons/sites/akko.wtf.png
Normal file
BIN
assets/buttons/sites/akko.wtf.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5 KiB |
BIN
assets/buttons/sites/duke.social.webp
Normal file
BIN
assets/buttons/sites/duke.social.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 796 B |
BIN
assets/buttons/sites/labyrinth.zone.gif
Normal file
BIN
assets/buttons/sites/labyrinth.zone.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1,018 B |
Loading…
Add table
Add a link
Reference in a new issue