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

preliminary work for old theme re-implementation

Browse source
This commit is contained in:
sundae 2025-06-18 18:38:20 +03:00
parent ee8bce1bd3
commit 8fc7eff67b
No known key found for this signature in database
41 changed files with 456 additions and 415 deletions
Download patch file Download diff file Expand all files Collapse all files

59
_src/_includes/base.njk
View file

@ -1,5 +1,6 @@
--- ---
paw: "m 15.700739,16.184194 c 0,4.483 -2.555,2.038 -5.7060001,2.038 -3.151,0 -5.706,2.445 -5.706,-2.038 0,-2.925 2.555,-6.113001 5.706,-6.113001 3.1510001,0 5.7060001,3.188001 5.7060001,6.113001 z M 4.0687389,8.1071934 c 0.394,1.336 0.007,2.6259996 -0.862,2.8819996 -0.87,0.256001 -1.8929999,-0.619 -2.28599993,-1.9539996 -0.393,-1.336 -0.007,-2.626 0.86199993,-2.882 0.87,-0.256 1.893,0.619 2.286,1.954 z m 15.0000001,0.945 c -0.407,1.3319996 -1.442,2.1960006 -2.312,1.9299996 -0.869,-0.266 -1.244,-1.5609996 -0.837,-2.8919996 0.407,-1.332 1.442,-2.196 2.312,-1.93 0.869,0.265 1.244,1.56 0.837,2.892 z m -10.1100001,-4.859 c 0.365,1.897 -0.218,3.606 -1.302,3.814 -1.085,0.209 -2.261,-1.16 -2.626,-3.059 -0.365,-1.898 0.218,-3.6060001 1.302,-3.8150001 1.085,-0.20799996 2.261,1.1620001 2.626,3.0600001 z m 5.9960001,0.778 c -0.388,1.893 -1.578,3.25 -2.66,3.029 -1.082,-0.222 -1.647,-1.937 -1.26,-3.83 0.388,-1.894 1.578,-3.25000006 2.66,-3.0290001 1.082,0.222 1.647,1.9370001 1.26,3.8300001 z" paw: "m 15.700739,16.184194 c 0,4.483 -2.555,2.038 -5.7060001,2.038 -3.151,0 -5.706,2.445 -5.706,-2.038 0,-2.925 2.555,-6.113001 5.706,-6.113001 3.1510001,0 5.7060001,3.188001 5.7060001,6.113001 z M 4.0687389,8.1071934 c 0.394,1.336 0.007,2.6259996 -0.862,2.8819996 -0.87,0.256001 -1.8929999,-0.619 -2.28599993,-1.9539996 -0.393,-1.336 -0.007,-2.626 0.86199993,-2.882 0.87,-0.256 1.893,0.619 2.286,1.954 z m 15.0000001,0.945 c -0.407,1.3319996 -1.442,2.1960006 -2.312,1.9299996 -0.869,-0.266 -1.244,-1.5609996 -0.837,-2.8919996 0.407,-1.332 1.442,-2.196 2.312,-1.93 0.869,0.265 1.244,1.56 0.837,2.892 z m -10.1100001,-4.859 c 0.365,1.897 -0.218,3.606 -1.302,3.814 -1.085,0.209 -2.261,-1.16 -2.626,-3.059 -0.365,-1.898 0.218,-3.6060001 1.302,-3.8150001 1.085,-0.20799996 2.261,1.1620001 2.626,3.0600001 z m 5.9960001,0.778 c -0.388,1.893 -1.578,3.25 -2.66,3.029 -1.082,-0.222 -1.647,-1.937 -1.26,-3.83 0.388,-1.894 1.578,-3.25000006 2.66,-3.0290001 1.082,0.222 1.647,1.9370001 1.26,3.8300001 z"
meow: "m18.8003 13.7653q0-1.7737-1.156-2.943-1.1563-1.1693-3.2321-1.3925v-.0525q1.8918-.3939 2.8772-1.4976.9986-1.1167.9986-2.8905 0-2.3122-1.5502-3.5996Q15.2006.0889 12.4153.0889q-2.5488 0-4.1778 1.2744-1.616 1.2741-1.8788 3.5471l2.3785.1843q.1577-1.4583 1.1167-2.2597.972-.8014 2.5355-.8014 1.7208 0 2.588.8673.8802.8539.8802 2.3385 0 1.4976-1.0774 2.3516-1.0642.8409-3.0086.8409h-1.2873v2.0495h1.3399q2.1942 0 3.3502.8539 1.1692.8406 1.1692 2.3515 0 1.7342-1.0249 2.6144-1.0116.8802-2.7983.8802-3.5604 0-4.0334-3.2847l-2.4437.2236q.3154 2.4829 1.984 3.7573 1.6815 1.2611 4.4931 1.2611 3.0219 0 4.6509-1.4058t1.629-3.9676zM2.5618 18.8759v-2.7195H-0v2.7195zm0-11.4959V4.6606H-0V7.38z"
--- ---
<!DOCTYPE html> <!DOCTYPE html>
@ -15,46 +16,61 @@ paw: "m 15.700739,16.184194 c 0,4.483 -2.555,2.038 -5.7060001,2.038 -3.151,0 -5.
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="/assets/css/reset.css"> <link rel="stylesheet" href="/assets/css/reset.css">
<link rel="stylesheet" href="/assets/css/default.css"> <link rel="stylesheet" href="/assets/css/default/default.css">
<link rel="stylesheet" href="/assets/css/default/system.css" id="custom">
{% set availableStyles = ['home', 'blog', 'gallery'] %} {% set availableStyles = ['home', 'blog', 'gallery'] %}
{% if page.url %} {% if page.url %}
{% if availableStyles.indexOf(page.url|firstSegment) !== -1 %} {% if availableStyles.indexOf(page.url|firstSegment) !== -1 %}
<link rel="stylesheet" href="/assets/css/{{ page.url|firstSegment }}.css"> <link rel="stylesheet" href="/assets/css/default/{{ page.url|firstSegment }}.css">
{% endif %} {% endif %}
{% endif %} {% endif %}
</head> </head>
<body id="{{ page.url|firstSegment }}"> <body id="{{ page.url|firstSegment }}">
<header></header>
<nav> <nav>
<details> <details>
<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>Navigation</summary> <path d="{{ paw }}"></svg>
<a href="../"> Navigation
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"> </summary>
<path d="M 4 11 L 12 5 L 15 5 L 9 10 L 28 10 L 28 12 L 9 12 L 15 17 L 12 17 Z"></path>
</svg>
Back
</a>
{% set currentUrl %}{{ page.url }}{% endset %} {% set currentUrl %}{{ page.url }}{% endset %}
{% set sortedPages = collections.pages|sort(attribute='data.order') %} {% set sortedPages = collections.pages|sort(attribute='data.order') %}
<ul> <ul role="list">
{% for page in sortedPages %} <li>
<li> <a href="../">
<a {% if currentUrl === page.url %} aria-current="page" {% endif %} href="{{ page.url }}"> <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
<svg width="20" height="20" viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> <path d="M 4 11 L 12 5 L 15 5 L 9 10 L 28 10 L 28 12 L 9 12 L 15 17 L 12 17 Z"></path>
<path d="{{ page.data.icon }}"></path> </svg>
</svg> Back
{{ page.data.title }}</a> </a>
</li>
<li>
<button id="theme-toggle">
<svg width="20" height="20" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="{{ meow }}"></svg>
Toggle theme
</button>
</li> </li>
{% endfor %} {% for page in sortedPages %}
<li>
<a {% if currentUrl === page.url %} aria-current="page" {% endif %} href="{{ page.url }}">
<svg width="20" height="20" viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="{{ page.data.icon }}"></path>
</svg>
{{ page.data.title }}</a>
</li>
{% endfor %}
<script src="/assets/js/theme.js"></script>
</li>
</ul> </ul>
</details> </details>
<details> <details>
<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>Outgoing</summary> <path d="{{ paw }}"></svg>
<ul> Outgoing
</summary>
<ul role="list">
{% for item in outgoing.items %} {% for item in outgoing.items %}
<li> <li>
<a href="{{ item.src }}"><img src="{{ item.icon }}" alt="">{{ item.title }}</a> <a href="{{ item.src }}"><img src="{{ item.icon }}" alt="">{{ item.title }}</a>
@ -67,7 +83,6 @@ paw: "m 15.700739,16.184194 c 0,4.483 -2.555,2.038 -5.7060001,2.038 -3.151,0 -5.
<main> <main>
{{ content | safe }} {{ content | safe }}
</main> </main>
<footer></footer>
</body> </body>
</html> </html>
</body> </body>

4
_src/_includes/gallery.njk
View file

@ -7,9 +7,9 @@ icon: "M 30 26 L 27 26 L 21 14 L 16 23 L 11 17 L 5 26 L 2 26 L 2 2 Q 2 2 10 6 A
<h3>{{ page.fileSlug }}</h3> <h3>{{ page.fileSlug }}</h3>
<section> <section>
{% for image in images %} {% for image in images %}
<a href="{{ image.src }}" {% if image.width %} style="max-width:{{ image.width }}" {% endif %}> <a href="{{ image.src }}">
<figure> <figure>
<img src="{{ image.src }}" alt="{{ image.alt }}" {% if image.width %}style="image-rendering: pixelated"{% endif %}> <img src="{{ image.src }}" alt="{{ image.alt }}" {% if image.pixel %}style="image-rendering: pixelated"{% endif %}>
<figcaption><time datetime="{{ image.date|ISO }}">{{ image.date|readable }}</time>{{ image.alt }}</figcaption> <figcaption><time datetime="{{ image.date|ISO }}">{{ image.date|readable }}</time>{{ image.alt }}</figcaption>
</figure> </figure>
</a> </a>

45
_src/assets/css/citrus/citrus.css Normal file
View file

@ -0,0 +1,45 @@
@import url("./variables.css");
@import url("../default/variables.css");
@import url("./nav.css");
body {
background-attachment: local, fixed;
background-color: var(--citrus-primary);
background-image: var(--checker),
linear-gradient(var(--citrus-primary), var(--citrus-secondary));
background-size: 32px, contain;
}
body > nav {
background-attachment: fixed;
background-blend-mode: screen;
background-image: var(--dot),
linear-gradient(var(--citrus-primary), var(--citrus-secondary) 20%);
background-size: 6px;
& a,
button {
background-image: linear-gradient(
var(--citrus-light),
var(--citrus-primary) 20%,
var(--citrus-primary) 80%,
var(--citrus-light) 100%
);
border-radius: 0 1rem 1rem 0;
box-shadow: 0 0 0 2px var(--citrus-dark),
inset 0 0 8px 2px var(--citrus-primary);
color: var(--citrus-dark) !important;
margin: 0 0 var(--pad-sm) 0 !important;
&[aria-current] {
background-image: linear-gradient(
darkorange,
var(--citrus-dark) 10%,
chocolate
);
box-shadow: 0 0 0 2px var(--citrus-dark),
inset 0 0 4px 2px var(--citrus-dark);
color: var(--citrus-light) !important;
}
&:is(:hover, :focus):not([aria-current="page"]) {
box-shadow: 0 0 0 2px var(--citrus-dark);
}
}
}

12
_src/assets/css/citrus/nav.css Normal file
View file

@ -0,0 +1,12 @@
nav {
padding: 0 var(--pad-xl) var(--pad-xl) 0 !important;
& ul {
margin: 0 !important;
}
& details {
border: 0 !important;
}
& a, button {
border: 0 !important;
}
}

10
_src/assets/css/citrus/variables.css Normal file
View file

@ -0,0 +1,10 @@
:root {
--citrus-primary: rgb(255, 190, 0);
--citrus-secondary: rgb(255, 110, 0);
--citrus-light: rgb(255, 236, 180);
--citrus-dark: rgb(105, 50, 0);
--checker: url('/assets/img/theme/citrus/checker.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');
}

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

@ -15,37 +15,31 @@ article {
border-radius: var(--round); border-radius: var(--round);
width: 66%; width: 66%;
} }
& p[aria-label="Post warning"] { & [aria-label="Post warning"] {
border-style: solid;
border-width: 2px;
border-radius: var(--pad-sm);
padding: var(--pad-sm) 0;
font-size: 1.4rem; font-size: 1.4rem;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
font-family: monospace;
&::before, &::before,
&::after { &::after {
content: "⚠️"; content: "";
display: inherit;
border-width: 2px;
border-style: dashed;
} }
} }
}
& aside, [aria-label="Addendum"], [aria-label="Post warning"], article aside {
[aria-label="Addendum"] { margin: var(--pad-l) 0;
margin: var(--pad-l) 0; padding: var(--pad-l);
}
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;
padding: var(--pad-l);
}
}
article > [aria-label="Addendum"] {
& > p:first-child { & > p:first-child {
display: flex; display: flex;
justify-content: center; text-align: center;
margin-block-start: 0;
font-weight: bold;
} }
} }
@ -119,7 +113,6 @@ article > [aria-label="Postscript"] {
gap: var(--pad-l); gap: var(--pad-l);
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style-type: none;
} }
& li p { & li p {

113
_src/assets/css/default.css → _src/assets/css/default/default.css
View file

@ -1,8 +1,6 @@
@import url("/assets/css/variables.css"); @import url("./variables.css");
@import url("/assets/css/nav.css"); @import url("./nav.css");
@import url("/assets/css/theme-light.css"); @import url("./mobile.css");
@import url("/assets/css/theme-dark.css");
@import url("/assets/css/mobile.css");
:root { :root {
--view: 18rem; --view: 18rem;
} }
@ -12,13 +10,16 @@ body {
font-size: 100%; font-size: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
& a { & a, button {
transition: background-color var(--trans), border-color var(--trans), color var(--trans); &:is(:hover, :focus) {
outline: 0;
}
} }
} }
main { main {
padding: var(--pad-xl) var(--pad-xl) 4rem calc(var(--view) + var(--pad-xl)); padding: var(--pad-xl);
padding-left: calc(var(--view) + var(--pad-xl));
overflow: hidden; overflow: hidden;
} }
@ -31,6 +32,12 @@ article {
& a { & a {
font-weight: 500; font-weight: 500;
} }
& a:has(figure) {
border-radius: var(--round);
& figure {
border-color: inherit;
}
}
& s { & s {
text-decoration-style: line-through; text-decoration-style: line-through;
@ -40,7 +47,6 @@ article {
& ul { & ul {
& li { & li {
margin: 0; margin: 0;
& p { & p {
margin: 0; margin: 0;
} }
@ -72,13 +78,13 @@ article {
padding: var(--pad-m); padding: var(--pad-m);
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-word; word-break: break-word;
border-style: solid;
border-width: 2px;
} }
& pre, & pre,
code:not(pre *) { code:not(pre *) {
transition: background-color var(--trans), border-color var(--trans); transition: background-color var(--trans), border-color var(--trans);
border-style: solid;
border-width: 2px;
border-radius: var(--round); border-radius: var(--round);
font-weight: bold; font-weight: bold;
} }
@ -103,6 +109,9 @@ article {
border-radius: var(--round); border-radius: var(--round);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
& img {
border-radius: inherit;
}
} }
& section { & section {
& a:has(figure) { & a:has(figure) {
@ -120,84 +129,6 @@ article {
} }
} }
/* Navigation */
body > nav {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 1rem;
position: fixed;
top: 0;
width: var(--view);
height: 100%;
}
body > nav ul {
margin: 0;
padding: 0;
}
nav > details {
font-size: 1.4rem;
}
nav > details > summary::marker {
content: none;
}
body > nav ul li {
display: inherit;
flex-direction: row;
}
body > nav a {
display: flex;
font-size: 1.125rem;
font-weight: bold;
height: var(--pad-xl);
line-height: var(--pad-xl);
}
details {
cursor: pointer;
}
/* Navigation > Icons */
svg {
fill: currentColor;
stroke: currentColor;
stroke-width: 0;
}
body > nav li img {
border-radius: 100%;
}
body > nav a svg,
body > nav li img,
body > nav summary svg {
margin: 0 8px 0 8px;
width: 20px;
height: 20px;
}
body > nav li img,
body > nav a svg {
align-self: center;
}
body > nav details {
display: flex;
align-items: center;
}
body > nav > ul > svg {
overflow: visible;
text-anchor: start;
}
ul:has(img, svg):not(article ul) {
list-style-type: none;
}
:is(main article, main section):not(:last-child) { :is(main article, main section):not(:last-child) {
margin-bottom: var(--pad-xl); margin-bottom: var(--pad-xl);
} }
@ -208,3 +139,7 @@ img[src*="/assets/img/flag/"] {
border-width: 2px; border-width: 2px;
border-color: #fff; border-color: #fff;
} }
a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
transform: translateY(-4px);
transition: var(--trans);
}

7
_src/assets/css/gallery.css → _src/assets/css/default/gallery.css
View file

@ -25,9 +25,7 @@
& a { & a {
display: block; display: block;
text-decoration: unset; text-decoration: unset;
border-radius: var(--round);
& figure { & figure {
border-radius: inherit;
margin: 0; margin: 0;
padding: var(--pad-sm); padding: var(--pad-sm);
border-width: 2px; border-width: 2px;
@ -38,7 +36,6 @@
height: var(--thumb); height: var(--thumb);
border-bottom: unset; border-bottom: unset;
object-fit: contain; object-fit: contain;
border-radius: inherit;
} }
& figcaption { & figcaption {
@ -64,10 +61,8 @@
margin: var(--pad-l) 0; margin: var(--pad-l) 0;
& a { & a {
display: flex; display: flex;
height: max-content; width: calc(var(--post) - var(--view));
border-radius: var(--round);
flex-direction: column; flex-direction: column;
max-width: calc(var(--post) - var(--view));
} }
} }
& time { & time {

11
_src/assets/css/home.css → _src/assets/css/default/home.css
View file

@ -18,9 +18,10 @@
#pkmn { #pkmn {
display: flex; display: flex;
flex-wrap: wrap; 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; border-radius: 5px;
width: max-content; width: fit-content;
border-bottom-color: #78a068; border-bottom-color: #78a068;
border-left-color: #c8f8c0; border-left-color: #c8f8c0;
border-right-color: #78a068; border-right-color: #78a068;
@ -64,7 +65,7 @@ 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);
} }
#intro { #bio {
& p, & p,
ul { ul {
font-family: "Urbanist", sans-serif; font-family: "Urbanist", sans-serif;
@ -115,18 +116,12 @@ body [id]:not(:nth-child(1)) ul {
& ul { & ul {
gap: 1rem; gap: 1rem;
padding: 0; padding: 0;
list-style-type: none;
} }
& a { & a {
outline: none;
display: flex; display: flex;
padding: inherit; padding: inherit;
margin: 0; margin: 0;
} }
& a:is(:hover, :focus) img {
transform: translateY(-4px);
transition: var(--trans);
}
} }
#collection div:has(img)::after { #collection div:has(img)::after {
content: url("/assets/img/icon/shortcut.png"); content: url("/assets/img/icon/shortcut.png");

16
_src/assets/css/index.css → _src/assets/css/default/index.css
View file

@ -1,6 +1,6 @@
@import url("/assets/css/variables.css"); @import url("./variables.css");
@import url("/assets/css/theme-light.css"); @import url("./theme-light.css");
@import url("/assets/css/theme-dark.css"); @import url("./theme-dark.css");
#index { #index {
width: 100%; width: 100%;
@ -12,7 +12,8 @@
align-items: center; align-items: center;
height: 100vh; height: 100vh;
width: inherit; width: inherit;
& p { flex-direction: column;
& a {
font-family: "Urbanist", sans-serif; font-family: "Urbanist", sans-serif;
font-size: 500%; font-size: 500%;
margin: 0; margin: 0;
@ -26,4 +27,11 @@
} }
} }
} }
& footer {
position: absolute;
bottom: var(--pad-l);
& p {
text-align: center;
}
}
} }

31
_src/assets/css/mobile.css → _src/assets/css/default/mobile.css
View file

@ -2,14 +2,12 @@
/* gallery.css */ /* gallery.css */
#art section:has(a:nth-child(n + 2)) { #art section:has(a:nth-child(n + 2)) {
flex-direction: column !important; flex-direction: column !important;
width: 100% !important; & a {
width: 100%;
}
} }
} }
@media screen and (max-width: 920px) { @media screen and (max-width: 920px) {
/* gallery .css */
#art section {
align-self: center !important;
}
/* blog.css */ /* blog.css */
article aside { article aside {
float: none !important; float: none !important;
@ -25,7 +23,7 @@
[aria-label="Postscript"] { [aria-label="Postscript"] {
& p { & p {
margin-right: unset !important; margin-right: unset !important;
&> img { & > img {
height: auto !important; height: auto !important;
max-height: var(--view) !important; max-height: var(--view) !important;
} }
@ -59,8 +57,7 @@
body > nav { body > nav {
flex-direction: row !important; flex-direction: row !important;
top: 0 !important; border: 0 !important;
border-right: 0 !important;
width: 100% !important; width: 100% !important;
& details { & details {
height: fit-content !important; height: fit-content !important;
@ -70,18 +67,28 @@
body::after { body::after {
content: "" !important; content: "" !important;
} }
/* gallery.css */
#art a:has(img) {
width: 100% !important
}
/* home.css */ /* home.css */
#collection { #collection {
display: flex !important; display: flex !important;
flex-direction: column !important; flex-direction: column !important;
& ul {
justify-content: center !important;
}
& li a {
padding: 0 !important;
}
} }
} }
@media screen and (max-width: 450px) {
@media screen and (max-width: 400px) {
article { article {
padding: var(--pad-l) !important; padding: var(--pad-sm) !important;
background-color: unset !important;
border: 0 !important;
} }
body > nav { body > nav {
flex-direction: column !important; flex-direction: column !important;
justify-content: start !important; justify-content: start !important;

66
_src/assets/css/nav.css → _src/assets/css/default/nav.css
View file

@ -27,11 +27,68 @@ body::after {
-webkit-mask-position-x: 0; -webkit-mask-position-x: 0;
-webkit-mask-position-y: bottom; -webkit-mask-position-y: bottom;
} }
body > nav {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 1rem;
position: fixed;
width: var(--view);
height: 100%;
& * svg,
li img {
margin: 0 8px 0 8px;
width: 20px;
align-self: center;
}
& details {
cursor: pointer;
display: flex;
& summary::marker {
content: none;
}
}
& ul {
margin: var(--pad-sm);
padding: 0;
& li, button {
padding: 0;
align-items: center;
margin-bottom: inherit;
& img {
border-radius: 100%;
}
}
}
& svg {
fill: currentColor;
stroke: currentColor;
stroke-width: 0;
}
& details {
font-size: 1.4rem;
}
& a,
button {
display: flex;
font-size: 1.125rem;
width: 100%;
font-weight: bold;
height: var(--pad-xl);
line-height: var(--pad-xl);
}
}
body { body {
font-family: "Rubik", sans-serif; font-family: "Rubik", sans-serif;
& > nav { & > nav {
gap: var(--pad-m); gap: var(--pad-m);
& a,
button {
border-style: solid;
border-width: 2px;
border-radius: var(--round);
}
& details { & details {
gap: inherit; gap: inherit;
border-radius: var(--round); border-radius: var(--round);
@ -39,7 +96,6 @@ body {
} }
& details > summary { & details > summary {
display: flex; display: flex;
align-items: center;
justify-content: center; justify-content: center;
padding: 0 var(--pad-lm) 0 0; padding: 0 var(--pad-lm) 0 0;
height: var(--pad-xl); height: var(--pad-xl);
@ -64,14 +120,6 @@ body {
transform: rotate(45deg); transform: rotate(45deg);
} }
} }
& a {
border-style: solid;
border-width: 2px;
margin: 0 var(--pad-sm);
margin-bottom: var(--pad-sm);
border-radius: var(--round);
}
} }
} }
} }

2
_src/assets/css/default/system.css Normal file
View file

@ -0,0 +1,2 @@
@import url("./theme-light.css");
@import url("./theme-dark.css");

104
_src/assets/css/theme-dark.css → _src/assets/css/default/theme-dark.css
View file

@ -8,11 +8,6 @@
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);
} }
& figure {
color: var(--secondary-light-400);
border-color: var(--secondary-600);
background-color: var(--secondary-300);
}
& s, & s,
u { u {
@ -20,7 +15,8 @@
} }
& code:not(pre *) { & code:not(pre *) {
background-color: var(--secondary-400); color: var(--secondary-400);
background-color: var(--secondary-light-400);
} }
& pre { & pre {
@ -37,15 +33,43 @@
code { code {
border-color: var(--secondary-400); border-color: var(--secondary-400);
} }
/* blog.css */
& [aria-label="Postscript"]::after {
background-color: var(--secondary);
}
& [aria-label="Post warning"] {
background-color: var(--secondary);
color: var(--secondary-100);
&::before,
&::after {
background-color: var(--secondary);
}
}
& [aria-label="Addendum"] {
box-shadow: inset 0 0 0 2px var(--secondary);
border-image-source: linear-gradient(
45deg,
var(--secondary),
var(--secondary-600),
var(--secondary)
);
background-color: var(--secondary-400);
}
} }
#posts {
& p:not(:last-child) {
color: var(--secondary-light-700);
}
}
/* default.css */
body { body {
background-color: var(--secondary-100); background-color: var(--secondary-100);
color: var(--secondary-light-300); color: var(--secondary-light-300);
& a:not(article *) {
color: var(--secondary); & a:not(article p *, #badges *, [aria-current]), button {
color: var(--secondary-light-400);
border-color: var(--secondary-600); border-color: var(--secondary-600);
background-color: var(--secondary-400); background-color: var(--secondary-300);
&:is(:hover, :focus) { &:is(:hover, :focus) {
color: var(--secondary-light-500); color: var(--secondary-light-500);
border-color: currentColor; border-color: currentColor;
@ -88,64 +112,7 @@
} }
} }
} }
/* blog.css */
article {
& [aria-label="Postscript"]::after {
background-color: var(--secondary);
}
& p[aria-label="Post warning"] {
border-color: currentColor;
background-color: var(--secondary-100);
color: var(--secondary);
}
& [aria-label="Addendum"] {
box-shadow: inset 0 0 0 2px var(--secondary);
border-image-source: linear-gradient(
45deg,
var(--secondary),
var(--secondary-600),
var(--secondary)
);
background-color: var(--secondary-400);
}
}
#posts {
& p:not(:last-child) {
color: var(--secondary-light-700);
}
}
/* gallery.css */
#artworks {
& a {
transition: color var(--trans), background-color var(--trans),
border-color var(--trans);
& figure {
color: var(--secondary-light-400);
border-color: var(--secondary-600);
background-color: var(--secondary-300);
& time {
color: var(--secondary-light-500);
}
& figcaption {
color: var(--secondary-light-500);
}
&:is(:hover, :focus) {
border-color: currentColor;
background-color: var(--secondary-500);
}
}
}
}
/* home.css */ /* home.css */
#badges a:is(:hover, :focus) img {
filter: drop-shadow(4px 6px 0 var(--secondary-500));
}
#collection { #collection {
& a:is(:hover, :focus) { & a:is(:hover, :focus) {
box-shadow: 0 0 0 1px currentColor; box-shadow: 0 0 0 1px currentColor;
@ -156,4 +123,7 @@
color-mix(in lch, transparent, var(--secondary-500) 70%); color-mix(in lch, transparent, var(--secondary-500) 70%);
} }
} }
a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
filter: drop-shadow(4px 6px 0 var(--secondary-500));
}
} }

103
_src/assets/css/theme-light.css → _src/assets/css/default/theme-light.css
View file

@ -8,11 +8,6 @@
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);
} }
& figure {
color: var(--primary-dark-400);
border-color: var(--primary-600);
background-color: var(--primary-300);
}
& s, & s,
u { u {
@ -20,7 +15,8 @@
} }
& code:not(pre *) { & code:not(pre *) {
background-color: var(--primary-400); color: var(--primary-400);
background-color: var(--primary-dark-400);
} }
& pre { & pre {
@ -37,13 +33,40 @@
code { code {
border-color: var(--primary-400); border-color: var(--primary-400);
} }
/* blog.css */
& [aria-label="Postscript"]::after {
background-color: var(--primary);
}
& [aria-label="Post warning"] {
background-color: var(--primary);
color: var(--primary-dark-100);
&::before,
&::after {
background-color: var(--primary);
}
}
& [aria-label="Addendum"] {
box-shadow: inset 0 0 0 2px var(--primary);
border-image-source: linear-gradient(
45deg,
var(--primary),
var(--primary-600),
var(--primary)
);
background-color: var(--primary-400);
}
} }
#posts {
& p:not(:last-child) {
color: var(--primary-dark-700);
}
}
/* default.css */
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 *) { & a:not(article p *, #badges *, [aria-current]), button {
color: var(--primary); 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);
&:is(:hover, :focus) { &:is(:hover, :focus) {
@ -55,7 +78,7 @@
& > nav { & > nav {
border-right: 1px solid var(--primary); border-right: 1px solid var(--primary);
&::before, &::before,
::after { &::after {
background-color: var(--primary); background-color: var(--primary);
} }
} }
@ -87,64 +110,7 @@
} }
} }
} }
/* blog.css */
article {
& [aria-label="Postscript"]::after {
background-color: var(--primary);
}
& p[aria-label="Post warning"] {
border-color: currentColor;
background-color: var(--primary-dark-200);
color: var(--primary);
}
& [aria-label="Addendum"] {
box-shadow: inset 0 0 0 2px var(--primary);
border-image-source: linear-gradient(
45deg,
var(--primary),
var(--primary-600),
var(--primary)
);
background-color: var(--primary-400);
}
}
#posts {
& p:not(:last-child) {
color: var(--primary-dark-700);
}
}
/* gallery.css */
#artworks {
& a {
transition: color var(--trans), background-color var(--trans),
border-color var(--trans);
& figure {
color: var(--primary-dark-400);
border-color: var(--primary-600);
background-color: var(--primary-300);
& time {
color: var(--primary-dark-500);
}
& figcaption {
color: var(--primary-dark-500);
}
&:is(:hover, :focus) {
border-color: currentColor;
background-color: var(--primary-500);
}
}
}
}
/* home.css */ /* home.css */
#badges a:is(:hover, :focus) img {
filter: drop-shadow(4px 6px 0 var(--primary-500));
}
#collection { #collection {
& a:is(:hover, :focus) { & a:is(:hover, :focus) {
box-shadow: 0 0 0 1px currentColor; box-shadow: 0 0 0 1px currentColor;
@ -155,4 +121,7 @@
color-mix(in lch, transparent, var(--primary-dark-500) 30%); color-mix(in lch, transparent, var(--primary-dark-500) 30%);
} }
} }
a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
filter: drop-shadow(4px 6px 0 var(--primary-500));
}
} }

0
_src/assets/css/variables.css → _src/assets/css/default/variables.css
View file

BIN
_src/assets/img/theme/citrus/checker-dark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 123 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 134 B

BIN
_src/assets/img/theme/citrus/dot-dark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 118 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 881 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 35 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 42 KiB

24
_src/assets/js/theme.js Normal file
View file

@ -0,0 +1,24 @@
const basePath = "/assets/css";
const themeToggle = document.getElementById("theme-toggle");
const themeStylesheet = document.getElementById("custom");
const themes = [
{ name: "system", file: "default/system.css" },
{ name: "citrus", file: "citrus/citrus.css" },
];
let currentTheme = localStorage.getItem("theme") || themes[0].name;
setTheme(currentTheme);
function setTheme(themeName) {
const theme = themes.find(t => t.name === themeName);
if (theme) {
themeStylesheet.href = `${basePath}/${theme.file}`;
}
}
themeToggle.addEventListener("click", () => {
currentTheme = themes[(themes.findIndex(t => t.name === currentTheme) + 1) % themes.length].name;
setTheme(currentTheme);
localStorage.setItem("theme", currentTheme);
});

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

@ -3,5 +3,5 @@ images:
- src: /assets/img/art/nt_sundae_spritesheet.gif - src: /assets/img/art/nt_sundae_spritesheet.gif
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
width: 1080 pixel: true
--- ---

4
_src/data/art/artwork/PETSCII sunny.md
View file

@ -2,12 +2,12 @@
images: images:
- src: /assets/img/art/petscii_sundae1.png - src: /assets/img/art/petscii_sundae1.png
alt: Front-facing bust portrait of Sundae. His hair looks a bit ruffled up. alt: Front-facing bust portrait of Sundae. His hair looks a bit ruffled up.
width: 240px
date: 2023-02-26 date: 2023-02-26
pixel: true
- src: /assets/img/art/petscii_sundae-redo1.png - src: /assets/img/art/petscii_sundae-redo1.png
alt: Revisioned front-facing bust portrait of Sundae, with shinier hair. alt: Revisioned front-facing bust portrait of Sundae, with shinier hair.
width: 240px
date: 2023-04-14 date: 2023-04-14
pixel: true
--- ---
A hybrid pixel and PETSCII portrait of sunny. I'm quite fond of both versions! A hybrid pixel and PETSCII portrait of sunny. I'm quite fond of both versions!

6
_src/data/art/artwork/acnl sunny.md
View file

@ -3,15 +3,15 @@ images:
- src: /assets/img/art/acnl_sundae.png - src: /assets/img/art/acnl_sundae.png
alt: Bust portrait of Sundae smiling at the viewer with his eyes closed, outlined in rainbow colors and a secondary white outline around that. alt: Bust portrait of Sundae smiling at the viewer with his eyes closed, outlined in rainbow colors and a secondary white outline around that.
date: 2021-09-09 date: 2021-09-09
width: 320px pixel: true
- src: /assets/img/art/acnl_sundae-redo1.png - src: /assets/img/art/acnl_sundae-redo1.png
alt: Revisioned bust portrait of Sundae, smiling at the viewer with his eyes closed, superimposed on the rainbow pride flag. alt: Revisioned bust portrait of Sundae, smiling at the viewer with his eyes closed, superimposed on the rainbow pride flag.
date: 2022-01-01 date: 2022-01-01
width: 320px pixel: true
- src: /assets/img/art/acnl_sundae-redo2.png - src: /assets/img/art/acnl_sundae-redo2.png
alt: Latest revision with the view from the front, superimposed on the Agender pride flag. alt: Latest revision with the view from the front, superimposed on the Agender pride flag.
date: 2024-10-28 date: 2024-10-28
width: 320px pixel: true
--- ---
![Rainbow pride flag](/assets/img/flag/rainbow.svg) ![Rainbow pride flag](/assets/img/flag/rainbow.svg)

2
_src/data/art/artwork/lick icon.md
View file

@ -3,7 +3,7 @@ images:
- src: /assets/img/art/sundae_lick.gif - src: /assets/img/art/sundae_lick.gif
alt: Pixel art animation of Sundae licking the screen. alt: Pixel art animation of Sundae licking the screen.
date: 2025-03-18 date: 2025-03-18
width: 480 pixel: true
--- ---
I got bored one day and I decided on a whim to make my own lick icon from {%ai"https://www.deviantart.com/sketchmichi/art/Lick-icon-base-201253097"%}Michi's lick icon base{%endai%}. I got bored one day and I decided on a whim to make my own lick icon from {%ai"https://www.deviantart.com/sketchmichi/art/Lick-icon-base-201253097"%}Michi's lick icon base{%endai%}.

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

@ -3,6 +3,7 @@ images:
- src: /assets/img/art/sundae.png - src: /assets/img/art/sundae.png
alt: Bust portrait pixel art doodle of Sundae in monochrome and dithering. alt: Bust portrait pixel art doodle of Sundae in monochrome and dithering.
date: 2020-05-06 date: 2020-05-06
pixel: true
--- ---
The first doodle of the boy, done in Microsoft Paint. The first doodle of the boy, done in Microsoft Paint.

2
_src/data/art/artwork/sunny mimiga.md
View file

@ -3,5 +3,5 @@ images:
- src: /assets/img/art/sundae_cs.png - src: /assets/img/art/sundae_cs.png
alt: Pixel art avatar of Sundae as a character from Cave Story, using Sue Sakamoto's portrait as a base. alt: Pixel art avatar of Sundae as a character from Cave Story, using Sue Sakamoto's portrait as a base.
date: 2020-11-12 date: 2020-11-12
width: 480 pixel: true
--- ---

2
_src/data/art/artwork/vector bun.md
View file

@ -16,4 +16,4 @@ Although, I was surprised how cute I could make an avatar that's not restricted
Color palette used: {%ai"https://lospec.com/palette-list/cs112-v2"%}CS112-V2{%endai%} Color palette used: {%ai"https://lospec.com/palette-list/cs112-v2"%}CS112-V2{%endai%}
<section><a href="/assets/img/blog/bun.png"><figure><img src="/assets/img/blog/bun.png"><figcaption>Reference screenshot of the avatar</figcaption></figure></a></section> <section><a href="/assets/img/blog/bun.png"><figure><img src="/assets/img/blog/bun.png"><figcaption>In-game screenshot of the avatar</figcaption></figure></a></section>

1
_src/data/art/fanart/PETSCII kass.md
View file

@ -3,6 +3,7 @@ images:
- src: /assets/img/art/petscii_kass.png - src: /assets/img/art/petscii_kass.png
alt: Side portrait of Kass from The Legend of Zelda Breath of the Wild. alt: Side portrait of Kass from The Legend of Zelda Breath of the Wild.
date: 2023-02-23 date: 2023-02-23
pixel: true
--- ---
A PETSCII rendition of a screenshot that I took in The Legend of Zelda: Breath of the Wild, of Kass looking back at the player. A PETSCII rendition of a screenshot that I took in The Legend of Zelda: Breath of the Wild, of Kass looking back at the player.

1
_src/data/art/fanart/PETSCII lurantis.md
View file

@ -3,6 +3,7 @@ images:
- src: /assets/img/art/petscii_lurantis.png - src: /assets/img/art/petscii_lurantis.png
alt: Front-facing half-length portrait PETSCII artwork of Lurantis from Pokémon, but with a zig-zag mouth. alt: Front-facing half-length portrait PETSCII artwork of Lurantis from Pokémon, but with a zig-zag mouth.
date: 2023-02-15 date: 2023-02-15
pixel: true
--- ---
This isn't so much PETSCII as it is pixel art, but it's my first artwork that I've done using {%ai"https://lvllvl.com/"%}lvllvl{%endai%}, which is to say that this is done using a bitmap character set, despite it looking like pixel art. This isn't so much PETSCII as it is pixel art, but it's my first artwork that I've done using {%ai"https://lvllvl.com/"%}lvllvl{%endai%}, which is to say that this is done using a bitmap character set, despite it looking like pixel art.

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

@ -26,7 +26,7 @@ My main "worries" and/or misconceptions before getting into it were:
* learning the different directory structure * learning the different directory structure
* issues with my Nvidia GPU * issues with my Nvidia GPU
<section> <section style="overflow:hidden">
<p style="background-image: linear-gradient(to right, currentColor, transparent 40ch);background-clip: text;-webkit-background-clip: text;text-fill-color: transparent;-webkit-text-fill-color: transparent; width: max-content;">I had grown tired of Windows and Microsoft as a whole yada yada—</p> <p style="background-image: linear-gradient(to right, currentColor, transparent 40ch);background-clip: text;-webkit-background-clip: text;text-fill-color: transparent;-webkit-text-fill-color: transparent; width: max-content;">I had grown tired of Windows and Microsoft as a whole yada yada—</p>
<div style="background: linear-gradient(to right,transparent, orange 8ch);margin: -3ch auto 0 15ch;background-clip: text;color: transparent;width: max-content;" aria-hidden="true"><sub style="font-size: 1rem;transform: rotate(-2deg);display: inline-flex;">blah blah blah</sub>Microsoft<sup style="font-size: 1rem;transform: rotate(2deg);display: inline-flex;">yada yada</sup><b style="color: orange;margin: -0.6rem 0;font-size: 1.5rem;text-shadow: 5px 5px 0 color-mix(in lch,currentColor, transparent 60%), 10px 10px 0 color-mix(in lch,currentColor, transparent 70%)">SNORE</b></div> <div style="background: linear-gradient(to right,transparent, orange 8ch);margin: -3ch auto 0 15ch;background-clip: text;color: transparent;width: max-content;" aria-hidden="true"><sub style="font-size: 1rem;transform: rotate(-2deg);display: inline-flex;">blah blah blah</sub>Microsoft<sup style="font-size: 1rem;transform: rotate(2deg);display: inline-flex;">yada yada</sup><b style="color: orange;margin: -0.6rem 0;font-size: 1.5rem;text-shadow: 5px 5px 0 color-mix(in lch,currentColor, transparent 60%), 10px 10px 0 color-mix(in lch,currentColor, transparent 70%)">SNORE</b></div>
</section> </section>

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

@ -5,6 +5,6 @@ title: Version 0
* 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 header * Added `header`
* Added buttons to other pages * Added buttons to other pages
* Added a portrait of Sunny of his PETSCII avatar * Added a portrait of Sunny of his PETSCII avatar

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

@ -1,6 +1,6 @@
* Added sidebar * Added sidebar
* Added buttons to socials * Added links to socials
* Moved portrait from header to sidebar * Moved portrait from `header` to sidebar
* Changed backgrounds * Changed backgrounds
* Checkerboard pattern for the outer background * Checkerboard pattern for the outer background
* Tiled icon of Sunny for the inner background * Tiled icon of Sunny for the inner background

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

@ -20,18 +20,16 @@ title: Version 4
* Changelog is now Windows 98-themed * Changelog is now Windows 98-themed
* Changed sidebar * Changed sidebar
* Moved to the top left corner * Moved to the top left corner
* Moved header text for current page next to the top of the sidebar * Moved `header` text for current page next to the top of the sidebar
* Moved 88x31 buttons to footer * Moved 88x31 buttons to `footer`
* `SVG` text uses `CSS` rules instead of inline styling * `SVG` text uses `CSS` rules instead of inline styling
* Changed footer * Changed `footer`
* Added a sticker to the footer * Added a sticker to `footer`
* Randomized on-page-load * Randomized on-page-load
* Added pride flag backgrounds to `footer`
* Added pride flag backgrounds to the footer
* Randomized on-page-load, and are ones that I identify with. Plus they look pretty and my pages need more than 2 colors to look at * Randomized on-page-load, and are ones that I identify with. Plus they look pretty and my pages need more than 2 colors to look at
* Changed [Gallery](/gallery) * Changed [Gallery](/gallery)
* Centered the dates under artworks * Centered the `date` under artworks
* Updated my 88x31 button! * Updated my 88x31 button!
[![](/assets/img/button/sunbun_c.gif "sunbun")](/) [![](/assets/img/button/sunbun_c.gif "sunbun")](/)

8
_src/data/changelog/2025-05-23.md
View file

@ -5,17 +5,19 @@ Re-wrote the site, again.
Read the [accompanying blog post](/blog/rewrite-2.0) Read the [accompanying blog post](/blog/rewrite-2.0)
* Changed footer * Changed `footer`
* Merged buttons with [Home](/home) * Merged buttons with [Home](/home)
* Added a few new buttons! * Added a few new buttons!
* Removed `header`
* Changed ~~About~~ * Changed ~~About~~
* Merged with [Home](/home) * Merged with [Home](/home)
* Headers are now consistent with blog post headers
* Fixed the Pokemon box cutting off at lower resolutions * Fixed the Pokemon box cutting off at lower resolutions
* Changed sidebar * Changed sidebar
* Reverted back to normal text
* Added a pawprint flair
* Sunny is there again, sitting this time. * Sunny is there again, sitting this time.
* Changed [Blog](/blog) * Changed [Blog](/blog)
* Fixed header links not working in blog posts * Fixed `h3 a` links not working in blog posts
* Added functionality for blog-specific avatars and image attachments to the postscript blurb * Added functionality for blog-specific avatars and image attachments to the postscript blurb
* Removed ~~Art notes~~ * Removed ~~Art notes~~
* Merged into gallery entries * Merged into gallery entries

4
_src/index.html
View file

@ -6,9 +6,9 @@
<link rel="icon" href="/assets/img/icon/sundae.png"> <link rel="icon" href="/assets/img/icon/sundae.png">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/assets/css/reset.css"> <link rel="stylesheet" href="/assets/css/reset.css">
<link rel="stylesheet" href="/assets/css/index.css"> <link rel="stylesheet" href="/assets/css/default/index.css">
</head> </head>
<body id="index"> <body id="index">
<main><a href="/home"><p>enter</p></a></main><a rel="me" href="https://denden.world/@fossilisk" style="display: none">Mastodon</a> <main><a href="/home"><img src="/assets/img/theme/citrus/enter.png"></a><footer><p>This site eats cookies for breakfast.<br><i>nom nom nom</i><br><sub>(only used for simple interactivity)</sub></p></footer></main><a rel="me" href="https://denden.world/@fossilisk" style="display: none">Mastodon</a>
</body> </body>
</html> </html>

11
_src/pages/blog.html
View file

@ -5,13 +5,14 @@ icon: "M 4 2 L 28 2 L 28 30 L 4 30 Z M 8 8 L 24 8 L 24 6 L 8 6 Z M 8 14 L 24 14
L 8 18 Z" L 8 18 Z"
--- ---
<section id="posts"> <section id="posts">
<ul> <ul role="list">
{% for post in collections.posts reversed %} {% for post in collections.posts reversed %}
<li> <li>
<a href="{{post.url}}"></svg>{{post.fileSlug}}<p>published:<time <a href="{{post.url}}"></svg>{{post.fileSlug}}
datetime="{{post.data.date | ISO }}">{{post.data.date <p>published:<time datetime="{{post.data.date|ISO}}">{{post.data.date|readable}}</time></p>
| readable }}</time></p>{% if post.data.modified %}<p>last edited:<time {% if post.data.modified %}
datetime="{{post.data.modified}}">{{post.data.modified | readable}}</time></p>{% endif %} <p>last edited:<time datetime="{{post.data.modified}}">{{post.data.modified|readable}}</time></p>
{%endif%}
<p>{{post.data.description}}</p> <p>{{post.data.description}}</p>
</a> </a>
</li> </li>

79
_src/pages/gallery.html
View file

@ -4,43 +4,46 @@ order: 4
icon: "M 30 26 L 27 26 L 21 14 L 16 23 L 11 17 L 5 26 L 2 26 L 2 2 Q 2 2 10 6 A 1 1 0 0 0 10 13 A 1 1 0 0 0 10 6 L 2 2 L icon: "M 30 26 L 27 26 L 21 14 L 16 23 L 11 17 L 5 26 L 2 26 L 2 2 Q 2 2 10 6 A 1 1 0 0 0 10 13 A 1 1 0 0 0 10 6 L 2 2 L
30 2 L 30 26 L 30 30 L 2 30 L 2 26" 30 2 L 30 26 L 30 30 L 2 30 L 2 26"
--- ---
<section id="artworks"> <section id="artworks">
<h2>Original characters</h2> <article>
<ul> <h2>Original characters</h2>
{% assign sortedArtworks = collections.artworks | sortByFirstDate %} <ul role="list">
{% for artwork in sortedArtworks %} {% assign sortedArtworks = collections.artworks | sortByFirstDate %} {%
<li> for artwork in sortedArtworks %}
<a href="{{ artwork.page.url }}"> <li>
<figure> <a href="{{artwork.page.url}}">
{% if artwork.data.images[0] %} <figure>
<img src="{{ artwork.data.images[0].src }}" alt="{{ artwork.data.images[0].alt }}"> {% if artwork.data.images[0] %}
<figcaption>{{ artwork.page.fileSlug }}</figcaption> <img src="{{artwork.data.images[0].src}}" alt="{{artwork.data.images[0].alt}}" {%if artwork.data.images[0].pixel%} style="image-rendering: pixelated" {%endif%} />
{% if artwork.data.images[0].date %} <figcaption>{{artwork.page.fileSlug}}</figcaption>
<time datetime="{{ artwork.data.images[0].date | ISO }}">{{ artwork.data.images[0].date | readable }}</time> {% if artwork.data.images[0].date %}
{% endif %} <time datetime="{{artwork.data.images[0].date | ISO}}">{{artwork.data.images[0].date | readable}}</time>
{% endif %} {%endif%} {%endif%}
</figure> </figure>
</a> </a>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
<h2>Fan art</h2> </article>
<ul> <article>
{% assign sortedFanarts = collections.fanarts | sortByFirstDate %} <h2>Fan art</h2>
{% for fanart in sortedFanarts %} <ul role="list">
<li> {% assign sortedFanarts = collections.fanarts | sortByFirstDate %} {% for
<a href="{{ fanart.page.url }}"> fanart in sortedFanarts %}
<figure> <li>
{% if fanart.data.images[0] %} <a href="{{fanart.page.url}}">
<img src="{{ fanart.data.images[0].src }}" alt="{{ fanart.data.images[0].alt }}"> <figure>
<figcaption>{{ fanart.page.fileSlug }}</figcaption> {% if fanart.data.images[0] %}
{% if fanart.data.images[0].date %} <img src="{{fanart.data.images[0].src}}" alt="{{fanart.data.images[0].alt}}" />
<time datetime="{{ fanart.data.images[0].date | ISO }}">{{ fanart.data.images[0].date | readable }}</time> <figcaption>{{fanart.page.fileSlug}}</figcaption>
{% endif %} {% if fanart.data.images[0].date %}
{% endif %} <time datetime="{{fanart.data.images[0].date | ISO}}">{{fanart.data.images[0].date | readable}}</time>
</figure> {%endif%} {%endif%}
</a> </figure>
</li> </a>
{% endfor %} </li>
</ul> {% endfor %}
</ul>
</article>
</section> </section>

82
_src/pages/home.html
View file

@ -3,66 +3,70 @@ title: "Home"
order: 1 order: 1
icon: "M12 20 L12 30 4 30 4 12 16 2 28 12 28 30 20 30 20 20 Z" icon: "M12 20 L12 30 4 30 4 12 16 2 28 12 28 30 20 30 20 20 Z"
--- ---
<section id="intro">
{% for article in collections.articles %} <section id="bio">
{{article.content}} {% for article in collections.articles %} {{article.content}} {% endfor %}
{% endfor %}
</section> </section>
<section id="collection"> <section id="collection">
<article> <article>
<h3>Games</h3> <h3>Games</h3>
<ul class="games"> <ul class="games" role="list">
{% for item in games.items %} {% for item in games.items %}
<li> <li>
<a href="{{item.src}}"> <a href="{{item.src}}">
<div><img src="{{item.cover}}" alt="Game icon for {{item.title}}"></div> <div>
<span>{{item.title}}</span> <img src="{{item.cover}}" alt="Game icon for {{item.title}}"/>
</a> </div>
</li> <span>{{item.title}}</span>
{% endfor %} </a>
</ul> </li>
</article> {% endfor %}
<article> </ul>
<h3>Albums</h3> </article>
<ul class="music"> <article>
{% for item in music.items %} <h3>Albums</h3>
<li> <ul class="music" role="list">
<a href="{{item.src}}"> {% for item in music.items %}
<div><img src="{{item.cover}}"></div> <li>
<span>{{item.title}}</span> <a href="{{item.src}}">
</a> <div><img src="{{item.cover}}" /></div>
</li> <span>{{item.title}}</span>
{% endfor %} </a>
</ul> </li>
</article> {% endfor %}
</ul>
</article>
</section> </section>
<section id="badges"> <section id="badges">
<article> <article>
<nav> <nav>
<h3>My buttons!</h3> <h3>My buttons!</h3>
<ul> <ul role="list">
{% for item in 88x31-mine.items %} {% for item in 88x31-mine.items %}
<li> <li>
<a href="{{item.src}}" title="{{item.name}}"><img {%if item.id%}id="{{item.id}}" {%endif%} <a href="{{item.src}}" title="{{item.name}}">
src="{{item.button}}" alt="{{item.alt}}"></a> <img {%if item.id%}id="{{item.id}}"{%endif%} src="{{item.button}}" alt="{{item.alt}}"/>
</a>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
<h3>Critters!</h3> <h3>Critters!</h3>
<ul> <ul role="list">
{% for item in 88x31-critters.items %} {% for item in 88x31-critters.items %}
<li> <li>
<a href="{{item.src}}" title="{{item.name}}"><img {%if item.id%}id="{{item.id}}" {%endif%} <a href="{{item.src}}" title="{{item.name}}">
src="{{item.button}}" alt="{{item.alt}}"></a> <img {%if item.id%}id="{{item.id}}"{%endif%} src="{{item.button}}" alt="{{item.alt}}"/>
</a>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
<h3>Fun!</h3> <h3>Fun!</h3>
<ul> <ul role="list">
{% for item in 88x31.items %} {% for item in 88x31.items %}
<li> <li>
<a href="{{item.src}}" title="{{item.name}}"><img {%if item.id%}id="{{item.id}}" {%endif%} <a href="{{item.src}}" title="{{item.name}}">
src="{{item.button}}" alt="{{item.alt}}"></a> <img {%if item.id%}id="{{item.id}}"{%endif%} src="{{item.button}}" alt="{{item.alt}}"/>
</a>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
@ -70,6 +74,8 @@ icon: "M12 20 L12 30 4 30 4 12 16 2 28 12 28 30 20 30 20 20 Z"
<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>
</nav> </nav>
<div id="pkmn" aria-label="Randomized list of my favorite Pokémon"><script src="/assets/js/poke.js"></script></div> <div id="pkmn" aria-label="Randomized list of my favorite Pokémon">
<script src="/assets/js/poke.js"></script>
</div>
</article> </article>
</section> </section>