sundae/website
sundae/website
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

unfinished bullCRAP

Browse source
This commit is contained in:
sundae 2026-04-02 19:45:57 +03:00
commit cb5ba4fb82
Signed by: sundae
SSH key fingerprint: SHA256:MsJkKuo4PUdjQDpLeaURy81drKkW14exlTHp+8QFu6M
23 changed files with 351 additions and 347 deletions
Download patch file Download diff file Expand all files Collapse all files

142
_src/_includes/base.njk
View file

@ -2,9 +2,12 @@
paw: "m 15.700739,16.184194 c 0,4.483 -2.555,2.038 -5.7060001,2.038 -3.151,0 -5.706,2.445 -5.706,-2.038 0,-2.925 2.555,-6.113001 5.706,-6.113001 3.1510001,0 5.7060001,3.188001 5.7060001,6.113001 z M 4.0687389,8.1071934 c 0.394,1.336 0.007,2.6259996 -0.862,2.8819996 -0.87,0.256001 -1.8929999,-0.619 -2.28599993,-1.9539996 -0.393,-1.336 -0.007,-2.626 0.86199993,-2.882 0.87,-0.256 1.893,0.619 2.286,1.954 z m 15.0000001,0.945 c -0.407,1.3319996 -1.442,2.1960006 -2.312,1.9299996 -0.869,-0.266 -1.244,-1.5609996 -0.837,-2.8919996 0.407,-1.332 1.442,-2.196 2.312,-1.93 0.869,0.265 1.244,1.56 0.837,2.892 z m -10.1100001,-4.859 c 0.365,1.897 -0.218,3.606 -1.302,3.814 -1.085,0.209 -2.261,-1.16 -2.626,-3.059 -0.365,-1.898 0.218,-3.6060001 1.302,-3.8150001 1.085,-0.20799996 2.261,1.1620001 2.626,3.0600001 z m 5.9960001,0.778 c -0.388,1.893 -1.578,3.25 -2.66,3.029 -1.082,-0.222 -1.647,-1.937 -1.26,-3.83 0.388,-1.894 1.578,-3.25000006 2.66,-3.0290001 1.082,0.222 1.647,1.9370001 1.26,3.8300001 z" paw: "m 15.700739,16.184194 c 0,4.483 -2.555,2.038 -5.7060001,2.038 -3.151,0 -5.706,2.445 -5.706,-2.038 0,-2.925 2.555,-6.113001 5.706,-6.113001 3.1510001,0 5.7060001,3.188001 5.7060001,6.113001 z M 4.0687389,8.1071934 c 0.394,1.336 0.007,2.6259996 -0.862,2.8819996 -0.87,0.256001 -1.8929999,-0.619 -2.28599993,-1.9539996 -0.393,-1.336 -0.007,-2.626 0.86199993,-2.882 0.87,-0.256 1.893,0.619 2.286,1.954 z m 15.0000001,0.945 c -0.407,1.3319996 -1.442,2.1960006 -2.312,1.9299996 -0.869,-0.266 -1.244,-1.5609996 -0.837,-2.8919996 0.407,-1.332 1.442,-2.196 2.312,-1.93 0.869,0.265 1.244,1.56 0.837,2.892 z m -10.1100001,-4.859 c 0.365,1.897 -0.218,3.606 -1.302,3.814 -1.085,0.209 -2.261,-1.16 -2.626,-3.059 -0.365,-1.898 0.218,-3.6060001 1.302,-3.8150001 1.085,-0.20799996 2.261,1.1620001 2.626,3.0600001 z m 5.9960001,0.778 c -0.388,1.893 -1.578,3.25 -2.66,3.029 -1.082,-0.222 -1.647,-1.937 -1.26,-3.83 0.388,-1.894 1.578,-3.25000006 2.66,-3.0290001 1.082,0.222 1.647,1.9370001 1.26,3.8300001 z"
back: "M2 16 18 4h6L12 14H50v4H12L24 28H18Z" back: "M2 16 18 4h6L12 14H50v4H12L24 28H18Z"
theme: "M16 6a1 1 0 010 20Zm0-4a1 1 0 000 28A1 1 0 0016 2" theme: "M16 6a1 1 0 010 20Zm0-4a1 1 0 000 28A1 1 0 0016 2"
menu: "M4 8H28v3H4Zm0 7H28v3H4Zm0 7H28v3H4Z"
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
{% set currentUrl %}{{ page.url }}{% endset %}
{% set sortedPages = collections.pages|sort(attribute='data.order') %}
<head> <head>
<title> <title>
{% if page.url.split('/') %} {% if page.url.split('/') %}
@ -21,120 +24,81 @@ theme: "M16 6a1 1 0 010 20Zm0-4a1 1 0 000 28A1 1 0 0016 2"
<link rel="stylesheet" href="/assets/css/default/default.css"> <link rel="stylesheet" href="/assets/css/default/default.css">
<link rel="preload" href="/assets/css/citrus/default.css" as="style"> <link rel="preload" href="/assets/css/citrus/default.css" as="style">
<link rel="stylesheet" href="/assets/css/default/system.css" id="themed"> <link rel="stylesheet" href="/assets/css/default/system.css" id="themed">
{% if page.url === "/home/" %} {% if currentUrl === "/home/" %}
<link rel="stylesheet" href="/assets/css/pokesprite-pokemon-gen8.css"> <link rel="stylesheet" href="/assets/css/pokesprite-pokemon-gen8.css">
{% endif %} {% endif %}
{% set availableStyles = ['home', 'blog', 'gallery'] %} {% set availableStyles = ['home', 'blog', 'gallery'] %}
{% if page.url %} {% if currentUrl %}
{% if availableStyles.indexOf(page.url.split('/')[1]|slugify) !== -1 %} {% if availableStyles.indexOf(page.url.split('/')[1]|slugify) !== -1 %}
<link rel="stylesheet" href="/assets/css/default/{{ page.url.split('/')[1]|slugify }}.css"> <link rel="stylesheet" href="/assets/css/default/{{ page.url.split('/')[1]|slugify }}.css">
{% endif %} {% endif %}
{% endif %} {% endif %}
</head> </head>
<body id="{{ page.url.split('/')[1]|slugify }}"> <body id="{{ page.url.split('/')[1]|slugify }}">
<nav> <dialog id="signal">
<details open=""> <article>
<summary> {% for article in collections.articles %}
Navigation {% if article.fileSlug == 'what' %}
</summary> {{ article.content | safe }}
{% set currentUrl %}{{ page.url }}{% endset %} {% endif %}
{% set sortedPages = collections.pages|sort(attribute='data.order') %} {% endfor %}
</article>
</dialog>
<section>
<nav class="navbar" id="floating">
<ul role="list"> <ul role="list">
<li> <li>
<a href="../"> <button popovertarget="mobile" aria-label="Toggle menu">
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="{{ back }}"></path> <path d="{{menu}}"></path>
</svg> </svg>
Back </button>
</a>
</li> </li>
{% for page in sortedPages %}
<li> <li>
<a href="{{ page.url }}" {% if currentUrl.split('/')[1] === page.url.split('/')[1]|slugify %} aria-current="page" {% endif %}> <button id="theme-toggle" aria-label="Toggle theme">
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="{{ page.data.icon }}"></path> <path d="{{ theme }}">
</svg> </svg>
{{ page.data.title }} </button>
</a>
</li>
{% endfor %}
</li> </li>
</ul> </ul>
</details> </nav>
<details open=""> </section>
<summary> <section id="mobile" popover="">
Options <nav class="navbar">
</summary> {% include "nav.njk" %}
<ul role="list"> <ul role="list">
<li> <li>
<button id="theme-toggle"> <button id="theme-toggle" aria-label="Toggle theme">
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="{{ theme }}"> <path d="{{ theme }}">
</svg> </svg>
Toggle theme Toggle theme
</button> </button>
</li> </li>
</li>
</ul> </ul>
<script src="/assets/js/theme.js"></script> </nav>
</details> </section>
<details open=""> <header>
<summary> <h1>
Outgoing {% for page in sortedPages %}
</summary> {% if currentUrl.split('/')[1] === page.url.split('/')[1]|slugify %}
<ul role="list"> <svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
{% for key, items in outgoing %} <path d="{{ page.data.icon }}"></path>
{% for item in items %} </svg>
{% if key != "signal" %} {% endif %}
<li> {% endfor %}
<a href="{{ item.src }}"> {{ page.url.split('/')[1]|slugify|capitalize }}
<img src="/assets/img/icon/{{ item.icon }}" alt="" aria-hidden="true">{{ key | capitalize }} </h1>
</a> </header>
</li> <main>
{% endif %} {{ content | safe }}
{% endfor %} </main>
{% if key == "signal" %} <footer>
<li> <span id="message" aria-label="Random footer message">made with love</span>
<button command="show-modal" commandfor="{{ items[0].id }}"> <script src="/assets/js/footer.js"></script>
<img src="/assets/img/icon/{{ items[0].icon }}" alt="" aria-hidden="true">{{ key | capitalize }} </footer>
</button> <script src="/assets/js/what.js" type="module"></script>
</li> <script src="/assets/js/theme.js"></script>
{% endif %}
{% endfor %}
</ul>
<dialog id="signal">
<article>
{% for article in collections.articles %}
{% if article.fileSlug == 'what' %}
{{ article.content | safe }}
{% endif %}
{% endfor %}
</article>
</dialog>
</details>
<script src="/assets/js/what.js" type="module"></script>
<script src="/assets/js/details-save.js"></script>
</body> </body>
</html> </html>
</nav>
<header>
<h1>
{% for page in sortedPages %}
{% if currentUrl.split('/')[1] === page.url.split('/')[1]|slugify %}
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="{{ page.data.icon }}"></path>
</svg>
{% endif %}
{% endfor %}
{{ page.url.split('/')[1]|slugify|capitalize }}
</h1>
</header>
<main>
{{ content | safe }}
</main>
<footer>
<span id="message" aria-label="Random footer message">made with love</span>
<script src="/assets/js/footer.js"></script>
</footer>
</body>
</html>

24
_src/_includes/nav-main.njk Normal file
View file

@ -0,0 +1,24 @@
<section>
<h3>Pages</h3>
<ul role="list">
<li>
<a href="../">
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="{{ back }}"></path>
</svg>
Go back
</a>
</li>
{% for page in sortedPages %}
<li>
<a href="{{ page.url }}" {% if currentUrl.split('/')[1] === page.url.split('/')[1]|slugify %} aria-current="page" {% endif %}>
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="{{ page.data.icon }}"></path>
</svg>
{{ page.fileSlug | capitalize }}
</a>
</li>
{% endfor %}
</li>
</ul>
</section>

23
_src/_includes/nav-outgoing.njk Normal file
View file

@ -0,0 +1,23 @@
<section>
<h3>Outgoing</h3>
<ul role="list">
{% for key, items in outgoing %}
{% for item in items %}
{% if key != "signal" %}
<li>
<a href="{{ item.src }}">
<img src="/assets/img/icon/{{ item.icon }}" alt="" aria-hidden="true">{{ key | capitalize }}
</a>
</li>
{% endif %}
{% endfor %}
{% if key == "signal" %}
<li>
<button command="show-modal" commandfor="{{ items[0].id }}">
<img src="/assets/img/icon/{{ items[0].icon }}" alt="" aria-hidden="true">{{ key | capitalize }}
</button>
</li>
{% endif %}
{% endfor %}
</ul>
</section>

2
_src/_includes/nav.njk Normal file
View file

@ -0,0 +1,2 @@
{% include "nav-main.njk" %}
{% include "nav-outgoing.njk" %}

32
_src/assets/css/citrus/default.css
View file

@ -1,10 +1,12 @@
@import url("./media.css");
@import url("./blog.css"); @import url("./blog.css");
@import url("./gallery.css"); @import url("./gallery.css");
@import url("./home.css"); @import url("./home.css");
@import url("./nav.css"); @import url("./nav.css");
@import url("./variables.css"); @import url("./variables.css");
:is(a, button):not(span *, .postscript *, body nav *),.link, :is(a, button):not(span *, .postscript *, body nav *),
.link,
#posts a { #posts a {
color: var(--citrus-dark); color: var(--citrus-dark);
transition: background-color var(--trans); transition: background-color var(--trans);
@ -34,7 +36,8 @@ ul:not([role]) li::before {
background-color: var(--citrus-dark-extra); background-color: var(--citrus-dark-extra);
} }
article { article {
background: var(--noise), background:
var(--noise),
linear-gradient( linear-gradient(
var(--citrus-light) 70%, var(--citrus-light) 70%,
color-mix(in lch, var(--citrus-mix-light), var(--citrus-light)) 100% color-mix(in lch, var(--citrus-mix-light), var(--citrus-light)) 100%
@ -50,30 +53,7 @@ article {
background-color: var(--citrus-dark); background-color: var(--citrus-dark);
color: var(--citrus-primary); color: var(--citrus-primary);
} }
&:not(pre,code,a) { &:not(pre, code, a) {
font-family: "Nosey Rodent", sans-serif; font-family: "Nosey Rodent", sans-serif;
} }
} }
@media screen and (max-width: 920px) {
body > nav {
border: 0;
}
header {
margin: 0;
padding: 0;
border-right: 0;
border-radius: 0;
width: 100%;
}
body::after {
content: none;
}
}
@media screen and (max-width: 450px) {
#artworks & article {
&::before {
width: calc(100% + var(--pad-l) * 2) !important;
margin: -3rem 0 0 -16px;
}
}
}

42
_src/assets/css/citrus/media.css Normal file
View file

@ -0,0 +1,42 @@
/* default.css */
@media screen and (min-width: 920px) {
header {
width: var(--view);
border-right-width: 4px;
border-right-style: solid;
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-right-radius: 100px;
margin-left: calc(var(--view) - 4px);
position: relative;
padding: calc(var(--pad-m) - 2px) var(--pad-sm);
z-index: 2;
}
}
/* nav.css */
@media screen and (max-width: 920px) {
header {
margin: 0 !important;
padding: 0 !important;
border-right: 0 !important;
border-radius: 0 !important;
width: 100% !important;
background-attachment: none !important;
background-image: none !important;
background-size: none !important;
}
body::after {
content: none !important;
}
}
/* gallery.css */
@media screen and (max-width: 450px) {
#artworks & article {
&::before {
width: calc(100% + var(--pad-l) * 2) !important;
margin: -3rem 0 0 -16px !important;
}
}
}

54
_src/assets/css/citrus/nav.css
View file

@ -1,14 +1,18 @@
body > nav { .navbar {
border-right: 4px solid;
color: var(--citrus-dark); color: var(--citrus-dark);
& summary { & section {
filter: drop-shadow(2px 0 var(--citrus-dark)) background: var(--details-bg);
drop-shadow(-2px 0 var(--citrus-dark)) box-shadow: var(--details-shine);
drop-shadow(0 2px var(--citrus-dark)) border: var(--details-border);
drop-shadow(0px -2px var(--citrus-dark)); & h3 {
color: var(--citrus-light); filter: drop-shadow(2px 0 var(--citrus-dark))
drop-shadow(-2px 0 var(--citrus-dark))
drop-shadow(0 2px var(--citrus-dark))
drop-shadow(0px -2px var(--citrus-dark));
color: var(--citrus-light);
}
} }
& li *:is(a ,button) { & li *:is(a, button) {
background: var(--button-bg); background: var(--button-bg);
box-shadow: var(--button-shine); box-shadow: var(--button-shine);
border: var(--button-border); border: var(--button-border);
@ -24,34 +28,28 @@ body > nav {
background: var(--button-hover-bg); background: var(--button-hover-bg);
box-shadow: var(--button-hover-shine); box-shadow: var(--button-hover-shine);
border: var(--button-hover-border); border: var(--button-hover-border);
transition: background-image var(--trans), border-color var(--trans), transition:
background-image var(--trans),
border-color var(--trans),
box-shadow var(--trans); box-shadow var(--trans);
color: var(--citrus-mix-dark); color: var(--citrus-mix-dark);
} }
} }
& details,
details[open] {
background: var(--details-bg);
box-shadow: var(--details-shine);
border: var(--details-border);
}
} }
body > nav, #mobile > nav,
header { header,
#floating {
background-attachment: fixed; background-attachment: fixed;
background-blend-mode: screen;
background-image: var(--nav-bg); background-image: var(--nav-bg);
background-size: 6px; background-size: 6px;
border-color: var(--citrus-dark);
} }
header { #floating, #mobile > nav {
width: var(--view); border-bottom-style: solid;
border-right-width: 4px;
border-right-style: solid; border-right-style: solid;
border-bottom-width: 4px; border-bottom-width: 4px;
border-bottom-style: solid; border-right-width: 4px;
border-bottom-right-radius: 100px; }
margin-left: calc(var(--view) - 4px); #mobile > nav {
position: relative; height: max-content;
padding: calc(var(--pad-m) - 2px) var(--pad-sm); border-bottom-right-radius: var(--pad-l);
} }

40
_src/assets/css/default/default.css
View file

@ -1,6 +1,7 @@
@import url("./media.css");
@import url("./variables.css"); @import url("./variables.css");
@import url("./nav.css"); @import url("./nav.css");
@import url("./motion.css");
:root { :root {
--view: 18rem; --view: 18rem;
@ -197,6 +198,7 @@ article {
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
margin: 0 0 0 calc(var(--pad-xl) * -1); margin: 0 0 0 calc(var(--pad-xl) * -1);
z-index: 0;
} }
} }
@ -259,7 +261,7 @@ article a:not(.link *, a:has(img)) {
padding: 0 var(--pad-sm); padding: 0 var(--pad-sm);
} }
dialog button[commandfor] { dialog button[commandfor="signal"] {
width: max-content; width: max-content;
padding: 0 var(--pad-sm); padding: 0 var(--pad-sm);
margin: 0 auto; margin: 0 auto;
@ -315,37 +317,3 @@ dialog#signal {
} }
} }
} }
@media screen and (max-width: 920px) {
body::after {
content: "";
}
footer {
width: 100%;
margin: 0;
}
header {
padding-left: 0;
padding-top: var(--pad-m);
text-align: center;
}
main {
padding: var(--pad-l);
}
main > section {
flex-direction: column;
}
main > section {
width: initial;
}
article {
max-width: initial;
width: auto;
}
}

14
_src/assets/css/default/home.css
View file

@ -144,17 +144,3 @@ article#interests {
max-height: 31px; max-height: 31px;
width: 88px; width: 88px;
} }
@media screen and (max-width: 920px) {
article#interests {
display: flex;
flex-direction: column;
& ul {
justify-content: center;
}
& li a {
padding: 0;
}
}
}

1
_src/assets/css/default/index.css
View file

@ -27,7 +27,6 @@
justify-self: center; justify-self: center;
& a, & a,
img { img {
z-index: 1;
display: inherit; display: inherit;
flex-direction: inherit; flex-direction: inherit;
} }

74
_src/assets/css/default/motion.css → _src/assets/css/default/media.css
View file

@ -1,3 +1,77 @@
/* default.css */
@media screen and (max-width: 920px) {
body::after {
content: "" !important;
}
footer {
width: 100% !important;
margin: 0 !important;
}
header {
padding-left: 0 !important;
padding-top: var(--pad-m) !important;
text-align: center !important;
}
main {
padding: var(--pad-l) !important;
}
main > section {
flex-direction: column !important;
}
main > section {
width: initial !important;
}
article {
max-width: initial !important;
width: auto !important;
}
#mobile > nav {
display: flex !important;
}
}
/* nav.css */
@media screen and (min-width: 920px) {
li:has(> button[popovertarget="mobile"]) {
display: none !important;
}
#floating {
display: none;
}
#mobile {
display: flex;
}
}
@media screen and (max-width: 920px) {
#floating {
position: sticky !important;
top: 0 !important;
}
}
/* home.css */
@media screen and (max-width: 920px) {
article#interests {
display: flex !important;
flex-direction: column !important;
& ul {
justify-content: center !important;
}
& li a {
padding: 0 !important;
}
}
}
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
/* Scrolling pride flag text */ /* Scrolling pride flag text */
article#bio span[id], article#bio span[id],

182
_src/assets/css/default/nav.css
View file

@ -1,43 +1,38 @@
body > nav::before, .navbar {
body::after { position: fixed;
z-index: -1;
content: "";
position: absolute;
mask-image: url("/assets/img/theme/sundae_sit-lines.png");
mask-repeat: no-repeat;
margin: 0;
width: inherit;
height: inherit;
pointer-events: none;
}
body > nav::before {
bottom: 0;
left: 0;
mask-size: 160%;
-webkit-mask-position-x: -25px;
-webkit-mask-position-y: 90%;
}
body::after {
content: none;
mask-size: 100%;
width: 100%;
height: 100vw;
-webkit-mask-position-x: 0;
-webkit-mask-position-y: bottom;
}
body > nav {
display: flex; display: flex;
z-index: 2;
flex-direction: column; flex-direction: column;
overflow-x: hidden; overflow-x: hidden;
padding: var(--pad-l); padding: var(--pad-l);
position: fixed;
width: var(--view); width: var(--view);
height: 100%; height: 100%;
overflow-y: scroll; overflow-y: scroll;
scrollbar-width: none; scrollbar-width: none;
gap: var(--pad-m);
& li *:is(a, button) {
align-items: center;
border-style: solid;
border-width: 2px;
border-radius: var(--round);
}
& section {
border-radius: var(--round);
font-weight: bold;
border-width: 2px;
border-style: solid;
& h3 {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
height: var(--pad-xl);
font-size: 1.4rem;
}
}
& * svg, & * svg,
li img { li img {
margin: 0 8px 0 8px; margin: 0 8px 0 8px;
@ -45,10 +40,6 @@ body > nav {
align-self: center; align-self: center;
} }
& details {
display: flex;
}
& ul { & ul {
margin: var(--pad-sm); margin: var(--pad-sm);
padding: 0; padding: 0;
@ -65,11 +56,7 @@ body > nav {
} }
} }
& details { & li *:is(a, button) {
font-size: 1.4rem;
}
& li *:is(a ,button) {
display: flex; display: flex;
font-size: 1.125rem; font-size: 1.125rem;
width: 100%; width: 100%;
@ -79,68 +66,57 @@ body > nav {
} }
} }
body { #mobile > nav::before,
& > nav { body::after {
gap: var(--pad-m); z-index: -1;
border-right-width: 1px; content: "";
border-right-style: solid; position: absolute;
mask-image: url("/assets/img/theme/sundae_sit-lines.png");
& li *:is(a ,button) { mask-repeat: no-repeat;
align-items: center; margin: 0;
border-style: solid; width: inherit;
border-width: 2px; height: inherit;
border-radius: var(--round); pointer-events: none;
}
& details {
border-radius: var(--round);
font-weight: bold;
}
& details > summary {
display: flex;
justify-content: center;
padding: 0;
height: var(--pad-xl);
}
& details[open], details:not([open]) {
border-style: solid;
border-width: 2px;
}
}
} }
@media screen and (max-width: 920px) {
body > nav {
position: initial;
width: 100%;
overflow: initial;
flex-direction: row;
justify-content: start;
& li *:is(a ,button) {
line-height: initial;
}
& details {
width: 100%;
height: max-content;
}
}
body > nav::before {
content: none;
}
}
@media screen and (max-width: 620px) {
body > nav {
flex-direction: column;
justify-content: start;
border: 0;
width: 100%;
& details { #mobile > nav::before {
height: fit-content; bottom: 0;
} left: 0;
} mask-size: 160%;
-webkit-mask-position-x: -25px;
body::after { -webkit-mask-position-y: 90%;
content: ""; }
}
body::after {
content: none;
mask-size: 100%;
width: 100%;
height: 100vw;
-webkit-mask-position-x: 0;
-webkit-mask-position-y: bottom;
}
button[popovertarget="mobile"] {
display: none;
}
#floating {
width: fit-content;
height: fit-content;
border-bottom-style: solid;
border-right-style: solid;
border-bottom-width: 2px;
border-right-width: 2px;
border-bottom-right-radius: var(--pad-l);
}
#mobile {
margin: 0;
padding: 0;
background: none;
border: 0;
}
#mobile > nav {
border-right-style: solid;
border-right-width: 2px;
} }

18
_src/assets/css/default/theme-dark.css
View file

@ -9,7 +9,7 @@
border-color: var(--secondary-300); border-color: var(--secondary-300);
background-color: var(--secondary-200); background-color: var(--secondary-200);
& aside { & #mobile {
box-shadow: inset 0 0 0 2px var(--secondary-500); box-shadow: inset 0 0 0 2px var(--secondary-500);
background-color: var(--secondary-300); background-color: var(--secondary-300);
} }
@ -90,21 +90,15 @@
color: inherit; color: inherit;
} }
& > nav { & #mobile > nav,
background-color: inherit; #floating {
background-color: var(--secondary-100);
border-color: var(--secondary); border-color: var(--secondary);
& details { & section {
background-color: var(--secondary-100); background-color: var(--secondary-100);
&:not([open]) {
color: var(--secondary);
}
}
& details[open] {
border-color: var(--secondary); border-color: var(--secondary);
background-color: var(--secondary-300); background-color: var(--secondary-300);
color: var(--secondary-light-300); color: var(--secondary-light-300);
& a[aria-current] { & a[aria-current] {
color: var(--secondary-500); color: var(--secondary-500);
border-color: var(--secondary-light-500); border-color: var(--secondary-light-500);
@ -122,7 +116,7 @@
} }
&::after, &::after,
& > nav::before { & #mobile > nav::before {
background-color: var(--secondary); background-color: var(--secondary);
} }
} }

18
_src/assets/css/default/theme-light.css
View file

@ -9,7 +9,7 @@
border-color: var(--primary-300); border-color: var(--primary-300);
background-color: var(--primary-200); background-color: var(--primary-200);
& aside { & #mobile {
box-shadow: inset 0 0 0 2px var(--primary-500); box-shadow: inset 0 0 0 2px var(--primary-500);
background-color: var(--primary-300); background-color: var(--primary-300);
} }
@ -90,21 +90,15 @@
color: inherit; color: inherit;
} }
& > nav { & #mobile > nav,
background-color: inherit; #floating {
background-color: var(--primary-100);
border-color: var(--primary-dark-500); border-color: var(--primary-dark-500);
& details { & section {
background-color: var(--primary-100); background-color: var(--primary-100);
&:not([open]) {
color: var(--primary-dark-500);
}
}
& details[open] {
border-color: var(--primary-dark-800); border-color: var(--primary-dark-800);
background-color: var(--primary-300); background-color: var(--primary-300);
color: var(--primary-dark-300); color: var(--primary-dark-300);
& a[aria-current] { & a[aria-current] {
color: var(--primary-500); color: var(--primary-500);
border-color: var(--primary-dark-500); border-color: var(--primary-dark-500);
@ -122,7 +116,7 @@
} }
&::after, &::after,
& > nav::before { & #mobile > nav::before {
background-color: var(--primary-dark-500); background-color: var(--primary-dark-500);
} }
} }

5
_src/assets/css/default/variables.css
View file

@ -133,8 +133,3 @@
font-family: Nosey Rodent; font-family: Nosey Rodent;
src: url("/assets/fonts/noseyrodent-Regular.ttf") format("truetype"); src: url("/assets/fonts/noseyrodent-Regular.ttf") format("truetype");
} }
@font-face {
font-family: Impact;
src: url("/assets/fonts/Impact-Regular.ttf") format("truetype");
}

14
_src/assets/js/details-save.js
View file

@ -1,14 +0,0 @@
const detailsElements = document.getElementsByTagName("details");
const dropdown = Array.from(detailsElements);
const save = () => {
dropdown.forEach((details, i) => {
localStorage.setItem(`details${i}`, details.hasAttribute("open"));
});
};
dropdown.forEach((details, i) => {
const isOpen = JSON.parse(localStorage.getItem(`details${i}`)) || false;
details.toggleAttribute("open", isOpen);
details.addEventListener("toggle", save);
});

4
_src/data/changelog/2026-03-23.md Normal file
View file

@ -0,0 +1,4 @@
## {{page.fileSlug|readable}}
- Changed sidebar
- Toggleable on mobile

1
_src/index.html
View file

@ -22,7 +22,6 @@
>Mastodon</a >Mastodon</a
> >
</main> </main>
<footer> <footer>
<p> <p>
This site eats cookies for breakfast. This site eats cookies for breakfast.

1
_src/pages/blog.html
View file

@ -1,5 +1,4 @@
--- ---
title: "Blog"
order: 3 order: 3
icon: "m5 3h15l7 7v20H5zm5 22h12v-3H10zm0-6h12v-3H10zm0-6h9v-3h-9z" icon: "m5 3h15l7 7v20H5zm5 22h12v-3H10zm0-6h12v-3H10zm0-6h9v-3h-9z"
--- ---

1
_src/pages/changelog.html
View file

@ -1,5 +1,4 @@
--- ---
title: "Changelog"
order: 2 order: 2
icon: "M10 25H21V22H10Zm4-13H10v3h4v4h3V15h4V12H17V8H14ZM5 3H20l7 7V30H5Z" icon: "M10 25H21V22H10Zm4-13H10v3h4v4h3V15h4V12H17V8H14ZM5 3H20l7 7V30H5Z"
--- ---

1
_src/pages/gallery.html
View file

@ -1,5 +1,4 @@
--- ---
title: "Gallery"
order: 4 order: 4
icon: "M2 2V30H30V2H2M5 26l6-9 5 6 5-9 6 12H5" icon: "M2 2V30H30V2H2M5 26l6-9 5 6 5-9 6 12H5"
--- ---

1
_src/pages/home.html
View file

@ -1,5 +1,4 @@
--- ---
title: "Home"
order: 1 order: 1
icon: "M20 20V30h8V12L16 2 4 12V30h8V20Z" icon: "M20 20V30h8V12L16 2 4 12V30h8V20Z"
--- ---

2
_src/pages/pages.json
View file

@ -1,5 +1,5 @@
{ {
"layout": "base", "layout": "base",
"permalink": "/{{ title | slug }}/", "permalink": "/{{ page.fileSlug }}/",
"tags": "pages" "tags": "pages"
} }