overhauled old theme
This commit is contained in:
parent
f18a342ae5
commit
fb24c6a302
82 changed files with 1378 additions and 1371 deletions
|
|
@ -19,6 +19,12 @@
|
|||
"name": "cabl",
|
||||
"src": "https://cabl.rodeo/"
|
||||
},
|
||||
{
|
||||
"alt": "catshaped's website",
|
||||
"button": "/assets/img/button/catshaped.gif",
|
||||
"name": "catshaped",
|
||||
"src": "https://catshaped.neocities.org/"
|
||||
},
|
||||
{
|
||||
"alt": "Drakonic's website",
|
||||
"button": "/assets/img/button/drakonic.gif",
|
||||
|
|
@ -55,6 +61,12 @@
|
|||
"name": "the mice nest",
|
||||
"src": "https://micenest.xyz/"
|
||||
},
|
||||
{
|
||||
"alt": "Okesska's website",
|
||||
"button": "/assets/img/button/okesska_8831_final2.gif",
|
||||
"name": "kess!",
|
||||
"src": "https://okesska.neocities.org/"
|
||||
},
|
||||
{
|
||||
"alt": "Pebble's website",
|
||||
"button": "/assets/img/button/pebble.gif",
|
||||
|
|
|
|||
|
|
@ -61,6 +61,12 @@
|
|||
"name": "Konqi!",
|
||||
"src": "https://community.kde.org/Konqi"
|
||||
},
|
||||
{
|
||||
"alt": "Krita homepage",
|
||||
"button": "/assets/img/button/yummy-cricket_krita.png",
|
||||
"name": "Krita",
|
||||
"src": "https://krita.org/"
|
||||
},
|
||||
{
|
||||
"alt": "Lospec random palette page",
|
||||
"button": "/assets/img/button/lospec.png",
|
||||
|
|
@ -98,6 +104,12 @@
|
|||
"name": "No one's around to help.",
|
||||
"src": "https://youtube.com/watch?v=yD2FSwTy2lw"
|
||||
},
|
||||
{
|
||||
"alt": "Linux fox designed by Alan Mackey",
|
||||
"button": "/assets/img/button/powered-by-linux.png",
|
||||
"name": "Powered by Linux",
|
||||
"src": "https://web.archive.org/web/19970517213342/www.early.com/~emackey/linux/"
|
||||
},
|
||||
{
|
||||
"alt": "Pngquant home page",
|
||||
"button": "/assets/img/button/pngquant.gif",
|
||||
|
|
@ -130,7 +142,7 @@
|
|||
"src": "https://validator.w3.org/"
|
||||
},
|
||||
{
|
||||
"alt": "Xenia (linux mascot) tribute page",
|
||||
"alt": "Xenia (linux fox mascot) tribute page",
|
||||
"button": "/assets/img/button/xenia.gif",
|
||||
"name": "Linux now!",
|
||||
"src": "https://xenia.efi.pages.gay/"
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"items": [
|
||||
{
|
||||
"artist": "test",
|
||||
"src": "/",
|
||||
"title": "test"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
{
|
||||
"name": "sundae's bunspace"
|
||||
"name": "sunny's bunspace"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,102 +3,116 @@ paw: "m 15.700739,16.184194 c 0,4.483 -2.555,2.038 -5.7060001,2.038 -3.151,0 -5.
|
|||
back: "M2 16 18 4h6L12 14H50v4H12L24 28H18Z"
|
||||
theme: "M16 6a1 1 0 010 20Zm0-4a1 1 0 000 28A1 1 0 0016 2"
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>
|
||||
{{ 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">
|
||||
<meta charset="utf-8">
|
||||
<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/" %}
|
||||
<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 %}
|
||||
</head>
|
||||
<body id="{{ page.url|firstSegment }}">
|
||||
<nav>
|
||||
<details open="">
|
||||
<summary>
|
||||
<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') %}
|
||||
<ul role="list">
|
||||
<li>
|
||||
<a href="../">
|
||||
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="{{ back }}"></path>
|
||||
</svg>
|
||||
Back
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<button id="theme-toggle">
|
||||
<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 %}
|
||||
<li>
|
||||
<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>
|
||||
</li>
|
||||
{% endfor %}
|
||||
<script src="/assets/js/theme.js"></script>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
<details open="">
|
||||
<summary>
|
||||
<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 %}
|
||||
<li>
|
||||
<a href="{{ item.src }}"><img src="{{ item.icon }}" alt="" aria-hidden="true">{{ item.title }}</a>
|
||||
</li>
|
||||
{% 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 }}
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
</html>
|
||||
<head>
|
||||
<title>
|
||||
{% if page.url.split('/') %}
|
||||
{{ page.url.split('/')[1] }} -
|
||||
{% if page.url.split('/')[2] %}
|
||||
{{ page.url.split('/')[2] | replace("-", " ") }} |
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{{ site.name | safe }}
|
||||
</title>
|
||||
<link rel="icon" href="/assets/img/icon/sundae.png">
|
||||
{% include "meta.njk" %}
|
||||
<link rel="stylesheet" href="/assets/css/reset.css">
|
||||
<link rel="stylesheet" href="/assets/css/default/default.css">
|
||||
<link rel="preload" href="/assets/css/citrus/default.css" as="style">
|
||||
<link rel="stylesheet" href="/assets/css/default/system.css" id="themed">
|
||||
{% 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.split('/')[1]|slugify) !== -1 %}
|
||||
<link rel="stylesheet" href="/assets/css/default/{{ page.url.split('/')[1]|slugify }}.css">
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</head>
|
||||
<body id="{{ page.url.split('/')[1]|slugify }}">
|
||||
<nav>
|
||||
<details open="">
|
||||
<summary>
|
||||
Navigation
|
||||
</summary>
|
||||
{% set currentUrl %}{{ page.url }}{% endset %}
|
||||
{% set sortedPages = collections.pages|sort(attribute='data.order') %}
|
||||
<ul role="list">
|
||||
<li>
|
||||
<a href="../">
|
||||
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="{{ back }}"></path>
|
||||
</svg>
|
||||
Back
|
||||
</a>
|
||||
</li>
|
||||
{% for page in sortedPages %}
|
||||
<li>
|
||||
<a href="{{ page.url }}" {% if currentUrl.split('/')[1] === page.url.split('/')[1]|slugify %} aria-current="page" {% endif %}>
|
||||
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="{{ page.data.icon }}"></path>
|
||||
</svg>
|
||||
{{ page.data.title }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
<details open="">
|
||||
<summary>
|
||||
Options
|
||||
</summary>
|
||||
<ul role="list">
|
||||
<li>
|
||||
<button id="theme-toggle">
|
||||
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="{{ theme }}">
|
||||
</svg>
|
||||
Toggle theme
|
||||
</button>
|
||||
</li>
|
||||
</li>
|
||||
</ul>
|
||||
<script src="/assets/js/theme.js"></script>
|
||||
<script src="/assets/js/motion.js"></script>
|
||||
</details>
|
||||
<details open="">
|
||||
<summary>
|
||||
Outgoing
|
||||
</summary>
|
||||
<ul role="list">
|
||||
{% for item in outgoing.items %}
|
||||
<li>
|
||||
<a href="{{ item.src }}"><img src="{{ item.icon }}" alt="" aria-hidden="true">{{ item.title }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</details>
|
||||
<script src="/assets/js/details-save.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</nav>
|
||||
<header>
|
||||
<h1>
|
||||
{% for page in sortedPages %}
|
||||
{% if currentUrl.split('/')[1] === page.url.split('/')[1]|slugify %}
|
||||
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="{{ page.data.icon }}"></path>
|
||||
</svg>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{{ page.url.split('/')[1]|slugify|capitalize }}
|
||||
</h1>
|
||||
</header>
|
||||
<main>
|
||||
{{ content | safe }}
|
||||
</main>
|
||||
<footer>
|
||||
<span id="message" aria-label="Random footer message">made with love</span>
|
||||
<script src="/assets/js/footer.js"></script>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,6 @@ layout: base
|
|||
<article>
|
||||
{{content|safe}}
|
||||
<section aria-label="Postscript">
|
||||
{{blurb|safe}} <img src="{{avatar}}" alt="Profile picture">
|
||||
{{blurb|safe}} <span><img src="{{avatar}}" alt="Profile picture"/></span>
|
||||
</section>
|
||||
</article>
|
||||
|
|
@ -3,27 +3,60 @@ layout: base
|
|||
---
|
||||
|
||||
<article id="art">
|
||||
<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="" {%if image.pixel%} style="image-rendering: pixelated" {%endif%}>
|
||||
<figcaption>{{image.alt}}</figcaption>
|
||||
<time datetime="{{image.date|ISO}}">{{image.date|readable}}</time>
|
||||
</figure>
|
||||
</a>
|
||||
{%endfor%}
|
||||
</section>
|
||||
{%for attachment in attachments%}
|
||||
<section class="attachment">
|
||||
<a href="{{attachment.src}}">
|
||||
<figure>
|
||||
<img src="{{attachment.src}}">
|
||||
<figcaption>{{attachment.alt}}</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</section>
|
||||
{%endfor%}
|
||||
</article>
|
||||
<h1>{{ page.fileSlug }}
|
||||
{% for flag in flags %}
|
||||
<img src="{{ flag.src }}">
|
||||
{% endfor %}
|
||||
</h1>
|
||||
{{ content|safe }}
|
||||
{% if programs and programs|length > 0 %}
|
||||
<p>Made with:</p>
|
||||
<ul>
|
||||
{% for program in programs %}
|
||||
<li>
|
||||
<span>
|
||||
<img src="https://www.google.com/s2/favicons?domain={{ program.src }}" alt="">
|
||||
<a href="{{ program.src }}">{{ program.name }}</a>
|
||||
</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
{% if palettes and palettes|length > 0 %}
|
||||
<p>Color palette used:</p>
|
||||
{% for palette in palettes %}
|
||||
<ul>
|
||||
<li>
|
||||
<span>
|
||||
{% if palette.src %}
|
||||
<img src="https://www.google.com/s2/favicons?domain={{ palette.src }}" alt="">
|
||||
<a href="{{ palette.src }}">
|
||||
{% endif %}
|
||||
{{ palette.name }}</a>
|
||||
</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
<section>
|
||||
{% for image in images %}
|
||||
<a href="{{ image.src }}">
|
||||
<figure>
|
||||
<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>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</section>
|
||||
{% for attachment in attachments %}
|
||||
<section class="attachment">
|
||||
<a href="{{ attachment.src }}">
|
||||
<figure>
|
||||
<img src="{{ attachment.src }}">
|
||||
<figcaption>{{ attachment.alt }}</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</section>
|
||||
{% endfor %}
|
||||
</article>
|
||||
7
_src/_includes/meta.njk
Normal file
7
_src/_includes/meta.njk
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8">
|
||||
<meta property="og:url" content="https://sunbun.neocities.org/">
|
||||
<meta property="og:type" content="site">
|
||||
<meta property="og:title" content="Sundae's Bunspace">
|
||||
<meta property="og:description" content="Sunbun's personal website :3">
|
||||
<meta property="og:image" content="/assets/img/opengraph/site.png">
|
||||
106
_src/assets/css/citrus/blog.css
Normal file
106
_src/assets/css/citrus/blog.css
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
#blog {
|
||||
background-attachment: local, fixed;
|
||||
background-color: var(--light);
|
||||
background-image: var(--dot),
|
||||
linear-gradient(var(--citrus-mix-dark) 0% 10%, var(--citrus-dark) 100%);
|
||||
background-size: 6px, contain;
|
||||
background-blend-mode: overlay, normal;
|
||||
animation: none;
|
||||
& article {
|
||||
border-radius: 0;
|
||||
background-color: var(--citrus-light);
|
||||
background-image: var(--noise);
|
||||
background-size: auto;
|
||||
background-repeat: repeat;
|
||||
box-shadow: inset 0 -2rem 3rem -4rem var(--dark), var(--shadow-heavy);
|
||||
& aside {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
background-color: var(--citrus-mix-light);
|
||||
border-color: var(--citrus-mix);
|
||||
border-radius: 0;
|
||||
}
|
||||
& pre {
|
||||
border-radius: 4px;
|
||||
color: var(--citrus-secondary);
|
||||
background-color: var(--citrus-dark-extra);
|
||||
background-size: 4px;
|
||||
}
|
||||
& [aria-label="Post warning"] {
|
||||
background-color: var(--citrus-primary);
|
||||
}
|
||||
& [aria-label="Addendum"] {
|
||||
border-image-source: linear-gradient(
|
||||
45deg,
|
||||
var(--citrus-primary),
|
||||
var(--citrus-secondary)
|
||||
);
|
||||
background-color: var(--citrus-primary);
|
||||
}
|
||||
& s {
|
||||
text-decoration-color: #d00;
|
||||
}
|
||||
& [aria-label="Postscript"] {
|
||||
& span:has([alt]) {
|
||||
&::after {
|
||||
content: "";
|
||||
width: calc(var(--avatar) - 10px);
|
||||
height: calc(var(--avatar) - 10px);
|
||||
position: absolute;
|
||||
margin: 5px;
|
||||
background-image: linear-gradient(
|
||||
color-mix(in lch, var(--light), transparent),
|
||||
transparent
|
||||
);
|
||||
box-shadow: inset 0 0 2px 0 var(--dark);
|
||||
}
|
||||
}
|
||||
& [alt="Profile picture"] {
|
||||
color: unset;
|
||||
border-radius: inherit;
|
||||
border: 2px solid;
|
||||
border-image-source: linear-gradient(
|
||||
to bottom,
|
||||
var(--citrus-mix-light),
|
||||
var(--citrus-secondary)
|
||||
);
|
||||
border-image-slice: 1;
|
||||
border-width: 3px;
|
||||
box-sizing: inherit;
|
||||
padding: 2px;
|
||||
background-image: radial-gradient(
|
||||
ellipse at 50% -0%,
|
||||
var(--light) 20%,
|
||||
var(--dark) 150%
|
||||
), var(--pansexual);
|
||||
background-blend-mode: overlay, normal;
|
||||
background-size: cover, 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
box-shadow: 0 0 0 2px var(--citrus-mix-dark),
|
||||
inset 0 0 0 2px var(--citrus-mix), var(--shadow-light);
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
& #posts {
|
||||
& a {
|
||||
border-width: 4px;
|
||||
box-shadow: var(--shadow-light);
|
||||
border-radius: 0;
|
||||
& p {
|
||||
color: initial;
|
||||
}
|
||||
& p:not(:last-child) {
|
||||
color: var(--citrus-dark);
|
||||
}
|
||||
&:not(:hover, :focus) {
|
||||
background-color: var(--citrus-light);
|
||||
border-color: var(--citrus-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#blog:not(:has(#posts)) header {
|
||||
text-align: initial !important;
|
||||
}
|
||||
|
|
@ -1,259 +0,0 @@
|
|||
@import url("./variables.css");
|
||||
@import url("../default/variables.css");
|
||||
@import url("./nav.css");
|
||||
|
||||
#bio,
|
||||
#interests,
|
||||
#badges,
|
||||
#artworks,
|
||||
#art {
|
||||
font-family: "Pangolin", sans-serif;
|
||||
}
|
||||
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;
|
||||
background-blend-mode: overlay, normal;
|
||||
}
|
||||
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;
|
||||
background-blend-mode: screen;
|
||||
border-color: var(--citrus-dark);
|
||||
color: var(--citrus-dark);
|
||||
& a,
|
||||
button {
|
||||
background-image: linear-gradient(
|
||||
var(--citrus-light),
|
||||
var(--citrus-primary) 20%,
|
||||
var(--citrus-primary) 80%,
|
||||
var(--citrus-light) 100%
|
||||
);
|
||||
box-shadow: 0 0 0 2px var(--citrus-dark),
|
||||
inset 0 0 8px 2px var(--citrus-primary);
|
||||
border-radius: var(--pad-l);
|
||||
color: inherit;
|
||||
&[aria-current] {
|
||||
box-shadow: 0 0 0 2px var(--citrus-dark),
|
||||
inset 0 0 4px 2px var(--citrus-dark);
|
||||
background-image: linear-gradient(
|
||||
var(--citrus-mix),
|
||||
var(--citrus-dark) 10%,
|
||||
chocolate
|
||||
);
|
||||
color: var(--citrus-light);
|
||||
}
|
||||
&:is(:hover, :focus):not([aria-current="page"]) {
|
||||
box-shadow: 0 0 0 2px var(--citrus-dark);
|
||||
transition: background-image var(--trans), border-color var(--trans),
|
||||
box-shadow var(--trans);
|
||||
}
|
||||
}
|
||||
& details {
|
||||
background-image: linear-gradient(
|
||||
-45deg,
|
||||
var(--citrus-primary),
|
||||
var(--citrus-secondary),
|
||||
var(--citrus-primary)
|
||||
);
|
||||
}
|
||||
}
|
||||
article {
|
||||
background-color: var(--citrus-light);
|
||||
border-radius: 0;
|
||||
background-image: var(--noise);
|
||||
box-shadow: var(--shadow);
|
||||
border: 0;
|
||||
& .header-anchor {
|
||||
border-radius: inherit;
|
||||
background-color: color-mix(in lch, magenta, white);
|
||||
&:is(:hover, :focus) {
|
||||
background-color: color-mix(in lch, magenta, white 30%);
|
||||
}
|
||||
}
|
||||
& code:not(pre *) {
|
||||
border-radius: inherit;
|
||||
background-color: yellow;
|
||||
box-shadow: 2px 2px 8px 0 color-mix(in lch, yellow, black 10%);
|
||||
}
|
||||
}
|
||||
/* home.css */
|
||||
#interests div:has(img)::after {
|
||||
display: none !important;
|
||||
}
|
||||
#interests li {
|
||||
& a {
|
||||
align-content: center;
|
||||
}
|
||||
&:has(div img) {
|
||||
margin: var(--pad-sm);
|
||||
box-shadow: var(--shadow);
|
||||
background: color-mix(in lch, yellow, white);
|
||||
&:nth-child(odd) {
|
||||
transform: rotate(1deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
ul:not([role]) li::before {
|
||||
background-color: #000;
|
||||
}
|
||||
a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
|
||||
filter: drop-shadow(4px 6px 0 var(--citrus-dark));
|
||||
}
|
||||
/* blog.css */
|
||||
#blog {
|
||||
background-color: #fff;
|
||||
background-image: var(--dot);
|
||||
background-size: 6px;
|
||||
background-attachment: local;
|
||||
background-repeat: repeat;
|
||||
background-blend-mode: difference;
|
||||
& main {
|
||||
&::before {
|
||||
background-image: var(--bg-sky);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
& article {
|
||||
border-radius: 0;
|
||||
background-color: #fff;
|
||||
background-image: var(--noise);
|
||||
background-size: auto;
|
||||
background-repeat: repeat;
|
||||
box-shadow: inset 0 0 2rem -0.5rem #ccc;
|
||||
& > [aria-label="Postscript"]::after {
|
||||
background-color: var(--citrus-primary);
|
||||
}
|
||||
& aside {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
background-color: var(--citrus-light);
|
||||
border-color: var(--citrus-primary);
|
||||
border-radius: 0;
|
||||
}
|
||||
& pre {
|
||||
border-radius: 4px;
|
||||
color: var(--citrus-secondary);
|
||||
background-color: color-mix(in lch, var(--citrus-secondary), black 90%);
|
||||
background-size: 4px;
|
||||
text-shadow: 2px 2px 0
|
||||
color-mix(in lch, var(--citrus-secondary), black 60%);
|
||||
}
|
||||
& [aria-label="Post warning"] {
|
||||
background-color: var(--citrus-primary);
|
||||
}
|
||||
& [aria-label="Addendum"] {
|
||||
border-image-source: linear-gradient(
|
||||
45deg,
|
||||
var(--citrus-primary),
|
||||
var(--citrus-secondary)
|
||||
);
|
||||
background-color: var(--citrus-primary);
|
||||
}
|
||||
& s {
|
||||
text-decoration-color: #d00;
|
||||
}
|
||||
}
|
||||
& #posts {
|
||||
& a {
|
||||
background-color: #fff;
|
||||
border-color: #fff;
|
||||
border-width: 4px;
|
||||
box-shadow: var(--shadow);
|
||||
transition: border-color var(--trans), color var(--trans);
|
||||
& p {
|
||||
color: initial;
|
||||
}
|
||||
& p:not(:last-child) {
|
||||
color: color-mix(in lch, var(--dark), var(--light) 50%);
|
||||
}
|
||||
&:is(:hover, :focus) {
|
||||
border-color: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* gallery.css */
|
||||
#gallery {
|
||||
& article {
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
}
|
||||
& a:has(figure) {
|
||||
transition: border-color var(--trans), background-color var(--trans);
|
||||
box-shadow: var(--shadow);
|
||||
&:is(:hover, :focus) {
|
||||
& figure {
|
||||
transition: inherit;
|
||||
background-color: currentColor;
|
||||
border-color: currentColor;
|
||||
}
|
||||
& figcaption,
|
||||
time {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
& figure {
|
||||
border-color: #fff;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
#artworks {
|
||||
article {
|
||||
margin: var(--pad-xl) 0 0 0;
|
||||
background-color: #fff;
|
||||
background-image: var(--noise), var(--lined);
|
||||
background-size: auto, 32px;
|
||||
&:last-child:not(:first-of-type) {
|
||||
margin: calc(var(--pad-xl) + var(--pad-xl)) 0 0 0;
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
display: flex;
|
||||
height: 32px;
|
||||
width: calc(100% + var(--pad-xl) * 2);
|
||||
margin: -4rem 0 var(--pad-l) calc(var(--pad-xl) * -1);
|
||||
background-image: var(--border), var(--lined), var(--noise);
|
||||
background-size: 32px, 32px;
|
||||
background-blend-mode: darken;
|
||||
}
|
||||
}
|
||||
}
|
||||
#art {
|
||||
background-image: var(--noise);
|
||||
& p,
|
||||
time {
|
||||
padding: 0;
|
||||
line-height: 32px;
|
||||
}
|
||||
& img {
|
||||
border-radius: 0;
|
||||
}
|
||||
& figcaption {
|
||||
font-family: "Urbanist", sans-serif;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 920px) {
|
||||
body > nav {
|
||||
border-right: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
body::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 450px) {
|
||||
#artworks & article {
|
||||
&::before {
|
||||
width: calc(100% + var(--pad-l) * 2) !important;
|
||||
margin: -3rem 0 0 -16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
80
_src/assets/css/citrus/default.css
Normal file
80
_src/assets/css/citrus/default.css
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
@import url("./blog.css");
|
||||
@import url("./gallery.css");
|
||||
@import url("./home.css");
|
||||
@import url("./nav.css");
|
||||
@import url("./variables.css");
|
||||
|
||||
:is(a, button):not(span *, [aria-label="Postscript"] *, body nav *),
|
||||
span:has(a),
|
||||
#posts a {
|
||||
color: var(--citrus-dark);
|
||||
transition: background-color var(--trans);
|
||||
background-color: var(--citrus-primary);
|
||||
&:is(:hover, :focus) {
|
||||
color: var(--citrus-dark-extra);
|
||||
background-color: var(--citrus-secondary);
|
||||
}
|
||||
& a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
body {
|
||||
color: var(--citrus-dark-extra);
|
||||
background-color: var(--citrus-primary);
|
||||
background-image: var(--paw-tiled);
|
||||
background-size: 128px;
|
||||
background-attachment: local;
|
||||
background-repeat: repeat;
|
||||
background-blend-mode: soft-light;
|
||||
animation: mainbg 10s linear infinite;
|
||||
}
|
||||
header {
|
||||
color: var(--citrus-dark);
|
||||
}
|
||||
ul:not([role]) li::before {
|
||||
background-color: var(--citrus-dark-extra);
|
||||
}
|
||||
article {
|
||||
background: var(--noise),
|
||||
linear-gradient(
|
||||
var(--citrus-light) 70%,
|
||||
color-mix(in lch, var(--citrus-mix-light), var(--citrus-light)) 100%
|
||||
);
|
||||
border-radius: 0;
|
||||
box-shadow: var(--shadow-heavy);
|
||||
border: 0;
|
||||
& .header-anchor {
|
||||
border-radius: 0;
|
||||
}
|
||||
& code:not(pre *) {
|
||||
border-radius: 0;
|
||||
background-color: var(--citrus-dark);
|
||||
color: var(--citrus-primary);
|
||||
}
|
||||
&:not(pre,code,a) {
|
||||
font-family: "Nosey Rodent", sans-serif;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 920px) {
|
||||
body > nav {
|
||||
border: 0;
|
||||
}
|
||||
header {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
body::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 450px) {
|
||||
#artworks & article {
|
||||
&::before {
|
||||
width: calc(100% + var(--pad-l) * 2) !important;
|
||||
margin: -3rem 0 0 -16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
45
_src/assets/css/citrus/gallery.css
Normal file
45
_src/assets/css/citrus/gallery.css
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
#gallery {
|
||||
& article {
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
}
|
||||
& a:has(figure) {
|
||||
font-family: "Urbanist", sans-serif;
|
||||
transition: border-color var(--trans), background-color var(--trans);
|
||||
box-shadow: var(--shadow-light);
|
||||
&:is(:hover, :focus) {
|
||||
& figure {
|
||||
transition: inherit;
|
||||
border-color: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
& figure {
|
||||
border-width: 4px;
|
||||
&:is(:not(a:hover *, a:focus *)) {
|
||||
border-color: var(--light);
|
||||
background-color: var(--light);
|
||||
}
|
||||
}
|
||||
}
|
||||
#artworks {
|
||||
article {
|
||||
margin: var(--pad-xl) 0 0 0;
|
||||
background-color: var(--light);
|
||||
background-image: var(--noise), var(--lined);
|
||||
background-size: auto, 32px;
|
||||
&:last-child:not(:first-of-type) {
|
||||
margin: calc(var(--pad-xl) + var(--pad-xl)) 0 0 0;
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
display: flex;
|
||||
height: 32px;
|
||||
width: calc(100% + var(--pad-xl) * 2);
|
||||
margin: -4rem 0 var(--pad-l) calc(var(--pad-xl) * -1);
|
||||
background-image: var(--border), var(--lined), var(--noise);
|
||||
background-size: 32px, 32px;
|
||||
background-blend-mode: darken;
|
||||
}
|
||||
}
|
||||
}
|
||||
21
_src/assets/css/citrus/home.css
Normal file
21
_src/assets/css/citrus/home.css
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
article#badges {
|
||||
& a:is(:hover,:focus) {
|
||||
transition: box-shadow var(--trans), background-color var(--trans);
|
||||
box-shadow: 0 0 0 2px var(--citrus-secondary), 0 0 0 4px var(--citrus-dark-extra);
|
||||
background-color: var(--citrus-secondary);
|
||||
}
|
||||
}
|
||||
#interests li {
|
||||
margin: var(--pad-sm);
|
||||
box-shadow: var(--shadow-light);
|
||||
background: color-mix(in lch, #ff0, #fff);
|
||||
&:nth-child(odd) {
|
||||
transform: rotate(1deg);
|
||||
}
|
||||
& a {
|
||||
align-content: center;
|
||||
& span:has(img)::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,58 @@
|
|||
body > nav {
|
||||
border-right: 4px solid;
|
||||
border-bottom: 4px solid;
|
||||
height: auto;
|
||||
border-bottom-right-radius: var(--round);
|
||||
& a, button {
|
||||
border: 0;
|
||||
margin: 0 0 var(--pad-sm) 0 ;
|
||||
color: var(--citrus-dark);
|
||||
& summary {
|
||||
filter: drop-shadow(2px 0 var(--citrus-dark))
|
||||
drop-shadow(-2px 0 var(--citrus-dark))
|
||||
drop-shadow(0 2px var(--citrus-dark))
|
||||
drop-shadow(0px -2px var(--citrus-dark));
|
||||
color: var(--citrus-light);
|
||||
}
|
||||
& a,
|
||||
button {
|
||||
background: var(--button-bg);
|
||||
box-shadow: var(--button-shine);
|
||||
border: var(--button-border);
|
||||
border-radius: var(--round);
|
||||
color: inherit;
|
||||
&[aria-current] {
|
||||
background: var(--button-current-bg);
|
||||
box-shadow: var(--button-current-shine);
|
||||
border: var(--button-current-border);
|
||||
color: var(--citrus-light);
|
||||
}
|
||||
&:is(:hover, :focus):not([aria-current="page"]) {
|
||||
background: var(--button-hover-bg);
|
||||
box-shadow: var(--button-hover-shine);
|
||||
border: var(--button-hover-border);
|
||||
transition: background-image var(--trans), border-color var(--trans),
|
||||
box-shadow var(--trans);
|
||||
color: var(--citrus-mix-dark);
|
||||
}
|
||||
}
|
||||
& details,
|
||||
details[open] {
|
||||
background: var(--details-bg);
|
||||
box-shadow: var(--details-shine);
|
||||
border: var(--details-border);
|
||||
}
|
||||
}
|
||||
body > nav,
|
||||
header {
|
||||
background-attachment: fixed;
|
||||
background-blend-mode: screen;
|
||||
background-image: var(--nav-bg);
|
||||
background-size: 6px;
|
||||
border-color: var(--citrus-dark);
|
||||
}
|
||||
header {
|
||||
width: var(--view);
|
||||
border-right-width: 4px;
|
||||
border-right-style: solid;
|
||||
border-bottom-width: 4px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-right-radius: 100px;
|
||||
margin-left: calc(var(--view) - 4px);
|
||||
position: relative;
|
||||
padding: calc(var(--pad-m) - 2px) var(--pad-sm);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,16 +3,30 @@
|
|||
--citrus-secondary: var(--secondary);
|
||||
--citrus-light: color-mix(in lch, var(--citrus-primary), var(--light) 70%);
|
||||
--citrus-dark: color-mix(in lch, var(--citrus-secondary), var(--dark) 60%);
|
||||
--citrus-light-extra: color-mix(in lch, var(--citrus-light), var(--light));
|
||||
--citrus-dark-extra: color-mix(in lch, var(--citrus-dark), var(--dark));
|
||||
--citrus-mix: color-mix(in lch,var(--citrus-primary),var(--citrus-secondary));
|
||||
--shadow: 0.2rem 0.2rem 0.4rem 0.2rem #0003;
|
||||
--citrus-mix-light: color-mix(in lch, var(--citrus-light), var(--citrus-mix));
|
||||
--citrus-mix-dark: color-mix(in lch, var(--citrus-dark), var(--citrus-mix));
|
||||
--shadow-light: 0.2rem 0.2rem 0.2rem 0.1rem #0002;
|
||||
--shadow-heavy: 0.2rem 0.2rem 0.4rem 0.2rem #0004;
|
||||
--checker: url("/assets/img/theme/citrus/checker.png");
|
||||
--dot: url("/assets/img/theme/citrus/dot.png");
|
||||
--lined: url("/assets/img/theme/citrus/line.png");
|
||||
--paper: url("/assets/img/theme/citrus/paper.png");
|
||||
--noise: url("/assets/img/theme/citrus/imagedoc-lightnoise.png");
|
||||
--border: url("/assets/img/theme/citrus/border.png");
|
||||
--bg-sky: url("/assets/img/pkmn/bg/plat_trade1.png");
|
||||
--bg-ilex: url("/assets/img/pkmn/bg/ilex_day.png");
|
||||
--bg-ilex-noon: url("/assets/img/pkmn/bg/ilex_noon.png");
|
||||
--bg-ilex-night: url("/assets/img/pkmn/bg/ilex_night.png");
|
||||
}
|
||||
--nav-bg: var(--dot), linear-gradient(var(--citrus-primary), var(--citrus-secondary) 60%, var(--citrus-primary) 120%);
|
||||
--button-bg: linear-gradient(var(--citrus-primary) 30%, var(--citrus-mix) 80%);
|
||||
--button-border: 2px solid var(--citrus-dark);
|
||||
--button-shine: inset 0px 2px var(--citrus-light), inset 0px -2px var(--citrus-mix);
|
||||
--button-hover-bg: linear-gradient(var(--citrus-light),var(--citrus-primary),var(--citrus-mix-light));
|
||||
--button-hover-border: 2px solid var(--citrus-light);
|
||||
--button-hover-shine: inset 0 -2px 0 0 var(--citrus-mix);
|
||||
--button-current-bg: linear-gradient(var(--citrus-mix-dark),var(--citrus-dark-extra) 200%);
|
||||
--button-current-border: 2px solid var(--citrus-dark-extra);
|
||||
--button-current-shine: inset 0px 2px 0 var(--citrus-mix-light), inset 0 -2px 0 var(--citrus-mix-dark);
|
||||
--details-bg: linear-gradient(-45deg,var(--citrus-primary),var(--citrus-mix),var(--citrus-primary));
|
||||
--details-shine: inset 0 2px 0 var(--citrus-light-extra), inset 2px 0 0 var(--citrus-light), inset 0 -2px 0 var(--citrus-primary), inset -2px 0 0 var(--citrus-primary);
|
||||
--details-border: 2px solid var(--citrus-dark);
|
||||
}
|
||||
|
|
@ -6,8 +6,10 @@
|
|||
}
|
||||
article {
|
||||
margin: 0 auto;
|
||||
font-family: "Rubik", sans-serif;
|
||||
max-width: var(--post);
|
||||
& > [aria-label="Postscript"]::after {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
& section:not(section:has(p)) {
|
||||
display: flex;
|
||||
gap: var(--pad-l);
|
||||
|
|
@ -17,7 +19,12 @@ article {
|
|||
border-radius: var(--round);
|
||||
width: 66%;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-bottom: var(--pad-m);
|
||||
}
|
||||
& [aria-label="Post warning"] {
|
||||
|
|
@ -26,7 +33,6 @@ article {
|
|||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
font-family: monospace;
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
|
|
@ -36,14 +42,16 @@ article {
|
|||
}
|
||||
}
|
||||
}
|
||||
[aria-label="Addendum"], [aria-label="Post warning"], article aside {
|
||||
[aria-label="Addendum"],
|
||||
[aria-label="Post warning"],
|
||||
article aside {
|
||||
margin: var(--pad-l) 0;
|
||||
padding: var(--pad-l);
|
||||
}
|
||||
article > [aria-label="Addendum"] {
|
||||
border-image-slice: 1;
|
||||
border-image-width: 2px;
|
||||
border-image-outset: 4px;
|
||||
border-image-slice: 1;
|
||||
border-image-width: 2px;
|
||||
border-image-outset: 4px;
|
||||
}
|
||||
|
||||
article > [aria-label="Postscript"] {
|
||||
|
|
@ -66,48 +74,46 @@ article > [aria-label="Postscript"] {
|
|||
margin-top: inherit;
|
||||
margin-left: inherit;
|
||||
margin-right: var(--avatar);
|
||||
margin-bottom: var(--pad-l);
|
||||
border-radius: var(--round);
|
||||
border-bottom-right-radius: 0;
|
||||
width: fit-content;
|
||||
padding: var(--pad-m);
|
||||
background-color: #0060df;
|
||||
color: #fff;
|
||||
font-family: "Rubik", sans-serif;
|
||||
font-size: 0.8rem;
|
||||
word-wrap: anywhere;
|
||||
|
||||
&:hover {
|
||||
background-color: #3a76f0;
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: var(--pad-l);
|
||||
& a:has(img:nth-child(n + 2)) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 40%), 1fr));
|
||||
align-items: center;
|
||||
gap: var(--pad-m);
|
||||
}
|
||||
& > img {
|
||||
transition: height var(--trans), border-radius var(--trans),
|
||||
background-color var(--trans);
|
||||
border-radius: var(--round);
|
||||
min-height: fit-content;
|
||||
max-height: var(--image);
|
||||
}
|
||||
}
|
||||
& a {
|
||||
background: unset;
|
||||
}
|
||||
|
||||
& p a:has(img:nth-child(n + 2)) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 40%), 1fr));
|
||||
align-items: center;
|
||||
gap: var(--pad-m);
|
||||
}
|
||||
& p > img {
|
||||
transition: height var(--trans), border-radius var(--trans),
|
||||
background-color var(--trans);
|
||||
border-radius: var(--round);
|
||||
min-height: fit-content;
|
||||
max-height: var(--image);
|
||||
}
|
||||
& img:not(p a > img) {
|
||||
display: flex;
|
||||
box-sizing: content-box;
|
||||
margin: 0 0 0 auto;
|
||||
border-radius: 100%;
|
||||
& span:has([alt]) {
|
||||
width: var(--avatar);
|
||||
height: var(--avatar);
|
||||
display: flex;
|
||||
float: right;
|
||||
& [alt="Profile picture"] {
|
||||
display: flex;
|
||||
box-sizing: content-box;
|
||||
margin: 0 0 0 auto;
|
||||
border-radius: 100%;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -165,4 +171,15 @@ article > [aria-label="Postscript"] {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
article > [aria-label="Postscript"] {
|
||||
& p,
|
||||
p > img {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
#blog #posts a {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@import url("./variables.css");
|
||||
@import url("./nav.css");
|
||||
@import url("./motion.css");
|
||||
|
||||
:root {
|
||||
--view: 18rem;
|
||||
|
|
@ -12,6 +13,7 @@ h3,
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: "Rubik", sans-serif;
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
margin-block-start: 0;
|
||||
|
|
@ -26,10 +28,10 @@ body {
|
|||
font-size: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
& a,
|
||||
button {
|
||||
cursor: pointer;
|
||||
transition: background-color var(--trans);
|
||||
|
||||
&:is(:hover, :focus) {
|
||||
outline: 0;
|
||||
|
|
@ -38,8 +40,8 @@ body {
|
|||
}
|
||||
svg {
|
||||
fill: currentColor;
|
||||
stroke: currentColor;
|
||||
stroke-width: 0;
|
||||
stroke: currentColor;
|
||||
stroke-width: 0;
|
||||
}
|
||||
header {
|
||||
padding-top: var(--pad-xl);
|
||||
|
|
@ -47,12 +49,31 @@ header {
|
|||
& svg {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-right: var(--pad-m);
|
||||
}
|
||||
& h1 {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
overflow-y: hidden;
|
||||
word-break: break-all;
|
||||
flex-wrap: wrap;
|
||||
font-family: "Nosey Rodent", sans-serif;
|
||||
display: flex;
|
||||
margin-left: var(--view);
|
||||
width: calc(100% - var(--view));
|
||||
justify-content: center;
|
||||
position: sticky;
|
||||
inset-block: 100%;
|
||||
text-align: center;
|
||||
& span {
|
||||
background-image: var(--transgender);
|
||||
padding: 0 var(--pad-sm);
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
padding: var(--pad-xl);
|
||||
padding-left: calc(var(--view) + var(--pad-xl));
|
||||
|
|
@ -78,14 +99,6 @@ details {
|
|||
border-radius: 0 var(--round) var(--round) 0;
|
||||
}
|
||||
|
||||
main article[id] {
|
||||
|
||||
& p,
|
||||
li {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
article {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
|
|
@ -93,10 +106,6 @@ article {
|
|||
height: max-content;
|
||||
padding: var(--pad-xl);
|
||||
|
||||
& a {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
& a:has(figure) {
|
||||
border-radius: var(--round);
|
||||
|
||||
|
|
@ -139,11 +148,11 @@ article {
|
|||
word-break: break-word;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
transition: background-color var(--trans), border-color var(--trans);
|
||||
}
|
||||
|
||||
& pre,
|
||||
code:not(pre *) {
|
||||
transition: background-color var(--trans), border-color var(--trans);
|
||||
border-radius: var(--round);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -153,22 +162,37 @@ article {
|
|||
border-style: solid;
|
||||
border-width: 2px;
|
||||
padding: var(--pad-m);
|
||||
border-radius: var(--round);
|
||||
border-radius: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& img {
|
||||
border-radius: inherit;
|
||||
}
|
||||
& ul:not([role="list"]):is(#art *) {
|
||||
padding: 0;
|
||||
margin: 0 0 var(--pad-sm) var(--pad-xl);
|
||||
}
|
||||
& li:is(#art *, #bio *) {
|
||||
display: flex;
|
||||
&::marker {
|
||||
content: none;
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
mask-image: var(--paw);
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
margin: 0 0 0 calc(var(--pad-xl) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
& section {
|
||||
& a:has(figure) {
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
& figure img {
|
||||
border-radius: var(--round);
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
& figcaption {
|
||||
|
|
@ -178,7 +202,7 @@ article {
|
|||
}
|
||||
}
|
||||
|
||||
&>:first-child>code {
|
||||
& > :first-child > code {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
margin: var(--pad-sm) 0;
|
||||
|
|
@ -191,18 +215,31 @@ article {
|
|||
|
||||
img[src*="/assets/img/flag/"] {
|
||||
height: 32px;
|
||||
border-radius: 0.2rem;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: #fff;
|
||||
border-radius: 2px;
|
||||
&:first-child {
|
||||
margin-left: var(--pad-m);
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-right: var(--pad-m);
|
||||
}
|
||||
}
|
||||
|
||||
a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
|
||||
transform: translateY(-4px);
|
||||
transition: var(--trans);
|
||||
span:has(img[src*="https://www.google.com/s2/favicons"]) img
|
||||
{
|
||||
position: relative;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 920px) {
|
||||
body::after {
|
||||
content: "";
|
||||
}
|
||||
footer {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
header {
|
||||
padding-left: 0;
|
||||
padding-top: var(--pad-m);
|
||||
|
|
@ -213,16 +250,11 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
|
|||
padding: var(--pad-l);
|
||||
}
|
||||
|
||||
body>nav {
|
||||
position: initial;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main>section {
|
||||
main > section {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main>section {
|
||||
main > section {
|
||||
width: initial;
|
||||
}
|
||||
|
||||
|
|
@ -230,35 +262,4 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
|
|||
max-width: initial;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
body>nav::before,
|
||||
body>nav::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
body>nav {
|
||||
flex-direction: row;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
|
||||
& details {
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
body::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
body>nav {
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
|
||||
& details[open] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8,9 +8,6 @@
|
|||
}
|
||||
}
|
||||
#artworks {
|
||||
& p {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
& ul {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(
|
||||
|
|
@ -27,20 +24,17 @@
|
|||
|
||||
& figure {
|
||||
margin: 0;
|
||||
padding: var(--pad-sm);
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
& img {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: var(--thumb);
|
||||
border-bottom: unset;
|
||||
object-fit: contain;
|
||||
border-radius: var(--round);
|
||||
}
|
||||
|
||||
& figcaption {
|
||||
font-family: Urbanist, sans-serif;
|
||||
font-size: var(--pad-lm);
|
||||
font-size: 1.4rem;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
|
@ -55,7 +49,6 @@
|
|||
flex-direction: column;
|
||||
width: fit-content;
|
||||
h3 {
|
||||
font-family: "Urbanist", sans-serif;
|
||||
display: flex;
|
||||
gap: var(--pad-sm);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,133 +7,95 @@
|
|||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
@keyframes slide {
|
||||
0% {
|
||||
background-position: 0% 100%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 200% 100%;
|
||||
}
|
||||
}
|
||||
article#bio {
|
||||
& ul {
|
||||
margin: 0 var(--pad-xl);
|
||||
}
|
||||
|
||||
& li {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
& span[id] {
|
||||
color: transparent;
|
||||
background-clip: text;
|
||||
background-repeat: repeat;
|
||||
background-size: 200% 100%;
|
||||
background-position: 0% 50%;
|
||||
animation: slide 5s linear infinite;
|
||||
transition: var(--trans);
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
color: var(--dark);
|
||||
background-clip: initial;
|
||||
}
|
||||
}
|
||||
|
||||
& img[alt] {
|
||||
& .emoji {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
display: inline-flex;
|
||||
margin: 0 0 0 var(--pad-sm);
|
||||
align-self: center;
|
||||
&::after,
|
||||
img {
|
||||
filter: drop-shadow(0 0 0.5px #000a);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
article#badges {
|
||||
& ul {
|
||||
gap: 1rem;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--pad-sm);
|
||||
}
|
||||
|
||||
& a {
|
||||
display: flex;
|
||||
padding: inherit;
|
||||
margin: 0;
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
|
||||
article#bio ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
article#bio ul li {
|
||||
&::before {
|
||||
content: "";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
mask-image: var(--paw);
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
margin: var(--pad-sm) 0 0 calc(var(--pad-xl)*-1);
|
||||
& img {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
&::marker {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
article#interests ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
article#interests {
|
||||
& details ul {
|
||||
& ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0;
|
||||
padding: var(--pad-l) 0;
|
||||
}
|
||||
|
||||
& details:last-child ul {
|
||||
padding: var(--pad-l) 0 0 0
|
||||
}
|
||||
|
||||
& li {
|
||||
display: flex;
|
||||
width: 14ch;
|
||||
flex-wrap: wrap;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
|
||||
& a {
|
||||
padding: var(--pad-sm);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
& span {
|
||||
display: flex;
|
||||
width: 14ch;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding: var(--pad-sm);
|
||||
width: inherit;
|
||||
&:not(:hover, :focus) {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
& .music img,
|
||||
.games img {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
& .manga img {
|
||||
height: 128px;
|
||||
}
|
||||
& span:has(img) {
|
||||
width: fit-content;
|
||||
margin: 0 auto;
|
||||
&::after {
|
||||
content: "";
|
||||
background-image: url("/assets/img/icon/shortcut.png");
|
||||
background-size: 100%;
|
||||
display: block;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: -1.5rem 0 0 -0.5rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
& details:last-child ul {
|
||||
padding: var(--pad-l) 0 0 0;
|
||||
}
|
||||
|
||||
& details h3 {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
|
||||
& div:has(img) {
|
||||
margin: 0 auto;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.music img {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.manga img {
|
||||
height: 128px;
|
||||
}
|
||||
}
|
||||
|
||||
#pkmn {
|
||||
|
|
@ -150,54 +112,39 @@ article#interests {
|
|||
border-width: 3px;
|
||||
border-style: solid;
|
||||
margin: var(--pad-l) 0 0 0;
|
||||
&>* {
|
||||
|
||||
& li {
|
||||
display: flex;
|
||||
margin-top: -8px;
|
||||
margin-left: -12px;
|
||||
|
||||
&:hover {
|
||||
filter: drop-shadow(0 -2px 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 3px #0006);
|
||||
& span:hover {
|
||||
filter: drop-shadow(0 -2px 0 #fff) drop-shadow(0 2px 0 #fff)
|
||||
drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff)
|
||||
drop-shadow(0 2px 3px #000a);
|
||||
animation: jump 200ms infinite alternate;
|
||||
}
|
||||
}
|
||||
& li:first-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
#agender {
|
||||
background-image: linear-gradient(var(--flag),
|
||||
#000 0 14.28%,
|
||||
#c0c0c0 0 28.57%,
|
||||
#fff 0 42.85%,
|
||||
#a3fa73 0 57.14%,
|
||||
#fff 0 71.42%,
|
||||
#c0c0c0 0 85.71%,
|
||||
#000 0);
|
||||
background-image: var(--agender)
|
||||
}
|
||||
|
||||
#aromantic {
|
||||
background-image: linear-gradient(var(--flag),
|
||||
#0a2 20%,
|
||||
#7d6 0 40%,
|
||||
#fff 0 60%,
|
||||
#a9a9a9 0 80%,
|
||||
#000 0);
|
||||
background-image: var(--aromantic)
|
||||
}
|
||||
|
||||
#pansexual {
|
||||
background-image: linear-gradient(var(--flag), #f09 33.33%, #ffd700 0 66.66%, #00bfff 0);
|
||||
background-image: var(--pansexual)
|
||||
}
|
||||
|
||||
#interests div:has(img)::after {
|
||||
content: "";
|
||||
background-image: url("/assets/img/icon/shortcut.png");
|
||||
background-size: 100%;
|
||||
display: block;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: -1.5rem 0 0 -0.5rem;
|
||||
pointer-events: none;
|
||||
#badges img {
|
||||
max-height: 31px;
|
||||
width: 88px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 920px) {
|
||||
article#interests {
|
||||
display: flex;
|
||||
|
|
@ -211,4 +158,4 @@ article#interests {
|
|||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
@import url("./variables.css");
|
||||
|
||||
#index {
|
||||
font-family: "Nosey Rodent", sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--primary-dark-300);
|
||||
|
|
@ -9,7 +10,7 @@
|
|||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-image: var(--sunny);
|
||||
background-image: url("/assets/img/theme/citrus/sundae.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
|
|
|
|||
82
_src/assets/css/default/motion.css
Normal file
82
_src/assets/css/default/motion.css
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
@media (prefers-reduced-motion: no-preference) {
|
||||
/* Scrolling pride flag text */
|
||||
article#bio span[id],
|
||||
footer span {
|
||||
font-family: "Nosey Rodent", sans-serif;
|
||||
font-weight: bold;
|
||||
color: transparent;
|
||||
background-clip: text;
|
||||
filter: var(--outlined);
|
||||
background-repeat: repeat;
|
||||
background-size: 200% 100%;
|
||||
background-position: 0% 50%;
|
||||
animation: slide 5s linear infinite;
|
||||
transition: color var(--trans);
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
body {
|
||||
animation: none !important;
|
||||
}
|
||||
/* Buttons */
|
||||
:is(a, button),
|
||||
span:has(a) {
|
||||
transition: none !important;
|
||||
}
|
||||
/* Permalinks */
|
||||
.header-anchor,
|
||||
article pre {
|
||||
transition: none !important;
|
||||
}
|
||||
/* Images */
|
||||
#gallery a:has(figure),
|
||||
#blog article figure,
|
||||
a img {
|
||||
transition: none !important;
|
||||
}
|
||||
.emoji:has(img[alt*="🐇"]) {
|
||||
& img {
|
||||
opacity: 0;
|
||||
}
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "🐇";
|
||||
}
|
||||
}
|
||||
/* Scrolling pride flag text */
|
||||
article#bio span[id], footer span {
|
||||
transition: none !important;
|
||||
animation: none !important;
|
||||
color: inherit;
|
||||
background-clip: initial !important;
|
||||
background: initial !important;
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-flex;
|
||||
width: 2rem;
|
||||
height: 1.25rem;
|
||||
margin: 0 2px;
|
||||
background-repeat: repeat-x;
|
||||
border-radius: 2px;
|
||||
top: 4px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
#aromantic::before {
|
||||
background-image: url("/assets/img/flag/aromantic.svg");
|
||||
}
|
||||
#agender::before {
|
||||
background-image: url("/assets/img/flag/agender.svg");
|
||||
}
|
||||
#pansexual::before {
|
||||
background-image: url("/assets/img/flag/pansexual.svg");
|
||||
}
|
||||
footer span::before {
|
||||
background-image: url("/assets/img/flag/trans.svg");
|
||||
}
|
||||
/* Jumping critters */
|
||||
#pkmn span:hover {
|
||||
animation: none !important;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
body>nav::before,
|
||||
body > nav::before,
|
||||
body::after {
|
||||
z-index: -1;
|
||||
content: "";
|
||||
|
|
@ -11,7 +11,7 @@ body::after {
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
body>nav::before {
|
||||
body > nav::before {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
mask-size: 160%;
|
||||
|
|
@ -19,20 +19,6 @@ body>nav::before {
|
|||
-webkit-mask-position-y: 90%;
|
||||
}
|
||||
|
||||
body>nav::after {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--view);
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
z-index: -2;
|
||||
pointer-events: none;
|
||||
mask-image: var(--paw-tiled);
|
||||
animation: navbg 10s linear infinite;
|
||||
mask-size: 128px;
|
||||
}
|
||||
|
||||
body::after {
|
||||
content: none;
|
||||
mask-size: 100%;
|
||||
|
|
@ -42,15 +28,16 @@ body::after {
|
|||
-webkit-mask-position-y: bottom;
|
||||
}
|
||||
|
||||
body>nav {
|
||||
body > nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
padding: 1rem;
|
||||
overflow-x: hidden;
|
||||
padding: var(--pad-l);
|
||||
position: fixed;
|
||||
width: var(--view);
|
||||
height: 100%;
|
||||
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: none;
|
||||
& * svg,
|
||||
li img {
|
||||
margin: 0 8px 0 8px;
|
||||
|
|
@ -88,15 +75,13 @@ body>nav {
|
|||
font-size: 1.125rem;
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
height: var(--pad-xl);
|
||||
height: 36px;
|
||||
line-height: var(--pad-xl);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Rubik", sans-serif;
|
||||
|
||||
&>nav {
|
||||
& > nav {
|
||||
gap: var(--pad-m);
|
||||
border-right-width: 1px;
|
||||
border-right-style: solid;
|
||||
|
|
@ -114,31 +99,50 @@ body {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
& details>summary {
|
||||
& details > summary {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 var(--pad-lm) 0 0;
|
||||
padding: 0;
|
||||
height: var(--pad-xl);
|
||||
|
||||
&>svg {
|
||||
transform: rotate(0deg);
|
||||
transition: transform var(--trans);
|
||||
}
|
||||
}
|
||||
|
||||
& details:not([open])>summary {
|
||||
border-radius: var(--round);
|
||||
& details[open], details:not([open]) {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
& details[open] {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
|
||||
&>summary svg {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 920px) {
|
||||
body > nav {
|
||||
position: initial;
|
||||
width: 100%;
|
||||
overflow: initial;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
& a, button {
|
||||
line-height: initial;
|
||||
}
|
||||
& details {
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
}
|
||||
}
|
||||
body > nav::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 620px) {
|
||||
body > nav {
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
|
||||
& details {
|
||||
height: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
body::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
@import url("./theme-light.css");
|
||||
@import url("./theme-dark.css");
|
||||
@import url("./theme-dark.css");
|
||||
@import url("./theme-light.css");
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
article,
|
||||
body,
|
||||
header svg {
|
||||
|
|
@ -26,7 +25,6 @@
|
|||
}
|
||||
|
||||
& pre {
|
||||
transition: background-color var(--trans), border-color var(--trans);
|
||||
background-color: var(--secondary-100);
|
||||
|
||||
&:hover {
|
||||
|
|
@ -41,10 +39,6 @@
|
|||
}
|
||||
|
||||
/* blog.css */
|
||||
& [aria-label="Postscript"]::after {
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
|
||||
& [aria-label="Post warning"] {
|
||||
background-color: var(--secondary);
|
||||
color: var(--secondary-100);
|
||||
|
|
@ -57,10 +51,12 @@
|
|||
|
||||
& [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));
|
||||
border-image-source: linear-gradient(
|
||||
45deg,
|
||||
var(--secondary),
|
||||
var(--secondary-600),
|
||||
var(--secondary)
|
||||
);
|
||||
background-color: var(--secondary-400);
|
||||
}
|
||||
}
|
||||
|
|
@ -70,17 +66,14 @@
|
|||
color: var(--secondary-light-700);
|
||||
}
|
||||
}
|
||||
|
||||
/* default.css */
|
||||
body {
|
||||
background-color: var(--secondary-100);
|
||||
|
||||
/* this is cursed */
|
||||
& :is(a, button) {
|
||||
& :is(a, button):not(span *, [aria-label="Postscript"] *),
|
||||
span:has(a) {
|
||||
color: var(--secondary-light-400);
|
||||
border-color: var(--secondary-600);
|
||||
background-color: var(--secondary-300);
|
||||
|
||||
&:is(:hover, :focus) {
|
||||
color: var(--secondary-light-500);
|
||||
border-color: currentColor;
|
||||
|
|
@ -93,14 +86,16 @@
|
|||
box-shadow: 0 0 0 2px var(--secondary-300);
|
||||
}
|
||||
}
|
||||
& span a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&>nav {
|
||||
& > nav {
|
||||
background-color: inherit;
|
||||
border-color: var(--secondary);
|
||||
|
||||
& details {
|
||||
background-color: var(--secondary-100);
|
||||
|
||||
&:not([open]) summary {
|
||||
&:not([open]) {
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
|
@ -117,16 +112,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-image: linear-gradient(to bottom, var(--secondary-600) 0%, transparent 30vw);
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
var(--secondary-600) 0%,
|
||||
transparent 30vw
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
&::after, & > nav::before {
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
|
@ -143,7 +138,8 @@
|
|||
}
|
||||
|
||||
& img {
|
||||
box-shadow: 0 0 0 1px color-mix(in lch, transparent, var(--secondary-500) 70%);
|
||||
box-shadow: 0 0 0 1px
|
||||
color-mix(in lch, transparent, var(--secondary-500) 70%);
|
||||
}
|
||||
|
||||
& details h3 {
|
||||
|
|
@ -153,9 +149,5 @@
|
|||
|
||||
a:has(img[src*="/assets/img/button"]) {
|
||||
background-color: unset;
|
||||
|
||||
&:is(:hover, :focus) img {
|
||||
filter: drop-shadow(4px 6px 0 var(--secondary-500));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@media (prefers-color-scheme: light) {
|
||||
|
||||
article,
|
||||
body,
|
||||
header svg {
|
||||
|
|
@ -26,7 +25,6 @@
|
|||
}
|
||||
|
||||
& pre {
|
||||
transition: background-color var(--trans), border-color var(--trans);
|
||||
background-color: var(--primary-100);
|
||||
|
||||
&:hover {
|
||||
|
|
@ -41,10 +39,6 @@
|
|||
}
|
||||
|
||||
/* blog.css */
|
||||
& [aria-label="Postscript"]::after {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
& [aria-label="Post warning"] {
|
||||
background-color: var(--primary);
|
||||
color: var(--primary-dark-100);
|
||||
|
|
@ -57,10 +51,12 @@
|
|||
|
||||
& [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));
|
||||
border-image-source: linear-gradient(
|
||||
45deg,
|
||||
var(--primary),
|
||||
var(--primary-600),
|
||||
var(--primary)
|
||||
);
|
||||
background-color: var(--primary-400);
|
||||
}
|
||||
}
|
||||
|
|
@ -70,21 +66,18 @@
|
|||
color: var(--primary-dark-700);
|
||||
}
|
||||
}
|
||||
|
||||
/* default.css */
|
||||
body {
|
||||
background-color: var(--primary-100);
|
||||
|
||||
/* this is cursed */
|
||||
& :is(a, button) {
|
||||
& :is(a, button):not(span *, [aria-label="Postscript"] *),
|
||||
span:has(a) {
|
||||
color: var(--primary-dark-400);
|
||||
border-color: var(--primary-600);
|
||||
background-color: var(--primary-400);
|
||||
|
||||
&:is(:hover, :focus) {
|
||||
color: var(--primary-dark-500);
|
||||
border-color: currentColor;
|
||||
background-color: var(--primary-500);
|
||||
background-color: var(--primary-600);
|
||||
}
|
||||
|
||||
&:is(.header-anchor):is(:hover, :focus) {
|
||||
|
|
@ -93,20 +86,22 @@
|
|||
box-shadow: 0 0 0 2px var(--primary-300);
|
||||
}
|
||||
}
|
||||
& span a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&>nav {
|
||||
border-color: var(--primary);
|
||||
|
||||
& > nav {
|
||||
background-color: inherit;
|
||||
border-color: var(--primary-dark-500);
|
||||
& details {
|
||||
background-color: var(--primary-100);
|
||||
|
||||
&:not([open]) summary {
|
||||
color: var(--primary);
|
||||
&:not([open]) {
|
||||
color: var(--primary-dark-500);
|
||||
}
|
||||
}
|
||||
|
||||
& details[open] {
|
||||
border-color: var(--primary);
|
||||
border-color: var(--primary-dark-800);
|
||||
background-color: var(--primary-300);
|
||||
color: var(--primary-dark-300);
|
||||
|
||||
|
|
@ -117,17 +112,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-image: linear-gradient(to bottom, var(--primary-600) 0%, transparent 30vw);
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
var(--primary-600) 0%,
|
||||
transparent 30vw
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-color: var(--primary);
|
||||
&::after,
|
||||
& > nav::before {
|
||||
background-color: var(--primary-dark-500);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -143,7 +139,8 @@
|
|||
}
|
||||
|
||||
& img {
|
||||
box-shadow: 0 0 0 1px color-mix(in lch, transparent, var(--primary-dark-500) 30%);
|
||||
box-shadow: 0 0 0 1px
|
||||
color-mix(in lch, transparent, var(--primary-dark-500) 30%);
|
||||
}
|
||||
|
||||
& details h3 {
|
||||
|
|
@ -153,9 +150,5 @@
|
|||
|
||||
a:has(img[src*="/assets/img/button"]) {
|
||||
background-color: unset;
|
||||
|
||||
&:is(:hover, :focus) img {
|
||||
filter: drop-shadow(4px 6px 0 var(--primary-500));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,79 +1,145 @@
|
|||
:root {
|
||||
--primary: rgb(255, 190, 0);
|
||||
--secondary: rgb(255, 100, 0);
|
||||
--light: rgb(255, 252, 245);
|
||||
--dark: rgb(6, 2, 0);
|
||||
--primary-100: color-mix(in lch, var(--primary), var(--light) 90%);
|
||||
--primary-200: color-mix(in lch, var(--primary), var(--light) 80%);
|
||||
--primary-300: color-mix(in lch, var(--primary), var(--light) 70%);
|
||||
--primary-400: color-mix(in lch, var(--primary), var(--light) 60%);
|
||||
--primary-500: color-mix(in lch, var(--primary), var(--light));
|
||||
--primary-600: color-mix(in lch, var(--primary), var(--light) 40%);
|
||||
--primary-700: color-mix(in lch, var(--primary), var(--light) 30%);
|
||||
--primary-800: color-mix(in lch, var(--primary), var(--light) 20%);
|
||||
--primary-900: color-mix(in lch, var(--primary), var(--light) 10%);
|
||||
--primary-dark-100: color-mix(in lch, var(--primary), var(--dark) 90%);
|
||||
--primary-dark-200: color-mix(in lch, var(--primary), var(--dark) 80%);
|
||||
--primary-dark-300: color-mix(in lch, var(--primary), var(--dark) 70%);
|
||||
--primary-dark-400: color-mix(in lch, var(--primary), var(--dark) 60%);
|
||||
--primary-dark-500: color-mix(in lch, var(--primary), var(--dark));
|
||||
--primary-dark-600: color-mix(in lch, var(--primary), var(--dark) 40%);
|
||||
--primary-dark-700: color-mix(in lch, var(--primary), var(--dark) 30%);
|
||||
--primary-dark-800: color-mix(in lch, var(--primary), var(--dark) 20%);
|
||||
--primary-dark-900: color-mix(in lch, var(--primary), var(--dark) 10%);
|
||||
--secondary-light-100: color-mix(in lch, var(--secondary), var(--light) 90%);
|
||||
--secondary-light-200: color-mix(in lch, var(--secondary), var(--light) 80%);
|
||||
--secondary-light-300: color-mix(in lch, var(--secondary), var(--light) 70%);
|
||||
--secondary-light-400: color-mix(in lch, var(--secondary), var(--light) 60%);
|
||||
--secondary-light-500: color-mix(in lch, var(--secondary), var(--light));
|
||||
--secondary-light-600: color-mix(in lch, var(--secondary), var(--light) 40%);
|
||||
--secondary-light-700: color-mix(in lch, var(--secondary), var(--light) 30%);
|
||||
--secondary-light-800: color-mix(in lch, var(--secondary), var(--light) 20%);
|
||||
--secondary-light-900: color-mix(in lch, var(--secondary), var(--light) 10%);
|
||||
--secondary-100: color-mix(in lch, var(--secondary), var(--dark) 90%);
|
||||
--secondary-200: color-mix(in lch, var(--secondary), var(--dark) 80%);
|
||||
--secondary-300: color-mix(in lch, var(--secondary), var(--dark) 70%);
|
||||
--secondary-400: color-mix(in lch, var(--secondary), var(--dark) 60%);
|
||||
--secondary-500: color-mix(in lch, var(--secondary), var(--dark));
|
||||
--secondary-600: color-mix(in lch, var(--secondary), var(--dark) 40%);
|
||||
--secondary-700: color-mix(in lch, var(--secondary), var(--dark) 30%);
|
||||
--secondary-800: color-mix(in lch, var(--secondary), var(--dark) 20%);
|
||||
--secondary-900: color-mix(in lch, var(--secondary), var(--dark) 10%);
|
||||
--trans: 300ms;
|
||||
--primary: rgb(255, 190, 0);
|
||||
--secondary: rgb(255, 100, 0);
|
||||
--light: rgb(255, 252, 245);
|
||||
--dark: rgb(6, 2, 0);
|
||||
--primary-100: color-mix(in lch, var(--primary), var(--light) 90%);
|
||||
--primary-200: color-mix(in lch, var(--primary), var(--light) 80%);
|
||||
--primary-300: color-mix(in lch, var(--primary), var(--light) 70%);
|
||||
--primary-400: color-mix(in lch, var(--primary), var(--light) 60%);
|
||||
--primary-500: color-mix(in lch, var(--primary), var(--light));
|
||||
--primary-600: color-mix(in lch, var(--primary), var(--light) 40%);
|
||||
--primary-700: color-mix(in lch, var(--primary), var(--light) 30%);
|
||||
--primary-800: color-mix(in lch, var(--primary), var(--light) 20%);
|
||||
--primary-900: color-mix(in lch, var(--primary), var(--light) 10%);
|
||||
--primary-dark-100: color-mix(in lch, var(--primary), var(--dark) 90%);
|
||||
--primary-dark-200: color-mix(in lch, var(--primary), var(--dark) 80%);
|
||||
--primary-dark-300: color-mix(in lch, var(--primary), var(--dark) 70%);
|
||||
--primary-dark-400: color-mix(in lch, var(--primary), var(--dark) 60%);
|
||||
--primary-dark-500: color-mix(in lch, var(--primary), var(--dark));
|
||||
--primary-dark-600: color-mix(in lch, var(--primary), var(--dark) 40%);
|
||||
--primary-dark-700: color-mix(in lch, var(--primary), var(--dark) 30%);
|
||||
--primary-dark-800: color-mix(in lch, var(--primary), var(--dark) 20%);
|
||||
--primary-dark-900: color-mix(in lch, var(--primary), var(--dark) 10%);
|
||||
--secondary-light-100: color-mix(in lch, var(--secondary), var(--light) 90%);
|
||||
--secondary-light-200: color-mix(in lch, var(--secondary), var(--light) 80%);
|
||||
--secondary-light-300: color-mix(in lch, var(--secondary), var(--light) 70%);
|
||||
--secondary-light-400: color-mix(in lch, var(--secondary), var(--light) 60%);
|
||||
--secondary-light-500: color-mix(in lch, var(--secondary), var(--light));
|
||||
--secondary-light-600: color-mix(in lch, var(--secondary), var(--light) 40%);
|
||||
--secondary-light-700: color-mix(in lch, var(--secondary), var(--light) 30%);
|
||||
--secondary-light-800: color-mix(in lch, var(--secondary), var(--light) 20%);
|
||||
--secondary-light-900: color-mix(in lch, var(--secondary), var(--light) 10%);
|
||||
--secondary-100: color-mix(in lch, var(--secondary), var(--dark) 90%);
|
||||
--secondary-200: color-mix(in lch, var(--secondary), var(--dark) 80%);
|
||||
--secondary-300: color-mix(in lch, var(--secondary), var(--dark) 70%);
|
||||
--secondary-400: color-mix(in lch, var(--secondary), var(--dark) 60%);
|
||||
--secondary-500: color-mix(in lch, var(--secondary), var(--dark));
|
||||
--secondary-600: color-mix(in lch, var(--secondary), var(--dark) 40%);
|
||||
--secondary-700: color-mix(in lch, var(--secondary), var(--dark) 30%);
|
||||
--secondary-800: color-mix(in lch, var(--secondary), var(--dark) 20%);
|
||||
--secondary-900: color-mix(in lch, var(--secondary), var(--dark) 10%);
|
||||
--trans: 300ms;
|
||||
--image: 24rem;
|
||||
--post: 75ch;
|
||||
--round: 16px;
|
||||
--pad-xl: 2rem;
|
||||
--pad-lm: 1.4rem;
|
||||
--pad-l: 1rem;
|
||||
--pad-m: 0.8rem;
|
||||
--pad-sm: 0.4rem;
|
||||
--flag: 45deg;
|
||||
--paw: url("/assets/img/theme/paw.svg");
|
||||
--paw-tiled: url("/assets/img/theme/paw-tiled.png");
|
||||
--sunny: url("/assets/img/theme/citrus/sundae.png")
|
||||
--round: 16px;
|
||||
--pad-xl: 2rem;
|
||||
--pad-lm: 1.4rem;
|
||||
--pad-l: 1rem;
|
||||
--pad-m: 0.8rem;
|
||||
--pad-sm: 0.4rem;
|
||||
--flag: 45deg;
|
||||
--paw: url("/assets/img/theme/paw.svg");
|
||||
--paw-tiled: url("/assets/img/theme/paw-tiled.png");
|
||||
--outlined: drop-shadow(0 0.5px var(--dark)) drop-shadow(0 -0.5px var(--dark))
|
||||
drop-shadow(0.5px 0 var(--dark)) drop-shadow(-0.5px 0 var(--dark))
|
||||
drop-shadow(0 1px var(--light)) drop-shadow(0 -1px var(--light))
|
||||
drop-shadow(1px 0 var(--light)) drop-shadow(-1px 0 var(--light));
|
||||
--rainbow: linear-gradient(
|
||||
var(--flag),
|
||||
red 16.66%,
|
||||
orange 0 33.33%,
|
||||
yellow 0 50%,
|
||||
green 0 66.66%,
|
||||
blue 0 83.33%,
|
||||
indigo 0
|
||||
);
|
||||
--agender: linear-gradient(
|
||||
var(--flag),
|
||||
#000 0 14.28%,
|
||||
#c0c0c0 0 28.57%,
|
||||
#fff 0 42.85%,
|
||||
#a3fa73 0 57.14%,
|
||||
#fff 0 71.42%,
|
||||
#c0c0c0 0 85.71%,
|
||||
#000 0
|
||||
);
|
||||
--aromantic: linear-gradient(
|
||||
var(--flag),
|
||||
#0a2 20%,
|
||||
#7d6 0 40%,
|
||||
#fff 0 60%,
|
||||
#a9a9a9 0 80%,
|
||||
#000 0
|
||||
);
|
||||
--pansexual: linear-gradient(
|
||||
var(--flag),
|
||||
#f09 33.33%,
|
||||
#ffd700 0 66.66%,
|
||||
#00bfff 0
|
||||
);
|
||||
--transgender: linear-gradient(
|
||||
var(--flag),
|
||||
#00d2ff 20%,
|
||||
#ffa6b9 0 40%,
|
||||
white 0 60%,
|
||||
#ffa6b9 0 80%,
|
||||
#00d2ff 0
|
||||
);
|
||||
}
|
||||
@keyframes navbg {
|
||||
|
||||
@keyframes mainbg {
|
||||
0% {
|
||||
mask-position: 0rem 0rem;
|
||||
background-position: 0rem 0rem;
|
||||
}
|
||||
|
||||
100% {
|
||||
mask-position: 16rem 16rem;
|
||||
background-position: 256px 256px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide {
|
||||
0% {
|
||||
background-position: 0% 100%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 200% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Rubik;
|
||||
src: url("/assets/fonts/Rubik.ttf") format("truetype");
|
||||
font-family: Rubik;
|
||||
src: url("/assets/fonts/Rubik.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Urbanist;
|
||||
src: url("/assets/fonts/Urbanist-Bold.ttf") format("truetype");
|
||||
font-family: Urbanist;
|
||||
src: url("/assets/fonts/Urbanist-Bold.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Pangolin;
|
||||
src: url("/assets/fonts/Pangolin-Regular.ttf") format("truetype");
|
||||
font-family: Pangolin;
|
||||
src: url("/assets/fonts/Pangolin-Regular.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Terminess;
|
||||
src: url("/assets/fonts/TerminessNerdFont-Regular.ttf") format("truetype");
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: Nosey Rodent;
|
||||
src: url("/assets/fonts/noseyrodent.ttf") format("truetype");
|
||||
}
|
||||
|
|
|
|||
BIN
_src/assets/fonts/noseyrodent.ttf
Normal file
BIN
_src/assets/fonts/noseyrodent.ttf
Normal file
Binary file not shown.
BIN
_src/assets/img/art/sundae_funny.png
Normal file
BIN
_src/assets/img/art/sundae_funny.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 942 B |
BIN
_src/assets/img/button/catshaped.gif
Normal file
BIN
_src/assets/img/button/catshaped.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
_src/assets/img/button/okesska_8831_final2.gif
Normal file
BIN
_src/assets/img/button/okesska_8831_final2.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
_src/assets/img/button/powered-by-linux.png
Normal file
BIN
_src/assets/img/button/powered-by-linux.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
_src/assets/img/button/yummy-cricket_krita.png
Normal file
BIN
_src/assets/img/button/yummy-cricket_krita.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
_src/assets/img/changelog/ver7.png
Normal file
BIN
_src/assets/img/changelog/ver7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
_src/assets/img/opengraph/site.png
Normal file
BIN
_src/assets/img/opengraph/site.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
|
|
@ -1,6 +1,8 @@
|
|||
import { audioPath } from './path.js'
|
||||
import { audioPath } from "./path.js";
|
||||
|
||||
let bob = document.getElementById("bob");
|
||||
let help = document.createElement("audio");
|
||||
|
||||
help.src = `${audioPath}bob.ogg`;
|
||||
help.loop = true;
|
||||
bob.appendChild(help);
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
import { audioPath } from "./path.js";
|
||||
|
||||
let pipe = document.getElementById("meow");
|
||||
let preload = new Image();
|
||||
preload.src = "/assets/img/button/braixdragon-cat2.gif";
|
||||
|
||||
let audio = new Audio(`${audioPath}anvil_land_low.ogg`);
|
||||
let hoverTimeout;
|
||||
let hovered = false;
|
||||
let played = localStorage.getItem("audioPlayed") === "true";
|
||||
let audio = new Audio(`${audioPath}anvil_land_low.ogg`);
|
||||
let preload = new Image();
|
||||
preload.src = "/assets/img/button/braixdragon-cat2.gif";
|
||||
|
||||
window.addEventListener("beforeunload", () => {
|
||||
localStorage.removeItem("catflattened");
|
||||
|
|
|
|||
14
_src/assets/js/details-save.js
Normal file
14
_src/assets/js/details-save.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
const detailsElements = document.getElementsByTagName("details");
|
||||
const dropdown = Array.from(detailsElements);
|
||||
|
||||
const save = () => {
|
||||
dropdown.forEach((details, i) => {
|
||||
localStorage.setItem(`details${i}`, details.hasAttribute("open"));
|
||||
});
|
||||
};
|
||||
|
||||
dropdown.forEach((details, i) => {
|
||||
const isOpen = JSON.parse(localStorage.getItem(`details${i}`)) || false;
|
||||
details.toggleAttribute("open", isOpen);
|
||||
details.addEventListener("toggle", save);
|
||||
});
|
||||
|
|
@ -172,7 +172,7 @@ let favorites = [
|
|||
{ className: "togekiss" },
|
||||
{ className: "leafeon" },
|
||||
{ className: "glaceon" },
|
||||
{ className: "porygon-z" },
|
||||
{ className: "porygon-z", title: "Porygon-Z" },
|
||||
{ className: "gallade" },
|
||||
{ className: "froslass" },
|
||||
{ className: "uxie" },
|
||||
|
|
@ -347,10 +347,9 @@ let favorites = [
|
|||
{ className: "snom" },
|
||||
{ className: "indeedee" },
|
||||
{ className: "indeedee-female", title: "Female Indeedee" },
|
||||
{ className: "dragapult" }
|
||||
{ className: "dragapult" },
|
||||
];
|
||||
|
||||
|
||||
function capitalizeFirstLetter(string) {
|
||||
return string.charAt(0).toUpperCase() + string.slice(1);
|
||||
}
|
||||
|
|
@ -370,14 +369,19 @@ function getRandomUniquePkmn(pkmnArray, count) {
|
|||
}
|
||||
|
||||
const party = getRandomUniquePkmn(favorites, 6);
|
||||
const pkmnList = document.getElementById("pkmn");
|
||||
|
||||
party.forEach((pkmnData) => {
|
||||
const listItem = document.createElement("li");
|
||||
const critter = document.createElement("span");
|
||||
critter.className = `${spriteClassBase}${pkmnData.className}`;
|
||||
critter.title = capitalizeFirstLetter(getClassName(pkmnData));
|
||||
document.getElementById("pkmn").appendChild(critter);
|
||||
listItem.appendChild(critter);
|
||||
critter.addEventListener("mouseover", () => {
|
||||
const select = document.createElement("audio");
|
||||
select.src = `${audioPath}select.ogg`;
|
||||
select.play();
|
||||
});
|
||||
|
||||
pkmnList.appendChild(listItem);
|
||||
});
|
||||
|
|
|
|||
27
_src/assets/js/footer.js
Normal file
27
_src/assets/js/footer.js
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
const messages = [
|
||||
"*paws at you*",
|
||||
"[object Object]",
|
||||
"Be kind, or else",
|
||||
"Be nice to others",
|
||||
"byeah",
|
||||
"Coded with my own two paws!",
|
||||
"coffee cheetos chicken",
|
||||
"Did you know? A rabbit is a type of creature",
|
||||
"hop hop",
|
||||
"Hope you're doing all right!",
|
||||
"iPod iPad iPaid iPeed",
|
||||
"let's go refreshing!\n*refreshes, repeat message*\naw dang it\n*refreshes, repeat message*\naw dang it\n*refreshes, repeat message*\naw dan—",
|
||||
"Made with love ❤️",
|
||||
"pyon pyon",
|
||||
"Sunny is a bunny that is funny",
|
||||
"Thanks for stopping by!",
|
||||
"the girl reading this",
|
||||
"This website is gay",
|
||||
"Tricked you, it's Egypt and we're both Phlog Pyros",
|
||||
"U ' x ' U",
|
||||
"Website built by whatever this thing is → 🐇",
|
||||
"You're telling me that a queer coded this?",
|
||||
];
|
||||
const randomize = messages[Math.floor(Math.random() * messages.length)];
|
||||
const footerMessage = document.getElementById("message");
|
||||
footerMessage.innerText = randomize;
|
||||
|
|
@ -1,16 +1,18 @@
|
|||
import { audioPath } from './path.js'
|
||||
import { audioPath } from "./path.js";
|
||||
|
||||
let fox = document.getElementById("fox");
|
||||
let music = document.createElement("audio");
|
||||
|
||||
music.src = `${audioPath}fox.ogg`;
|
||||
music.loop = true;
|
||||
fox.appendChild(music);
|
||||
window.addEventListener("load", function () {
|
||||
music.play();
|
||||
music.muted = true;
|
||||
music.play();
|
||||
music.muted = true;
|
||||
});
|
||||
fox.onmouseover = () => {
|
||||
music.muted = false;
|
||||
music.muted = false;
|
||||
};
|
||||
fox.onmouseout = () => {
|
||||
music.muted = true;
|
||||
music.muted = true;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
const detailsElements = document.getElementsByTagName('details');
|
||||
const dropdown = Array.from(detailsElements);
|
||||
|
||||
const save = () => {
|
||||
dropdown.forEach((details, i) => {
|
||||
localStorage.setItem(`details${i}`, details.hasAttribute('open'));
|
||||
});
|
||||
};
|
||||
|
||||
dropdown.forEach((details, i) => {
|
||||
const isOpen = JSON.parse(localStorage.getItem(`details${i}`)) || false;
|
||||
details.toggleAttribute('open', isOpen);
|
||||
details.addEventListener('toggle', save);
|
||||
|
||||
const svg = details.querySelector('summary svg');
|
||||
if (svg) {
|
||||
svg.style.transition = isOpen ? 'none' : '';
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
dropdown.forEach(details => {
|
||||
const svg = details.querySelector('summary svg');
|
||||
if (svg) svg.style.transition = '';
|
||||
});
|
||||
}, 100);
|
||||
|
|
@ -1,16 +1,17 @@
|
|||
import { audioPath } from './path.js'
|
||||
import { audioPath } from "./path.js";
|
||||
|
||||
let secret = document.getElementById("piss");
|
||||
let baby = new Image();
|
||||
baby.src = "/assets/img/button/piss-baby2.gif";
|
||||
|
||||
secret.addEventListener("mouseover", func, true);
|
||||
|
||||
function func() {
|
||||
secret.src = baby.src;
|
||||
}
|
||||
|
||||
let flashlight = document.createElement("audio");
|
||||
let baby = new Image();
|
||||
|
||||
baby.src = "/assets/img/button/piss-baby2.gif";
|
||||
flashlight.src = `${audioPath}flashlight.ogg`;
|
||||
secret.appendChild(flashlight);
|
||||
|
||||
secret.addEventListener("mouseover", () => flashlight.play(), { once: true });
|
||||
secret.addEventListener(
|
||||
"mouseover",
|
||||
() => {
|
||||
secret.src = baby.src;
|
||||
flashlight.play();
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,371 +0,0 @@
|
|||
import { audioPath } from './path.js'
|
||||
const imgBasePath = "/assets/img/pkmn/";
|
||||
let favorites = [
|
||||
{ img: `${imgBasePath}1.png`, title: "Bulbasaur"},
|
||||
{ img: `${imgBasePath}2.png`, title: "Ivysaur"},
|
||||
{ img: `${imgBasePath}3.png`, title: "Venusaur"},
|
||||
{ img: `${imgBasePath}4.png`, title: "Charmander"},
|
||||
{ img: `${imgBasePath}5.png`, title: "Charmeleon"},
|
||||
{ img: `${imgBasePath}6.png`, title: "Charizard"},
|
||||
{ img: `${imgBasePath}7.png`, title: "Squirtle"},
|
||||
{ img: `${imgBasePath}8.png`, title: "Wartortle"},
|
||||
{ img: `${imgBasePath}9.png`, title: "Blastoise"},
|
||||
{ img: `${imgBasePath}15.png`, title: "Beedrill"},
|
||||
{ img: `${imgBasePath}25.png`, title: "Pikachu"},
|
||||
{ img: `${imgBasePath}26.png`, title: "Raichu"},
|
||||
{ img: `${imgBasePath}28.png`, title: "Sandslash"},
|
||||
{ img: `${imgBasePath}29.png`, title: "Nidoran (Female)"},
|
||||
{ img: `${imgBasePath}30.png`, title: "Nidorina"},
|
||||
{ img: `${imgBasePath}31.png`, title: "Nidoqueen"},
|
||||
{ img: `${imgBasePath}32.png`, title: "Nidoran (Male)"},
|
||||
{ img: `${imgBasePath}33.png`, title: "Nidorino"},
|
||||
{ img: `${imgBasePath}34.png`, title: "Nidoking"},
|
||||
{ img: `${imgBasePath}37.png`, title: "Vulpix"},
|
||||
{ img: `${imgBasePath}38.png`, title: "Ninetales"},
|
||||
{ img: `${imgBasePath}52.png`, title: "Meowth"},
|
||||
{ img: `${imgBasePath}58.png`, title: "Growlithe"},
|
||||
{ img: `${imgBasePath}59.png`, title: "Arcanine"},
|
||||
{ img: `${imgBasePath}79.png`, title: "Slowpoke"},
|
||||
{ img: `${imgBasePath}81.png`, title: "Magnemite"},
|
||||
{ img: `${imgBasePath}82.png`, title: "Magneton"},
|
||||
{ img: `${imgBasePath}87.png`, title: "Dewgong"},
|
||||
{ img: `${imgBasePath}90.png`, title: "Shellder"},
|
||||
{ img: `${imgBasePath}92.png`, title: "Gastly"},
|
||||
{ img: `${imgBasePath}93.png`, title: "Haunter"},
|
||||
{ img: `${imgBasePath}94.png`, title: "Gengar"},
|
||||
{ img: `${imgBasePath}96.png`, title: "Drowzee"},
|
||||
{ img: `${imgBasePath}104.png`, title: "Cubone"},
|
||||
{ img: `${imgBasePath}112.png`, title: "Rhydon"},
|
||||
{ img: `${imgBasePath}115.png`, title: "Kangaskhan"},
|
||||
{ img: `${imgBasePath}131.png`, title: "Lapras"},
|
||||
{ img: `${imgBasePath}133.png`, title: "Eevee"},
|
||||
{ img: `${imgBasePath}134.png`, title: "Vaporeon"},
|
||||
{ img: `${imgBasePath}135.png`, title: "Jolteon"},
|
||||
{ img: `${imgBasePath}136.png`, title: "Flareon"},
|
||||
{ img: `${imgBasePath}137.png`, title: "Porygon"},
|
||||
{ img: `${imgBasePath}138.png`, title: "Omanyte"},
|
||||
{ img: `${imgBasePath}147.png`, title: "Dratini"},
|
||||
{ img: `${imgBasePath}148.png`, title: "Dragonair"},
|
||||
{ img: `${imgBasePath}149.png`, title: "Dragonite"},
|
||||
{ img: `${imgBasePath}150.png`, title: "Mewtwo"},
|
||||
{ img: `${imgBasePath}151.png`, title: "Mew"},
|
||||
{ img: `${imgBasePath}155.png`, title: "Cyndaquil"},
|
||||
{ img: `${imgBasePath}156.png`, title: "Quilava"},
|
||||
{ img: `${imgBasePath}157.png`, title: "Typhlosion"},
|
||||
{ img: `${imgBasePath}158.png`, title: "Totodile"},
|
||||
{ img: `${imgBasePath}159.png`, title: "Croconaw"},
|
||||
{ img: `${imgBasePath}160.png`, title: "Feraligatr"},
|
||||
{ img: `${imgBasePath}162.png`, title: "Furret"},
|
||||
{ img: `${imgBasePath}166.png`, title: "Ledian"},
|
||||
{ img: `${imgBasePath}167.png`, title: "Spinarak"},
|
||||
{ img: `${imgBasePath}172.png`, title: "Pichu"},
|
||||
{ img: `${imgBasePath}175.png`, title: "Togepi"},
|
||||
{ img: `${imgBasePath}176.png`, title: "Togetic"},
|
||||
{ img: `${imgBasePath}177.png`, title: "Natu"},
|
||||
{ img: `${imgBasePath}178.png`, title: "Xatu"},
|
||||
{ img: `${imgBasePath}179.png`, title: "Mareep"},
|
||||
{ img: `${imgBasePath}180.png`, title: "Flaaffy"},
|
||||
{ img: `${imgBasePath}181.png`, title: "Ampharos"},
|
||||
{ img: `${imgBasePath}182.png`, title: "Bellossom"},
|
||||
{ img: `${imgBasePath}183.png`, title: "Marill"},
|
||||
{ img: `${imgBasePath}184.png`, title: "Azumarill"},
|
||||
{ img: `${imgBasePath}187.png`, title: "Hoppip"},
|
||||
{ img: `${imgBasePath}190.png`, title: "Aipom"},
|
||||
{ img: `${imgBasePath}194.png`, title: "Wooper"},
|
||||
{ img: `${imgBasePath}195.png`, title: "Quagsire"},
|
||||
{ img: `${imgBasePath}196.png`, title: "Espeon"},
|
||||
{ img: `${imgBasePath}197.png`, title: "Umbreon"},
|
||||
{ img: `${imgBasePath}198.png`, title: "Murkrow"},
|
||||
{ img: `${imgBasePath}200.png`, title: "Misdreavus"},
|
||||
{ img: `${imgBasePath}202.png`, title: "Girafarig"},
|
||||
{ img: `${imgBasePath}203.png`, title: "Wobbuffet"},
|
||||
{ img: `${imgBasePath}206.png`, title: "Dunsparce"},
|
||||
{ img: `${imgBasePath}212.png`, title: "Scizor"},
|
||||
{ img: `${imgBasePath}213.png`, title: "Shuckle"},
|
||||
{ img: `${imgBasePath}215.png`, title: "Sneasel"},
|
||||
{ img: `${imgBasePath}216.png`, title: "Teddiursa"},
|
||||
{ img: `${imgBasePath}218.png`, title: "Slugma"},
|
||||
{ img: `${imgBasePath}222.png`, title: "Corsola"},
|
||||
{ img: `${imgBasePath}225.png`, title: "Delibird"},
|
||||
{ img: `${imgBasePath}227.png`, title: "Skarmory"},
|
||||
{ img: `${imgBasePath}228.png`, title: "Houndour"},
|
||||
{ img: `${imgBasePath}229.png`, title: "Houndoom"},
|
||||
{ img: `${imgBasePath}231.png`, title: "Phanpy"},
|
||||
{ img: `${imgBasePath}233.png`, title: "Porygon2"},
|
||||
{ img: `${imgBasePath}235.png`, title: "Smeargle"},
|
||||
{ img: `${imgBasePath}241.png`, title: "Miltank"},
|
||||
{ img: `${imgBasePath}245.png`, title: "Suicune"},
|
||||
{ img: `${imgBasePath}248.png`, title: "Tyranitar"},
|
||||
{ img: `${imgBasePath}249.png`, title: "Lugia"},
|
||||
{ img: `${imgBasePath}250.png`, title: "Ho-oh"},
|
||||
{ img: `${imgBasePath}251.png`, title: "Celebi"},
|
||||
{ img: `${imgBasePath}252.png`, title: "Treecko"},
|
||||
{ img: `${imgBasePath}253.png`, title: "Grovyle"},
|
||||
{ img: `${imgBasePath}254.png`, title: "Sceptile"},
|
||||
{ img: `${imgBasePath}255.png`, title: "Torchic"},
|
||||
{ img: `${imgBasePath}257.png`, title: "Blaziken"},
|
||||
{ img: `${imgBasePath}258.png`, title: "Mudkip"},
|
||||
{ img: `${imgBasePath}260.png`, title: "Swampert"},
|
||||
{ img: `${imgBasePath}261.png`, title: "Poochyena"},
|
||||
{ img: `${imgBasePath}262.png`, title: "Mightyena"},
|
||||
{ img: `${imgBasePath}263.png`, title: "Zigzagoon"},
|
||||
{ img: `${imgBasePath}265.png`, title: "Wurmple"},
|
||||
{ img: `${imgBasePath}274.png`, title: "Nuzleaf"},
|
||||
{ img: `${imgBasePath}280.png`, title: "Ralts"},
|
||||
{ img: `${imgBasePath}281.png`, title: "Kirlia"},
|
||||
{ img: `${imgBasePath}282.png`, title: "Gardevoir"},
|
||||
{ img: `${imgBasePath}286.png`, title: "Breloom"},
|
||||
{ img: `${imgBasePath}287.png`, title: "Slakoth"},
|
||||
{ img: `${imgBasePath}298.png`, title: "Azurill"},
|
||||
{ img: `${imgBasePath}300.png`, title: "Skitty"},
|
||||
{ img: `${imgBasePath}301.png`, title: "Delcatty"},
|
||||
{ img: `${imgBasePath}302.png`, title: "Sableye"},
|
||||
{ img: `${imgBasePath}303.png`, title: "Mawile"},
|
||||
{ img: `${imgBasePath}304.png`, title: "Aron"},
|
||||
{ img: `${imgBasePath}306.png`, title: "Aggron"},
|
||||
{ img: `${imgBasePath}311.png`, title: "Plusle"},
|
||||
{ img: `${imgBasePath}312.png`, title: "Minun"},
|
||||
{ img: `${imgBasePath}315.png`, title: "Roselia"},
|
||||
{ img: `${imgBasePath}322.png`, title: "Numel"},
|
||||
{ img: `${imgBasePath}327.png`, title: "Spinda"},
|
||||
{ img: `${imgBasePath}328.png`, title: "Trapinch"},
|
||||
{ img: `${imgBasePath}329.png`, title: "Vibrava"},
|
||||
{ img: `${imgBasePath}330.png`, title: "Flygon"},
|
||||
{ img: `${imgBasePath}334.png`, title: "Altaria"},
|
||||
{ img: `${imgBasePath}335.png`, title: "Zangoose"},
|
||||
{ img: `${imgBasePath}336.png`, title: "Seviper"},
|
||||
{ img: `${imgBasePath}337.png`, title: "Lunatone"},
|
||||
{ img: `${imgBasePath}338.png`, title: "Solrock"},
|
||||
{ img: `${imgBasePath}350.png`, title: "Milotic"},
|
||||
{ img: `${imgBasePath}352.png`, title: "Kecleon"},
|
||||
{ img: `${imgBasePath}354.png`, title: "Banette"},
|
||||
{ img: `${imgBasePath}359.png`, title: "Absol"},
|
||||
{ img: `${imgBasePath}360.png`, title: "Wynaut"},
|
||||
{ img: `${imgBasePath}363.png`, title: "Spheal"},
|
||||
{ img: `${imgBasePath}373.png`, title: "Salamence"},
|
||||
{ img: `${imgBasePath}380.png`, title: "Latias"},
|
||||
{ img: `${imgBasePath}381.png`, title: "Latios"},
|
||||
{ img: `${imgBasePath}384.png`, title: "Rayquaza"},
|
||||
{ img: `${imgBasePath}385.png`, title: "Jirachi"},
|
||||
{ img: `${imgBasePath}387.png`, title: "Turtwig"},
|
||||
{ img: `${imgBasePath}389.png`, title: "Torterra"},
|
||||
{ img: `${imgBasePath}393.png`, title: "Piplup"},
|
||||
{ img: `${imgBasePath}403.png`, title: "Shinx"},
|
||||
{ img: `${imgBasePath}404.png`, title: "Luxio"},
|
||||
{ img: `${imgBasePath}405.png`, title: "Luxray"},
|
||||
{ img: `${imgBasePath}407.png`, title: "Roserade"},
|
||||
{ img: `${imgBasePath}418.png`, title: "Buizel"},
|
||||
{ img: `${imgBasePath}419.png`, title: "Floatzel"},
|
||||
{ img: `${imgBasePath}423.png`, title: "Gastrodon"},
|
||||
{ img: `${imgBasePath}424.png`, title: "Ambipom"},
|
||||
{ img: `${imgBasePath}427.png`, title: "Buneary"},
|
||||
{ img: `${imgBasePath}428.png`, title: "Lopunny"},
|
||||
{ img: `${imgBasePath}429.png`, title: "Mismagius"},
|
||||
{ img: `${imgBasePath}430.png`, title: "Honchkrow"},
|
||||
{ img: `${imgBasePath}431.png`, title: "Glameow"},
|
||||
{ img: `${imgBasePath}432.png`, title: "Purugly"},
|
||||
{ img: `${imgBasePath}445.png`, title: "Garchomp"},
|
||||
{ img: `${imgBasePath}447.png`, title: "Riolu"},
|
||||
{ img: `${imgBasePath}448.png`, title: "Lucario"},
|
||||
{ img: `${imgBasePath}453.png`, title: "Croagunk"},
|
||||
{ img: `${imgBasePath}461.png`, title: "Weavile"},
|
||||
{ img: `${imgBasePath}468.png`, title: "Togekiss"},
|
||||
{ img: `${imgBasePath}470.png`, title: "Leafeon"},
|
||||
{ img: `${imgBasePath}471.png`, title: "Glaceon"},
|
||||
{ img: `${imgBasePath}474.png`, title: "Porygon-Z"},
|
||||
{ img: `${imgBasePath}475.png`, title: "Gallade"},
|
||||
{ img: `${imgBasePath}478.png`, title: "Froslass"},
|
||||
{ img: `${imgBasePath}480.png`, title: "Uxie"},
|
||||
{ img: `${imgBasePath}481.png`, title: "Mesprit"},
|
||||
{ img: `${imgBasePath}482.png`, title: "Azelf"},
|
||||
{ img: `${imgBasePath}487.png`, title: "Giratina"},
|
||||
{ img: `${imgBasePath}488.png`, title: "Cresselia"},
|
||||
{ img: `${imgBasePath}490.png`, title: "Manaphy"},
|
||||
{ img: `${imgBasePath}492.png`, title: "Shaymin"},
|
||||
{ img: `${imgBasePath}493.png`, title: "Arceus"},
|
||||
{ img: `${imgBasePath}494.png`, title: "Victini"},
|
||||
{ img: `${imgBasePath}495.png`, title: "Snivy"},
|
||||
{ img: `${imgBasePath}496.png`, title: "Servine"},
|
||||
{ img: `${imgBasePath}497.png`, title: "Serperior"},
|
||||
{ img: `${imgBasePath}498.png`, title: "Tepig"},
|
||||
{ img: `${imgBasePath}501.png`, title: "Oshawott"},
|
||||
{ img: `${imgBasePath}502.png`, title: "Dewott"},
|
||||
{ img: `${imgBasePath}503.png`, title: "Samurott"},
|
||||
{ img: `${imgBasePath}509.png`, title: "Purrloin"},
|
||||
{ img: `${imgBasePath}510.png`, title: "Liepard"},
|
||||
{ img: `${imgBasePath}515.png`, title: "Panpour"},
|
||||
{ img: `${imgBasePath}516.png`, title: "Simipour"},
|
||||
{ img: `${imgBasePath}529.png`, title: "Drilbur"},
|
||||
{ img: `${imgBasePath}530.png`, title: "Excadrill"},
|
||||
{ img: `${imgBasePath}531.png`, title: "Audino"},
|
||||
{ img: `${imgBasePath}540.png`, title: "Sewaddle"},
|
||||
{ img: `${imgBasePath}541.png`, title: "Swadloon"},
|
||||
{ img: `${imgBasePath}542.png`, title: "Leavanny"},
|
||||
{ img: `${imgBasePath}545.png`, title: "Scolipede"},
|
||||
{ img: `${imgBasePath}546.png`, title: "Cottonee"},
|
||||
{ img: `${imgBasePath}547.png`, title: "Whimsicott"},
|
||||
{ img: `${imgBasePath}548.png`, title: "Petilil"},
|
||||
{ img: `${imgBasePath}549.png`, title: "Lilligant"},
|
||||
{ img: `${imgBasePath}556.png`, title: "Maractus"},
|
||||
{ img: `${imgBasePath}559.png`, title: "Scraggy"},
|
||||
{ img: `${imgBasePath}560.png`, title: "Scrafty"},
|
||||
{ img: `${imgBasePath}566.png`, title: "Archen"},
|
||||
{ img: `${imgBasePath}567.png`, title: "Archeops"},
|
||||
{ img: `${imgBasePath}570.png`, title: "Zorua"},
|
||||
{ img: `${imgBasePath}571.png`, title: "Zoroark"},
|
||||
{ img: `${imgBasePath}572.png`, title: "Minccino"},
|
||||
{ img: `${imgBasePath}573.png`, title: "Cinccino"},
|
||||
{ img: `${imgBasePath}577.png`, title: "Solosis"},
|
||||
{ img: `${imgBasePath}578.png`, title: "Duosion"},
|
||||
{ img: `${imgBasePath}579.png`, title: "Reuniclus"},
|
||||
{ img: `${imgBasePath}580.png`, title: "Ducklett"},
|
||||
{ img: `${imgBasePath}585.png`, title: "Deerling"},
|
||||
{ img: `${imgBasePath}587.png`, title: "Emolga"},
|
||||
{ img: `${imgBasePath}595.png`, title: "Joltik"},
|
||||
{ img: `${imgBasePath}612.png`, title: "Haxorus"},
|
||||
{ img: `${imgBasePath}616.png`, title: "Shelmet"},
|
||||
{ img: `${imgBasePath}619.png`, title: "Mienfoo"},
|
||||
{ img: `${imgBasePath}620.png`, title: "Mienshao"},
|
||||
{ img: `${imgBasePath}633.png`, title: "Deino"},
|
||||
{ img: `${imgBasePath}634.png`, title: "Zweilous"},
|
||||
{ img: `${imgBasePath}637.png`, title: "Volcarona"},
|
||||
{ img: `${imgBasePath}638.png`, title: "Cobalion"},
|
||||
{ img: `${imgBasePath}640.png`, title: "Virizion"},
|
||||
{ img: `${imgBasePath}643.png`, title: "Reshiram"},
|
||||
{ img: `${imgBasePath}644.png`, title: "Zekrom"},
|
||||
{ img: `${imgBasePath}647.png`, title: "Keldeo"},
|
||||
{ img: `${imgBasePath}648.png`, title: "Meloetta"},
|
||||
{ img: `${imgBasePath}3-mega.png`, title: "Mega Venusaur"},
|
||||
{ img: `${imgBasePath}6-mega-x.png`, title: "Mega Charizard X"},
|
||||
{ img: `${imgBasePath}6-mega-y.png`, title: "Mega Charizard Y"},
|
||||
{ img: `${imgBasePath}9-mega.png`, title: "Mega Blastoise"},
|
||||
{ img: `${imgBasePath}15-mega.png`, title: "Mega Beedrill"},
|
||||
{ img: `${imgBasePath}115-mega.png`, title: "Mega Kangaskhan"},
|
||||
{ img: `${imgBasePath}150-mega-x.png`, title: "Mega Mewtwo X"},
|
||||
{ img: `${imgBasePath}150-mega-y.png`, title: "Mega Mewtwo Y"},
|
||||
{ img: `${imgBasePath}181-mega.png`, title: "Mega Ampharos"},
|
||||
{ img: `${imgBasePath}212-mega.png`, title: "Mega Scizor"},
|
||||
{ img: `${imgBasePath}229-mega.png`, title: "Mega Houndoom"},
|
||||
{ img: `${imgBasePath}248-mega.png`, title: "Mega Tyranitar"},
|
||||
{ img: `${imgBasePath}254-mega.png`, title: "Mega Sceptile"},
|
||||
{ img: `${imgBasePath}257-mega.png`, title: "Mega Blaziken"},
|
||||
{ img: `${imgBasePath}260-mega.png`, title: "Mega Swampert"},
|
||||
{ img: `${imgBasePath}282-mega.png`, title: "Mega Gardevoir"},
|
||||
{ img: `${imgBasePath}302-mega.png`, title: "Mega Sableye"},
|
||||
{ img: `${imgBasePath}306-mega.png`, title: "Mega Aggron"},
|
||||
{ img: `${imgBasePath}334-mega.png`, title: "Mega Altaria"},
|
||||
{ img: `${imgBasePath}354-mega.png`, title: "Mega Banette"},
|
||||
{ img: `${imgBasePath}359-mega.png`, title: "Mega Absol"},
|
||||
{ img: `${imgBasePath}373-mega.png`, title: "Mega Salamence"},
|
||||
{ img: `${imgBasePath}428-mega.png`, title: "Mega Lopunny"},
|
||||
{ img: `${imgBasePath}445-mega.png`, title: "Mega Garchomp"},
|
||||
{ img: `${imgBasePath}448-mega.png`, title: "Mega Lucario"},
|
||||
{ img: `${imgBasePath}475-mega.png`, title: "Mega Gallade"},
|
||||
{ img: `${imgBasePath}531-mega.png`, title: "Mega Audino"},
|
||||
{ img: `${imgBasePath}650.png`, title: "Chespin"},
|
||||
{ img: `${imgBasePath}651.png`, title: "Quilladin"},
|
||||
{ img: `${imgBasePath}652.png`, title: "Chesnaught"},
|
||||
{ img: `${imgBasePath}653.png`, title: "Fennekin"},
|
||||
{ img: `${imgBasePath}654.png`, title: "Braixen"},
|
||||
{ img: `${imgBasePath}655.png`, title: "Delphox"},
|
||||
{ img: `${imgBasePath}656.png`, title: "Froakie"},
|
||||
{ img: `${imgBasePath}657.png`, title: "Frogadier"},
|
||||
{ img: `${imgBasePath}658.png`, title: "Greninja"},
|
||||
{ img: `${imgBasePath}674.png`, title: "Pancham"},
|
||||
{ img: `${imgBasePath}676.png`, title: "Furfrou"},
|
||||
{ img: `${imgBasePath}677.png`, title: "Espurr"},
|
||||
{ img: `${imgBasePath}678-male.png`, title: "Meowstic (Male)"},
|
||||
{ img: `${imgBasePath}678-female.png`, title: "Meowstic (Female)"},
|
||||
{ img: `${imgBasePath}694.png`, title: "Helioptile"},
|
||||
{ img: `${imgBasePath}695.png`, title: "Heliolisk"},
|
||||
{ img: `${imgBasePath}699.png`, title: "Aurorus"},
|
||||
{ img: `${imgBasePath}700.png`, title: "Sylveon"},
|
||||
{ img: `${imgBasePath}701.png`, title: "Hawlucha"},
|
||||
{ img: `${imgBasePath}704.png`, title: "Goomy"},
|
||||
{ img: `${imgBasePath}705.png`, title: "Sliggoo"},
|
||||
{ img: `${imgBasePath}706.png`, title: "Goodra"},
|
||||
{ img: `${imgBasePath}708.png`, title: "Phantump"},
|
||||
{ img: `${imgBasePath}714.png`, title: "Noibat"},
|
||||
{ img: `${imgBasePath}715.png`, title: "Noivern"},
|
||||
{ img: `${imgBasePath}716.png`, title: "Xerneas"},
|
||||
{ img: `${imgBasePath}717.png`, title: "Yveltal"},
|
||||
{ img: `${imgBasePath}722.png`, title: "Rowlet"},
|
||||
{ img: `${imgBasePath}723.png`, title: "Dartrix"},
|
||||
{ img: `${imgBasePath}724.png`, title: "Decidueye"},
|
||||
{ img: `${imgBasePath}725.png`, title: "Litten"},
|
||||
{ img: `${imgBasePath}726.png`, title: "Torracat"},
|
||||
{ img: `${imgBasePath}728.png`, title: "Popplio"},
|
||||
{ img: `${imgBasePath}729.png`, title: "Brionne"},
|
||||
{ img: `${imgBasePath}730.png`, title: "Primarina"},
|
||||
{ img: `${imgBasePath}731.png`, title: "Pikipek"},
|
||||
{ img: `${imgBasePath}743.png`, title: "Ribombee"},
|
||||
{ img: `${imgBasePath}744.png`, title: "Rockruff"},
|
||||
{ img: `${imgBasePath}745.png`, title: "Lycanroc"},
|
||||
{ img: `${imgBasePath}745-dusk.png`, title: "Lycanroc (Dusk Form)"},
|
||||
{ img: `${imgBasePath}745-midnight.png`, title: "Lycanroc (Midnight Form)"},
|
||||
{ img: `${imgBasePath}747.png`, title: "Mareanie"},
|
||||
{ img: `${imgBasePath}748.png`, title: "Toxapex"},
|
||||
{ img: `${imgBasePath}753.png`, title: "Fomantis"},
|
||||
{ img: `${imgBasePath}754.png`, title: "Lurantis"},
|
||||
{ img: `${imgBasePath}757.png`, title: "Salandit"},
|
||||
{ img: `${imgBasePath}758.png`, title: "Salazzle"},
|
||||
{ img: `${imgBasePath}759.png`, title: "Stufful"},
|
||||
{ img: `${imgBasePath}760.png`, title: "Bewear"},
|
||||
{ img: `${imgBasePath}762.png`, title: "Steenee"},
|
||||
{ img: `${imgBasePath}763.png`, title: "Tsareena"},
|
||||
{ img: `${imgBasePath}771.png`, title: "Pyukumuku"},
|
||||
{ img: `${imgBasePath}775.png`, title: "Komala"},
|
||||
{ img: `${imgBasePath}778.png`, title: "Mimikyu"},
|
||||
{ img: `${imgBasePath}782.png`, title: "Jangmo-o"},
|
||||
{ img: `${imgBasePath}784.png`, title: "Kommo-o"},
|
||||
{ img: `${imgBasePath}786.png`, title: "Tapu Lele"},
|
||||
{ img: `${imgBasePath}789.png`, title: "Cosmog"},
|
||||
{ img: `${imgBasePath}791.png`, title: "Solgaleo"},
|
||||
{ img: `${imgBasePath}792.png`, title: "Lunala"},
|
||||
{ img: `${imgBasePath}797.png`, title: "Celesteela"},
|
||||
{ img: `${imgBasePath}802.png`, title: "Marshadow"},
|
||||
{ img: `${imgBasePath}803.png`, title: "Poipole"},
|
||||
{ img: `${imgBasePath}807.png`, title: "Zeraora"},
|
||||
{ img: `${imgBasePath}810.png`, title: "Grookey"},
|
||||
{ img: `${imgBasePath}813.png`, title: "Scorbunny"},
|
||||
{ img: `${imgBasePath}814.png`, title: "Raboot"},
|
||||
{ img: `${imgBasePath}815.png`, title: "Cinderace"},
|
||||
{ img: `${imgBasePath}816.png`, title: "Sobble"},
|
||||
{ img: `${imgBasePath}817.png`, title: "Drizzile"},
|
||||
{ img: `${imgBasePath}818.png`, title: "Inteleon"},
|
||||
{ img: `${imgBasePath}823.png`, title: "Corviknight"},
|
||||
{ img: `${imgBasePath}827.png`, title: "Nickit"},
|
||||
{ img: `${imgBasePath}828.png`, title: "Thievul"},
|
||||
{ img: `${imgBasePath}831.png`, title: "Wooloo"},
|
||||
{ img: `${imgBasePath}835.png`, title: "Yamper"},
|
||||
{ img: `${imgBasePath}858.png`, title: "Hatterene"},
|
||||
{ img: `${imgBasePath}859.png`, title: "Impidimp"},
|
||||
{ img: `${imgBasePath}862.png`, title: "Obstagoon"},
|
||||
{ img: `${imgBasePath}869.png`, title: "Alcremie"},
|
||||
{ img: `${imgBasePath}870.png`, title: "Falinks"},
|
||||
{ img: `${imgBasePath}872.png`, title: "Snom"},
|
||||
{ img: `${imgBasePath}876-male.png`, title: "Indeedee (Male)"},
|
||||
{ img: `${imgBasePath}876-female.png`, title: "Indeedee (Female)"},
|
||||
{ img: `${imgBasePath}887.png`, title: "Dragapult"}
|
||||
];
|
||||
function getRandomUniquePkmn(pkmnArray, count) {
|
||||
const uniquePkmn = new Set();
|
||||
const totalPkmn = pkmnArray.length;
|
||||
while (uniquePkmn.size < count && uniquePkmn.size < totalPkmn) {
|
||||
const randomIndex = Math.floor(Math.random() * totalPkmn);
|
||||
uniquePkmn.add(pkmnArray[randomIndex]);
|
||||
}
|
||||
return Array.from(uniquePkmn).slice(0, count);
|
||||
}
|
||||
const party = getRandomUniquePkmn(favorites, 6);
|
||||
party.forEach(pkmnData => {
|
||||
const critter = document.createElement("img");
|
||||
critter.src = pkmnData.img;
|
||||
critter.title = pkmnData.title;
|
||||
document.getElementById("pkmn").appendChild(critter);
|
||||
critter.addEventListener("mouseover", () => {
|
||||
const select = document.createElement("audio");
|
||||
select.src = `${audioPath}select.ogg`;
|
||||
select.play();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
const basePath = "/assets/css";
|
||||
const themeToggle = document.getElementById("theme-toggle");
|
||||
const themeStylesheet = document.getElementById("custom");
|
||||
const themeStylesheet = document.getElementById("themed");
|
||||
|
||||
const themes = [
|
||||
{ name: "system", file: "default/system.css" },
|
||||
{ name: "citrus", file: "citrus/citrus.css" },
|
||||
{ name: "citrus", file: "citrus/default.css" },
|
||||
];
|
||||
|
||||
let currentTheme = localStorage.getItem("theme") || themes[0].name;
|
||||
|
|
|
|||
|
|
@ -4,4 +4,7 @@ images:
|
|||
alt: Various pixel art animations of Sundae as a character from Nuclear Throne.
|
||||
date: 2021-01-25
|
||||
pixel: true
|
||||
programs:
|
||||
- name: paint.net
|
||||
src: https://www.getpaint.net/
|
||||
---
|
||||
|
|
|
|||
|
|
@ -8,12 +8,16 @@ images:
|
|||
alt: Revisioned front-facing bust portrait of Sundae, with shinier hair.
|
||||
date: 2023-04-14
|
||||
pixel: true
|
||||
programs:
|
||||
- name: lvllvl
|
||||
src: https://lvllvl.com
|
||||
palettes:
|
||||
- name: Calm 48
|
||||
src: https://lospec.com/palette-list/calm-48
|
||||
---
|
||||
|
||||
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:` [Calm 48](https://lospec.com/palette-list/calm-48)*
|
||||
|
||||
`*The lime green nose is a modification and not part of the base palette.`
|
||||
The lime green nose is a modification and not part of the base palette.
|
||||
|
|
|
|||
|
|
@ -20,6 +20,9 @@ flags:
|
|||
alt: Rainbow pride flag
|
||||
- src: /assets/img/flag/agender.svg
|
||||
alt: Agender pride flag
|
||||
programs:
|
||||
- name: ACPatterns
|
||||
src: https://acpatterns.com/
|
||||
---
|
||||
|
||||
Originally made to be used as a town flag design for my Animal Crossing New Leaf town.
|
||||
|
|
|
|||
|
|
@ -3,4 +3,7 @@ images:
|
|||
- src: /assets/img/art/sundae_bunbed.png
|
||||
alt: Full-length portrait of Sundae propping his left leg up on his bed—which is just a mattress—with his right leg off to the side of it.
|
||||
date: 2021-12-24
|
||||
programs:
|
||||
- name: Krita
|
||||
src: https://krita.org/
|
||||
---
|
||||
|
|
|
|||
|
|
@ -6,9 +6,13 @@ images:
|
|||
- src: /assets/img/art/sundae_city.png
|
||||
alt: Newer version, with more vibrancy in the color blending.
|
||||
date: 2022-05-22
|
||||
programs:
|
||||
- name: paint.net
|
||||
src: https://getpaint.net
|
||||
- name: GNU Image Manipulation Program
|
||||
src: https://gimp.org/
|
||||
---
|
||||
|
||||
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 [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.
|
||||
When I was switching over to GIMP, 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.
|
||||
|
|
|
|||
15
_src/data/art/artwork/funny bunny.md
Normal file
15
_src/data/art/artwork/funny bunny.md
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
images:
|
||||
- src: /assets/img/art/sundae_funny.png
|
||||
alt: Pixel artwork of Sundae's face up close with half-lidded eyes.
|
||||
date: 2025-10-12
|
||||
pixel: true
|
||||
programs:
|
||||
- name: Aseprite
|
||||
src: https://www.aseprite.org/
|
||||
palettes:
|
||||
- name: AAP-RadiantPLUS
|
||||
src: https://lospec.com/palette-list/aap-radiantplus
|
||||
---
|
||||
|
||||
I hired this bunny to stare at you.
|
||||
|
|
@ -3,4 +3,7 @@ images:
|
|||
- src: /assets/img/art/sundae_dragon1.png
|
||||
alt: Bust pixel art portrait of Sundae as a furred dragon. His eyes are closed with a relaxed look on his face.
|
||||
date: 2021-08-03
|
||||
programs:
|
||||
- name: MS Paint
|
||||
src: https://www.microsoft.com/en-us/windows/paint
|
||||
---
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@ images:
|
|||
- src: /assets/img/art/sundae_dragon2.png
|
||||
alt: Bust portrait of Sundae as a furred dragon. He's looking at the viewer with a concerned look on his face, and flopped-over dragon ears.
|
||||
date: 2021-12-24
|
||||
programs:
|
||||
- name: Krita
|
||||
src: https://krita.org/
|
||||
---
|
||||
|
||||
This was supposed to be a full-length portrait of Sundae's dragon form, but I had difficulty figuring out perspective, drawing dragon wings and ultimately got frustrated.
|
||||
|
|
|
|||
|
|
@ -3,13 +3,19 @@ images:
|
|||
- src: /assets/img/art/sundae_glistening.png
|
||||
alt: Front-facing portrait of Sundae focused on the right side of his face. He looks vibrant and has glossy features. His hair, nose, eye and eyelid are particularly shiny.
|
||||
date: 2023-11-09
|
||||
- src: /assets/img/art/sundae_glistening-old.png
|
||||
alt: Older version, overall more sketchy
|
||||
date: 2023-11-07
|
||||
programs:
|
||||
- name: Krita
|
||||
src: https://krita.org/
|
||||
---
|
||||
|
||||
Incredibly proud of this!
|
||||
|
||||
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.
|
||||
I used <span>[TOMBOFNULL's stipple beast brush pack](https://tombofnull.itch.io/stipple-beast-brush-pack)</span>, which I'd been meaning to try out before.
|
||||
|
||||
Inspired by one of [kaitty's](https://kaitty.com) avatars (specifically from their bandcamp), which I thought was really cute.
|
||||
Inspired by one of <span>[kaitty's](https://kaitty.com)</span> 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.
|
||||
|
||||
|
|
|
|||
|
|
@ -3,4 +3,7 @@ images:
|
|||
- src: /assets/img/art/sundae_icon.svg
|
||||
alt: Side portrait vector graphic artwork of Sundae.
|
||||
date: 2023-01-17
|
||||
programs:
|
||||
- name: Inkscape
|
||||
src: https://inkscape.org/
|
||||
---
|
||||
|
|
|
|||
|
|
@ -4,8 +4,13 @@ images:
|
|||
alt: Pixel art animation of Sundae licking the screen.
|
||||
date: 2025-03-18
|
||||
pixel: true
|
||||
programs:
|
||||
- name: Aseprite
|
||||
src: https://www.aseprite.org/
|
||||
- name: GNU Image Manipulation Program
|
||||
src: https://gimp.org/
|
||||
---
|
||||
|
||||
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).
|
||||
I got bored one day and I decided on a whim to make my own lick icon from <span>[Michi's lick icon base](https://www.deviantart.com/sketchmichi/art/Lick-icon-base-201253097)</span>.
|
||||
|
||||
Pretty happy with it!
|
||||
|
|
@ -3,6 +3,9 @@ images:
|
|||
- src: /assets/img/art/sundae_refsheet-new-unfinished.png
|
||||
alt: Reference/model sheet of Sundae with a full-length front portrait, T-posed.
|
||||
date: 2025-02-11
|
||||
programs:
|
||||
- name: Krita
|
||||
src: https://krita.org/
|
||||
---
|
||||
|
||||
Half-finished, was supposed to include a back and side view but I didn't have much motivation to keep going.
|
||||
|
|
@ -9,9 +9,14 @@ images:
|
|||
flags:
|
||||
- src: /assets/img/flag/pansexual.svg
|
||||
alt: Pansexual pride flag
|
||||
programs:
|
||||
- name: Clip Studio Paint
|
||||
src: https://clipstudio.net/
|
||||
- name: Krita
|
||||
src: https://krita.org/
|
||||
---
|
||||
|
||||
|
||||
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.
|
||||
First drawn in Clip Studio Paint, but I eventually settled on Krita 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.
|
||||
|
|
|
|||
|
|
@ -3,4 +3,7 @@ images:
|
|||
- src: /assets/img/art/sundae_backdrop.svg
|
||||
alt: Front-facing bust portrait vector graphic artwork of Sundae, for the backdrop of the site. The colors are warm orange tones and his eyes are closed.
|
||||
date: 2023-07-17
|
||||
programs:
|
||||
- name: Inkscape
|
||||
src: https://inkscape.org/
|
||||
---
|
||||
|
|
|
|||
|
|
@ -3,8 +3,11 @@ images:
|
|||
- src: /assets/img/art/sundae_starchild.png
|
||||
alt: Full-length portrait of Sundae in a glowing blue and pink form with white hair, suspended in outer space; sleeping on the edge of a blue nebula on a space gas cloud that's his size.
|
||||
date: 2023-07-12
|
||||
programs:
|
||||
- name: Krita
|
||||
src: https://krita.org/
|
||||
---
|
||||
|
||||
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).
|
||||
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 [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!
|
||||
|
|
|
|||
|
|
@ -4,10 +4,13 @@ images:
|
|||
alt: Bust portrait pixel art doodle of Sundae in monochrome and dithering.
|
||||
date: 2020-05-06
|
||||
pixel: true
|
||||
programs:
|
||||
- name: MS Paint
|
||||
src: https://www.microsoft.com/en-us/windows/paint
|
||||
---
|
||||
|
||||
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 [Cave Story's soundtracks](https://youtube.com/@fosstracks/videos), 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 <span>[Cave Story's soundtracks](https://youtube.com/@fosstracks/videos)</span>, since at the time, there weren't any great uploads.
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ images:
|
|||
alt: Half-length portrait of Sundae getting a head pat from a disembodied white hand.
|
||||
date: 2021-11-18
|
||||
pixel: true
|
||||
programs:
|
||||
- name: MS Paint
|
||||
src: https://www.microsoft.com/en-us/windows/paint
|
||||
---
|
||||
|
||||
Done in Microsoft Paint.
|
||||
|
|
@ -4,6 +4,9 @@ images:
|
|||
alt: Pixel art avatar of Sundae as a mimiga character from Cave Story.
|
||||
date: 2020-11-12
|
||||
pixel: true
|
||||
programs:
|
||||
- name: paint.net
|
||||
src: https://www.getpaint.net/
|
||||
---
|
||||
|
||||
This is made using Sue Sakamoto's portrait as a base.
|
||||
|
|
@ -3,8 +3,11 @@ images:
|
|||
- src: /assets/img/art/sundae_refsheet.png
|
||||
alt: Reference/model sheet of Sundae with full-length front and side portraits and a list of colors used inbetween.
|
||||
date: 2023-03-26
|
||||
programs:
|
||||
- name: Krita
|
||||
src: https://krita.org/
|
||||
---
|
||||
|
||||
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.
|
||||
For this, I took reference from the work of <span>[Dr. Presto (18+ warning)](https://twitter.com/presswer)</span>, 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.
|
||||
|
|
|
|||
|
|
@ -7,15 +7,19 @@ attachments:
|
|||
- src: /assets/img/blog/bun.png
|
||||
alt: In-game screenshot of the avatar
|
||||
flags:
|
||||
- src: /assets/img/flag/trans.svg
|
||||
alt: Transgender pride flag
|
||||
- src: /assets/img/flag/trans.svg
|
||||
alt: Transgender pride flag
|
||||
programs:
|
||||
- name: lvllvl
|
||||
src: https://lvllvl.com
|
||||
palettes:
|
||||
- name: CS112-V2
|
||||
src: https://lospec.com/palette-list/cs112-v2
|
||||
---
|
||||
|
||||
Made using [lvllvl](https://lvllvl.com/)'s vector mode, with the "modular shapes" vector set.
|
||||
Made using lvllvl'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:` [CS112-V2](https://lospec.com/palette-list/cs112-v2)
|
||||
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.
|
||||
|
|
@ -7,8 +7,12 @@ images:
|
|||
attachments:
|
||||
- src: /assets/img/blog/kass.jpg
|
||||
alt: In-game screenshot of Kass that I took as reference.
|
||||
programs:
|
||||
- name: lvllvl
|
||||
src: https://lvllvl.com
|
||||
palettes:
|
||||
- name: New Worlds 46
|
||||
src: https://lospec.com/palette-list/new-worlds-46
|
||||
---
|
||||
|
||||
A PETSCII rendition of a screenshot that I took in The Legend of Zelda: Breath of the Wild.
|
||||
|
||||
`Color palette used:` [New Worlds 46](https://lospec.com/palette-list/new-worlds-46)
|
||||
A PETSCII rendition of a screenshot that I took in The Legend of Zelda: Breath of the Wild.
|
||||
|
|
@ -4,10 +4,14 @@ images:
|
|||
alt: Front-facing half-length portrait PETSCII artwork of Lurantis from Pokémon, but with a zig-zag mouth.
|
||||
date: 2023-02-15
|
||||
pixel: true
|
||||
programs:
|
||||
- name: lvllvl
|
||||
src: https://lvllvl.com
|
||||
palettes:
|
||||
- name: Pastel Horizon
|
||||
src: https://lospec.com/palette-list/pastel-horizon
|
||||
---
|
||||
|
||||
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.
|
||||
This isn't so much PETSCII as it is pixel art, but it's my first artwork that I've done using lvllvl, which is to say that this is done using a bitmap character set, despite it looking like pixel art.
|
||||
|
||||
[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:` [Pastel Horizon](https://lospec.com/palette-list/pastel-horizon)
|
||||
<span>[Lurantis don't have a mouth](https://archives.bulbagarden.net/wiki/Category:Lurantis)</span>, but I thought I'd give them one anyway, because they look cute with.
|
||||
|
|
@ -3,10 +3,10 @@ images:
|
|||
- src: /assets/img/art/petscii_sue.png
|
||||
alt: Sue Sakamoto sitting and looking out from the Outer Wall.
|
||||
date: 2023-01-16
|
||||
palettes:
|
||||
- name: Commodore 64
|
||||
---
|
||||
|
||||
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.
|
||||
Cave Story!!! The first PETSCII artwork that I've done before knowing the existence of <span>[lvllvl](https://lvllvl.com/)</span>, using a much less user-friendly tool.
|
||||
|
||||
Inspired by [kiophen](https://mileshouse.neocities.org) and [lati](https://creature0354.neocities.org)'s first PETSCII works!
|
||||
|
||||
`Color palette used:` Commodore 64
|
||||
Inspired by <span>[kiophen](https://mileshouse.neocities.org)</span> and <span>[lati](https://creature0354.neocities.org)</span>'s first PETSCII works!
|
||||
|
|
@ -3,6 +3,7 @@ images:
|
|||
- src: /assets/img/art/klonoa_sitting.png
|
||||
alt: Klonoa sitting on a ledge, with a hand on his knee and right leg dangling from the viewer's side.
|
||||
date: 2021-11-18
|
||||
programs:
|
||||
- name: MS Paint
|
||||
src: https://www.microsoft.com/en-us/windows/paint
|
||||
---
|
||||
|
||||
Done in Microsoft Paint.
|
||||
|
|
@ -3,4 +3,7 @@ images:
|
|||
- src: /assets/img/art/klonoa.png
|
||||
alt: Monotone sketch of Klonoa. He's standing, looking at the viewer and waving his hand.
|
||||
date: 2023-02-13
|
||||
programs:
|
||||
- name: Krita
|
||||
src: https://krita.org/
|
||||
---
|
||||
|
|
@ -3,8 +3,11 @@ images:
|
|||
- src: /assets/img/art/mallow.png
|
||||
alt: Mallow from Cavern Crusher, sitting on the ledge of a mossy stone pit with water at the bottom.
|
||||
date: 2025-08-03
|
||||
programs:
|
||||
- name: Krita
|
||||
src: https://krita.org/
|
||||
---
|
||||
[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).
|
||||
<span>[Mallow!](https://caverncrusher.com/Mallow)</span> I love this goober. It's from a ROBLOX game titled <span>[Cavern Crusher](https://www.roblox.com/games/15121756860/CAVERN-CRUSHER)</span> 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.
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@ images:
|
|||
- src: /assets/img/art/sibuxiang.png
|
||||
alt: Side portrait of qilin Sibuxiang from 有兽焉 (Fabulous Beasts).
|
||||
date: 2025-01-07
|
||||
programs:
|
||||
- name: Krita
|
||||
src: https://krita.org/
|
||||
---
|
||||
|
||||
Yeah, I read the gay chinese animal manga...
|
||||
|
|
@ -1,11 +1,16 @@
|
|||
## Bio
|
||||
|
||||
<img src="/assets/img/art/sundae_icon.svg" alt="Vector icon of Sunny" style="width: 128px;">
|
||||
|
||||
Hi! My name's Sunny. I'm:
|
||||
|
||||
* an artist
|
||||
* a writer
|
||||
* an audio and video editor
|
||||
* a graphic designer
|
||||
* a web designer
|
||||
* a bunny <img src="/assets/img/icon/rabbit_1f407.gif" alt="🐇">
|
||||
- an artist
|
||||
- a writer
|
||||
- an audio and video editor
|
||||
- a graphic designer
|
||||
- a web designer
|
||||
- a bunny <span class="emoji"><img src="/assets/img/icon/rabbit_1f407.gif" alt="🐇"></span>
|
||||
|
||||
I identify as: <span id="agender">agender</span>, <span id="aromantic">aromantic</span> and <span id="pansexual">pansexual</span>.
|
||||
|
||||
_TO DO: add more text here plz. kthxbai ^\_^_
|
||||
|
|
@ -5,20 +5,26 @@ modified: 2025-05-23
|
|||
blurb: <p>Invalid DateTime. ha, got you.</p>
|
||||
avatar: /assets/img/art/sundae_glistening.png
|
||||
---
|
||||
|
||||
## {{page.fileSlug}}
|
||||
|
||||
<time datetime="{{date|ISO}}">{{date|readable}}</time>
|
||||
|
||||
<section aria-label="Post warning">WARNING: BORING NERD TOPIC AHOY</section>
|
||||
<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 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
|
||||
* rebasing large parts of the page styling
|
||||
* a larger emphasis on accessibility
|
||||
|
||||
- converting page elements into `.json` data tables
|
||||
- rebasing large parts of the page styling
|
||||
- a larger emphasis on accessibility
|
||||
|
||||
### I have <s>no</s> some idea what I'm doing
|
||||
|
||||
|
|
@ -30,7 +36,6 @@ I was **very eager** to start working on it, and because I decided to do so late
|
|||
|
||||
### 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 [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.
|
||||
|
|
@ -38,19 +43,24 @@ Regardless, I had ported over the base layout and most pages, which would be aro
|
|||
Currently, my filters are handled really shittily, but they work whenever I build my site.
|
||||
|
||||
Here's how I currently have my filters set up for dates in my `.eleventy.js` file, if you also happen to struggle with this:
|
||||
|
||||
```js
|
||||
const { DateTime } = require("luxon");
|
||||
|
||||
module.exports = function(eleventyConfig) {
|
||||
eleventyConfig.addFilter("postDate", (dateObj) => {
|
||||
return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toFormat('yyyy-MM-dd');
|
||||
});
|
||||
eleventyConfig.addFilter("galleryDate", (dateObj) => {
|
||||
return DateTime.fromISO(dateObj, { zone: 'utc' }).toLocaleString(DateTime.DATE_FULL);
|
||||
});
|
||||
eleventyConfig.addFilter("readableDate", (dateObj) => {
|
||||
return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toLocaleString(DateTime.DATE_FULL);
|
||||
});
|
||||
module.exports = function (eleventyConfig) {
|
||||
eleventyConfig.addFilter("postDate", (dateObj) => {
|
||||
return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat("yyyy-MM-dd");
|
||||
});
|
||||
eleventyConfig.addFilter("galleryDate", (dateObj) => {
|
||||
return DateTime.fromISO(dateObj, { zone: "utc" }).toLocaleString(
|
||||
DateTime.DATE_FULL
|
||||
);
|
||||
});
|
||||
eleventyConfig.addFilter("readableDate", (dateObj) => {
|
||||
return DateTime.fromJSDate(dateObj, { zone: "utc" }).toLocaleString(
|
||||
DateTime.DATE_FULL
|
||||
);
|
||||
});
|
||||
};
|
||||
```
|
||||
|
||||
|
|
@ -62,4 +72,4 @@ Before you ask: No, I couldn't condense it into two filters, I tried. I'm far to
|
|||
|
||||
Despite my struggles, I think Eleventy is a great piece of software, it's just that I'm not knowledgeable enough to leverage its strengths to the fullest.
|
||||
|
||||
The fault point here is not even Eleventy itself, but just a popular JavaScript library for dealing with time.
|
||||
The fault point here is not even Eleventy itself, but just a popular JavaScript library for dealing with time.
|
||||
|
|
|
|||
|
|
@ -6,13 +6,14 @@ blurb: <p><a href="https://blog.codinghorror.com/the-works-on-my-machine-certifi
|
|||
avatar: /assets/img/art/sundae_glistening.png
|
||||
---
|
||||
## {{page.fileSlug}}
|
||||
|
||||
<time datetime="{{date|ISO}}">{{date|readable}}</time>
|
||||
|
||||
<section aria-label="Addendum">
|
||||
|
||||
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.
|
||||
With Microsoft announcing that <span>[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)</span>, 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 a handy resource](https://kde.org/for/w10-exiles/) if you aren't sure how to proceed.
|
||||
<span>[Here's a handy resource](https://kde.org/for/w10-exiles/)</span> 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>
|
||||
|
|
@ -21,10 +22,10 @@ I've been using Linux exclusively for the past 3 months and the switch to it has
|
|||
|
||||
My main "worries" and/or misconceptions before getting into it were:
|
||||
|
||||
* the supposed lack of programs and/or games
|
||||
* learning the terminal
|
||||
* learning the different directory structure
|
||||
* issues with my Nvidia GPU
|
||||
* the supposed lack of programs and/or games
|
||||
* learning the terminal
|
||||
* learning the different directory structure
|
||||
* issues with my Nvidia GPU
|
||||
|
||||
<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>
|
||||
|
|
@ -37,23 +38,22 @@ 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 [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 went to set up a virtual machine to understand what I'd want out of a "new" operating system, so I tried out <span>[Fedora Workstation](https://fedoraproject.org/#editions)</span> 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 [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!
|
||||
...Until I found <span>[Debian's System Installer for Windows (win32loader)](https://wiki.debian.org/DebianInstaller/Loader)</span>, 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><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.
|
||||
<aside><span><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></span> 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 [Debian](https://www.debian.org) to anyone new to Linux whatsoever, or with the method I used.
|
||||
I would <u>not recommend</u> installing <span>[Debian](https://www.debian.org)</span> to anyone new to Linux whatsoever, or with the method I used.
|
||||
|
||||
Here's a little anecdote:
|
||||
|
||||
A number of things went wrong on my first install, like my network devices being wiped off, and as a result, being unable to update my system via apt (I thought that it was DNS causing issues or not having enough mirrors for packages), and then it was unable to boot into my desktop environment, but not before **almost deleting my entire system** because of apt deciding to delete a ton of system packages in the process of trying to get Nvidia drivers to work.
|
||||
|
||||
|
||||
In retrospect, it's pretty fucking funny, but in the moment I was dreading the possibility of bricking my system.
|
||||
...Debian! But also Nvidia's awful driver support for Linux.
|
||||
|
||||
|
|
@ -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:
|
||||
|
||||
* [Fedora](https://fedoraproject.org)
|
||||
* <span>[Fedora](https://fedoraproject.org)</span>
|
||||
_(Aforementioned in a virtual machine. Overall very solid, might come around to using it again)_
|
||||
* [Manjaro](https://manjaro.org/)
|
||||
* <span>[Manjaro](https://manjaro.org/)</span>
|
||||
_(Tries too hard being beginner-friendly, needed to tinker to get my Nvidia GPU to work) as of v24/Wynsdey_
|
||||
* [EndeavourOS](https://endeavouros.com/)
|
||||
* <span>[EndeavourOS](https://endeavouros.com/)</span>
|
||||
_(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.
|
||||
|
|
@ -81,20 +81,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:
|
||||
|
||||
|
||||
* [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.
|
||||
* <span>[Notepad++](https://notepad-plus-plus.org)</span>, replaced by <span>[VSCodium](https://vscodium.com/)</span>
|
||||
* <span>[paint.net](https://getpaint.net/)</span>, replaced by <span>[GIMP](https://www.gimp.org)</span>
|
||||
* <span>[foobar2000](https://www.foobar2000.org)</span>, replaced by [DeaDBeeF](https://deadbeef.sourceforge.io/)
|
||||
* <span>[Nvidia ShadowPlay](https://www.nvidia.com/en-us/geforce/geforce-experience/shadowplay/)</span>, replaced by <span>[OBS Studio](https://obsproject.com)</span>, 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:
|
||||
|
||||
* [ShareX](https://getsharex.com/)
|
||||
* <span>[ShareX](https://getsharex.com/)</span>
|
||||
_(screenshotting utility)_
|
||||
* [Everything by voidtools](https://www.voidtools.com/)
|
||||
* <span>[Everything by voidtools](https://www.voidtools.com/)</span>
|
||||
_(fast file search/indexer)_
|
||||
|
||||
<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>
|
||||
<aside>If you are curious about what kind of programs Linux offers, take a look at <span><img src="https://www.google.com/s2/favicons?domain=https://kde.org" alt=""><a href="https://apps.kde.org">KDE apps</a></span>, <span><img src="https://www.google.com/s2/favicons?domain=https://gnome.org" alt=""><a href="https://apps.gnome.org">GNOME apps</a></span> and <span><img src="https://www.google.com/s2/favicons?domain=https://flathub.org" alt=""><a href="https://flathub.org">Flathub</a></span>.</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.
|
||||
|
|
@ -107,4 +106,4 @@ Everything by voidtools is just muscle memory as a result of Windows's slow sear
|
|||
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!
|
||||
...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!
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ title: Version 4
|
|||
- 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)
|
||||
- Fixed weird behaviour with the [`float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float) on the sidebar
|
||||
- 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)
|
||||
- Changelog is now Windows 98-themed
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ Read the [accompanying blog post](/blog/rewrite-2.0)
|
|||
- Previously, they were a direct link to the artwork
|
||||
- Changed [Changelog](/changelog)
|
||||
- Fixed trailing nests and now processed using [Prettier](https://github.com/prettier/prettier)
|
||||
- Made modular with templating
|
||||
- Made to be data-driven
|
||||
- Previously, everything was written manually under one page
|
||||
- Updated my 88x31 button [](/)
|
||||
- Attribution:
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ Polished the old theme
|
|||
- Changed [Home](/home)
|
||||
- Added `details` to [interests](/home#interests)
|
||||
- Changed [Gallery](/gallery)
|
||||
- Artwork pages themselves are now more modular
|
||||
- Artwork pages themselves are now data-driven
|
||||
- Added a counter if there's multiple artworks in one entry
|
||||
- Added missing permalinks
|
||||
- Changed `font-size` on some pages to be slightly bigger
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
Website (hopefully) fixed for Chromium-based browsers _...grr_
|
||||
|
||||
- Changed sidebar
|
||||
- Added an animated tiled paw background for desktop view
|
||||
- ~~Added an animated tiled paw background for desktop view~~
|
||||
- Changed [Home](/home)
|
||||
- Updated the Pokémon box, now using a spritesheet instead of individual files
|
||||
- Ironically, this is marginally slower than before, because it includes every Pokémon (up to Gen 8), not just my favorites.<br>(Works great if you've [forked my site](https://bunsin.space/forgejo/sundae/website) and want to change it to include your personal favorites, though!)
|
||||
|
|
|
|||
32
_src/data/changelog/2025-10-14.md
Normal file
32
_src/data/changelog/2025-10-14.md
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
---
|
||||
title: Version 7
|
||||
---
|
||||
|
||||
## {{page.fileSlug|readable}} <code>{{title}}</code>
|
||||
|
||||
|
||||
|
||||
Overhauled the old theme
|
||||
|
||||
- Various animated page elements are now using [media queries that respect reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)
|
||||
- I can't apply them to `gifs` as much as I want to.
|
||||
- Changed [Home](/home)
|
||||
- Changed pride flag text in my [Bio](/home#bio) to be more readable
|
||||
- Added `footer` to pages back in and randomized messages for it
|
||||
- Changed [Gallery](/gallery)
|
||||
- Now uses data-driven color palettes and links to tools
|
||||
- Changed backgrounds (old theme)
|
||||
- Tiled paw pattern for every page
|
||||
- Brown dotted gradient pattern for [Blog](/blog)
|
||||
- Changed sidebar
|
||||
- Buttons are now slightly bigger
|
||||
- Buttons are now shinier with the old theme
|
||||
- Moved "Toggle theme" button to its own tab
|
||||
- `header` now looks like it's part of the sidebar, again
|
||||
- Removed animated tiled paw background for the new theme
|
||||
- Added a new font
|
||||
- Added very basic [OpenGraph](https://en.wikipedia.org/wiki/Facebook_Platform#Open_Graph_protocol) `properties` to the site
|
||||
- Basically, rich embeds for when you link my website on other platforms. Should make it look a bit less ugly
|
||||
- Attribution:
|
||||
- Font
|
||||
- [Nosey Rodent](https://pal-m.micenest.xyz/nro/) (CC-BY-NC, I think?)
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
<head>
|
||||
<title>{{site.name}}{% if title %} - {{title}}{% endif %}</title>
|
||||
<link rel="icon" href="/assets/img/icon/sundae.png" />
|
||||
{% include "meta.njk" %}
|
||||
<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" />
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ title: "Home"
|
|||
order: 1
|
||||
icon: "M20 20V30h8V12L16 2 4 12V30h8V20Z"
|
||||
---
|
||||
|
||||
<article id="bio">
|
||||
{%for article in collections.articles%} {%if article.fileSlug == 'bio'%} {{
|
||||
article.content }} {%endif%} {%endfor%}
|
||||
|
|
@ -12,70 +11,56 @@ icon: "M20 20V30h8V12L16 2 4 12V30h8V20Z"
|
|||
{%for article in collections.articles%} {%if article.fileSlug == 'interests'%}
|
||||
{{ article.content }} {%endif%} {%endfor%}
|
||||
<details open="">
|
||||
<summary><h3>Games</h3></summary>
|
||||
<summary>
|
||||
<h3>Games</h3>
|
||||
</summary>
|
||||
<ul class="games" role="list">
|
||||
{%for item in media-games.items%}
|
||||
<li>
|
||||
<a href="{{item.src}}">
|
||||
<div>
|
||||
<img src="{{item.cover}}" alt="Game icon for {{item.title}}" />
|
||||
</div>
|
||||
<span>{{item.title}}</span>
|
||||
<span><img src="{{item.cover}}" alt="Game icon for {{item.title}}"/></span><span>{{item.title}}</span>
|
||||
</a>
|
||||
</li>
|
||||
{%endfor%}
|
||||
</ul>
|
||||
</details>
|
||||
|
||||
<!-- will complete never
|
||||
<details open="">
|
||||
<summary><h3>Music</h3></summary>
|
||||
<ul class="music" role="list">
|
||||
{%for item in media-music.items%}
|
||||
<li>
|
||||
<a href="{{item.src}}">
|
||||
<div><img src="/assets/img/media/music/vlc.png" /></div>
|
||||
<span>{{item.artist}} - {{item.title}}</span>
|
||||
</a>
|
||||
</li>
|
||||
{%endfor%}
|
||||
</ul>
|
||||
</details>
|
||||
-->
|
||||
<details open="">
|
||||
<summary><h3>Albums</h3></summary>
|
||||
<summary>
|
||||
<h3>Albums</h3>
|
||||
</summary>
|
||||
<ul class="music" role="list">
|
||||
{%for item in media-albums.items%}
|
||||
<li>
|
||||
<a href="{{item.src}}">
|
||||
<div><img src="{{item.cover}}" alt="Album art cover for {{item.title}}"/></div>
|
||||
<span>{{item.artist}} - {{item.title}}</span>
|
||||
<span><img src="{{item.cover}}" alt="Album art cover for {{item.title}}"/></span><span>{{item.artist}} - {{item.title}}</span>
|
||||
</a>
|
||||
</li>
|
||||
{%endfor%}
|
||||
</ul>
|
||||
</details>
|
||||
<details open="">
|
||||
<summary><h3>Tracker modules</h3></summary>
|
||||
<summary>
|
||||
<h3>Tracker modules</h3>
|
||||
</summary>
|
||||
<ul class="music" role="list">
|
||||
{%for item in media-modules.items%}
|
||||
<li>
|
||||
<a href="{{item.src}}">
|
||||
<div><img src="/assets/img/media/music/{{item.tracker}}.png" alt="{{item.tracker|capitalize}} module"/></div>
|
||||
<span>{{item.artist}} - {{item.title}}</span>
|
||||
<span><img src="/assets/img/media/music/{{item.tracker}}.png" alt="{{item.tracker|capitalize}} module"/></span><span>{{item.artist}} - {{item.title}}</span>
|
||||
</a>
|
||||
</li>
|
||||
{%endfor%}
|
||||
</ul>
|
||||
</details>
|
||||
<details open="">
|
||||
<summary><h3>Manga</h3></summary>
|
||||
<summary>
|
||||
<h3>Manga</h3>
|
||||
</summary>
|
||||
<ul class="manga" role="list">
|
||||
{%for item in media-manga.items%}
|
||||
<li>
|
||||
<a href="{{item.src}}">
|
||||
<div><img src="{{item.cover}}" alt="Manga art cover for {{item.alt}}"/></div>
|
||||
<span>{{item.title}}</span>
|
||||
<span><img src="{{item.cover}}" alt="Manga art cover for {{item.alt}}"/></span><span>{{item.title}}</span>
|
||||
</a>
|
||||
</li>
|
||||
{%endfor%}
|
||||
|
|
@ -90,12 +75,13 @@ icon: "M20 20V30h8V12L16 2 4 12V30h8V20Z"
|
|||
{%for item in 88x31-mine.items%}
|
||||
<li>
|
||||
<a href="{{item.src}}" title="sunbun">
|
||||
<img
|
||||
{%if
|
||||
item.id%}id="{{item.id}}"
|
||||
{%endif%}
|
||||
src="{{item.button}}"
|
||||
alt="Sunny's website" />
|
||||
<img
|
||||
{%if
|
||||
item.id%}id="{{item.id}}"
|
||||
{%endif%}
|
||||
src="{{item.button}}"
|
||||
alt="Sunny's website"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
{%endfor%}
|
||||
|
|
@ -106,12 +92,13 @@ icon: "M20 20V30h8V12L16 2 4 12V30h8V20Z"
|
|||
{%for item in 88x31-critters.items%}
|
||||
<li>
|
||||
<a href="{{item.src}}" title="{{item.name}}">
|
||||
<img
|
||||
{%if
|
||||
item.id%}id="{{item.id}}"
|
||||
{%endif%}
|
||||
src="{{item.button}}"
|
||||
alt="{{item.alt}}" />
|
||||
<img
|
||||
{%if
|
||||
item.id%}id="{{item.id}}"
|
||||
{%endif%}
|
||||
src="{{item.button}}"
|
||||
alt="{{item.alt}}"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
{%endfor%}
|
||||
|
|
@ -123,12 +110,13 @@ icon: "M20 20V30h8V12L16 2 4 12V30h8V20Z"
|
|||
{%for item in 88x31.items%}
|
||||
<li>
|
||||
<a href="{{item.src}}" title="{{item.name}}">
|
||||
<img
|
||||
{%if
|
||||
item.id%}id="{{item.id}}"
|
||||
{%endif%}
|
||||
src="{{item.button}}"
|
||||
alt="{{item.alt}}" />
|
||||
<img
|
||||
{%if
|
||||
item.id%}id="{{item.id}}"
|
||||
{%endif%}
|
||||
src="{{item.button}}"
|
||||
alt="{{item.alt}}"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
{%endfor%}
|
||||
|
|
@ -138,7 +126,11 @@ icon: "M20 20V30h8V12L16 2 4 12V30h8V20Z"
|
|||
<script src="/assets/js/bob.js" type="module"></script>
|
||||
<script src="/assets/js/piss.js" type="module"></script>
|
||||
</nav>
|
||||
<div id="pkmn" aria-label="Randomized list of my favorite Pokémon">
|
||||
<script src="/assets/js/fav-poke.js" type="module"></script>
|
||||
</div>
|
||||
<section>
|
||||
<h2>Favorite Pokémon</h2>
|
||||
<p>These are randomized, but I like a lot of them.</p>
|
||||
<ul id="pkmn" role="list">
|
||||
<script src="/assets/js/fav-poke.js" type="module"></script>
|
||||
</ul>
|
||||
</section>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -22,9 +22,7 @@ export default async function (eleventyConfig) {
|
|||
const assets = "./_src/assets/";
|
||||
eleventyConfig.addPassthroughCopy(assets);
|
||||
eleventyConfig.addWatchTarget(assets);
|
||||
|
||||
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)));
|
||||
|
||||
eleventyConfig.addFilter("ISO", (dateObj) => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue