accessibility maxxing
This commit is contained in:
parent
6c9294f0a0
commit
f18a342ae5
64 changed files with 320 additions and 205 deletions
|
@ -1,27 +1,19 @@
|
|||
{
|
||||
"items": [
|
||||
{
|
||||
"alt": "Sunny's website",
|
||||
"button": "/assets/img/button/sunbun_d.gif",
|
||||
"name": "sunbun",
|
||||
"src": "/"
|
||||
},
|
||||
{
|
||||
"alt": "Sunny's website",
|
||||
"button": "/assets/img/button/sunbun_c.gif",
|
||||
"name": "sunbun",
|
||||
"src": "/"
|
||||
},
|
||||
{
|
||||
"alt": "Sunny's website",
|
||||
"button": "/assets/img/button/sunbun_b.gif",
|
||||
"name": "sunbun",
|
||||
"src": "/"
|
||||
},
|
||||
{
|
||||
"alt": "Sunny's website",
|
||||
"button": "/assets/img/button/sunbun_a.gif",
|
||||
"name": "sunbun",
|
||||
"src": "/"
|
||||
}
|
||||
]
|
||||
|
|
|
@ -8,10 +8,10 @@ theme: "M16 6a1 1 0 010 20Zm0-4a1 1 0 000 28A1 1 0 0016 2"
|
|||
<html lang="en">
|
||||
<head>
|
||||
<title>
|
||||
{{site.name}}
|
||||
{%if title%}
|
||||
- {{page.fileSlug|capitalize}}
|
||||
{%endif%}
|
||||
{{ site.name }}
|
||||
{% if title %}
|
||||
- {{ page.fileSlug|capitalize }}
|
||||
{% endif %}
|
||||
</title>
|
||||
<link rel="icon" href="/assets/img/icon/sundae.png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
@ -19,73 +19,84 @@ theme: "M16 6a1 1 0 010 20Zm0-4a1 1 0 000 28A1 1 0 0016 2"
|
|||
<link rel="stylesheet" href="/assets/css/reset.css">
|
||||
<link rel="stylesheet" href="/assets/css/default/default.css">
|
||||
<link rel="stylesheet" href="/assets/css/default/system.css" id="custom">
|
||||
{%if page.url === "/home/"%}
|
||||
{% if page.url === "/home/" %}
|
||||
<link rel="stylesheet" href="/assets/css/pokesprite-pokemon-gen8.css"/>
|
||||
{%endif%}
|
||||
{%set availableStyles = ['home', 'blog', 'gallery']%}
|
||||
{%if page.url%}
|
||||
{%if availableStyles.indexOf(page.url|firstSegment) !== -1%}
|
||||
<link rel="stylesheet" href="/assets/css/default/{{page.url|firstSegment}}.css">
|
||||
{%endif%}
|
||||
{%endif%}
|
||||
{% endif %}
|
||||
{% set availableStyles = ['home', 'blog', 'gallery'] %}
|
||||
{% if page.url %}
|
||||
{% if availableStyles.indexOf(page.url|firstSegment) !== -1 %}
|
||||
<link rel="stylesheet" href="/assets/css/default/{{ page.url|firstSegment }}.css">
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</head>
|
||||
<body id="{{page.url|firstSegment}}">
|
||||
<body id="{{ page.url|firstSegment }}">
|
||||
<nav>
|
||||
<details open="">
|
||||
<summary>
|
||||
<svg width="20" height="20" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="{{paw}}"></svg>
|
||||
<svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="{{ paw }}"></svg>
|
||||
Navigation
|
||||
</summary>
|
||||
{%set currentUrl%}{{page.url}}{%endset%}
|
||||
{%set sortedPages = collections.pages|sort(attribute='data.order')%}
|
||||
{% set currentUrl %}{{ page.url }}{% endset %}
|
||||
{% set sortedPages = collections.pages|sort(attribute='data.order') %}
|
||||
<ul role="list">
|
||||
<li>
|
||||
<a href="../">
|
||||
<svg width="20" height="20" viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="{{back}}"></path>
|
||||
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="{{ back }}"></path>
|
||||
</svg>
|
||||
Back
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<button id="theme-toggle">
|
||||
<svg width="20" height="20" viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="{{theme}}"></svg>
|
||||
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="{{ theme }}"></svg>
|
||||
Toggle theme
|
||||
</button>
|
||||
</li>
|
||||
{%for page in sortedPages%}
|
||||
{% 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>
|
||||
<a {% if currentUrl === page.url %} aria-current="page" {% endif %} href="{{ page.url }}">
|
||||
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="{{ page.data.icon }}"></path>
|
||||
</svg>
|
||||
{{page.data.title}}</a>
|
||||
{{ page.data.title }}</a>
|
||||
</li>
|
||||
{%endfor%}
|
||||
{% endfor %}
|
||||
<script src="/assets/js/theme.js"></script>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
<details open="">
|
||||
<summary>
|
||||
<svg width="20" height="20" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="{{paw}}"></svg>
|
||||
<svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="{{ paw }}"></svg>
|
||||
Outgoing
|
||||
</summary>
|
||||
<ul role="list">
|
||||
{%for item in outgoing.items%}
|
||||
{% for item in outgoing.items %}
|
||||
<li>
|
||||
<a href="{{item.src}}"><img src="{{item.icon}}" alt="">{{item.title}}</a>
|
||||
<a href="{{ item.src }}"><img src="{{ item.icon }}" alt="" aria-hidden="true">{{ item.title }}</a>
|
||||
</li>
|
||||
{%endfor%}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</details>
|
||||
<script src="/assets/js/nav-details.js"></script>
|
||||
</nav>
|
||||
<header>
|
||||
<h1>
|
||||
{% for page in sortedPages %}
|
||||
{% if currentUrl|firstSegment === page.url|firstSegment %}
|
||||
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="{{ page.data.icon }}"></path>
|
||||
</svg>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{{ page.url|firstSegment|slugify|capitalize }}</h1>
|
||||
</header>
|
||||
<main>
|
||||
{{content | safe}}
|
||||
{{ content | safe }}
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -5,6 +5,6 @@ layout: base
|
|||
<article>
|
||||
{{content|safe}}
|
||||
<section aria-label="Postscript">
|
||||
{{blurb|safe}} <img src="{{avatar}}">
|
||||
{{blurb|safe}} <img src="{{avatar}}" alt="Profile picture">
|
||||
</section>
|
||||
</article>
|
|
@ -3,13 +3,13 @@ layout: base
|
|||
---
|
||||
|
||||
<article id="art">
|
||||
<h3>{{page.fileSlug}}{%for flag in flags%}<img src="{{flag.src}}">{%endfor%}</h3>
|
||||
<h1>{{page.fileSlug}}{%for flag in flags%}<img src="{{flag.src}}">{%endfor%}</h1>
|
||||
{{content|safe}}
|
||||
<section>
|
||||
{%for image in images%}
|
||||
<a href="{{image.src}}">
|
||||
<figure>
|
||||
<img src="{{image.src}}" alt="{{image.alt}}" {%if image.pixel%} style="image-rendering: pixelated" {%endif%}>
|
||||
<img src="{{image.src}}" alt="" {%if image.pixel%} style="image-rendering: pixelated" {%endif%}>
|
||||
<figcaption>{{image.alt}}</figcaption>
|
||||
<time datetime="{{image.date|ISO}}">{{image.date|readable}}</time>
|
||||
</figure>
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
:root {
|
||||
--avatar: 3rem;
|
||||
}
|
||||
|
||||
#blog:not(:has(#posts)) header {
|
||||
text-align: center;
|
||||
}
|
||||
article {
|
||||
margin: 0 auto;
|
||||
font-family: "Rubik", sans-serif;
|
||||
|
@ -15,7 +17,12 @@ article {
|
|||
border-radius: var(--round);
|
||||
width: 66%;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
margin-bottom: var(--pad-m);
|
||||
}
|
||||
& [aria-label="Post warning"] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
|
|
|
@ -13,7 +13,7 @@ h4,
|
|||
h5,
|
||||
h6 {
|
||||
display: block;
|
||||
font-size: 2em;
|
||||
font-size: 2rem;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
margin-inline-start: 0;
|
||||
|
@ -36,6 +36,22 @@ body {
|
|||
}
|
||||
}
|
||||
}
|
||||
svg {
|
||||
fill: currentColor;
|
||||
stroke: currentColor;
|
||||
stroke-width: 0;
|
||||
}
|
||||
header {
|
||||
padding-top: var(--pad-xl);
|
||||
padding-left: calc(var(--view) + var(--pad-xl));
|
||||
& svg {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
& h1 {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
padding: var(--pad-xl);
|
||||
|
@ -170,7 +186,7 @@ article {
|
|||
}
|
||||
|
||||
:is(main article, main section):not(:last-child) {
|
||||
margin-bottom: var(--pad-xl);
|
||||
margin-bottom: var(--pad-m);
|
||||
}
|
||||
|
||||
img[src*="/assets/img/flag/"] {
|
||||
|
@ -187,6 +203,12 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
|
|||
}
|
||||
|
||||
@media screen and (max-width: 920px) {
|
||||
header {
|
||||
padding-left: 0;
|
||||
padding-top: var(--pad-m);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: var(--pad-l);
|
||||
}
|
||||
|
@ -209,7 +231,8 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
|
|||
width: auto;
|
||||
}
|
||||
|
||||
body>nav::before, body>nav::after {
|
||||
body>nav::before,
|
||||
body>nav::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
|
|
|
@ -25,14 +25,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
& h2 {
|
||||
margin: var(--pad-xl) 0;
|
||||
font-size: var(--pad-xl);
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
& figure {
|
||||
margin: 0;
|
||||
padding: var(--pad-sm);
|
||||
|
|
|
@ -1,33 +1,46 @@
|
|||
@import url("./variables.css");
|
||||
|
||||
#index {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--primary-dark-300);
|
||||
background-color: rgb(255, 190, 0);
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
& main {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
width: inherit;
|
||||
flex-direction: column;
|
||||
background-image: var(--sunny);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
& a {
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
|
||||
& footer {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
& header {
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-self: center;
|
||||
& a, img {
|
||||
z-index: 1;
|
||||
display: inherit;
|
||||
flex-direction: inherit;
|
||||
}
|
||||
& span {
|
||||
position: absolute;
|
||||
bottom: var(--pad-l);
|
||||
& p {
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
& footer,
|
||||
header {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -78,12 +78,6 @@ body>nav {
|
|||
}
|
||||
}
|
||||
|
||||
& svg {
|
||||
fill: currentColor;
|
||||
stroke: currentColor;
|
||||
stroke-width: 0;
|
||||
}
|
||||
|
||||
& details {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
article,
|
||||
body {
|
||||
body,
|
||||
header svg {
|
||||
color: var(--secondary-light-300);
|
||||
}
|
||||
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
@media (prefers-color-scheme: light) {
|
||||
|
||||
article,
|
||||
body {
|
||||
body,
|
||||
header svg {
|
||||
color: var(--primary-dark-300);
|
||||
}
|
||||
|
||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 26 KiB |
|
@ -1,24 +1,40 @@
|
|||
import { audioPath } from './path.js'
|
||||
import { audioPath } from "./path.js";
|
||||
|
||||
let pipe = document.getElementById("meow");
|
||||
let preload = new Image();
|
||||
preload.src = "/assets/img/button/braixdragon-cat2.gif";
|
||||
|
||||
pipe.addEventListener("mouseover", func, true);
|
||||
let hoverTimeout;
|
||||
let hovered = false;
|
||||
let played = localStorage.getItem("audioPlayed") === "true";
|
||||
let audio = new Audio(`${audioPath}anvil_land_low.ogg`);
|
||||
|
||||
function func() {
|
||||
pipe.src = preload.src;
|
||||
}
|
||||
|
||||
let audio = document.createElement("audio");
|
||||
audio.src = `${audioPath}anvil_land_low.ogg`;
|
||||
pipe.appendChild(audio);
|
||||
window.addEventListener("beforeunload", () => {
|
||||
localStorage.removeItem("catflattened");
|
||||
});
|
||||
|
||||
pipe.addEventListener(
|
||||
"mouseover",
|
||||
function () {
|
||||
() => {
|
||||
if (played) return;
|
||||
hovered = true;
|
||||
hoverTimeout = setTimeout(() => {
|
||||
if (hovered && !played) {
|
||||
pipe.src = preload.src;
|
||||
setTimeout(() => {
|
||||
if (!played) {
|
||||
audio.play();
|
||||
}, 1700);
|
||||
played = true;
|
||||
localStorage.setItem("catflattened", "true");
|
||||
}
|
||||
}, 600);
|
||||
}
|
||||
}, 650);
|
||||
},
|
||||
{ once: true }
|
||||
true
|
||||
);
|
||||
|
||||
pipe.addEventListener("mouseout", () => {
|
||||
hovered = false;
|
||||
clearTimeout(hoverTimeout);
|
||||
});
|
||||
|
|
|
@ -14,6 +14,6 @@ A hybrid pixel and PETSCII portrait of sunny. I'm quite fond of both versions!
|
|||
|
||||
One looks more glossy and true to his model, and the other's got a cute pouty look to his face.
|
||||
|
||||
`Color palette used:` {%ai"https://lospec.com/palette-list/calm-48"%}Calm 48\*{%endai%}
|
||||
`Color palette used:` [Calm 48](https://lospec.com/palette-list/calm-48)*
|
||||
|
||||
`*The lime green nose is a modification and not part of the base palette.`
|
||||
|
|
|
@ -8,7 +8,7 @@ images:
|
|||
date: 2022-05-22
|
||||
---
|
||||
|
||||
Done in {%ai"https://getpaint.net/"%}paint.net{%endai%} with a mouse when I was feeling under the weather.
|
||||
Done in [paint.net](https://getpaint.net) with a mouse when I was feeling under the weather.
|
||||
I used to be extremely proud of this, but since then I've noticed a lot that I could've done better.
|
||||
|
||||
When I was switching over to {%ai"https://gimp.org"%}GIMP{%endai%}, I re-imported the layers (with equivalent layer modes) from the paint.net project file out of curiosity, which resulted in higher contrast and more vivid colors.
|
||||
When I was switching over to [GIMP](https://gimp.org), I re-imported the layers (with equivalent layer modes) from the paint.net project file out of curiosity, which resulted in higher contrast and more vivid colors.
|
||||
|
|
|
@ -7,9 +7,9 @@ images:
|
|||
|
||||
Incredibly proud of this!
|
||||
|
||||
I used {%ai"https://tombofnull.itch.io/stipple-beast-brush-pack"%}TOMBOFNULL's stipple beast brush pack{%endai%}, which I'd been meaning to try out before.
|
||||
I used [TOMBOFNULL's stipple beast brush pack](https://tombofnull.itch.io/stipple-beast-brush-pack), which I'd been meaning to try out before.
|
||||
|
||||
Inspired by one of {%ai"https://kaitty.com/"%}kaitty{%endai%}'s avatars (specifically from their bandcamp), which I thought was really cute.
|
||||
Inspired by one of [kaitty's](https://kaitty.com) avatars (specifically from their bandcamp), which I thought was really cute.
|
||||
|
||||
It first started out as a doodle, referencing their avatar. Although, I wasn't that happy since the colors I used were a bit flat.
|
||||
|
||||
|
|
|
@ -6,6 +6,6 @@ images:
|
|||
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 [Michi's lick icon base](https://www.deviantart.com/sketchmichi/art/Lick-icon-base-201253097).
|
||||
|
||||
Pretty happy with it!
|
|
@ -12,6 +12,6 @@ flags:
|
|||
---
|
||||
|
||||
|
||||
First done in {%ai"https://www.clipstudio.net/en/"%}Clip Studio Paint{%endai%}, but I eventually settled on {%ai"https://krita.org/en/"%}Krita{%endai%} and re-drew him there.
|
||||
First done in [Clip Studio Paint](https://clipstudio.net/en/), but I eventually settled on [Krita](https://krita.org/en/) and re-drew him there.
|
||||
|
||||
The scope of this was originally much large. It would've been a huge undertaking to re-do the background for it, which is why I re-purposed it for pride month.
|
||||
|
|
|
@ -5,6 +5,6 @@ images:
|
|||
date: 2023-07-12
|
||||
---
|
||||
|
||||
I was incredibly surprised to discover that I could create the space background in-program with Krita, just by using different built-in presets from the {%ai "https://docs.krita.org/en/reference_manual/filters/artistic.html"%}Halftone{%endai%} filter.
|
||||
I was incredibly surprised to discover that I could create the space background in-program with [Krita](https://krita.org), just by using different built-in presets from the [Halftone filter](https://docs.krita.org/en/reference_manual/filters/artistic.html).
|
||||
|
||||
This is one of my favorite artworks that I've spent time working on!
|
||||
|
|
|
@ -10,4 +10,4 @@ The first doodle of the boy, done in Microsoft Paint.
|
|||
|
||||
I'm not sure when I actually made this, due to lack of chat logs and file dates being wiped.
|
||||
|
||||
The earliest I could point to is during 2020, when I made a secondary youtube channel to upload {%ai"https://youtube.com/@fosstracks/videos"%}Cave Story's soundtracks{%endai%}, since at the time, there weren't any great uploads.
|
||||
The earliest I could point to is during 2020, when I made a secondary youtube channel to upload [Cave Story's soundtracks](https://youtube.com/@fosstracks/videos), since at the time, there weren't any great uploads.
|
||||
|
|
|
@ -5,6 +5,6 @@ images:
|
|||
date: 2023-03-26
|
||||
---
|
||||
|
||||
For this, I took reference from the work of {%ai"https://twitter.com/presswer"%}Dr. Presto (18+ warning){%endai%}, specifically with how they used to create model sheets of their characters, during 2020.
|
||||
For this, I took reference from the work of [Dr. Presto (18+ warning)](https://twitter.com/presswer), specifically with how they used to create model sheets of their characters, during 2020.
|
||||
|
||||
They're a huge inspiration for me to start drawing, and I haven't made proper reference models until this.
|
||||
|
|
|
@ -11,11 +11,11 @@ flags:
|
|||
alt: Transgender pride flag
|
||||
---
|
||||
|
||||
Made using {%ai"https://lvllvl.com/"%}lvllvl{%endai%}'s vector mode, with the "modular shapes" vector set.
|
||||
Made using [lvllvl](https://lvllvl.com/)'s vector mode, with the "modular shapes" vector set.
|
||||
|
||||
A character that I first made in ROBLOX.
|
||||
They're unnamed, because I haven't done much with them outside of this artwork.
|
||||
|
||||
Although, I was surprised how cute I could make an avatar that's not restricted to the default square body that I've been accustomed to for a decade.
|
||||
|
||||
`Color palette used:` {%ai"https://lospec.com/palette-list/cs112-v2"%}CS112-V2{%endai%}
|
||||
`Color palette used:` [CS112-V2](https://lospec.com/palette-list/cs112-v2)
|
|
@ -11,4 +11,4 @@ attachments:
|
|||
|
||||
A PETSCII rendition of a screenshot that I took in The Legend of Zelda: Breath of the Wild.
|
||||
|
||||
`Color palette used:` {%ai"https://lospec.com/palette-list/new-worlds-46"%}New Worlds 46{%endai%}
|
||||
`Color palette used:` [New Worlds 46](https://lospec.com/palette-list/new-worlds-46)
|
|
@ -6,8 +6,8 @@ images:
|
|||
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 [lvllvl](https://lvllvl.com/), which is to say that this is done using a bitmap character set, despite it looking like pixel art.
|
||||
|
||||
{%ai"https://archives.bulbagarden.net/wiki/Category:Lurantis"%}Lurantis don't have a mouth{%endai%}, but I thought I'd give them one anyway, because they look cute with.
|
||||
[Lurantis don't have a mouth](https://archives.bulbagarden.net/wiki/Category:Lurantis), but I thought I'd give them one anyway, because they look cute with.
|
||||
|
||||
`Color palette used:` {%ai"https://lospec.com/palette-list/pastel-horizon"%}Pastel Horizon{%endai%}
|
||||
`Color palette used:` [Pastel Horizon](https://lospec.com/palette-list/pastel-horizon)
|
|
@ -5,8 +5,8 @@ images:
|
|||
date: 2023-01-16
|
||||
---
|
||||
|
||||
Cave Story!!! The first PETSCII artwork that I've done before knowing the existence of {%ai"https://lvllvl.com/"%}lvllvl{%endai%}, using a much less user-friendly tool.
|
||||
Cave Story!!! The first PETSCII artwork that I've done before knowing the existence of [lvllvl](https://lvllvl.com/), using a much less user-friendly tool.
|
||||
|
||||
Inspired by {%ai"https://mileshouse.neocities.org"%}kiophen{%endai%} and {%ai"https://creature0354.neocities.org"%}lati{%endai%}'s first PETSCII works!
|
||||
Inspired by [kiophen](https://mileshouse.neocities.org) and [lati](https://creature0354.neocities.org)'s first PETSCII works!
|
||||
|
||||
`Color palette used:` Commodore 64
|
||||
|
|
|
@ -4,7 +4,7 @@ images:
|
|||
alt: Mallow from Cavern Crusher, sitting on the ledge of a mossy stone pit with water at the bottom.
|
||||
date: 2025-08-03
|
||||
---
|
||||
{%ai"https://caverncrusher.com/Mallow"%}Mallow!{%endai%} I love this goober. It's from a ROBLOX game titled {%ai"https://www.roblox.com/games/15121756860/CAVERN-CRUSHER"%}Cavern Crusher{%endai%} that's in development (as of writing).
|
||||
[Mallow!](https://caverncrusher.com/Mallow) I love this goober. It's from a ROBLOX game titled [Cavern Crusher](https://www.roblox.com/games/15121756860/CAVERN-CRUSHER) that's in development (as of writing).
|
||||
|
||||
It has a lot of really cute character designs and I just had to draw one of them.
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
# Bio
|
||||
## Bio
|
||||
Hi! My name's Sunny. I'm:
|
||||
|
||||
* an artist
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
# Fan art
|
||||
## Fan art
|
||||
|
||||
Various artworks featuring characters from other media
|
|
@ -1,4 +1,4 @@
|
|||
# Interests
|
||||
## Interests
|
||||
|
||||
Below are lists of media that I've enjoyed and/or still enjoy.
|
||||
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
# Original characters
|
||||
## Original characters
|
||||
|
||||
My own characters that I've drawn
|
|
@ -9,11 +9,11 @@ avatar: /assets/img/art/sundae_glistening.png
|
|||
|
||||
<time datetime="{{date|ISO}}">{{date|readable}}</time>
|
||||
|
||||
<p aria-label="Post warning">WARNING: BORING NERD TOPIC AHOY</p>
|
||||
<section aria-label="Post warning">WARNING: BORING NERD TOPIC AHOY</section>
|
||||
|
||||
I had mentioned on my Neocities profile that I would look into re-writing my website fairly soon right after pushing an update out. Took a bit longer than I would've liked honestly, but it's here!
|
||||
|
||||
Actually, it had been mostly finished for a while (since July 1), but I hit a couple of roadblocks (mainly date conversion) that demoralized me from working more on it at the time, as well as some lifestyle changes, like spending less time on the PC and exercising often.
|
||||
Actually, it had been mostly finished for a while (since July 1st), but I hit a couple of roadblocks (mainly date conversion) that demoralized me from working more on it at the time, as well as some lifestyle changes, like spending less time on the PC and exercising often.
|
||||
|
||||
**The most notable things about my site re-write off the top of my head are:**
|
||||
* converting page elements into `.json` data tables
|
||||
|
@ -22,18 +22,18 @@ Actually, it had been mostly finished for a while (since July 1), but I hit a co
|
|||
|
||||
### I have <s>no</s> some idea what I'm doing
|
||||
|
||||
For starters, porting a website (at least one that's paw-written by yours truly) to a static site generator like {% ai "https://11ty.dev/"%}Eleventy{% endai %} was definitely something, having only dabbled with editing `.html` and `.css` files without hosting a local server.
|
||||
For starters, porting a website (at least one that's paw-written by yours truly) to a static site generator like [Eleventy](https://11ty.dev/) was definitely something, having only dabbled with editing `.html` and `.css` files without hosting a local server.
|
||||
|
||||
Initially I went looking around for a base (as to not start from complete scratch) to use and found {% ai "https://github.com/5t3ph/smol-11ty-starter"%}Smol 11ty Starter by 5t3ph{% endai %} and set it up.
|
||||
Initially I went looking around for a base (as to not start from complete scratch) to use and found [Smol 11ty Starter by 5t3ph](https://github.com/5t3ph/smol-11ty-starter) and set it up.
|
||||
|
||||
I was **very eager** to start working on it, and because I decided to do so late at night, I didn't consult any documentation and thus felt like it would be impossible to learn {% ai "https://mozilla.github.io/nunjucks/"%}Nunjucks{% endai %} (one of the [templating languages](https://www.11ty.dev/docs/languages/) used in Eleventy) got upset, settled down and slept.
|
||||
I was **very eager** to start working on it, and because I decided to do so late at night, I didn't consult any documentation and thus felt like it would be impossible to learn [Nunjucks](https://mozilla.github.io/nunjucks/) (one of the [templating languages](https://www.11ty.dev/docs/languages/) used in Eleventy) got upset, settled down and slept.
|
||||
|
||||
### You're telling me that Java scripted this?
|
||||
|
||||
|
||||
I still don't understand JavaScript that well, got stumped on a couple of things, and as a result I took some time off working on the re-write.
|
||||
|
||||
Regardless, I had ported over the base layout and most pages, which would be around 90% of the work done within the first couple of days. The last 10% that was left being: having to tackle date conversion with {% ai "https://github.com/moment/luxon" %}Luxon{% endai %}, setting custom filters for Eleventy to use them and forgetting to port a few page elements to `.json` data tables.
|
||||
Regardless, I had ported over the base layout and most pages, which would be around 90% of the work done within the first couple of days. The last 10% that was left being: having to tackle date conversion with [Luxon](https://github.com/moment/luxon), setting custom filters for Eleventy to use them and forgetting to port a few page elements to `.json` data tables.
|
||||
|
||||
Currently, my filters are handled really shittily, but they work whenever I build my site.
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
description: I heard you like rewrites, so we put rewrites in your rewrites, so you can rewrite while you rewrite
|
||||
date: 2025-06-25
|
||||
blurb: <p>i hate luxon</p><p><a href="/assets/img/blog/luxon.png"><img src="/assets/img/blog/luxon.png"></a></p>
|
||||
blurb: <p>i hate luxon</p><p><a href="/assets/img/blog/luxon.png"><img src="/assets/img/blog/luxon.png" alt="Collage of various cartoon characters from different media wielding a pistol pointed at Luxon, collectively saying 'Sorry Luxon but your documentation sucks, so die' to which Luxon replies with 'I understand'"></a></p>
|
||||
avatar: /assets/img/art/sundae_lick.gif
|
||||
---
|
||||
## {{page.fileSlug}}
|
||||
|
@ -13,11 +13,11 @@ I haven't worked on much of anything the past 8+ months, and out of the blue, I
|
|||
|
||||
It's now [open source](https://bunsin.space/forgejo/sundae/website) under <abbr title="Creative Commons Attribution-NonCommercial-ShareAlike 4.0">CC-BY-NC-SA 4.0</abbr>!
|
||||
|
||||
Besides that, a lot is new, actually. For starters, I ported the site over to a fresh build of {%ai "https://github.com/11ty/eleventy/releases/tag/v3.1.0"%}Eleventy 3.1.0{%endai%}, which was way easier than I expected, [since I originally started from a base](/blog/break-time#i-have-no-some-idea-what-i'm-doing).
|
||||
Besides that, a lot is new, actually. For starters, I ported the site over to a fresh build of [Eleventy 3.1.0](https://github.com/11ty/eleventy/releases/tag/v3.1.0), which was way easier than I expected, [since I originally started from a base](/blog/break-time#i-have-no-some-idea-what-i'm-doing).
|
||||
|
||||
I figured out that standard `markdown` doesn't implement header links (without manually adding in inline `html` headings with `id` attributes), so I ended up switching to {%ai"https://github.com/markdown-it/markdown-it"%}markdown-it{%endai%} and {%ai"https://github.com/valeriangalliat/markdown-it-anchor"%}markdown-it-anchor{%endai%}.
|
||||
I figured out that standard `markdown` doesn't implement header links (without manually adding in inline `html` headings with `id` attributes), so I ended up switching to [markdown-it](https://github.com/markdown-it/markdown-it) and [markdown-it-anchor](https://github.com/valeriangalliat/markdown-it-anchor).
|
||||
|
||||
I switched to using {% ai "https://date-fns.org/" %}date-fns{% endai %} aswell, instead of {%ai"https://github.com/moment/luxon/"%}Luxon{%endai%}. This library is just way better documented, for someone that still sort of struggles with JavaScript.
|
||||
I switched to using [date-fns](https://date-fns.org) aswell, instead of [Luxon](https://github.com/moment/luxon/). This library is just way better documented, for someone that still sort of struggles with JavaScript.
|
||||
|
||||
Here's a snippet of my time filters in my `eleventy.config.js`:
|
||||
|
||||
|
@ -42,8 +42,8 @@ I've changed them to be more minimal, mimicking Windows desktop entries with the
|
|||
|
||||
If you'd like to implement the shelving for your own website, you can find the source files in the [old branch](https://bunsin.space/forgejo/sundae/website/src/branch/old).
|
||||
|
||||
<section><a href="/assets/img/blog/shelf.png"><figure><img src="/assets/img/blog/shelf.png"><figcaption>How the shelving featuring my personal favorite games and music looked before.</figcaption></figure></a>
|
||||
<a href="/assets/img/blog/media.png"><figure><img src="/assets/img/blog/media.png"><figcaption>How it looks now.<br>Note: the cut-off in the middle is meant to showcase the light and dark theme.</figcaption></figure></a></section>
|
||||
<section><a href="/assets/img/blog/shelf.png"><figure><img src="/assets/img/blog/shelf.png" alt=""><figcaption>How the shelving featuring my personal favorite games and music looked before.</figcaption></figure></a>
|
||||
<a href="/assets/img/blog/media.png"><figure><img src="/assets/img/blog/media.png" alt=""><figcaption>How it looks now.<br>Note: the cut-off in the middle is meant to showcase the light and dark theme.</figcaption></figure></a></section>
|
||||
|
||||
I largely wanted to move away from it because, I mean... it's all a huge `css` crime, and I just wanted something less flashy, really.
|
||||
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
description: Working with Linux
|
||||
date: 2024-06-22
|
||||
modified: 2025-09-09
|
||||
blurb: <p><a href="https://blog.codinghorror.com/the-works-on-my-machine-certification-program/"><img src="/assets/img/blog/works-on-my-machine.png"></a></p><p>whatever i'm using might not necessarily work for you</p>
|
||||
blurb: <p><a href="https://blog.codinghorror.com/the-works-on-my-machine-certification-program/"><img src="/assets/img/blog/works-on-my-machine.png" alt="Shiny golden stamp with text 'Works on my machine'"></a></p><p>whatever i'm using might not necessarily work for you</p>
|
||||
avatar: /assets/img/art/sundae_glistening.png
|
||||
---
|
||||
## {{page.fileSlug}}
|
||||
|
@ -10,9 +10,9 @@ avatar: /assets/img/art/sundae_glistening.png
|
|||
|
||||
<section aria-label="Addendum">
|
||||
|
||||
With Microsoft announcing that {%ai"https://support.microsoft.com/en-us/windows/windows-10-support-ends-on-october-14-2025-2ca8b313-1946-43d3-b55c-2b95b107f281"%}Windows 10 will stop being supported after October 14, 2025{%endai%}, I highly recommend looking into Linux if your device is on Windows 10 and you don't want to buy a whole new device that meets the system requirements of 11.
|
||||
With Microsoft announcing that [Windows 10 will stop being supported after October 14, 2025](https://support.microsoft.com/en-us/windows/windows-10-support-ends-on-october-14-2025-2ca8b313-1946-43d3-b55c-2b95b107f281"), I highly recommend looking into Linux if your device is on Windows 10 and you don't want to buy a whole new device that meets the system requirements of 11.
|
||||
|
||||
Here's {%ai"https://kde.org/for/w10-exiles/"%}a handy resource{%endai%} if you aren't sure how to proceed.
|
||||
[Here's a handy resource](https://kde.org/for/w10-exiles/) if you aren't sure how to proceed.
|
||||
|
||||
I'm not paid or anything to mention this, I just think **we shouldn't have to put up with capitalist bullshit to continue using a device.**
|
||||
</section>
|
||||
|
@ -37,17 +37,17 @@ So... the hardest part about moving is, well, how would I move to Linux? There's
|
|||
|
||||
### Decisions
|
||||
|
||||
I went to set up a virtual machine to understand what I'd want out of a "new" operating system, so I tried out {%ai"https://fedoraproject.org/#editions"%}Fedora Workstation{%endai%} at first and it felt pretty seamless, I didn't have to use the terminal for much of anything.
|
||||
I went to set up a virtual machine to understand what I'd want out of a "new" operating system, so I tried out [Fedora Workstation](https://fedoraproject.org/#editions) at first and it felt pretty seamless, I didn't have to use the terminal for much of anything.
|
||||
I tinkered with it for a couple of days before deciding to look up system/media installers for Linux distributions (that are able to be run on Windows) and coming up empty-handed, cluelessly thinking that somehow only Windows manages to offer one.
|
||||
|
||||
...Until I found {%ai"https://wiki.debian.org/DebianInstaller/Loader"%}Debian's System Installer for Windows (win32loader){%endai%}, which I tried running under a Windows 11 virtual machine to see if it would fail to install, and it didn't!
|
||||
...Until I found [Debian's System Installer for Windows (win32loader)](https://wiki.debian.org/DebianInstaller/Loader), which I tried running under a Windows 11 virtual machine to see if it would fail to install, and it didn't!
|
||||
So I just went ahead and installed it over my actual Windows partition (backing up my documents prior).
|
||||
|
||||
<aside>{%ai"https://www.ventoy.net"%}Ventoy{%endai%} is able to <a href="https://www.ventoy.net/en/faq.html">boot from a HDD/SSD</a> if you are willing to sacrifice one (temporarily) to install it on there.
|
||||
<aside><img src="https://www.google.com/s2/favicons?domain=https://ventoy.net" alt=""><a href="https://www.ventoy.net/en/faq.html">Ventoy is able to boot from a HDD/SSD</a> if you are willing to sacrifice one (temporarily) to install it on there.
|
||||
|
||||
<b>I didn't know this</b>, and I've hardly seen anyone bring up solutions, besides off-handed suggestions about using a flash drive—and every guide basically centering around that notion, but a flash drive is <em>not necessary.</em></aside>
|
||||
|
||||
I would <u>not recommend</u> installing {%ai"https://www.debian.org"%}Debian{%endai%} to anyone new to Linux whatsoever, or with the method I used.
|
||||
I would <u>not recommend</u> installing [Debian](https://www.debian.org) to anyone new to Linux whatsoever, or with the method I used.
|
||||
|
||||
Here's a little anecdote:
|
||||
|
||||
|
@ -63,11 +63,11 @@ If anything, at least I got some experience with the terminal, which I thought i
|
|||
|
||||
Besides Debian, so far I've tried:
|
||||
|
||||
* {%ai"https://fedoraproject.org/"%}Fedora{%endai%}
|
||||
* [Fedora](https://fedoraproject.org)
|
||||
_(Aforementioned in a virtual machine. Overall very solid, might come around to using it again)_
|
||||
* {%ai"https://manjaro.org/"%}Manjaro{%endai%}
|
||||
* [Manjaro](https://manjaro.org/)
|
||||
_(Tries too hard being beginner-friendly, needed to tinker to get my Nvidia GPU to work) as of v24/Wynsdey_
|
||||
* {%ai"https://endeavouros.com/"%}EndeavourOS{%endai%}
|
||||
* [EndeavourOS](https://endeavouros.com/)
|
||||
_(Works out of the box with my Nvidia GPU, minimal issues)_
|
||||
|
||||
And out of them, Endeavour has been the most comfortable experience for me, so far.
|
||||
|
@ -82,19 +82,19 @@ It's personally been no cost to me with the hobbies I have, keyword: <u>personal
|
|||
Here's a few programs I used before switching over, that didn't/won't have a Linux port:
|
||||
|
||||
|
||||
* {%ai"https://notepad-plus-plus.org"%}Notepad++{%endai%}, replaced by {%ai"https://vscodium.com/"%}VSCodium{%endai%}
|
||||
* {%ai"https://getpaint.net/"%}paint.net{%endai%}, replaced by {%ai"https://www.gimp.org"%}GIMP{%endai%}
|
||||
* {%ai"https://www.foobar2000.org"%}foobar2000{%endai%}, replaced by {%ai"https://deadbeef.sourceforge.io/"%}DeaDBeeF{%endai%}
|
||||
* {%ai"https://www.nvidia.com/en-us/geforce/geforce-experience/shadowplay/"%}Nvidia ShadowPlay{%endai%}, replaced by {%ai"https://obsproject.com"%}OBS Studio{%endai%}, which I achieved by toggling "Enable Replay Buffer" in the Output settings and setting up keybinds associated.
|
||||
* [Notepad++](https://notepad-plus-plus.org), replaced by [VSCodium](https://vscodium.com/)
|
||||
* [paint.net](https://getpaint.net/), replaced by [GIMP](https://www.gimp.org)
|
||||
* [foobar2000](https://www.foobar2000.org), replaced by [DeaDBeeF](https://deadbeef.sourceforge.io/)
|
||||
* [Nvidia ShadowPlay](https://www.nvidia.com/en-us/geforce/geforce-experience/shadowplay/), replaced by [OBS Studio](https://obsproject.com), which I achieved by toggling "Enable Replay Buffer" in the Output settings and setting up keybinds associated.
|
||||
|
||||
... that being said, the programs that I do miss using from Windows are:
|
||||
|
||||
* {%ai"https://getsharex.com/"%}ShareX{%endai%}
|
||||
* [ShareX](https://getsharex.com/)
|
||||
_(screenshotting utility)_
|
||||
* {%ai"https://www.voidtools.com/"%}Everything by voidtools{%endai%}
|
||||
* [Everything by voidtools](https://www.voidtools.com/)
|
||||
_(fast file search/indexer)_
|
||||
|
||||
<aside>If you are curious about what kind of programs Linux offers, take a look at {%ai"https://apps.kde.org"%}KDE apps{%endai%}, {%ai"https://apps.gnome.org"%}GNOME apps{%endai%} and {%ai"https://flathub.org/"%}Flathub{%endai%}.</aside>
|
||||
<aside>If you are curious about what kind of programs Linux offers, take a look at <img src="https://www.google.com/s2/favicons?domain=https://kde.org" alt=""><a href="https://apps.kde.org">KDE apps</a>, <img src="https://www.google.com/s2/favicons?domain=https://gnome.org" alt=""><a href="https://apps.gnome.org">GNOME apps</a> and <img src="https://www.google.com/s2/favicons?domain=https://flathub.org" alt=""><a href="https://flathub.org">Flathub</a>.</aside>
|
||||
|
||||
ShareX is by and large the most useful tool for taking screenshots and packed with some miscellaneous multi-purpose tools inside, both [Spectacle](https://apps.kde.org/spectacle/) and [Flameshot](https://flathub.org/apps/org.flameshot.Flameshot) felt a bit lackluster in comparison.
|
||||
Despite that, I've been using Spectacle and it's pretty good if I look past that.
|
||||
|
@ -104,7 +104,7 @@ Everything by voidtools is just muscle memory as a result of Windows's slow sear
|
|||
|
||||
### GAMING
|
||||
|
||||
Linux can run a ton of games with {%ai"https://www.protondb.com/"%}Proton{%endai%}
|
||||
Linux can run a ton of games with [Proton](https://www.protondb.com)
|
||||
I'm not super knowledgeable about its inner workings, so I'm not gonna try to sound like I do.
|
||||
|
||||
...yeah I don't have much to say about this at the time of writing, I've basically been shuffling 3 games whenever I do play something lately. It's not been bad so far!
|
|
@ -1 +1,3 @@
|
|||
Created my Neocities account!
|
||||
## {{page.fileSlug|readable}}
|
||||
|
||||
- Created my Neocities account!
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
- Added [Home](/home), [Gallery](/gallery) and ~~About~~
|
||||
- ~~About~~ contains Pokémon boxes and a small bio
|
||||
- Added links to other pages
|
||||
|
|
|
@ -2,6 +2,8 @@
|
|||
title: Version 0
|
||||
---
|
||||
|
||||
## {{page.fileSlug|readable}} <code>{{title}}</code>
|
||||
|
||||

|
||||
|
||||
- Added sidebar
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
Working on my [interests](/home#interests)...
|
||||
## {{page.fileSlug|readable}}
|
||||
|
||||
- Working on my [interests](/home#interests)...
|
||||
- Added ~~Favorite Pokémon~~
|
||||
- Moved Pokémon boxes from ~~About~~
|
||||
- Changed Sunny's portrait to a new revision of his PETSCII avatar
|
||||
|
|
|
@ -1 +1,3 @@
|
|||
[Gallery](/gallery) implemented
|
||||
## {{page.fileSlug|readable}}
|
||||
|
||||
- [Gallery](/gallery) implemented
|
||||
|
|
|
@ -2,6 +2,8 @@
|
|||
title: Version 1
|
||||
---
|
||||
|
||||
## {{page.fileSlug|readable}} <code>{{title}}</code>
|
||||
|
||||

|
||||
|
||||
- Changed backgrounds
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
- Changed [Gallery](/gallery)
|
||||
- Implemented [CSS Grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout)
|
||||
- Removed Sunny's portrait from the sidebar
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
- Changed ~~About~~
|
||||
- Added a collection of games and music that I enjoy
|
||||
- Added 88x31 buttons to the footer of the page
|
||||
|
|
|
@ -1 +1,3 @@
|
|||
Made a 88x31 button! [](/)
|
||||
## {{page.fileSlug|readable}}
|
||||
|
||||
- Made a 88x31 button! [](/)
|
|
@ -1,6 +1,8 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
- Re-added and moved Sunny's portrait to my [bio](/home#bio)
|
||||
- Changed [Gallery](/gallery)
|
||||
- Added sections for [original characters](/gallery/#original-characters) and [fan art](/gallery#fan-art)
|
||||
- Changed [Home](/home)
|
||||
- Added last updated date
|
||||
- Added links to section headings
|
||||
- Added permalinks
|
||||
|
|
|
@ -1 +1,3 @@
|
|||
Wrote more about my [interests](/home#interests)
|
||||
## {{page.fileSlug|readable}}
|
||||
|
||||
- Wrote more about my [interests](/home#interests)
|
|
@ -1 +1,3 @@
|
|||
Starting work on a re-design. I fixed a few inconsistencies beforehand
|
||||
## {{page.fileSlug|readable}}
|
||||
|
||||
- Starting work on a re-design. I fixed a few inconsistencies beforehand
|
|
@ -2,6 +2,8 @@
|
|||
title: Version 2
|
||||
---
|
||||
|
||||
## {{page.fileSlug|readable}} <code>{{title}}</code>
|
||||
|
||||

|
||||
|
||||
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,16 +2,18 @@
|
|||
title: Version 3
|
||||
---
|
||||
|
||||
## {{page.fileSlug|readable}} <code>{{title}}</code>
|
||||
|
||||

|
||||
|
||||
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](https://developer.mozilla.org/en-US/curriculum/core/semantic-html/).
|
||||
|
||||
- Added [Changelog](/changelog)!
|
||||
- Merged Sidebar and topbar into a single `JS` file
|
||||
- Previously implemented with seperate `scripts` for each list, which meant that I still had to update every page
|
||||
- Merged Sidebar and topbar into a single `js` file
|
||||
- Previously implemented with seperate `script` for each list, which meant that I still had to update every page
|
||||
- Buttons are more visually distinct and don't have issues with readability
|
||||
- No more shiny buttons...
|
||||
- Changed backgrounds
|
||||
- Converted from `SVG` to `PNG`
|
||||
- Converted from `svg` to `png`
|
||||
- This should hopefully fix most performance issues on low-end devices, like phones
|
||||
- Updated my 88x31 button [](/)
|
||||
|
|
|
@ -1,2 +1,4 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
- Changed ~~About~~
|
||||
- Updated the look of the jewel CD cases in my [interests](/home#interests)
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
Fixed a couple of small issues regarding mobile view
|
||||
## {{page.fileSlug|readable}}
|
||||
|
||||
- Fixed a couple of small issues regarding mobile view
|
||||
- Changed [Gallery](/gallery)
|
||||
- Artworks now work (ha) with keyboard navigation
|
||||
- Added pride flag stickers to my ~~art notes~~
|
||||
- Attribution:
|
||||
- (CC0 1.0) [treehouse.systems Gitea pride emoji repository](https://gitea.treehouse.systems/treehouse/emoji)
|
||||
- [treehouse.systems Gitea pride emoji repository](https://gitea.treehouse.systems/treehouse/emoji) (CC0 1.0)
|
||||
|
|
|
@ -1,2 +1,4 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
- 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
|
||||
|
|
|
@ -1,2 +1,4 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
- Drafted ~~Jukebox~~
|
||||
- I am bad at JavaScript
|
||||
|
|
|
@ -2,6 +2,8 @@
|
|||
title: Version 4
|
||||
---
|
||||
|
||||
## {{page.fileSlug|readable}} <code>{{title}}</code>
|
||||
|
||||

|
||||
|
||||
- Shiny buttons are BACK!
|
||||
|
@ -12,7 +14,7 @@ title: Version 4
|
|||
- Added [Blog](/blog)
|
||||
- Removed ~~Favorite Pokémon~~
|
||||
- Moved back to ~~About~~ as randomized on-page-load sprites. It felt a bit excessive to have a whole page dedicated to something I don't think about that often
|
||||
- Replaced all `WEBP` images with lossy `PNG` via [pngquant](https://pngquant.org/) and optimized most images with [oxipng](https://github.com/shssoichiro/oxipng)
|
||||
- Replaced all `webp` images with lossy `png` via [pngquant](https://pngquant.org/) and optimized most images with [oxipng](https://github.com/shssoichiro/oxipng)
|
||||
- Fixed weird behaviour with the [`float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float) on the sidebar
|
||||
- Hovering over items would sometimes reset the value back to initial. Substituted it with padding on the `main` and `aside` elements
|
||||
- Changed [Changelog](/changelog)
|
||||
|
@ -21,7 +23,7 @@ title: Version 4
|
|||
- Moved to the top left corner
|
||||
- Moved `header` text for current page next to the top of the sidebar
|
||||
- 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`
|
||||
- Added a sticker to `footer`
|
||||
- Randomized on-page-load
|
||||
|
|
|
@ -2,9 +2,12 @@
|
|||
title: Version 5
|
||||
---
|
||||
|
||||
## {{page.fileSlug|readable}} <code>{{title}}</code>
|
||||
|
||||

|
||||
|
||||
Re-wrote the website with [Eleventy](https://11ty.dev/). Read the [accompanying blog post](/blog/break-time/)
|
||||
Re-wrote the website with [Eleventy](https://11ty.dev/).
|
||||
Read the [accompanying blog post](/blog/break-time/)
|
||||
|
||||
- Changed image directory
|
||||
- If you've linked my 88x31 button on your website, it's now located under `/assets/img/button` instead of `/img/buttons/` and named alphabetically
|
||||
|
|
|
@ -2,10 +2,11 @@
|
|||
title: Version 6
|
||||
---
|
||||
|
||||
## {{page.fileSlug|readable}} <code>{{title}}</code>
|
||||
|
||||

|
||||
|
||||
Re-wrote the site, again.
|
||||
|
||||
Read the [accompanying blog post](/blog/rewrite-2.0)
|
||||
|
||||
- Changed `footer`
|
||||
|
@ -21,7 +22,7 @@ Read the [accompanying blog post](/blog/rewrite-2.0)
|
|||
- Added a pawprint flair to `details`
|
||||
- Sunny is there again, sitting this time
|
||||
- Changed [Blog](/blog)
|
||||
- Fixed `h3 a` links not working in blog posts
|
||||
- Fixed permalinks not working in blog posts
|
||||
- Added functionality for blog-specific avatars and image attachments to the postscript blurb
|
||||
- Removed ~~Art notes~~
|
||||
- Merged into gallery entries
|
||||
|
|
|
@ -1,8 +1,11 @@
|
|||
- Polished the old theme
|
||||
## {{page.fileSlug|readable}}
|
||||
|
||||
Polished the old theme
|
||||
|
||||
- Changed [Home](/home)
|
||||
- Added `details` to [interests](/home#interests)
|
||||
- Changed [Gallery](/gallery)
|
||||
- Artwork pages themselves are now more modular
|
||||
- Added a counter if there's multiple artworks in one entry
|
||||
- Added missing `h1 a` links
|
||||
- Added missing permalinks
|
||||
- Changed `font-size` on some pages to be slightly bigger
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
- Changed sidebar
|
||||
- Added icon for [Changelog](/changelog)
|
||||
- For some reason I forgot give it an icon, it previously used the Gallery icon
|
||||
|
|
|
@ -1,4 +1,7 @@
|
|||
- Website (hopefully) fixed for Chromium-based browsers _...grr_
|
||||
## {{page.fileSlug|readable}}
|
||||
|
||||
Website (hopefully) fixed for Chromium-based browsers _...grr_
|
||||
|
||||
- Changed sidebar
|
||||
- Added an animated tiled paw background for desktop view
|
||||
- Changed [Home](/home)
|
||||
|
|
10
_src/data/changelog/2025-09-11.md
Normal file
10
_src/data/changelog/2025-09-11.md
Normal file
|
@ -0,0 +1,10 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
Actively trying to accommodate for accessibility
|
||||
|
||||
- Added `header` to pages back in
|
||||
- Added `aria-hidden` to sidebar icons
|
||||
- Changed [Changelog](/changelog)
|
||||
- Added permalinks
|
||||
- Attribution:
|
||||
- [WAVE Web Accessibility Evaluation Tools](https://wave.webaim.org/)
|
|
@ -1,14 +1,32 @@
|
|||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>
|
||||
{{site.name}}{% if title %} - {{title}}{% endif %}
|
||||
</title>
|
||||
<link rel="icon" href="/assets/img/icon/sundae.png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="/assets/css/reset.css">
|
||||
<link rel="stylesheet" href="/assets/css/default/index.css">
|
||||
<title>{{site.name}}{% if title %} - {{title}}{% endif %}</title>
|
||||
<link rel="icon" href="/assets/img/icon/sundae.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="/assets/css/reset.css" />
|
||||
<link rel="stylesheet" href="/assets/css/default/index.css" />
|
||||
</head>
|
||||
<body id="index">
|
||||
<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>
|
||||
<header>
|
||||
<h1>
|
||||
<a href="/home">
|
||||
<img src="/assets/img/theme/citrus/enter.png" alt="Link to home page" />
|
||||
</a>
|
||||
</h1>
|
||||
</header>
|
||||
<main>
|
||||
<a rel="me" href="https://denden.world/@fossilisk" style="display: none"
|
||||
>Mastodon</a
|
||||
>
|
||||
</main>
|
||||
<footer>
|
||||
<p>
|
||||
This site eats cookies for breakfast.
|
||||
<br />
|
||||
<i>*nom nom nom*</i>
|
||||
<br />
|
||||
<sub>(only used for simple interactivity)</sub>
|
||||
</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -6,6 +6,6 @@ icon: "M10 25H21V22H10Zm4-13H10v3h4v4h3V15h4V12H17V8H14ZM5 3H20l7 7V30H5Z"
|
|||
|
||||
{%for update in collections.updates reversed%}
|
||||
<article>
|
||||
<h2><time datetime="{{update.page.fileSlug|ISO}}">{{update.page.fileSlug|readable}}</time>{%if update.data.title%}<code>{{update.data.title}}</code>{%endif%}</h2>{{ update.content }}
|
||||
{{ update.content }}
|
||||
</article>
|
||||
{%endfor%}
|
|
@ -48,7 +48,7 @@ icon: "M20 20V30h8V12L16 2 4 12V30h8V20Z"
|
|||
{%for item in media-albums.items%}
|
||||
<li>
|
||||
<a href="{{item.src}}">
|
||||
<div><img src="{{item.cover}}" /></div>
|
||||
<div><img src="{{item.cover}}" alt="Album art cover for {{item.title}}"/></div>
|
||||
<span>{{item.artist}} - {{item.title}}</span>
|
||||
</a>
|
||||
</li>
|
||||
|
@ -61,7 +61,7 @@ icon: "M20 20V30h8V12L16 2 4 12V30h8V20Z"
|
|||
{%for item in media-modules.items%}
|
||||
<li>
|
||||
<a href="{{item.src}}">
|
||||
<div><img src="/assets/img/media/music/{{item.tracker}}.png" /></div>
|
||||
<div><img src="/assets/img/media/music/{{item.tracker}}.png" alt="{{item.tracker|capitalize}} module"/></div>
|
||||
<span>{{item.artist}} - {{item.title}}</span>
|
||||
</a>
|
||||
</li>
|
||||
|
@ -74,7 +74,7 @@ icon: "M20 20V30h8V12L16 2 4 12V30h8V20Z"
|
|||
{%for item in media-manga.items%}
|
||||
<li>
|
||||
<a href="{{item.src}}">
|
||||
<div><img src="{{item.cover}}" /></div>
|
||||
<div><img src="{{item.cover}}" alt="Manga art cover for {{item.alt}}"/></div>
|
||||
<span>{{item.title}}</span>
|
||||
</a>
|
||||
</li>
|
||||
|
@ -89,13 +89,13 @@ icon: "M20 20V30h8V12L16 2 4 12V30h8V20Z"
|
|||
<ul role="list">
|
||||
{%for item in 88x31-mine.items%}
|
||||
<li>
|
||||
<a href="{{item.src}}" title="{{item.name}}">
|
||||
<a href="{{item.src}}" title="sunbun">
|
||||
<img
|
||||
{%if
|
||||
item.id%}id="{{item.id}}"
|
||||
{%endif%}
|
||||
src="{{item.button}}"
|
||||
alt="{{item.alt}}" />
|
||||
alt="Sunny's website" />
|
||||
</a>
|
||||
</li>
|
||||
{%endfor%}
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import markdownIt from "markdown-it";
|
||||
import markdownItAnchor from "markdown-it-anchor";
|
||||
import { format } from "date-fns";
|
||||
import pluginInlineLinkFavicon from "eleventy-plugin-inline-link-favicon"
|
||||
|
||||
export default async function (eleventyConfig) {
|
||||
|
||||
|
@ -24,8 +23,6 @@ export default async function (eleventyConfig) {
|
|||
eleventyConfig.addPassthroughCopy(assets);
|
||||
eleventyConfig.addWatchTarget(assets);
|
||||
|
||||
eleventyConfig.addPlugin(pluginInlineLinkFavicon);
|
||||
|
||||
eleventyConfig.addFilter("firstSegment", url => (typeof url === 'string' ? url.split('/')[1] || '' : ''));
|
||||
|
||||
eleventyConfig.addFilter("sortByFirstDate", items => items.sort((a, b) => new Date(b.data.images[0].date) - new Date(a.data.images[0].date)));
|
||||
|
|
7
package-lock.json
generated
7
package-lock.json
generated
|
@ -11,7 +11,6 @@
|
|||
"dependencies": {
|
||||
"@11ty/eleventy": "github:11ty/eleventy",
|
||||
"date-fns": "^4.1.0",
|
||||
"eleventy-plugin-inline-link-favicon": "^1.1.0",
|
||||
"markdown-it": "^14.1.0",
|
||||
"markdown-it-anchor": "^9.2.0"
|
||||
}
|
||||
|
@ -586,12 +585,6 @@
|
|||
"integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/eleventy-plugin-inline-link-favicon": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/eleventy-plugin-inline-link-favicon/-/eleventy-plugin-inline-link-favicon-1.1.0.tgz",
|
||||
"integrity": "sha512-ZhzQ9WYwhrHBGHv1fBwK1y2QYYJt8jX4oUL3jB82AWCv03WpiMBK77OIJcGBo7XQdo4gIm6oPQZ8tG/150ApeA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/encodeurl": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
|
||||
|
|
|
@ -13,7 +13,6 @@
|
|||
"dependencies": {
|
||||
"@11ty/eleventy": "github:11ty/eleventy",
|
||||
"date-fns": "^4.1.0",
|
||||
"eleventy-plugin-inline-link-favicon": "^1.1.0",
|
||||
"markdown-it": "^14.1.0",
|
||||
"markdown-it-anchor": "^9.2.0"
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue