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

mostly good for release

Browse source
This commit is contained in:
sundae 2025-06-25 13:08:50 +03:00
parent 8fc7eff67b
commit b626e6265e
No known key found for this signature in database
32 changed files with 425 additions and 169 deletions
Download patch file Download diff file Expand all files Collapse all files

7
_src/_data/88x31.json
View file

@ -98,6 +98,13 @@
"name": "pngquant", "name": "pngquant",
"src": "https://pngquant.org/" "src": "https://pngquant.org/"
}, },
{
"alt": "Youtube video of the secret piss baby in Half-Life 2",
"button": "/assets/img/button/piss-baby1.gif",
"name": "secret piss baby",
"id": "piss",
"src": "https://www.youtube.com/watch?v=mIvLtq4_LgQ"
},
{ {
"alt": "Boodlebox on Neocities", "alt": "Boodlebox on Neocities",
"button": "/assets/img/button/thiswebsitesucks.gif", "button": "/assets/img/button/thiswebsitesucks.gif",

4
_src/_includes/base.njk
View file

@ -27,7 +27,7 @@ meow: "m18.8003 13.7653q0-1.7737-1.156-2.943-1.1563-1.1693-3.2321-1.3925v-.0525q
</head> </head>
<body id="{{ page.url|firstSegment }}"> <body id="{{ page.url|firstSegment }}">
<nav> <nav>
<details> <details open="">
<summary> <summary>
<svg width="20" height="20" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <svg width="20" height="20" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="{{ paw }}"></svg> <path d="{{ paw }}"></svg>
@ -64,7 +64,7 @@ meow: "m18.8003 13.7653q0-1.7737-1.156-2.943-1.1563-1.1693-3.2321-1.3925v-.0525q
</li> </li>
</ul> </ul>
</details> </details>
<details> <details open="">
<summary> <summary>
<svg width="20" height="20" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <svg width="20" height="20" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="{{ paw }}"></svg> <path d="{{ paw }}"></svg>

BIN
_src/assets/audio/flashlight.ogg Normal file
View file

Binary file not shown.

159
_src/assets/css/citrus/citrus.css
View file

@ -1,7 +1,6 @@
@import url("./variables.css"); @import url("./variables.css");
@import url("../default/variables.css"); @import url("../default/variables.css");
@import url("./nav.css"); @import url("./nav.css");
body { body {
background-attachment: local, fixed; background-attachment: local, fixed;
background-color: var(--citrus-primary); background-color: var(--citrus-primary);
@ -15,6 +14,8 @@ body > nav {
background-image: var(--dot), background-image: var(--dot),
linear-gradient(var(--citrus-primary), var(--citrus-secondary) 20%); linear-gradient(var(--citrus-primary), var(--citrus-secondary) 20%);
background-size: 6px; background-size: 6px;
border-color: var(--citrus-dark);
color: var(--citrus-dark);
& a, & a,
button { button {
background-image: linear-gradient( background-image: linear-gradient(
@ -23,23 +24,165 @@ body > nav {
var(--citrus-primary) 80%, var(--citrus-primary) 80%,
var(--citrus-light) 100% var(--citrus-light) 100%
); );
border-radius: 0 1rem 1rem 0;
box-shadow: 0 0 0 2px var(--citrus-dark), box-shadow: 0 0 0 2px var(--citrus-dark),
inset 0 0 8px 2px var(--citrus-primary); inset 0 0 8px 2px var(--citrus-primary);
color: var(--citrus-dark) !important; border-radius: var(--pad-l);
margin: 0 0 var(--pad-sm) 0 !important; color: inherit;
&[aria-current] { &[aria-current] {
box-shadow: 0 0 0 2px var(--citrus-dark),
inset 0 0 4px 2px var(--citrus-dark);
background-image: linear-gradient( background-image: linear-gradient(
darkorange, var(--citrus-mix),
var(--citrus-dark) 10%, var(--citrus-dark) 10%,
chocolate chocolate
); );
box-shadow: 0 0 0 2px var(--citrus-dark), color: var(--citrus-light);
inset 0 0 4px 2px var(--citrus-dark);
color: var(--citrus-light) !important;
} }
&:is(:hover, :focus):not([aria-current="page"]) { &:is(:hover, :focus):not([aria-current="page"]) {
box-shadow: 0 0 0 2px var(--citrus-dark); box-shadow: 0 0 0 2px var(--citrus-dark);
transition: background-image var(--trans), border-color var(--trans),
box-shadow var(--trans);
} }
} }
} }
article {
background-color: var(--citrus-light);
border-radius: 0;
background-image: var(--noise);
box-shadow: var(--shadow);
border: 0;
}
/* home.css */
body[id] > main::before {
content: "";
height: 100%;
width: 100%;
display: flex;
position: fixed;
top: 0;
left: 0;
image-rendering: pixelated;
opacity: 0.1;
z-index: -10;
}
ul:not([role]) li::before {
background-color: #000;
}
a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
filter: drop-shadow(4px 6px 0 var(--citrus-dark));
}
/* blog.css */
#blog {
background-color: #fff;
background-image: var(--dot-dark);
background-size: 6px;
background-attachment: fixed;
background-repeat: repeat;
& main {
&::before {
background-image: var(--bg-sky);
background-size: cover;
background-repeat: no-repeat;
}
}
& article {
border-radius: 0;
background-color: #fff;
background-image: var(--noise);
background-size: auto;
background-repeat: repeat;
box-shadow: inset 0 0 2rem -0.5rem #ccc;
& > [aria-label="Postscript"]::after {
background-color: var(--citrus-primary);
}
& aside {
border-width: 2px;
border-style: solid;
background-color: var(--citrus-light);
border-color: var(--citrus-primary);
border-radius: 0;
}
& code:not(pre *) {
border-radius: 0;
color: var(--citrus-primary);
background-color: #000;
}
& pre {
border-radius: 0;
color: var(--citrus-primary);
background-color: #000;
}
& [aria-label="Post warning"] {
background-color: var(--citrus-primary);
}
& [aria-label="Addendum"] {
border-image-source: linear-gradient(
45deg,
var(--citrus-primary),
var(--citrus-secondary)
);
background-color: var(--citrus-primary);
}
}
& #posts {
& a {
background-color: #fff;
border-color: #fff;
border-width: 4px;
transition: border-color var(--trans), color var(--trans);
& p {
color: initial;
}
&:is(:hover, :focus) {
border-color: currentColor;
}
}
}
}
/* gallery.css */
#gallery {
& h2 {
font-family: "Pangolin", sans-serif;
}
& article {
border-radius: 0;
border: 0;
background-image: var(--noise), var(--line);
background-color: #fff;
padding: 1rem;
background-size: auto, 32px;
}
& a:has(figure) {
transition: border-color var(--trans), background-color var(--trans);
box-shadow: var(--shadow);
&:is(:hover, :focus) {
& figure {
transition: inherit;
background-color: currentColor;
border-color: currentColor;
}
& figcaption {
color: #fff;
}
& time {
color: #fffa;
}
}
}
& figure {
border-color: #fff;
background-color: #fff;
}
& time {
color: #666;
}
}
@media screen and (max-width: 920px) {
body > nav {
border-right: 0;
border-bottom-right-radius: 0;
}
body::after {
content: none;
}
}

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

@ -1,12 +1,13 @@
nav { body > nav {
padding: 0 var(--pad-xl) var(--pad-xl) 0 !important; border-right: 4px solid;
& ul { border-bottom: 4px solid;
margin: 0 !important; height: auto;
} border-bottom-right-radius: var(--round);
& details {
border: 0 !important;
}
& a, button { & a, button {
border: 0 !important; border: 0;
margin: 0 0 var(--pad-sm) 0 ;
}
& details:not([open]) > summary, details[open] {
border: 0;
} }
} }

17
_src/assets/css/citrus/variables.css
View file

@ -3,8 +3,17 @@
--citrus-secondary: rgb(255, 110, 0); --citrus-secondary: rgb(255, 110, 0);
--citrus-light: rgb(255, 236, 180); --citrus-light: rgb(255, 236, 180);
--citrus-dark: rgb(105, 50, 0); --citrus-dark: rgb(105, 50, 0);
--checker: url('/assets/img/theme/citrus/checker.png'); --citrus-mix: color-mix(in lch,var(--citrus-primary),var(--citrus-secondary));
--checker-dark: url('/assets/img/theme/citrus/checker-dark.png'); --shadow: 0.2rem 0.2rem 0.4rem 0.2rem #0003;
--dot: url('/assets/img/theme/citrus/dot.png'); --checker: url("/assets/img/theme/citrus/checker.png");
--dot-dark: url('/assets/img/theme/citrus/dot-dark.png'); --checker-dark: url("/assets/img/theme/citrus/checker-dark.png");
--dot: url("/assets/img/theme/citrus/dot.png");
--dot-dark: url("/assets/img/theme/citrus/dot-dark.png");
--line: url("/assets/img/theme/citrus/line.png");
--paper: url("/assets/img/theme/citrus/paper.png");
--noise: url("/assets/img/theme/citrus/imagedoc-lightnoise.png");
--bg-sky: url("/assets/img/pkmn/bg/plat_trade1.png");
--bg-ilex: url("/assets/img/pkmn/bg/ilex_day.png");
--bg-ilex-noon: url("/assets/img/pkmn/bg/ilex_noon.png");
--bg-ilex-night: url("/assets/img/pkmn/bg/ilex_night.png");
} }

33
_src/assets/css/default/blog.css
View file

@ -37,10 +37,6 @@ article > [aria-label="Addendum"] {
border-image-slice: 1; border-image-slice: 1;
border-image-width: 2px; border-image-width: 2px;
border-image-outset: 4px; border-image-outset: 4px;
& > p:first-child {
display: flex;
text-align: center;
}
} }
article > [aria-label="Postscript"] { article > [aria-label="Postscript"] {
@ -81,8 +77,11 @@ article > [aria-label="Postscript"] {
margin-bottom: var(--pad-l); margin-bottom: var(--pad-l);
} }
} }
& a {
background: unset;
}
& p:has(img:nth-child(n + 2)) { & p a:has(img:nth-child(n + 2)) {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 40%), 1fr)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 40%), 1fr));
align-items: center; align-items: center;
@ -95,7 +94,7 @@ article > [aria-label="Postscript"] {
min-height: fit-content; min-height: fit-content;
max-height: var(--image); max-height: var(--image);
} }
& img:not(p > img) { & img:not(p a > img) {
display: flex; display: flex;
box-sizing: content-box; box-sizing: content-box;
margin: 0 0 0 auto; margin: 0 0 0 auto;
@ -139,3 +138,25 @@ article > [aria-label="Postscript"] {
} }
} }
} }
@media screen and (max-width: 920px) {
article aside {
float: unset;
width: fit-content;
}
article section {
flex-direction: column;
}
#posts {
max-width: unset;
width: auto;
}
article > [aria-label="Postscript"] {
& p {
margin-right: var(--pad-sm);
& > a img {
height: auto;
max-height: var(--view);
}
}
}
}

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

@ -1,6 +1,5 @@
@import url("./variables.css"); @import url("./variables.css");
@import url("./nav.css"); @import url("./nav.css");
@import url("./mobile.css");
:root { :root {
--view: 18rem; --view: 18rem;
} }
@ -10,7 +9,9 @@ body {
font-size: 100%; font-size: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
& a, button { & a,
button {
cursor: pointer;
&:is(:hover, :focus) { &:is(:hover, :focus) {
outline: 0; outline: 0;
} }
@ -64,7 +65,9 @@ article {
& p { & p {
word-wrap: break-word; word-wrap: break-word;
padding: var(--pad-sm); }
& p:not(:last-child, [aria-label]) {
padding-bottom: var(--pad-sm);
} }
& code:not(pre *) { & code:not(pre *) {
@ -143,3 +146,58 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
transform: translateY(-4px); transform: translateY(-4px);
transition: var(--trans); transition: var(--trans);
} }
@media screen and (max-width: 920px) {
body > nav {
position: initial;
width: 100%;
}
main {
padding: var(--pad-l);
}
main > section {
flex-direction: column;
}
main > section {
width: initial;
}
article {
max-width: initial;
width: auto;
}
body > nav::before {
content: none;
}
body > nav {
flex-direction: row;
border: 0;
width: 100%;
& details {
height: fit-content;
width: 100%;
}
}
body::after {
content: "";
}
}
@media screen and (max-width: 450px) {
main {
padding: var(--pad-sm);
}
article {
padding: var(--pad-l);
border: 0;
}
body > nav {
flex-direction: column;
justify-content: start;
& details[open] {
width: 100%;
}
}
}

16
_src/assets/css/default/gallery.css
View file

@ -70,3 +70,19 @@
font-weight: bold; font-weight: bold;
} }
} }
@media screen and (max-width: 1400px) {
#art section:has(a:nth-child(n + 2)) {
flex-direction: column;
& a {
width: 100%;
}
}
}
@media screen and (max-width: 920px) {
#art a:has(img) {
width: auto;
}
#art section:has(a:nth-child(n + 2)) {
flex-direction: column;
}
}

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

@ -15,6 +15,20 @@
color: transparent; color: transparent;
} }
} }
ul:not([role]) li {
&::before {
content: "";
width: 20px;
height: 20px;
position: absolute;
mask-image: var(--paw);
mask-size: contain;
margin: 0.4rem 0 0 -2rem;
}
&::marker {
content: none;
}
}
#pkmn { #pkmn {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -65,14 +79,19 @@ body [id]:not(:nth-child(1)) ul {
#pansexual { #pansexual {
background-image: linear-gradient(#f09 33.33%, #ffd700 0 66.66%, #00bfff 0); background-image: linear-gradient(#f09 33.33%, #ffd700 0 66.66%, #00bfff 0);
} }
#bio { #bio,
& p, #interests {
ul { & ul {
font-family: "Urbanist", sans-serif; font-family: "Urbanist", sans-serif;
font-size: 1.3rem; font-size: 1.3rem;
}
& ul {
margin: 0; margin: 0;
display: flex;
flex-direction: column;
}
& p {
font-size: 1.1rem;
font-family: "Rubik", sans-serif;
font-weight: bold;
} }
& span[id] { & span[id] {
background-clip: text; background-clip: text;
@ -88,13 +107,12 @@ body [id]:not(:nth-child(1)) ul {
& ul { & ul {
margin: 0; margin: 0;
padding: var(--pad-l) 0 0 0; padding: var(--pad-l) 0 0 0;
justify-content: start;
} }
& li { & li {
display: flex; display: flex;
& a { & a {
padding: var(--pad-sm); padding: var(--pad-sm);
background-color: transparent; background: transparent;
text-decoration: none; text-decoration: none;
} }
& span { & span {
@ -121,6 +139,7 @@ body [id]:not(:nth-child(1)) ul {
display: flex; display: flex;
padding: inherit; padding: inherit;
margin: 0; margin: 0;
background-color: unset;
} }
} }
#collection div:has(img)::after { #collection div:has(img)::after {
@ -133,3 +152,15 @@ body [id]:not(:nth-child(1)) ul {
margin: -1.5rem 0 0 -0.5rem; margin: -1.5rem 0 0 -0.5rem;
pointer-events: none; pointer-events: none;
} }
@media screen and (max-width: 920px) {
#collection {
display: flex;
flex-direction: column;
& ul {
justify-content: center;
}
& li a {
padding: 0;
}
}
}

99
_src/assets/css/default/mobile.css
View file

@ -1,99 +0,0 @@
@media screen and (max-width: 1400px) {
/* gallery.css */
#art section:has(a:nth-child(n + 2)) {
flex-direction: column !important;
& a {
width: 100%;
}
}
}
@media screen and (max-width: 920px) {
/* blog.css */
article aside {
float: none !important;
width: fit-content !important;
}
article section {
flex-direction: column !important;
}
#posts {
max-width: unset !important;
width: auto !important;
}
[aria-label="Postscript"] {
& p {
margin-right: unset !important;
& > img {
height: auto !important;
max-height: var(--view) !important;
}
}
}
/* default.css */
body > nav {
position: initial !important;
width: 100% !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;
}
body > nav::before {
content: none !important;
}
body > nav {
flex-direction: row !important;
border: 0 !important;
width: 100% !important;
& details {
height: fit-content !important;
width: 100% !important;
}
}
body::after {
content: "" !important;
}
/* gallery.css */
#art a:has(img) {
width: 100% !important
}
/* home.css */
#collection {
display: flex !important;
flex-direction: column !important;
& ul {
justify-content: center !important;
}
& li a {
padding: 0 !important;
}
}
}
@media screen and (max-width: 450px) {
article {
padding: var(--pad-sm) !important;
background-color: unset !important;
border: 0 !important;
}
body > nav {
flex-direction: column !important;
justify-content: start !important;
& details[open] {
width: 100% !important;
}
}
}

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

@ -83,8 +83,11 @@ body {
font-family: "Rubik", sans-serif; font-family: "Rubik", sans-serif;
& > nav { & > nav {
gap: var(--pad-m); gap: var(--pad-m);
border-right-width: 1px;
border-right-style: solid;
& a, & a,
button { button {
align-items: center;
border-style: solid; border-style: solid;
border-width: 2px; border-width: 2px;
border-radius: var(--round); border-radius: var(--round);

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

@ -65,8 +65,8 @@
body { body {
background-color: var(--secondary-100); background-color: var(--secondary-100);
color: var(--secondary-light-300); color: var(--secondary-light-300);
/* this is cursed */
& a:not(article p *, #badges *, [aria-current]), button { & :is(a, button) {
color: var(--secondary-light-400); color: var(--secondary-light-400);
border-color: var(--secondary-600); border-color: var(--secondary-600);
background-color: var(--secondary-300); background-color: var(--secondary-300);
@ -77,7 +77,7 @@
} }
} }
& > nav { & > nav {
border-right: 1px solid var(--secondary); border-color: var(--secondary);
&::before, &::before,
::after { ::after {
background-color: var(--secondary); background-color: var(--secondary);
@ -113,6 +113,9 @@
} }
} }
/* home.css */ /* home.css */
ul:not([role]) li::before {
background-color: var(--secondary-light-300);
}
#collection { #collection {
& a:is(:hover, :focus) { & a:is(:hover, :focus) {
box-shadow: 0 0 0 1px currentColor; box-shadow: 0 0 0 1px currentColor;

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

@ -65,7 +65,8 @@
body { body {
background-color: var(--primary-100); background-color: var(--primary-100);
color: var(--primary-dark-300); color: var(--primary-dark-300);
& a:not(article p *, #badges *, [aria-current]), button { /* this is cursed */
& :is(a, button) {
color: var(--primary-dark-400); color: var(--primary-dark-400);
border-color: var(--primary-600); border-color: var(--primary-600);
background-color: var(--primary-400); background-color: var(--primary-400);
@ -76,7 +77,7 @@
} }
} }
& > nav { & > nav {
border-right: 1px solid var(--primary); border-color: var(--primary);
&::before, &::before,
&::after { &::after {
background-color: var(--primary); background-color: var(--primary);
@ -111,6 +112,9 @@
} }
} }
/* home.css */ /* home.css */
ul:not([role]) li::before {
background-color: var(--primary-dark-300);
}
#collection { #collection {
& a:is(:hover, :focus) { & a:is(:hover, :focus) {
box-shadow: 0 0 0 1px currentColor; box-shadow: 0 0 0 1px currentColor;

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

@ -59,3 +59,8 @@
font-family: Urbanist; font-family: Urbanist;
src: url("/assets/fonts/Urbanist-Bold.ttf") format("truetype"); src: url("/assets/fonts/Urbanist-Bold.ttf") format("truetype");
} }
@font-face {
font-family: Pangolin;
src: url("/assets/fonts/Pangolin-Regular.ttf") format("truetype");
}

3
_src/assets/css/reset.css
View file

@ -60,11 +60,12 @@ h4 {
text-wrap: balance; text-wrap: balance;
} }
/* A elements that don't have a class get default styles */ /* A elements that don't have a class get default styles
a:not([class]) { a:not([class]) {
text-decoration-skip-ink: auto; text-decoration-skip-ink: auto;
color: currentColor; color: currentColor;
} }
*/
/* Make images easier to work with */ /* Make images easier to work with */
img, img,

BIN
_src/assets/fonts/Pangolin-Regular.ttf Normal file
View file

Binary file not shown.

BIN
_src/assets/img/button/piss-baby1.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
_src/assets/img/button/piss-baby2.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
_src/assets/img/theme/citrus/imagedoc-lightnoise.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
_src/assets/img/theme/citrus/line.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 177 B

BIN
_src/assets/img/theme/citrus/paper.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 785 B

7
_src/assets/js/nav-details.js
View file

@ -1,12 +1,13 @@
const detailsElements = document.getElementsByTagName('details'); const detailsElements = document.getElementsByTagName('details');
const dropdown = Array.from(detailsElements);
const save = () => { const save = () => {
Array.from(detailsElements).forEach((details, i) => { dropdown.forEach((details, i) => {
localStorage.setItem(`details${i}`, details.hasAttribute('open')); localStorage.setItem(`details${i}`, details.hasAttribute('open'));
}); });
}; };
Array.from(detailsElements).forEach((details, i) => { dropdown.forEach((details, i) => {
const isOpen = JSON.parse(localStorage.getItem(`details${i}`)) || false; const isOpen = JSON.parse(localStorage.getItem(`details${i}`)) || false;
details.toggleAttribute('open', isOpen); details.toggleAttribute('open', isOpen);
details.addEventListener('toggle', save); details.addEventListener('toggle', save);
@ -18,7 +19,7 @@ Array.from(detailsElements).forEach((details, i) => {
}); });
setTimeout(() => { setTimeout(() => {
Array.from(detailsElements).forEach(details => { dropdown.forEach(details => {
const svg = details.querySelector('summary svg'); const svg = details.querySelector('summary svg');
if (svg) svg.style.transition = ''; if (svg) svg.style.transition = '';
}); });

15
_src/assets/js/piss.js Normal file
View file

@ -0,0 +1,15 @@
let secret = document.getElementById("piss");
let baby = new Image();
baby.src = "/assets/img/button/piss-baby2.gif";
secret.addEventListener("mouseover", func, true);
function func() {
secret.src = baby.src;
}
let flashlight = document.createElement("audio");
flashlight.src = "/assets/audio/flashlight.ogg";
secret.appendChild(flashlight);
secret.addEventListener("mouseover", () => flashlight.play(), { once: true });

2
_src/data/art/artwork/look him.md
View file

@ -4,3 +4,5 @@ images:
alt: Reference/model sheet of Sundae with a full-length front portrait, T-posed. alt: Reference/model sheet of Sundae with a full-length front portrait, T-posed.
date: 2025-02-11 date: 2025-02-11
--- ---
Half-finished, was supposed to include a back and side view but I didn't have much motivation to keep going.

3
_src/data/art/artwork/sunny headpat.md
View file

@ -1,8 +1,9 @@
--- ---
images: images:
- src: /assets/img/art/sundae_headpat.png - src: /assets/img/art/sundae_headpat.png
alt: Half-length portrait of Sundae. He's getting a head pat from a disembodied white hand. alt: Half-length portrait of Sundae getting a head pat from a disembodied white hand.
date: 2021-11-18 date: 2021-11-18
pixel: true
--- ---
Done in Microsoft Paint. Done in Microsoft Paint.

9
_src/data/articles/bio.md
View file

@ -1,9 +1,10 @@
<h1 >Hi! My name's Sunny.</h1> # Bio
Hi! My name's Sunny. I'm:
I'm:
* an artist * an artist
* a writer * a writer
* an audio and video editor * an audio and video editor
* a graphic designer * a graphic designer
* a web designer * a web designer
<p>I'm also <span id="agender">agender</span>, <span id="aromantic">aromantic</span>, <span id="pansexual">pansexual</span>.</p> * a bunny 🐇
I identify as: <span id="agender">agender</span>, <span id="aromantic">aromantic</span> and <span id="pansexual">pansexual</span>.

12
_src/data/articles/interests.md Normal file
View file

@ -0,0 +1,12 @@
# Interests
Below is a list of media that I'm into.
Note that it's a non-exclusive list.
The links to stuff can range from:
* where to find it
* something cool
* something insightful
* something useful
* something funny

35
_src/data/blog/Rewrite 2.0.md
View file

@ -1,26 +1,23 @@
--- ---
description: description: I heard you like rewrites, so we put rewrites in your rewrites, so you can rewrite while you rewrite
date: 2025-05-23 date: 2025-06-25
modified: 2025-05-23 blurb: <p>i hate luxon</p><p><a href="/assets/img/blog/luxon.png"><img src="/assets/img/blog/luxon.png"></a></p>
blurb: <p>i hate luxon</p><p><img src="/assets/img/blog/luxon.png"></p> avatar: /assets/img/art/sundae_lick.gif
avatar: /assets/img/art/sundae_glistening.png
--- ---
### {{page.fileSlug}} ### {{page.fileSlug}}
<time datetime="{{date|ISO}}">{{date|readable}}</time> <time datetime="{{date|ISO}}">{{date|readable}}</time>
Hi... I spent a good 8+ months not working on much of anything, really. I haven't worked on much of anything the past 8+ months, and out of the blue, I decided that I wasn't happy with how my website was looking, so I've been spending a couple of weeks working on rewriting the site and writing this post up.
On a whim, I decided I wasn't happy with how my website was looking, so I've been spending the last week or so working on this as of writing.
### So, what's new? ### So, what's new?
It's now [open source](https://bunsin.space/forgejo/sundae/website) under <abbr title="Creative Commons Attribution-NonCommercial-ShareAlike 4.0">CC-BY-NC-SA 4.0</abbr>! It's now [open source](https://bunsin.space/forgejo/sundae/website) under <abbr title="Creative Commons Attribution-NonCommercial-ShareAlike 4.0">CC-BY-NC-SA 4.0</abbr>!
Besides that, a lot, actually. For starters, I ported the site over to a fresh build of {%ai "https://github.com/11ty/eleventy/releases/tag/v3.1.0"%}Eleventy 3.1.0{%endai%}, which was way easier than I expected, [since I originally started from a base](/blog/break-time#i-have-no-some-idea-what-i'm-doing). Besides that, a lot is new, actually. For starters, I ported the site over to a fresh build of {%ai "https://github.com/11ty/eleventy/releases/tag/v3.1.0"%}Eleventy 3.1.0{%endai%}, which was way easier than I expected, [since I originally started from a base](/blog/break-time#i-have-no-some-idea-what-i'm-doing).
I figured out that standard markdown doesn't implement header links (without manually adding in `HTML` headings with `id` attributes.), so I ended up switching to {%ai"https://github.com/markdown-it/markdown-it"%}markdown-it{%endai%} and {%ai"https://github.com/valeriangalliat/markdown-it-anchor"%}markdown-it-anchor{%endai%}. I figured out that standard `markdown` doesn't implement header links (without manually adding in inline `html` headings with `id` attributes), so I ended up switching to {%ai"https://github.com/markdown-it/markdown-it"%}markdown-it{%endai%} and {%ai"https://github.com/valeriangalliat/markdown-it-anchor"%}markdown-it-anchor{%endai%}.
I also switched to using {% ai "https://date-fns.org/" %}date-fns{% endai %} instead of {%ai"https://github.com/moment/luxon/"%}Luxon{%endai%}. This library is just way better documented, for someone that still sort of struggles with JavaScript. I switched to using {% ai "https://date-fns.org/" %}date-fns{% endai %} aswell, instead of {%ai"https://github.com/moment/luxon/"%}Luxon{%endai%}. This library is just way better documented, for someone that still sort of struggles with JavaScript.
Here's a snippet of my time filters in my `eleventy.config.js`: Here's a snippet of my time filters in my `eleventy.config.js`:
@ -35,11 +32,23 @@ eleventyConfig.addFilter("readable", (dateObj) => {
}); });
``` ```
They're just two, which I previously [struggled to achieve with Luxon](/blog/break-time/#you're-telling-me-that-java-scripted-this%3F), requiring me to end up writing an extra filter, which I still do not know why it was erroring.
### Smaller stuff ### Smaller stuff
I decided to change the presentation of my [interests](/home#interests), previously a shelf with game cases and CD jewel cases, to instead be desktop shortcut entries. I wasn't exactly a fan of how I laid out my [interests](/home#interests), previously presenting them as game boxes and CD jewel cases on a shelf.
If you'd like to implement this yourself, you can find the source files in the [old branch](https://bunsin.space/forgejo/sundae/website/src/branch/old) I've changed them to be more minimal, mimicking Windows desktop entries with the shortcut icon.
If you'd like to implement the shelving for your own website, you can find the source files in the [old branch](https://bunsin.space/forgejo/sundae/website/src/branch/old).
<section><a href="/assets/img/blog/shelf.png"><figure><img src="/assets/img/blog/shelf.png"><figcaption>How the shelving featuring my personal favorite games and music looked before.</figcaption></figure></a> <section><a href="/assets/img/blog/shelf.png"><figure><img src="/assets/img/blog/shelf.png"><figcaption>How the shelving featuring my personal favorite games and music looked before.</figcaption></figure></a>
<a href="/assets/img/blog/media.png"><figure><img src="/assets/img/blog/media.png"><figcaption>How it looks now.<br>Note: the cut-off in the middle is meant to showcase the light and dark theme.</figcaption></figure></a></section> <a href="/assets/img/blog/media.png"><figure><img src="/assets/img/blog/media.png"><figcaption>How it looks now.<br>Note: the cut-off in the middle is meant to showcase the light and dark theme.</figcaption></figure></a></section>
I largely wanted to move away from it because, I mean... it's all a huge `css` crime, and I just wanted something less flashy, really.
Although, I did re-implement a pretty simple `button` toggle to switch the theme to my website's old look, because I feel like that it was too iconic to get rid of.
I'd like it to be more modular, but I do not like sitting down and staring at `js` code if I can help it.
It's also not a 1:1 port, since I'm working with a different site layout, folder structure and just different principles for how I write `css` now.

4
_src/data/blog/System switching.md
View file

@ -2,13 +2,13 @@
description: Working with Linux description: Working with Linux
date: 2024-06-22 date: 2024-06-22
modified: 2025-05-19 modified: 2025-05-19
blurb: <p><img src="/assets/img/blog/works-on-my-machine.png"></p><p>whatever i'm using might not necessarily work for you</p> blurb: <p><a href="/assets/img/blog/works-on-my-machine.png"><img src="/assets/img/blog/works-on-my-machine.png"></a></p><p>whatever i'm using might not necessarily work for you</p>
avatar: /assets/img/art/sundae_glistening.png avatar: /assets/img/art/sundae_glistening.png
--- ---
### {{page.fileSlug}} ### {{page.fileSlug}}
<time datetime="{{date|ISO}}">{{date|readable}}</time> <time datetime="{{date|ISO}}">{{date|readable}}</time>
<section aria-label="Addendum"><p>EDIT:<time datetime="{{modified | ISO}}">{{modified | readable}}</time></p> <section aria-label="Addendum">
With Microsoft announcing that {%ai"https://support.microsoft.com/en-us/windows/windows-10-support-ends-on-october-14-2025-2ca8b313-1946-43d3-b55c-2b95b107f281"%}Windows 10 will stop being supported after October 14, 2025{%endai%}, I highly recommend looking into Linux if your device is on Windows 10 and you don't want to buy a whole new device that meets the system requirements of 11. With Microsoft announcing that {%ai"https://support.microsoft.com/en-us/windows/windows-10-support-ends-on-october-14-2025-2ca8b313-1946-43d3-b55c-2b95b107f281"%}Windows 10 will stop being supported after October 14, 2025{%endai%}, I highly recommend looking into Linux if your device is on Windows 10 and you don't want to buy a whole new device that meets the system requirements of 11.

0
_src/data/changelog/2025-05-23.md → _src/data/changelog/2025-06-25.md
View file

14
_src/pages/home.html
View file

@ -5,7 +5,18 @@ icon: "M12 20 L12 30 4 30 4 12 16 2 28 12 28 30 20 30 20 20 Z"
--- ---
<section id="bio"> <section id="bio">
{% for article in collections.articles %} {{article.content}} {% endfor %} {% for article in collections.articles %}
{% if article.fileSlug == 'bio' %}
{{ article.content }}
{% endif %}
{% endfor %}
</section>
<section id="interests">
{% for article in collections.articles %}
{% if article.fileSlug == 'interests' %}
{{ article.content }}
{% endif %}
{% endfor %}
</section> </section>
<section id="collection"> <section id="collection">
<article> <article>
@ -73,6 +84,7 @@ icon: "M12 20 L12 30 4 30 4 12 16 2 28 12 28 30 20 30 20 20 Z"
<script src="/assets/js/cat.js"></script> <script src="/assets/js/cat.js"></script>
<script src="/assets/js/fox.js"></script> <script src="/assets/js/fox.js"></script>
<script src="/assets/js/bob.js"></script> <script src="/assets/js/bob.js"></script>
<script src="/assets/js/piss.js"></script>
</nav> </nav>
<div id="pkmn" aria-label="Randomized list of my favorite Pokémon"> <div id="pkmn" aria-label="Randomized list of my favorite Pokémon">
<script src="/assets/js/poke.js"></script> <script src="/assets/js/poke.js"></script>