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

oh no i bit more than i could chew oh fuck oh shit *dies*

Browse source
This commit is contained in:
sundae 2026-04-07 11:43:33 +03:00
commit 19b436ead1
Signed by: sundae
SSH key fingerprint: SHA256:MsJkKuo4PUdjQDpLeaURy81drKkW14exlTHp+8QFu6M
73 changed files with 553 additions and 780 deletions
Download patch file Download diff file Expand all files Collapse all files

4
_src/_includes/base.njk
View file

@ -34,6 +34,7 @@
</div> </div>
<header> <header>
<h1> <h1>
<a href="{{page.url}}">
{%for page in pageOrder%} {%for page in pageOrder%}
{%if page.url|slugify == currentPage%} {%if page.url|slugify == currentPage%}
<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">
@ -41,7 +42,8 @@
</svg> </svg>
{%endif%} {%endif%}
{%endfor%} {%endfor%}
{{ page.fileSlug|capitalize }} {{ currentPage | capitalize }}
</a>
</h1> </h1>
</header> </header>
<main> <main>

1
_src/_includes/blog.njk
View file

@ -1,7 +1,6 @@
--- ---
layout: base layout: base
--- ---
<article> <article>
{{content|safe}} {{content|safe}}
<section class="postscript"> <section class="postscript">

7
_src/_includes/gallery.njk
View file

@ -1,8 +1,8 @@
--- ---
layout: base layout: base
--- ---
<article id="art"> <article id="art">
<div>
<h1>{{page.fileSlug}} <h1>{{page.fileSlug}}
{%for flag in flags%} {%for flag in flags%}
<img src="{{flag.src}}"> <img src="{{flag.src}}">
@ -11,7 +11,7 @@ layout: base
{{content|safe}} {{content|safe}}
{%if programs and programs|length > 0%} {%if programs and programs|length > 0%}
<p>Made with:</p> <p>Made with:</p>
<ul> <ul class="paws">
{%for program in programs%} {%for program in programs%}
<li> <li>
{{program.name|link(program.src)|safe}} {{program.name|link(program.src)|safe}}
@ -22,7 +22,7 @@ layout: base
{%if palettes and palettes|length > 0%} {%if palettes and palettes|length > 0%}
<p>Color palette used:</p> <p>Color palette used:</p>
{%for palette in palettes%} {%for palette in palettes%}
<ul> <ul class="paws">
<li> <li>
{%if palette.src%} {%if palette.src%}
{{palette.name|link(palette.src)|safe}} {{palette.name|link(palette.src)|safe}}
@ -32,6 +32,7 @@ layout: base
{%endfor%} {%endfor%}
</ul> </ul>
{%endif%} {%endif%}
</div>
<section> <section>
{%for image in images%} {%for image in images%}
<a href="{{image.src}}"> <a href="{{image.src}}">

39
_src/assets/css/citrus/blog.css
View file

@ -1,35 +1,41 @@
#blog { #blog {
animation: none;
background-attachment: local, fixed; background-attachment: local, fixed;
background-blend-mode: overlay, normal;
background-color: var(--light); background-color: var(--light);
background-image: var(--dot), background-image:
var(--dot),
linear-gradient(var(--citrus-mix-dark) 0% 10%, var(--citrus-dark) 100%); linear-gradient(var(--citrus-mix-dark) 0% 10%, var(--citrus-dark) 100%);
background-size: 6px, contain; background-size: 6px, contain;
background-blend-mode: overlay, normal;
animation: none;
& article { & article {
border-radius: 0;
background-color: var(--citrus-light); background-color: var(--citrus-light);
background-image: var(--noise); background-image: var(--noise);
background-size: auto;
background-repeat: repeat; background-repeat: repeat;
background-size: auto;
border-radius: 0;
box-shadow:inset 0 -2rem 3rem -4rem var(--dark),var(--shadow-heavy); box-shadow:inset 0 -2rem 3rem -4rem var(--dark),var(--shadow-heavy);
& aside, .addendum { & aside,
.addendum {
border-radius: 0; border-radius: 0;
border-width: 4px; border-width: 4px;
border-style: solid; border-style: solid;
} }
& aside { & aside {
border-color: var(--citrus-mix-light); border-color: var(--citrus-mix-light);
background-image: linear-gradient(135deg, background-image: linear-gradient(
135deg,
var(--citrus-light-extra) 5%, var(--citrus-light-extra) 5%,
var(--citrus-light) 50%, var(--citrus-light-extra) var(--citrus-light) 50%,
var(--citrus-light-extra)
); );
} }
& .addendum { & .addendum {
border-color: var(--citrus-primary); border-color: var(--citrus-primary);
background-image: linear-gradient(135deg, background-image: linear-gradient(
135deg,
var(--citrus-mix-light) 5%, var(--citrus-mix-light) 5%,
var(--citrus-light) 50%, var(--citrus-mix-light) var(--citrus-light) 50%,
var(--citrus-mix-light)
); );
} }
& pre { & pre {
@ -72,7 +78,8 @@
border-width: 3px; border-width: 3px;
box-sizing: inherit; box-sizing: inherit;
padding: 2px; padding: 2px;
background-image: radial-gradient( background-image:
radial-gradient(
ellipse at 50% -0%, ellipse at 50% -0%,
var(--light) 20%, var(--light) 20%,
var(--dark) 150% var(--dark) 150%
@ -82,8 +89,10 @@
background-size: cover, 100%; background-size: cover, 100%;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
box-shadow: 0 0 0 2px var(--citrus-mix-dark), box-shadow:
inset 0 0 0 2px var(--citrus-mix), var(--shadow-light); 0 0 0 2px var(--citrus-mix-dark),
inset 0 0 0 2px var(--citrus-mix),
var(--shadow-light);
font-size: 0; font-size: 0;
} }
} }
@ -99,10 +108,6 @@
& p:not(:last-child) { & p:not(:last-child) {
color: var(--citrus-dark); color: var(--citrus-dark);
} }
&:not(:hover, :focus) {
background-color: var(--citrus-light);
border-color: var(--citrus-light);
}
} }
} }
} }

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

@ -4,34 +4,21 @@
@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,
#posts a {
color: var(--citrus-dark);
transition: background-color var(--trans);
background-color: var(--citrus-primary);
&:is(:hover, :focus) {
color: var(--citrus-dark-extra);
background-color: var(--citrus-secondary);
}
& a {
color: inherit;
}
}
body { body {
color: var(--citrus-dark-extra); background-attachment: local;
background-blend-mode: soft-light;
background-color: var(--citrus-primary); background-color: var(--citrus-primary);
background-image: var(--paw-tiled); background-image: var(--paw-tiled);
background-size: 128px;
background-attachment: local;
background-repeat: repeat; background-repeat: repeat;
background-blend-mode: soft-light; background-size: 128px;
animation: mainbg 10s linear infinite; color: var(--citrus-dark-extra);
} }
header { main :is(a, button) {
background-color: var(--citrus-mix-light);
border-color: var(--citrus-mix);
color: var(--citrus-dark); color: var(--citrus-dark);
} }
ul:not([role]) li::before { ul li::before {
background-color: var(--citrus-dark-extra); background-color: var(--citrus-dark-extra);
} }
article { article {
@ -41,25 +28,20 @@ article {
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%
); );
border-radius: 0;
box-shadow: var(--shadow-heavy); box-shadow: var(--shadow-heavy);
border: 0; border: 0;
& .header-anchor { border-radius: 2px;
border-radius: 0;
}
& code:not(pre *) {
border-radius: 0;
background-color: var(--citrus-dark);
color: var(--citrus-primary);
}
&:not(pre, code, a) {
font-family: "Nosey Rodent", sans-serif;
}
} }
@media screen and (max-width: 916px) { @media screen and (max-width: 916px) {
body::after {
content: none;
}
}
@media screen and (min-width: 916px) {
nav#default {
height: max-content;
}
header { header {
width: calc(100% - var(--float) + 4px); margin-top: 0;
margin: auto 0 0 auto;
padding: var(--pad-xl) 0 0 0;
} }
} }

55
_src/assets/css/citrus/gallery.css
View file

@ -1,11 +1,28 @@
#gallery { #gallery {
& article { & article {
border-radius: 0; border-radius: 4px;
border: 0; box-shadow:
inset 0 0 0 4px color-mix(in lch, var(--light), var(--dark) 2%),
inset 0 0 0 8px var(--citrus-mix-dark),
var(--shadow-heavy);
background-color: color-mix(
in lch,
var(--citrus-mix-dark),
var(--citrus-mix)
);
background-image:
var(--noise),
linear-gradient(
135deg,
color-mix(in lch, var(--citrus-mix-dark), var(--citrus-mix)),
var(--citrus-mix-dark)
);
} }
& a:has(figure) { & a:has(figure) {
font-family: "Urbanist", sans-serif; font-family: "Urbanist", sans-serif;
transition: border-color var(--trans), background-color var(--trans); transition:
border-color var(--trans),
background-color var(--trans);
box-shadow: var(--shadow-light); box-shadow: var(--shadow-light);
&:is(:hover, :focus) { &:is(:hover, :focus) {
& figure { & figure {
@ -16,30 +33,26 @@
} }
& a figure { & a figure {
border-width: 4px; border-width: 4px;
border-radius: 0;
&:is(:not(a:hover *, a:focus *)) { &:is(:not(a:hover *, a:focus *)) {
border-color: var(--light); border-color: var(--light);
background-color: var(--light); background-color: var(--light);
} }
} }
} }
#artworks { :is(#art li, #art section a):nth-child(odd) {
article { transform: var(--rot-minus);
margin: var(--pad-xl) 0 0 0;
background-color: var(--light);
background-image: var(--noise), var(--lined);
background-size: auto, 32px;
&:last-child:not(:first-of-type) {
margin: calc(var(--pad-xl) + var(--pad-xl)) 0 0 0;
}
&::before {
content: "";
display: flex;
height: 32px;
width: calc(100% + var(--pad-xl) * 2);
margin: calc(var(--pad-xxl) * -1) 0 var(--pad-l) calc(var(--pad-xl) * -1);
background-image: var(--border), var(--lined), var(--noise);
background-size: 32px, 32px;
background-blend-mode: darken;
} }
#art div {
background-color: var(--citrus-light);
background-image: var(--noise), var(--paper);
background-size: auto, 4px;
box-shadow: var(--shadow-light);
margin-bottom: var(--pad-xl);
padding: var(--pad-xl);
transform: var(--rot-plus);
& p {
line-height: 32px;
padding: 0;
} }
} }

25
_src/assets/css/citrus/home.css
View file

@ -1,25 +1,12 @@
article#badges { #interests {
& a:is(:hover,:focus) { & li {
transition: box-shadow var(--trans), background-color var(--trans);
box-shadow: 0 0 0 2px var(--citrus-secondary), 0 0 0 4px var(--citrus-dark-extra);
background-color: var(--citrus-secondary);
}
}
#interests li {
width: 16ch;
margin: var(--pad-s);
box-shadow: var(--shadow-light);
background-image: linear-gradient(color-mix(in lch, var(--citrus-light-extra), var(--citrus-primary) 50%), var(--citrus-primary) 200%);
& img {
filter: drop-shadow(0 0 1px var(--citrus-dark));
}
&:nth-child(odd) {
transform: rotate(1deg);
}
& a { & a {
align-content: center;
& span:has(img)::after { & span:has(img)::after {
display: none; display: none;
} }
} }
&:nth-child(odd) {
transform: var(--rot-minus);
}
}
} }

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

@ -12,7 +12,7 @@
color: var(--citrus-light); 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,7 +24,7 @@
border: var(--button-current-border); border: var(--button-current-border);
color: var(--citrus-light); color: var(--citrus-light);
} }
&:is(:hover, :focus):not([aria-current="page"]) { &:is(:hover, :focus):not([aria-current]) {
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);
@ -37,12 +37,15 @@
} }
} }
nav#default, nav#default,
nav#floating, header { nav#floating,
header {
color: var(--citrus-dark);
background-attachment: fixed; background-attachment: fixed;
background-image: var(--nav-bg); background-image: var(--nav-bg);
background-size: 6px; background-size: 6px;
} }
nav#floating, nav#default { nav#floating,
nav#default {
border-bottom-style: solid; border-bottom-style: solid;
border-right-style: solid; border-right-style: solid;
border-bottom-width: 4px; border-bottom-width: 4px;
@ -51,3 +54,22 @@ nav#floating, nav#default {
nav#default { nav#default {
border-bottom-right-radius: var(--pad-l); border-bottom-right-radius: var(--pad-l);
} }
@media screen and (max-width: 916px) {
header {
background: none;
}
}
@media screen and (min-width: 916px) {
header {
display: flex;
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);
padding: var(--pad-m) 0;
}
}

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

@ -5,9 +5,15 @@
--citrus-dark: color-mix(in lch, var(--citrus-secondary), var(--dark) 60%); --citrus-dark: color-mix(in lch, var(--citrus-secondary), var(--dark) 60%);
--citrus-light-extra: color-mix(in lch, var(--citrus-light), var(--light)); --citrus-light-extra: color-mix(in lch, var(--citrus-light), var(--light));
--citrus-dark-extra: color-mix(in lch, var(--citrus-dark), var(--dark)); --citrus-dark-extra: color-mix(in lch, var(--citrus-dark), var(--dark));
--citrus-mix: color-mix(in lch,var(--citrus-primary),var(--citrus-secondary)); --citrus-mix: color-mix(
in lch,
var(--citrus-primary),
var(--citrus-secondary)
);
--citrus-mix-light: color-mix(in lch, var(--citrus-light), var(--citrus-mix)); --citrus-mix-light: color-mix(in lch, var(--citrus-light), var(--citrus-mix));
--citrus-mix-dark: color-mix(in lch, var(--citrus-dark), var(--citrus-mix)); --citrus-mix-dark: color-mix(in lch, var(--citrus-dark), var(--citrus-mix));
--rot-plus: rotate(0.5deg);
--rot-minus: rotate(-0.5deg);
--shadow-light: 0.2rem 0.2rem 0.2rem 0.1rem #0002; --shadow-light: 0.2rem 0.2rem 0.2rem 0.1rem #0002;
--shadow-heavy: 0.2rem 0.2rem 0.4rem 0.2rem #0004; --shadow-heavy: 0.2rem 0.2rem 0.4rem 0.2rem #0004;
--checker: url("/assets/img/theme/citrus/checker.png"); --checker: url("/assets/img/theme/citrus/checker.png");
@ -16,17 +22,43 @@
--paper: url("/assets/img/theme/citrus/paper.png"); --paper: url("/assets/img/theme/citrus/paper.png");
--noise: url("/assets/img/theme/citrus/imagedoc-lightnoise.png"); --noise: url("/assets/img/theme/citrus/imagedoc-lightnoise.png");
--border: url("/assets/img/theme/citrus/border.png"); --border: url("/assets/img/theme/citrus/border.png");
--nav-bg: var(--dot), linear-gradient(var(--citrus-primary), var(--citrus-secondary) 60%, var(--citrus-primary) 120%); --nav-bg:
--button-bg: linear-gradient(var(--citrus-primary) 30%, var(--citrus-mix) 80%); var(--dot),
linear-gradient(
var(--citrus-primary),
var(--citrus-secondary) 60%,
var(--citrus-primary) 120%
);
--button-bg: linear-gradient(
var(--citrus-primary) 30%,
var(--citrus-mix) 80%
);
--button-border: 2px solid var(--citrus-dark); --button-border: 2px solid var(--citrus-dark);
--button-shine: inset 0px 2px var(--citrus-light), inset 0px -2px var(--citrus-mix); --button-shine:
--button-hover-bg: linear-gradient(var(--citrus-light),var(--citrus-primary),var(--citrus-mix-light)); inset 0px 2px var(--citrus-light), inset 0px -2px var(--citrus-mix);
--button-hover-bg: linear-gradient(
var(--citrus-light),
var(--citrus-primary),
var(--citrus-mix-light)
);
--button-hover-border: 2px solid var(--citrus-light); --button-hover-border: 2px solid var(--citrus-light);
--button-hover-shine: inset 0 -2px 0 0 var(--citrus-mix); --button-hover-shine: inset 0 -2px 0 0 var(--citrus-mix);
--button-current-bg: linear-gradient(var(--citrus-mix-dark),var(--citrus-dark-extra) 200%); --button-current-bg: linear-gradient(
var(--citrus-mix-dark),
var(--citrus-dark-extra) 200%
);
--button-current-border: 2px solid var(--citrus-dark-extra); --button-current-border: 2px solid var(--citrus-dark-extra);
--button-current-shine: inset 0px 2px 0 var(--citrus-mix-light), inset 0 -2px 0 var(--citrus-mix-dark); --button-current-shine:
--details-bg: linear-gradient(-45deg,var(--citrus-primary),var(--citrus-mix),var(--citrus-primary)); inset 0px 2px 0 var(--citrus-mix-light),
--details-shine: inset 0 2px 0 var(--citrus-light-extra), inset 2px 0 0 var(--citrus-light), inset 0 -2px 0 var(--citrus-primary), inset -2px 0 0 var(--citrus-primary); inset 0 -2px 0 var(--citrus-mix-dark);
--details-bg: linear-gradient(
-45deg,
var(--citrus-primary),
var(--citrus-mix),
var(--citrus-primary)
);
--details-shine:
inset 0 2px 0 var(--citrus-light-extra), inset 2px 0 0 var(--citrus-light),
inset 0 -2px 0 var(--citrus-primary), inset -2px 0 0 var(--citrus-primary);
--details-border: 2px solid var(--citrus-dark); --details-border: 2px solid var(--citrus-dark);
} }

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

@ -90,7 +90,9 @@ article > .postscript {
gap: var(--pad-m); gap: var(--pad-m);
} }
& > img { & > img {
transition: height var(--trans), border-radius var(--trans), transition:
height var(--trans),
border-radius var(--trans),
background-color var(--trans); background-color var(--trans);
border-radius: var(--round); border-radius: var(--round);
min-height: fit-content; min-height: fit-content;
@ -114,7 +116,6 @@ article > .postscript {
} }
#posts { #posts {
max-width: var(--post);
& ul { & ul {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -142,7 +143,7 @@ article > .postscript {
} }
} }
} }
@media screen and (max-width: 920px) { @media screen and (max-width: 916px) {
article aside { article aside {
float: unset; float: unset;
width: fit-content; width: fit-content;
@ -150,10 +151,6 @@ article > .postscript {
article section { article section {
flex-direction: column; flex-direction: column;
} }
#posts {
max-width: unset;
width: auto;
}
article > .postscript { article > .postscript {
& p { & p {
margin-right: var(--pad-sm); margin-right: var(--pad-sm);
@ -164,14 +161,3 @@ article > .postscript {
} }
} }
} }
@media (prefers-reduced-motion: reduce) {
article > .postscript {
& p,
p > img {
transition: none;
}
}
#blog #posts a {
transition: none;
}
}

8
_src/assets/css/default/changelog.css Normal file
View file

@ -0,0 +1,8 @@
li {
&::before {
content: none;
}
&::marker {
content: initial;
}
}

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

@ -1,4 +1,4 @@
@import url("./media.css"); @import url("./motion.css");
@import url("./variables.css"); @import url("./variables.css");
@import url("./nav.css"); @import url("./nav.css");
@ -9,144 +9,113 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-family: "Rubik", sans-serif;
display: block; display: block;
font-size: 2rem; font-size: 2rem;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
font-weight: bold; font-weight: bold;
width: fit-content;
} }
body { body {
font-family: "Rubik", sans-serif; font-family: "Rubik", sans-serif;
font-size: 100%; font-size: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
& a, & a,
button { button {
cursor: pointer; cursor: pointer;
transition: background-color var(--trans);
&:is(:hover, :focus) { &:is(:hover, :focus) {
outline: 0; outline: 0;
} }
} }
} }
svg { svg {
fill: currentColor; fill: currentColor;
stroke: currentColor; stroke: currentColor;
stroke-width: 0; stroke-width: 0;
} }
header { header {
padding-top: var(--pad-xl); margin-top: var(--pad-xl);
padding-left: calc(var(--view) + var(--pad-xl)); margin-left: calc(var(--view) + var(--pad-xl));
& a {
display: flex;
padding: var(--pad-s);
border-radius: var(--round);
}
& svg { & svg {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
margin-right: var(--pad-m); margin-right: var(--pad-m);
} }
& h1 {
display: inline-flex;
} }
}
footer { footer {
overflow-y: hidden; overflow-y: hidden;
word-break: break-all; word-break: break-all;
flex-wrap: wrap; flex-wrap: wrap;
font-family: "Nosey Rodent", sans-serif; font-family: "Nosey Rodent", sans-serif;
display: flex; display: flex;
margin-left: var(--view); margin: auto 0 0 auto;
width: calc(100% - var(--view)); width: fit-content;
justify-content: center; justify-content: center;
position: sticky; position: sticky;
inset-block: 100%; inset-block: 100%;
text-align: center; text-align: center;
& span { & span {
background-image: var(--transgender); background-image: var(--transgender);
padding: 0 var(--pad-s); padding: 0 var(--pad-s);
} }
} }
main { main {
width: var(--main); width: fit-content;
padding: var(--pad-xl); padding: var(--pad-xl);
padding-left: calc(var(--view) + var(--pad-xl)); padding-left: calc(var(--view) + var(--pad-xl));
padding-right: var(--view);
overflow: hidden; overflow: hidden;
position: relative;
& ul[role="list"] {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
} }
details { details {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
& summary::marker { & summary::marker {
content: none; content: none;
} }
} }
.header-anchor {
display: inline-block;
transition:
color var(--trans),
background-color var(--trans);
height: max-content;
padding: 0 var(--pad-m);
margin: 0 0 0 calc(var(--pad-xl) * -1);
border-radius: 0 var(--round) var(--round) 0;
}
article { article {
width: auto;
max-width: var(--main);
color: inherit; color: inherit;
border-style: solid; border-style: solid;
border-width: 2px; border-width: 2px;
border-radius: var(--round); border-radius: var(--round);
height: max-content; height: max-content;
padding: var(--pad-xl); padding: var(--pad-xl);
& a:has(figure) { & a:has(figure) {
border-radius: var(--round); border-radius: var(--round);
& figure { & figure {
border-color: inherit; border-color: inherit;
} }
} }
& s { & s {
text-decoration-style: line-through; text-decoration-style: line-through;
text-decoration-thickness: 0.1em; text-decoration-thickness: 0.1em;
} }
& u { & u {
text-decoration-style: double; text-decoration-style: double;
text-decoration-thickness: 2px; text-decoration-thickness: 2px;
} }
& em { & em {
font-weight: 200; font-weight: 200;
} }
& p { & p {
word-wrap: break-word; word-wrap: break-word;
} }
& p:not(:last-child, [aria-label]) { & p:not(:last-child, [aria-label]) {
padding-bottom: var(--pad-s); padding-bottom: var(--pad-s);
} }
& code:not(pre *) {
padding: 0 var(--pad-s);
}
& pre { & pre {
display: flex; display: flex;
width: auto; width: auto;
@ -155,17 +124,7 @@ article {
word-break: break-word; word-break: break-word;
border-style: solid; border-style: solid;
border-width: 2px; border-width: 2px;
transition:
background-color var(--trans),
border-color var(--trans);
} }
& pre,
code:not(pre *) {
border-radius: var(--round);
font-weight: bold;
}
& figure { & figure {
margin: 0; margin: 0;
border-style: solid; border-style: solid;
@ -175,18 +134,24 @@ article {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
& section {
& ul:not([role="list"]):is(#art *) { & a:has(figure) {
padding: 0; height: max-content;
margin: 0 0 var(--pad-s) var(--pad-xl);
} }
& figure img {
& li:not([role] *, #changelog *) { border-radius: inherit;
&::marker { }
& figcaption {
font-weight: normal;
font-style: italic;
padding: var(--pad-m) 0;
}
}
}
.paws li::marker {
content: none; content: none;
} }
.paws li::before {
&::before {
content: ""; content: "";
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -195,76 +160,26 @@ 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;
} }
}
& section {
& a:has(figure) {
height: max-content;
}
& figure img {
border-radius: inherit;
}
& figcaption {
font-weight: normal;
font-style: italic;
padding-top: var(--pad-s);
}
}
& > :first-child > code {
display: flex;
width: fit-content;
margin: var(--pad-s) 0;
}
}
:is(main article, main section):not(:last-child) { :is(main article, main section):not(:last-child) {
margin-bottom: var(--pad-m); margin-bottom: var(--pad-m);
} }
img[src*="/assets/img/flag/"] { img[src*="/assets/img/flag/"] {
height: 32px; height: 32px;
border-radius: 2px; border-radius: 2px;
&:first-child { &:first-child {
margin-left: var(--pad-m); margin-left: var(--pad-m);
} }
&:not(:last-child) { &:not(:last-child) {
margin-right: var(--pad-m); margin-right: var(--pad-m);
} }
} }
.link {
display: inline-flex;
& a {
margin-right: 4px;
}
& img {
position: relative;
vertical-align: sub;
margin: 0 var(--pad-s);
}
}
article a:not(.link *, a:has(img)) {
display: inline-flex;
padding: 0 var(--pad-s);
}
dialog button[commandfor="signal"] { dialog button[commandfor="signal"] {
width: max-content; width: max-content;
padding: 0 var(--pad-s); padding: 0 var(--pad-s);
margin: 0 auto; margin: 0 auto;
} }
#signal {
dialog#signal {
cursor: default; cursor: default;
background: black; background: black;
border: none; border: none;
@ -276,7 +191,6 @@ dialog#signal {
height: 100%; height: 100%;
position: fixed; position: fixed;
padding: var(--pad-xl); padding: var(--pad-xl);
& article { & article {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -288,15 +202,12 @@ dialog#signal {
background: none; background: none;
word-wrap: break-word; word-wrap: break-word;
color: white; color: white;
& h1 { & h1 {
font-size: 4rem; font-size: 4rem;
} }
& p { & p {
font-size: 2rem; font-size: 2rem;
} }
& a { & a {
margin: auto 0 0 auto; margin: auto 0 0 auto;
} }
@ -305,7 +216,6 @@ dialog#signal {
a { a {
font-family: "Times New Roman", Times, serif; font-family: "Times New Roman", Times, serif;
} }
& img { & img {
border: 4px solid white; border: 4px solid white;
padding: var(--pad-s); padding: var(--pad-s);
@ -314,21 +224,22 @@ dialog#signal {
} }
} }
} }
@media screen and (min-width: 916px) { @media screen and (min-width: 916px) {
div#sidebar { #sidebar {
display: flex; display: flex;
} }
nav#floating { #floating {
display: none; display: none;
} }
nav#default button[popovertarget] { #default button[popovertarget] {
display: none; display: none;
} }
} }
@media screen and (max-width: 916px) { @media screen and (max-width: 916px) {
/* Reset */ /* Reset */
header, footer, main { header,
footer,
main {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: auto; width: auto;
@ -338,11 +249,13 @@ dialog#signal {
padding: var(--pad-l); padding: var(--pad-l);
} }
header { header {
text-align: right; margin: calc(var(--pad-xxl) + var(--pad-l)) 0 0 0;
}
header h1 {
margin: auto 0 0 auto;
padding-right: var(--pad-m); padding-right: var(--pad-m);
} }
/* Move navbar artwork */ #default::before {
nav#default::before {
content: none; content: none;
} }
body::after { body::after {

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

@ -1,9 +1,3 @@
#gallery {
& time {
display: flex;
align-self: center;
}
}
#artworks { #artworks {
& ul { & ul {
display: grid; display: grid;
@ -11,29 +5,21 @@
auto-fill, auto-fill,
minmax(min(var(--thumb), 100%), 1fr) minmax(min(var(--thumb), 100%), 1fr)
); );
padding: 0;
margin: 0;
gap: var(--pad-l); gap: var(--pad-l);
& a { & a {
display: block; display: block;
} }
} }
& figure { & figure {
margin: 0; margin: 0;
border-style: solid; border-style: solid;
& img { & img {
display: flex;
width: 100%;
height: var(--thumb); height: var(--thumb);
object-fit: cover; object-fit: cover;
} }
& figcaption { & figcaption {
display: inline-flex;
font-size: 1.4rem; font-size: 1.4rem;
display: flex;
align-items: baseline;
text-decoration-style: none;
} }
& .count { & .count {
margin: auto 0 0 auto; margin: auto 0 0 auto;
@ -42,16 +28,9 @@
} }
#art { #art {
display: flex;
flex-direction: column;
width: fit-content;
& p { & p {
max-width: var(--post); max-width: var(--post);
} }
& h3 {
display: flex;
gap: var(--pad-s);
}
& section:has(a:nth-child(n + 2)) { & section:has(a:nth-child(n + 2)) {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -68,14 +47,6 @@
} }
} }
} }
@media screen and (max-width: 1500px) {
#art section:has(a:nth-child(n + 2)) {
flex-direction: column;
& a {
width: 100%;
}
}
}
@media screen and (max-width: 916px) { @media screen and (max-width: 916px) {
#art p { #art p {
max-width: auto; max-width: auto;

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

@ -7,116 +7,65 @@
transform: translateY(-4px); transform: translateY(-4px);
} }
} }
#bio .emoji {
article#bio {
& .emoji {
height: 20px;
width: 20px;
display: inline-flex; display: inline-flex;
height: 20px;
vertical-align: middle; vertical-align: middle;
width: 20px;
&::after, &::after,
img { img {
filter: drop-shadow(0 0 0.5px #000a); filter: drop-shadow(0 0 0.5px #000a);
} }
} }
} #badges ul {
article#badges {
& ul {
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--pad-s); gap: var(--pad-s);
padding: 0;
} }
#interests a {
& a { align-items: center;
display: flex; display: inline-flex;
margin: 0;
}
& img {
box-sizing: content-box;
}
}
article#interests {
& ul {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: var(--pad-l) 0;
}
& li {
display: flex;
width: 14ch;
flex-wrap: wrap;
text-align: center;
justify-content: center;
& a {
display: flex;
flex-direction: column; flex-direction: column;
padding: var(--pad-s); height: auto;
width: inherit; justify-content: center;
text-align: center;
width: 160px;
&:not(:hover, :focus) { &:not(:hover, :focus) {
background: transparent; background: transparent;
} }
} }
} #interests span:has(img)::after {
& .music img,
.games img {
height: 48px;
}
& .manga img {
height: 128px;
}
& span:has(img) {
width: fit-content;
margin: 0 auto;
&::after {
content: "";
background-image: url("/assets/img/icon/shortcut.png"); background-image: url("/assets/img/icon/shortcut.png");
background-size: 100%; background-size: 100%;
content: "";
display: block; display: block;
z-index: 1;
position: absolute;
width: 24px;
height: 24px; height: 24px;
margin: -1.5rem 0 0 -0.5rem; margin: -1.5rem 0 0 -0.5rem;
pointer-events: none; pointer-events: none;
position: absolute;
width: 24px;
z-index: 1;
} }
.games img {
height: 48px;
} }
.manga img {
& details:last-child ul { height: 128px;
padding: var(--pad-l) 0 0 0;
} }
& details h3 {
border-bottom-width: 1px;
border-bottom-style: solid;
}
}
#pkmn { #pkmn {
display: flex;
flex-wrap: wrap;
justify-content: center;
background-image: url("/assets/img/pkmn/bg/box.png"); background-image: url("/assets/img/pkmn/bg/box.png");
border-radius: 5px;
width: fit-content;
border-bottom-color: #78a068; border-bottom-color: #78a068;
border-left-color: #c8f8c0; border-left-color: #c8f8c0;
border-radius: 4px;
border-right-color: #78a068; border-right-color: #78a068;
border-style: solid;
border-top-color: #c8f8c0; border-top-color: #c8f8c0;
border-width: 3px; border-width: 3px;
border-style: solid;
margin: var(--pad-l) 0 0 0; margin: var(--pad-l) 0 0 0;
width: fit-content;
& li { & li {
display: flex; display: flex;
margin-top: -8px;
margin-left: -12px; margin-left: -12px;
margin-top: -8px;
& span:hover { & span:hover {
filter: drop-shadow(0 -2px 0 #fff) drop-shadow(0 2px 0 #fff) filter: drop-shadow(0 -2px 0 #fff) drop-shadow(0 2px 0 #fff)
drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff)
@ -124,19 +73,13 @@ article#interests {
animation: jump 200ms infinite alternate; animation: jump 200ms infinite alternate;
} }
} }
& li:first-child {
margin-left: 0px;
} }
}
#agender { #agender {
background-image: var(--agender); background-image: var(--agender);
} }
#aromantic { #aromantic {
background-image: var(--aromantic); background-image: var(--aromantic);
} }
#pansexual { #pansexual {
background-image: var(--pansexual); background-image: var(--pansexual);
} }

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

@ -14,12 +14,10 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: contain; background-size: contain;
& footer { & footer {
position: sticky; position: sticky;
bottom: 0; bottom: 0;
} }
& header { & header {
top: 0; top: 0;
display: flex; display: flex;
@ -37,7 +35,6 @@
overflow: hidden; overflow: hidden;
} }
} }
& footer, & footer,
header { header {
position: absolute; position: absolute;

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

@ -1,6 +1,6 @@
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
/* Scrolling pride flag text */ /* Scrolling pride flag text */
article#bio span[id], #bio span[id],
footer span { footer span {
font-family: "Nosey Rodent", sans-serif; font-family: "Nosey Rodent", sans-serif;
font-weight: bold; font-weight: bold;
@ -15,9 +15,6 @@
} }
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
body {
animation: none;
}
/* Buttons */ /* Buttons */
:is(a, button), :is(a, button),
span:has(a) { span:has(a) {
@ -44,7 +41,8 @@
} }
} }
/* Scrolling pride flag text */ /* Scrolling pride flag text */
article#bio span[id], footer span { article#bio span[id],
footer span {
transition: none; transition: none;
animation: none; animation: none;
color: inherit; color: inherit;
@ -79,4 +77,16 @@
animation: none; animation: none;
transform: translateY(-4px); transform: translateY(-4px);
} }
#art div {
transform: none;
}
article > .postscript {
& p,
p > img {
transition: none;
}
}
#blog #posts a {
transition: none;
}
} }

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

@ -1,127 +1,128 @@
.navbar { .navbar {
position: fixed;
display: flex; display: flex;
z-index: 2;
flex-direction: column; flex-direction: column;
overflow-x: hidden;
padding: var(--pad-l);
width: var(--view);
height: 100%;
overflow-y: scroll;
scrollbar-width: none;
gap: var(--pad-m); gap: var(--pad-m);
height: 100%;
margin: 0; margin: 0;
overflow-x: hidden;
overflow-y: scroll;
padding: var(--pad-l);
position: fixed;
scrollbar-width: none;
width: var(--view);
& li *:is(a, button) { & li *:is(a, button) {
align-items: center; align-items: center;
border-radius: var(--round);
border-style: solid; border-style: solid;
border-width: 2px; border-width: 2px;
border-radius: var(--round);
} }
& section { & section {
border-radius: var(--round); border-radius: var(--round);
font-weight: bold;
border-width: 2px;
border-style: solid; border-style: solid;
border-width: 2px;
font-weight: bold;
& h3 { & h3 {
display: flex; display: flex;
justify-content: center;
align-items: center;
padding: 0;
height: var(--pad-xl);
font-size: 1.4rem; font-size: 1.4rem;
height: var(--pad-xl);
margin: var(--pad-s) auto 0 auto;
padding: 0;
} }
} }
& * svg, & * svg,
li img { li img {
align-self: center;
margin: 0 8px 0 8px; margin: 0 8px 0 8px;
width: 20px; width: 20px;
align-self: center;
} }
& ul { & ul {
margin-top: 0;
margin: var(--pad-s); margin: var(--pad-s);
padding: 0; padding: 0;
& li, & li,
button { button {
padding: 0;
align-items: center; align-items: center;
margin-bottom: inherit; margin-bottom: inherit;
padding: 0;
& img { & img {
border-radius: 100%; border-radius: 100%;
} }
} }
} }
& li *:is(a, button) { & li *:is(a, button) {
display: flex; display: flex;
font-size: 1.125rem; font-size: 1.125rem;
width: 100%;
font-weight: bold; font-weight: bold;
height: 36px; height: 36px;
line-height: var(--pad-xl); line-height: var(--pad-xl);
width: 100%;
} }
} }
#default::before,
nav#default::before,
body::after { body::after {
z-index: -1;
content: ""; content: "";
position: absolute; height: inherit;
margin: 0;
mask-image: url("/assets/img/theme/sundae_sit-lines.png"); mask-image: url("/assets/img/theme/sundae_sit-lines.png");
mask-repeat: no-repeat; mask-repeat: no-repeat;
margin: 0;
width: inherit;
height: inherit;
pointer-events: none; pointer-events: none;
position: absolute;
width: inherit;
z-index: -1;
} }
#default::before {
nav#default::before { -webkit-mask-position-x: -25px;
-webkit-mask-position-y: 90%;
bottom: 0; bottom: 0;
left: 0; left: 0;
mask-size: 160%; mask-size: 160%;
-webkit-mask-position-x: -25px;
-webkit-mask-position-y: 90%;
} }
body::after { body::after {
content: none;
mask-size: 100%;
width: 100%;
height: 100vw;
-webkit-mask-position-x: 0; -webkit-mask-position-x: 0;
-webkit-mask-position-y: bottom; -webkit-mask-position-y: bottom;
content: none;
height: 100vw;
mask-size: 100%;
width: 100%;
} }
#floating {
nav#floating {
width: var(--float);
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); border-bottom-right-radius: var(--pad-l);
border-bottom-style: solid;
border-bottom-width: 2px;
border-right-style: solid;
border-right-width: 2px;
height: fit-content;
top: 0;
width: var(--float);
& button { & button {
width: fit-content;
font-size: 0; font-size: 0;
width: fit-content;
} }
& a { & a {
display: none; display: none;
} }
} }
#sidebar {
div#sidebar {
margin: 0;
padding: 0;
background: none; background: none;
border: 0; border: 0;
margin: 0;
padding: 0;
} }
nav#default { #default {
border: 0; border: 0;
border-right-style: solid; border-right-style: solid;
border-right-width: 2px; border-right-width: 2px;
} }
/* hack to make the header look seamless with the nav when using citrus theme */
body {
position: relative;
z-index: -3;
& main {
position: inherit;
z-index: -2;
}
& #sidebar {
position: inherit;
z-index: -1;
}
}

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

@ -4,52 +4,42 @@
header svg { header svg {
color: var(--secondary-light-300); color: var(--secondary-light-300);
} }
article { article {
border-color: var(--secondary-300); border-color: var(--secondary-300);
background-color: var(--secondary-200); background-color: var(--secondary-200);
& #default { & #default {
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);
} }
& s, & s,
u { u {
text-decoration-color: color-mix(in lch, red, var(--secondary-500) 20%); text-decoration-color: color-mix(in lch, red, var(--secondary-500) 20%);
} }
& code:not(pre *) { & code:not(pre *) {
color: var(--secondary-400); color: var(--secondary-400);
background-color: var(--secondary-light-400); background-color: var(--secondary-light-400);
} }
& pre { & pre {
background-color: var(--secondary-100); background-color: var(--secondary-100);
&:hover { &:hover {
border-color: var(--secondary); border-color: var(--secondary);
background-color: var(--secondary-400); background-color: var(--secondary-400);
} }
} }
& pre, & pre,
code { code {
border-color: var(--secondary-400); border-color: var(--secondary-400);
} }
/* blog.css */
& .post-warning { & .post-warning {
background-color: var(--secondary); background-color: var(--secondary);
color: var(--secondary-100); color: var(--secondary-100);
&::before, &::before,
&::after { &::after {
background-color: var(--secondary); background-color: var(--secondary);
} }
} }
& .addendum { & .addendum {
background-color: var(--secondary-400);
box-shadow: inset 0 0 0 2px var(--secondary); box-shadow: inset 0 0 0 2px var(--secondary);
border-image-source: linear-gradient( border-image-source: linear-gradient(
45deg, 45deg,
@ -57,20 +47,17 @@
var(--secondary-600), var(--secondary-600),
var(--secondary) var(--secondary)
); );
background-color: var(--secondary-400);
} }
} }
#posts { #posts {
& p:not(:last-child) { & p:not(:last-child) {
color: var(--secondary-light-700); color: var(--secondary-light-700);
} }
} }
/* default.css */
body { body {
background-color: var(--secondary-100); background-color: var(--secondary-100);
& :is(a, button):not(span *, .postscript *, dialog *), & a,
span:has(a) { button {
color: var(--secondary-light-400); color: var(--secondary-light-400);
border-color: var(--secondary-600); border-color: var(--secondary-600);
background-color: color-mix(in lch, var(--secondary-300), transparent); background-color: color-mix(in lch, var(--secondary-300), transparent);
@ -79,24 +66,17 @@
border-color: currentColor; border-color: currentColor;
background-color: var(--secondary-500); background-color: var(--secondary-500);
} }
&:is(.header-anchor):is(:hover, :focus) {
background-color: var(--secondary-light-400);
color: var(--secondary-300);
box-shadow: 0 0 0 2px var(--secondary-300);
}
} }
& span a { & span a {
color: inherit; color: inherit;
} }
& #default,
& nav#default, #floating {
nav#floating {
background-color: var(--secondary-100); background-color: var(--secondary-100);
border-color: var(--secondary); border-color: var(--secondary);
& section { & section {
border-color: var(--secondary); border-color: var(--secondary);
background-color: color-mix(in lch, var(--secondary-300), transparent); 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);
@ -104,7 +84,6 @@
background-color: var(--secondary-light-500); background-color: var(--secondary-light-500);
} }
} }
&::after { &::after {
background-image: linear-gradient( background-image: linear-gradient(
to bottom, to bottom,
@ -113,34 +92,27 @@
); );
} }
} }
&::after, &::after,
& nav#default::before { & #default::before {
background-color: var(--secondary); background-color: var(--secondary);
} }
} }
/* home.css */
ul:not([role]) li::before { ul:not([role]) li::before {
background-color: var(--secondary-light-300); background-color: var(--secondary-light-300);
} }
#interests { #interests {
& a:is(:hover, :focus):not(.header-anchor) { & a:is(:hover, :focus):not(.header-anchor) {
box-shadow: 0 0 0 1px currentColor; box-shadow: 0 0 0 1px currentColor;
background-color: var(--secondary-500); background-color: var(--secondary-500);
} }
& img { & img {
box-shadow: 0 0 0 1px box-shadow: 0 0 0 1px
color-mix(in lch, transparent, var(--secondary-500) 70%); color-mix(in lch, transparent, var(--secondary-500) 70%);
} }
& details h3 { & details h3 {
border-color: var(--secondary-600); border-color: var(--secondary-600);
} }
} }
a:has(img[src*="/assets/img/button"]) { a:has(img[src*="/assets/img/button"]) {
background-color: unset; background-color: unset;
} }

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

@ -4,52 +4,42 @@
header svg { header svg {
color: var(--primary-dark-300); color: var(--primary-dark-300);
} }
article { article {
border-color: var(--primary-300); border-color: var(--primary-300);
background-color: var(--primary-200); background-color: var(--primary-200);
& #default { & #default {
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);
} }
& s, & s,
u { u {
text-decoration-color: color-mix(in lch, red, var(--primary-500) 20%); text-decoration-color: color-mix(in lch, red, var(--primary-500) 20%);
} }
& code:not(pre *) { & code:not(pre *) {
color: var(--primary-400); color: var(--primary-400);
background-color: var(--primary-dark-400); background-color: var(--primary-dark-400);
} }
& pre { & pre {
background-color: var(--primary-100); background-color: var(--primary-100);
&:hover { &:hover {
border-color: var(--primary); border-color: var(--primary);
background-color: var(--primary-400); background-color: var(--primary-400);
} }
} }
& pre, & pre,
code { code {
border-color: var(--primary-400); border-color: var(--primary-400);
} }
/* blog.css */
& .post-warning { & .post-warning {
background-color: var(--primary); background-color: var(--primary);
color: var(--primary-dark-100); color: var(--primary-dark-100);
&::before, &::before,
&::after { &::after {
background-color: var(--primary); background-color: var(--primary);
} }
} }
& .addendum { & .addendum {
background-color: var(--primary-400);
box-shadow: inset 0 0 0 2px var(--primary); box-shadow: inset 0 0 0 2px var(--primary);
border-image-source: linear-gradient( border-image-source: linear-gradient(
45deg, 45deg,
@ -57,46 +47,36 @@
var(--primary-600), var(--primary-600),
var(--primary) var(--primary)
); );
background-color: var(--primary-400);
} }
} }
#posts { #posts {
& p:not(:last-child) { & p:not(:last-child) {
color: var(--primary-dark-700); color: var(--primary-dark-700);
} }
} }
/* default.css */
body { body {
background-color: var(--primary-100); background-color: var(--primary-100);
& :is(a, button):not(span *, .postscript *, dialog *), & a,
span:has(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: color-mix(in lch, var(--primary-400), transparent);
&:is(:hover, :focus) { &:is(:hover, :focus) {
color: var(--primary-dark-500); color: var(--primary-dark-500);
border-color: currentColor; border-color: currentColor;
background-color: var(--primary-600); background-color: var(--primary-600);
} }
&:is(.header-anchor):is(:hover, :focus) {
background-color: var(--primary-dark-400);
color: var(--primary-300);
box-shadow: 0 0 0 2px var(--primary-300);
}
} }
& span a { & span a {
color: inherit; color: inherit;
} }
& #default,
& nav#default, #floating {
nav#floating {
background-color: var(--primary-100); background-color: var(--primary-100);
border-color: var(--primary-dark-500); border-color: var(--primary-dark-500);
& section { & section {
border-color: var(--primary-dark-800); border-color: var(--primary-dark-800);
background-color: color-mix(in lch, var(--primary-300), transparent); 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);
@ -104,7 +84,6 @@
background-color: var(--primary-dark-500); background-color: var(--primary-dark-500);
} }
} }
&::after { &::after {
background-image: linear-gradient( background-image: linear-gradient(
to bottom, to bottom,
@ -113,34 +92,27 @@
); );
} }
} }
&::after, &::after,
& nav#default::before { & #default::before {
background-color: var(--primary-dark-500); background-color: var(--primary-dark-500);
} }
} }
/* home.css */
ul:not([role]) li::before { ul:not([role]) li::before {
background-color: var(--primary-dark-300); background-color: var(--primary-dark-300);
} }
#interests { #interests {
& a:is(:hover, :focus):not(.header-anchor) { & a:is(:hover, :focus):not(.header-anchor) {
box-shadow: 0 0 0 1px currentColor; box-shadow: 0 0 0 1px currentColor;
background-color: var(--primary-500); background-color: var(--primary-500);
} }
& img { & img {
box-shadow: 0 0 0 1px box-shadow: 0 0 0 1px
color-mix(in lch, transparent, var(--primary-dark-500) 30%); color-mix(in lch, transparent, var(--primary-dark-500) 30%);
} }
& details h3 { & details h3 {
border-color: var(--primary-dark-600); border-color: var(--primary-dark-600);
} }
} }
a:has(img[src*="/assets/img/button"]) { a:has(img[src*="/assets/img/button"]) {
background-color: unset; background-color: unset;
} }

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

@ -52,7 +52,7 @@
--pad-l: 1rem; --pad-l: 1rem;
--pad-xl: 2rem; --pad-xl: 2rem;
--pad-xxl: 4rem; --pad-xxl: 4rem;
--round: 16px; --round: 16px; /* Border radius */
--trans: 300ms; --trans: 300ms;
--paw: url("/assets/img/theme/paw.svg"); --paw: url("/assets/img/theme/paw.svg");
--paw-tiled: url("/assets/img/theme/paw-tiled.png"); --paw-tiled: url("/assets/img/theme/paw-tiled.png");
@ -102,17 +102,6 @@
#00d2ff 0 #00d2ff 0
); );
} }
@keyframes mainbg {
0% {
background-position: 0rem 0rem;
}
100% {
background-position: 256px 256px;
}
}
@keyframes slide { @keyframes slide {
0% { 0% {
background-position: 0% 100%; background-position: 0% 100%;
@ -122,17 +111,14 @@
background-position: 200% 100%; background-position: 200% 100%;
} }
} }
@font-face { @font-face {
font-family: Rubik; font-family: Rubik;
src: url("/assets/fonts/Rubik.ttf") format("truetype"); src: url("/assets/fonts/Rubik.ttf") format("truetype");
} }
@font-face { @font-face {
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-face {
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");

2
_src/data/art/artwork/NT sunny spritesheet.md
View file

@ -4,7 +4,7 @@ images:
alt: Various pixel art animations of Sundae as a character from Nuclear Throne. alt: Various pixel art animations of Sundae as a character from Nuclear Throne.
date: 2021-01-25 date: 2021-01-25
pixel: true pixel: true
position: left fit: contain
programs: programs:
- name: paint.net - name: paint.net
src: https://www.getpaint.net/ src: https://www.getpaint.net/

2
_src/data/art/artwork/artwork.json
View file

@ -1,4 +1,4 @@
{ {
"permalink": "/gallery/{{page.fileSlug|slug}}/", "permalink": "/gallery/original/{{page.fileSlug|slug}}/",
"tags": "artworks" "tags": "artworks"
} }

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

@ -3,6 +3,7 @@ images:
- src: /assets/img/art/sundae_refsheet-new-unfinished.png - src: /assets/img/art/sundae_refsheet-new-unfinished.png
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
fit: scale-down
programs: programs:
- name: Krita - name: Krita
src: https://krita.org/ src: https://krita.org/

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

@ -4,6 +4,7 @@ images:
alt: Half-length portrait of Sundae 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 pixel: true
fit: scale-down
programs: programs:
- name: MS Paint - name: MS Paint
src: https://www.microsoft.com/en-us/windows/paint src: https://www.microsoft.com/en-us/windows/paint

2
_src/data/art/fanart/fanart.json
View file

@ -1,4 +1,4 @@
{ {
"permalink": "/gallery/{{page.fileSlug|slug}}/", "permalink": "/gallery/fanart/{{page.fileSlug|slug}}/",
"tags": "fanarts" "tags": "fanarts"
} }

2
_src/data/art/fanart/klonoa sitting.md
View file

@ -3,7 +3,7 @@ images:
- src: /assets/img/art/klonoa_sitting.png - src: /assets/img/art/klonoa_sitting.png
alt: Klonoa sitting on a ledge, with a hand on his knee and right leg dangling from the viewer's side. alt: Klonoa sitting on a ledge, with a hand on his knee and right leg dangling from the viewer's side.
date: 2021-11-18 date: 2021-11-18
position: -60px fit: scale-down
programs: programs:
- name: MS Paint - name: MS Paint
src: https://www.microsoft.com/en-us/windows/paint src: https://www.microsoft.com/en-us/windows/paint

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

@ -1,16 +0,0 @@
## Bio
<img src="/assets/img/art/sundae_icon.svg" alt="Vector icon of Sunny" style="width: 128px;">
Hi! My name's Sunny. I'm:
- an artist
- a writer
- an audio and video editor
- a graphic designer
- a web designer
- a bunny <span class="emoji"><img src="/assets/img/icon/rabbit_1f407.gif" alt="🐇"></span>
I identify as: <span id="agender">agender</span>, <span id="aromantic">aromantic</span> and <span id="pansexual">pansexual</span>.
_TO DO: add more text here plz. kthxbai ^\_^_

3
_src/data/articles/fanart.md
View file

@ -1,3 +0,0 @@
## Fan art
Various artworks featuring characters from other media

12
_src/data/articles/home-bio.html Normal file
View file

@ -0,0 +1,12 @@
<img src="/assets/img/art/sundae_icon.svg" alt="Vector icon of Sunny" style="width: 128px;">
<p>Hi! My name's Sunny. I'm:</p>
<ul class="paws">
<li>an artist</li>
<li>a writer</li>
<li>an audio and video editor</li>
<li>a graphic designer</li>
<li>a web designer</li>
<li>a bunny <span class="emoji"><img src="/assets/img/icon/rabbit_1f407.gif" alt="🐇"></span></li>
</ul>
<p>I identify as: <span id="agender">agender</span>, <span id="aromantic">aromantic</span> and <span id="pansexual">pansexual</span>.</p>
<p><i>TO DO: add more text here plz. kthxbai ^_^</i></p>

3
_src/data/articles/home-interests.html Normal file
View file

@ -0,0 +1,3 @@
<p>Below are lists of media that I've enjoyed and/or still enjoy.</p>
<p>It is a non-exclusive list, so not everything ever is on here. Just whatever comes to mind to recommend.</p>
<p>There will be <b>a lot</b> of music, though.</p>

7
_src/data/articles/interests.md
View file

@ -1,7 +0,0 @@
## Interests
Below are lists of media that I've enjoyed and/or still enjoy.
It is a non-exclusive list, so not everything ever is on here. Just whatever comes to mind to recommend.
There will be **a lot** of music, though.

3
_src/data/articles/ocs.md
View file

@ -1,3 +0,0 @@
## Original characters
My own characters that I've drawn

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

@ -15,7 +15,7 @@ I haven't worked on much of anything the past 8+ months, and out of the blue, I
### So, what's new? ### So, what's new?
It's now {{"open source"|link:"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"|link:"https://moth.ink/forgejo/sundae/website"}} under <abbr title="Creative Commons Attribution-NonCommercial-ShareAlike 4.0">CC-BY-NC-SA 4.0</abbr>!
Besides that, a lot is new, actually. For starters, I ported the site over to a fresh build of {{"Eleventy 3.1.0"|link:"https://github.com/11ty/eleventy/releases/tag/v3.1.0"}}, which was way easier than I expected, {{"since I originally started from a base"|link:"/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 {{"Eleventy 3.1.0"|link:"https://github.com/11ty/eleventy/releases/tag/v3.1.0"}}, which was way easier than I expected, {{"since I originally started from a base"|link:"/blog/break-time#i-have-no-some-idea-what-i'm-doing"}}.

2
_src/data/changelog/2023-02-16.md
View file

@ -1,3 +1 @@
## {{page.fileSlug|readable}}
- Created my Neocities account! - Created my Neocities account!

2
_src/data/changelog/2023-03-12.md
View file

@ -1,5 +1,3 @@
## {{page.fileSlug|readable}}
- Added [Home](/home), [Gallery](/gallery) and ~~About~~ - Added [Home](/home), [Gallery](/gallery) and ~~About~~
- ~~About~~ contains Pokémon boxes and a small bio - ~~About~~ contains Pokémon boxes and a small bio
- Added links to other pages - Added links to other pages

3
_src/data/changelog/2023-03-16.md
View file

@ -1,9 +1,6 @@
--- ---
title: Version 0 title: Version 0
--- ---
## {{page.fileSlug|readable}} <code>{{title}}</code>
![](/assets/img/changelog/ver0.png) ![](/assets/img/changelog/ver0.png)
- Added sidebar - Added sidebar

2
_src/data/changelog/2023-04-16.md
View file

@ -1,5 +1,3 @@
## {{page.fileSlug|readable}}
- Working on my [interests](/home#interests)... - Working on my [interests](/home#interests)...
- Added ~~Favorite Pokémon~~ - Added ~~Favorite Pokémon~~
- Moved Pokémon boxes from ~~About~~ - Moved Pokémon boxes from ~~About~~

2
_src/data/changelog/2023-04-20.md
View file

@ -1,3 +1 @@
## {{page.fileSlug|readable}}
- [Gallery](/gallery) implemented - [Gallery](/gallery) implemented

2
_src/data/changelog/2023-07-16.md
View file

@ -2,8 +2,6 @@
title: Version 1 title: Version 1
--- ---
## {{page.fileSlug|readable}} <code>{{title}}</code>
![](/assets/img/changelog/ver1.png) ![](/assets/img/changelog/ver1.png)
- Changed backgrounds - Changed backgrounds

2
_src/data/changelog/2023-07-18.md
View file

@ -1,5 +1,3 @@
## {{page.fileSlug|readable}}
- Changed [Gallery](/gallery) - Changed [Gallery](/gallery)
- Now implementing {{"CSS grid layout"|link:"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout"}} - Now implementing {{"CSS grid layout"|link:"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout"}}
- Removed Sunny's portrait from the sidebar - Removed Sunny's portrait from the sidebar

2
_src/data/changelog/2023-08-05.md
View file

@ -1,5 +1,3 @@
## {{page.fileSlug|readable}}
- Changed ~~About~~ - Changed ~~About~~
- Added a collection of games and music that I enjoy - Added a collection of games and music that I enjoy
- Added 88x31 buttons to the footer of the page - Added 88x31 buttons to the footer of the page

2
_src/data/changelog/2023-08-14.md
View file

@ -1,3 +1 @@
## {{page.fileSlug|readable}}
- Made a 88x31 button! [![](/assets/img/button/sunbun_a.gif "sunbun")](/) - Made a 88x31 button! [![](/assets/img/button/sunbun_a.gif "sunbun")](/)

2
_src/data/changelog/2023-09-12.md
View file

@ -1,5 +1,3 @@
## {{page.fileSlug|readable}}
- Re-added and moved Sunny's portrait to my [bio](/home#bio) - Re-added and moved Sunny's portrait to my [bio](/home#bio)
- Changed [Gallery](/gallery) - Changed [Gallery](/gallery)
- Added sections for [original characters](/gallery/#original-characters) and [fan art](/gallery#fan-art) - Added sections for [original characters](/gallery/#original-characters) and [fan art](/gallery#fan-art)

2
_src/data/changelog/2023-09-16.md
View file

@ -1,3 +1 @@
## {{page.fileSlug|readable}}
- Wrote more about my [interests](/home#interests) - Wrote more about my [interests](/home#interests)

2
_src/data/changelog/2023-10-16.md
View file

@ -1,3 +1 @@
## {{page.fileSlug|readable}}
- Starting work on a re-design. I fixed a few inconsistencies beforehand - Starting work on a re-design. I fixed a few inconsistencies beforehand

2
_src/data/changelog/2023-11-02.md
View file

@ -2,8 +2,6 @@
title: Version 2 title: Version 2
--- ---
## {{page.fileSlug|readable}} <code>{{title}}</code>
![](/assets/img/changelog/ver2.png) ![](/assets/img/changelog/ver2.png)
Added a lot of visual flair with to page elements to look like everyday objects, with the exception being: the header, sidebar and topbar, as they're supposed to be UI. Added a lot of visual flair with to page elements to look like everyday objects, with the exception being: the header, sidebar and topbar, as they're supposed to be UI.

2
_src/data/changelog/2023-12-01.md
View file

@ -2,8 +2,6 @@
title: Version 3 title: Version 3
--- ---
## {{page.fileSlug|readable}} <code>{{title}}</code>
![](/assets/img/changelog/ver3.png) ![](/assets/img/changelog/ver3.png)
Some considerations were put into making page elements stand out more. I tried to remove redundant rules and nesting when necessary, and tried my best to conform to {{"semantic HTML"|link:"https://developer.mozilla.org/en-US/curriculum/core/semantic-html/"}}. Some considerations were put into making page elements stand out more. I tried to remove redundant rules and nesting when necessary, and tried my best to conform to {{"semantic HTML"|link:"https://developer.mozilla.org/en-US/curriculum/core/semantic-html/"}}.

2
_src/data/changelog/2023-12-04.md
View file

@ -1,4 +1,2 @@
## {{page.fileSlug|readable}}
- Changed ~~About~~ - Changed ~~About~~
- Updated the look of the jewel CD cases in my [interests](/home#interests) - Updated the look of the jewel CD cases in my [interests](/home#interests)

2
_src/data/changelog/2023-12-11.md
View file

@ -1,5 +1,3 @@
## {{page.fileSlug|readable}}
- Fixed a couple of small issues regarding mobile view - Fixed a couple of small issues regarding mobile view
- Changed [Gallery](/gallery) - Changed [Gallery](/gallery)
- Artworks now work (ha) with keyboard navigation - Artworks now work (ha) with keyboard navigation

2
_src/data/changelog/2023-12-17.md
View file

@ -1,4 +1,2 @@
## {{page.fileSlug|readable}}
- Added ~~Jukebox~~ - Added ~~Jukebox~~
- A page with a music player featuring a pre-defined track list from various video games and accompanying backgrounds that fade-in on track change - A page with a music player featuring a pre-defined track list from various video games and accompanying backgrounds that fade-in on track change

2
_src/data/changelog/2023-12-28.md
View file

@ -1,4 +1,2 @@
## {{page.fileSlug|readable}}
- Drafted ~~Jukebox~~ - Drafted ~~Jukebox~~
- I am bad at JavaScript - I am bad at JavaScript

2
_src/data/changelog/2024-06-11.md
View file

@ -2,8 +2,6 @@
title: Version 4 title: Version 4
--- ---
## {{page.fileSlug|readable}} <code>{{title}}</code>
![](/assets/img/changelog/ver4.png) ![](/assets/img/changelog/ver4.png)
- Shiny buttons are BACK! - Shiny buttons are BACK!

2
_src/data/changelog/2024-09-24.md
View file

@ -2,8 +2,6 @@
title: Version 5 title: Version 5
--- ---
## {{page.fileSlug|readable}} <code>{{title}}</code>
![](/assets/img/changelog/ver5.png) ![](/assets/img/changelog/ver5.png)
Re-wrote the website with {{"Eleventy"|link:"https://11ty.dev/"}}. Re-wrote the website with {{"Eleventy"|link:"https://11ty.dev/"}}.

2
_src/data/changelog/2025-06-25.md
View file

@ -2,8 +2,6 @@
title: Version 6 title: Version 6
--- ---
## {{page.fileSlug|readable}} <code>{{title}}</code>
![](/assets/img/changelog/ver6.png) ![](/assets/img/changelog/ver6.png)
Re-wrote the site, again. Re-wrote the site, again.

2
_src/data/changelog/2025-08-10.md
View file

@ -1,5 +1,3 @@
## {{page.fileSlug|readable}}
Polished the old theme Polished the old theme
- Changed [Home](/home) - Changed [Home](/home)

2
_src/data/changelog/2025-09-09.md
View file

@ -1,5 +1,3 @@
## {{page.fileSlug|readable}}
- Changed sidebar - Changed sidebar
- Added icon for [Changelog](/changelog) - Added icon for [Changelog](/changelog)
- For some reason I forgot give it an icon, it previously used the Gallery icon - For some reason I forgot give it an icon, it previously used the Gallery icon

4
_src/data/changelog/2025-09-10.md
View file

@ -1,12 +1,10 @@
## {{page.fileSlug|readable}}
Website (hopefully) fixed for Chromium-based browsers _...grr_ Website (hopefully) fixed for Chromium-based browsers _...grr_
- Changed sidebar - Changed sidebar
- ~~Added an animated tiled paw background for desktop view~~ - ~~Added an animated tiled paw background for desktop view~~
- Changed [Home](/home) - Changed [Home](/home)
- Updated the Pokémon box, now using a spritesheet instead of individual files - Updated the Pokémon box, now using a spritesheet instead of individual files
- Ironically, this is marginally slower than before, because it includes every Pokémon (up to Gen 8), not just my favorites.<br>(Works great if you've [forked my site](https://bunsin.space/forgejo/sundae/website) and want to change it to include your personal favorites, though!) - Ironically, this is marginally slower than before, because it includes every Pokémon (up to Gen 8), not just my favorites.<br>(Works great if you've [forked my site](https://moth.ink/forgejo/sundae/website) and want to change it to include your personal favorites, though!)
- Downscaled media images in [interests](/home#interests) to `300px` to offset network load - Downscaled media images in [interests](/home#interests) to `300px` to offset network load
- Changed [Changelog](/changelog) - Changed [Changelog](/changelog)
- **Actually** processed with [Prettier](https://github.com/prettier/prettier), now. - **Actually** processed with [Prettier](https://github.com/prettier/prettier), now.

2
_src/data/changelog/2025-09-11.md
View file

@ -1,5 +1,3 @@
## {{page.fileSlug|readable}}
Actively trying to accommodate for accessibility Actively trying to accommodate for accessibility
- Added `header` to pages back in - Added `header` to pages back in

2
_src/data/changelog/2025-10-14.md
View file

@ -2,8 +2,6 @@
title: Version 7 title: Version 7
--- ---
## {{page.fileSlug|readable}} <code>{{title}}</code>
![](/assets/img/changelog/ver7.png) ![](/assets/img/changelog/ver7.png)
Overhauled the old theme Overhauled the old theme

2
_src/data/changelog/2025-10-19.md
View file

@ -1,5 +1,3 @@
## {{page.fileSlug|readable}}
- Changed [Index](/) and [Blog](/blog) - Changed [Index](/) and [Blog](/blog)
- Updated with miscellaneous disclaimers - Updated with miscellaneous disclaimers
- Implemented proper off-site links everywhere with favicons as an Eleventy filter **(FINALLY)** - Implemented proper off-site links everywhere with favicons as an Eleventy filter **(FINALLY)**

2
_src/data/changelog/2026-03-06.md
View file

@ -1,5 +1,3 @@
## {{page.fileSlug|readable}}
- Updated to {{"Eleventy v3.1.2"|link:"https://github.com/11ty/eleventy/releases/tag/v3.1.2"}} - Updated to {{"Eleventy v3.1.2"|link:"https://github.com/11ty/eleventy/releases/tag/v3.1.2"}}
- Should hopefully be able to be compiled without throwing errors now. - Should hopefully be able to be compiled without throwing errors now.
- Updated [Gallery](/gallery) - Updated [Gallery](/gallery)

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

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

2
_src/data/changelog/2026-04-02.md Normal file
View file

@ -0,0 +1,2 @@
- Updated a few links, due to moving domains
- Started working on a redesign for the sidebar, mostly intended for easier mobile navigation

4
_src/data/changelog/2026-04-07.md Normal file
View file

@ -0,0 +1,4 @@
- Changed sidebar
- Now toggleable on lower resolutions
- Changed [Gallery](/gallery)
- Redesigned to look like a corkboard

8
_src/pages/blog.html
View file

@ -1,7 +1,8 @@
--- ---
order: 3 order: 3
--- ---
<section id="posts"> <article id="posts">
<nav>
<ul role="list"> <ul role="list">
{% for post in collections.posts reversed %} {% for post in collections.posts reversed %}
<li> <li>
@ -15,8 +16,9 @@ order: 3
</a> </a>
</li> </li>
{% endfor %} {% endfor %}
</ul>
</nav>
</article>
<article> <article>
<p>...I'll eventually write more stuff worth talking about on here when the motivation strikes.</p> <p>...I'll eventually write more stuff worth talking about on here when the motivation strikes.</p>
</article> </article>
</ul>
</section>

3
_src/pages/changelog.html
View file

@ -1,9 +1,10 @@
--- ---
order: 2 order: 2
--- ---
{%for update in collections.updates reversed%} {%for update in collections.updates reversed%}
<article> <article>
<h2><time datetime="{{update.fileSlug}}">{{update.fileSlug|readable}}</time></h2>
{%if update.data.title%}<span>{{update.data.title}}</span>{%endif%}
{{update.content}} {{update.content}}
</article> </article>
{%endfor%} {%endfor%}

19
_src/pages/gallery.html
View file

@ -1,19 +1,21 @@
--- ---
order: 4 order: 4
--- ---
<section id="artworks"> <section id="artworks">
<article> <article>
{%for article in collections.articles%} {%if article.fileSlug == 'ocs'%} <nav>
{{ article.content }} {%endif%} {%endfor%}
<ul role="list"> <ul role="list">
{% assign sortedArtworks = collections.artworks | sortByFirstDate %} {%for artwork in sortedArtworks %} {% assign sortedArtworks = collections.artworks | sortByFirstDate %} {%for artwork in sortedArtworks %}
<li> <li>
<a href="{{artwork.page.url}}"> <a href="{{artwork.page.url}}">
<figure> <figure>
{%if artwork.data.images[0]%} {%if artwork.data.images[0]%}
<img src="{{artwork.data.images[0].src}}" alt="{{artwork.data.images[0].alt}}" style="{%if artwork.data.images[0].pixel%}image-rendering: pixelated;{%endif%}{%if artwork.data.images[0].position%}object-position:{{artwork.data.images[0].position}};{%endif%}"/> <img src="{{artwork.data.images[0].src}}" alt="" style="{%if artwork.data.images[0].pixel%}image-rendering: pixelated;{%endif%}{%if artwork.data.images[0].position%}object-position:{{artwork.data.images[0].position}};{%endif%}{%if artwork.data.images[0].fit%}object-fit:{{artwork.data.images[0].fit}}{%endif%}"/>
<figcaption>{{artwork.page.fileSlug}}{%if artwork.data.images.size > 1%}<p class="count">(+{{artwork.data.images.size| minus: 1}})</p>{%endif%}</figcaption> <figcaption>
{{artwork.page.fileSlug}}{%if artwork.data.images.size > 1%}
<p class="count">(+{{artwork.data.images.size| minus: 1}})</p>
{%endif%}
</figcaption>
{% if artwork.data.images[0].date %} {% if artwork.data.images[0].date %}
<time datetime="{{artwork.data.images[0].date|ISO}}">{{artwork.data.images[0].date|readable}}</time> <time datetime="{{artwork.data.images[0].date|ISO}}">{{artwork.data.images[0].date|readable}}</time>
{%endif%} {%endif%} {%endif%} {%endif%}
@ -22,10 +24,10 @@ order: 4
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
</nav>
</article> </article>
<article> <article>
{%for article in collections.articles%} {%if article.fileSlug == 'fanart'%} <nav>
{{ article.content }} {%endif%} {%endfor%}
<ul role="list"> <ul role="list">
{%assign sortedFanarts = collections.fanarts|sortByFirstDate%} {%for {%assign sortedFanarts = collections.fanarts|sortByFirstDate%} {%for
fanart in sortedFanarts%} fanart in sortedFanarts%}
@ -33,7 +35,7 @@ order: 4
<a href="{{fanart.page.url}}"> <a href="{{fanart.page.url}}">
<figure> <figure>
{%if fanart.data.images[0]%} {%if fanart.data.images[0]%}
<img src="{{fanart.data.images[0].src}}" alt="{{fanart.data.images[0].alt}}" style="{%if fanart.data.images[0].pixel%}image-rendering: pixelated;{%endif%}{%if fanart.data.images[0].position%}object-position:{{fanart.data.images[0].position}};{%endif%}"/> <img src="{{fanart.data.images[0].src}}" alt="" style="{%if fanart.data.images[0].pixel%}image-rendering: pixelated;{%endif%}{%if fanart.data.images[0].position%}object-position:{{fanart.data.images[0].position}};{%endif%}{%if fanart.data.images[0].fit%}object-fit:{{fanart.data.images[0].fit}}{%endif%}"/>
<figcaption>{{fanart.page.fileSlug}}</figcaption> <figcaption>{{fanart.page.fileSlug}}</figcaption>
{%if fanart.data.images[0].date%} {%if fanart.data.images[0].date%}
<time datetime="{{fanart.data.images[0].date|ISO}}">{{fanart.data.images[0].date|readable}}</time> <time datetime="{{fanart.data.images[0].date|ISO}}">{{fanart.data.images[0].date|readable}}</time>
@ -43,5 +45,6 @@ order: 4
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
</nav>
</article> </article>
</section> </section>

14
_src/pages/home.html
View file

@ -2,12 +2,10 @@
order: 1 order: 1
--- ---
<article id="bio"> <article id="bio">
{%for article in collections.articles%} {%if article.fileSlug == 'bio'%} {{ {%include "../data/articles/home-bio.html"%}
article.content }} {%endif%} {%endfor%}
</article> </article>
<article id="interests"> <article id="interests">
{%for article in collections.articles%} {%if article.fileSlug == 'interests'%} {%include "../data/articles/home-interests.html"%}
{{ article.content }} {%endif%} {%endfor%}
<details open=""> <details open="">
<summary> <summary>
<h3>Games</h3> <h3>Games</h3>
@ -16,7 +14,7 @@ order: 1
{%for item in media-games.items%} {%for item in media-games.items%}
<li> <li>
<a href="{{item.src}}"> <a href="{{item.src}}">
<span><img src="/assets/img/media/games/{{item.cover}}" alt="Game icon for {{item.title}}"/></span><span>{{item.title}}</span> <span><img src="/assets/img/media/games/{{item.cover}}" alt=""/></span><span>{{item.title}}</span>
</a> </a>
</li> </li>
{%endfor%} {%endfor%}
@ -30,7 +28,7 @@ order: 1
{%for item in media-albums.items%} {%for item in media-albums.items%}
<li> <li>
<a href="{{item.src}}"> <a href="{{item.src}}">
<span><img src="/assets/img/media/music/albums/{{item.cover}}" alt="Album art cover for {{item.title}}"/></span><span>{{item.artist}} - {{item.title}}</span> <span><img src="/assets/img/media/music/albums/{{item.cover}}" alt=""/></span><span>{{item.artist}} - {{item.title}}</span>
</a> </a>
</li> </li>
{%endfor%} {%endfor%}
@ -44,7 +42,7 @@ order: 1
{%for item in media-modules.items%} {%for item in media-modules.items%}
<li> <li>
<a href="{{item.src}}"> <a href="{{item.src}}">
<span><img src="/assets/img/media/music/{{item.tracker}}.png" alt="{{item.tracker|capitalize}} module"/></span><span>{{item.artist}} - {{item.title}}</span> <span><img src="/assets/img/media/music/{{item.tracker}}.png" alt=""/></span><span>{{item.artist}} - {{item.title}}</span>
</a> </a>
</li> </li>
{%endfor%} {%endfor%}
@ -58,7 +56,7 @@ order: 1
{%for item in media-manga.items%} {%for item in media-manga.items%}
<li> <li>
<a href="{{item.src}}"> <a href="{{item.src}}">
<span><img src="/assets/img/media/manga/{{item.cover}}" alt="Manga art cover for {{item.alt}}"/></span><span>{{item.title}}</span> <span><img src="/assets/img/media/manga/{{item.cover}}" alt=""/></span><span>{{item.title}}</span>
</a> </a>
</li> </li>
{%endfor%} {%endfor%}

52
eleventy.config.js
View file

@ -1,19 +1,53 @@
import markdownIt from "markdown-it"; import markdownIt from "markdown-it";
import markdownItAnchor from "markdown-it-anchor"; import markdownItAnchor from "markdown-it-anchor";
import slugify from "slugify";
import { format } from "date-fns"; import { format } from "date-fns";
export default async function (eleventyConfig) { export default async function (eleventyConfig) {
const markdownItOptions = { /*
html: true
}; const linkAfterHeader = markdownItAnchor.permalink.linkAfterHeader({
class: "anchor",
symbol: "<span hidden>#</span>",
style: "aria-labelledby",
});
const markdownItAnchorOptions = { const markdownItAnchorOptions = {
permalink: true, permalinkBefore: true, permalinkSymbol: '#' level: [1, 2, 3],
}; slugify: (str) =>
const markdownLib = markdownIt(markdownItOptions).use( slugify(str, {
markdownItAnchor, lower: true,
markdownItAnchorOptions strict: true,
remove: /["]/g,
}),
tabIndex: false,
permalink(slug, opts, state, idx) {
state.tokens.splice(
idx,
0,
Object.assign(new state.Token("div_open", "div", 1), {
// Add class "header-wrapper [h1 or h2 or h3]"
attrs: [["class", `heading-wrapper ${state.tokens[idx].tag}`]],
block: true,
})
); );
eleventyConfig.setLibrary("md", markdownLib);
state.tokens.splice(
idx + 4,
0,
Object.assign(new state.Token("div_close", "div", -1), {
block: true,
})
);
linkAfterHeader(slug, opts, state, idx + 1);
},
};
let markdownLibrary = markdownIt({
html: true,
}).use(markdownItAnchor, markdownItAnchorOptions);
eleventyConfig.setLibrary("md", markdownLibrary);
*/
const assets = "./_src/assets/"; const assets = "./_src/assets/";
eleventyConfig.addPassthroughCopy(assets); eleventyConfig.addPassthroughCopy(assets);
eleventyConfig.addWatchTarget(assets); eleventyConfig.addWatchTarget(assets);