Compare commits
4 commits
main
...
sidebar-re
| Author | SHA1 | Date | |
|---|---|---|---|
1945abd6ad
|
|||
|
19b436ead1
|
|||
|
790147ea05
|
|||
|
cb5ba4fb82
|
85 changed files with 1460 additions and 1796 deletions
6
_src/_data/icon.json
Normal file
6
_src/_data/icon.json
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"blog": "m5 3h15l7 7v20H5zm5 22h12v-3H10zm0-6h12v-3H10zm0-6h9v-3h-9z",
|
||||||
|
"changelog": "M10 25H21V22H10Zm4-13H10v3h4v4h3V15h4V12H17V8H14ZM5 3H20l7 7V30H5Z",
|
||||||
|
"gallery": "M2 2V30H30V2H2M5 26l6-9 5 6 5-9 6 12H5",
|
||||||
|
"home": "M20 20V30h8V12L16 2 4 12V30h8V20Z"
|
||||||
|
}
|
||||||
6
_src/_data/svg.json
Normal file
6
_src/_data/svg.json
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"paw": "m 15.700739,16.184194 c 0,4.483 -2.555,2.038 -5.7060001,2.038 -3.151,0 -5.706,2.445 -5.706,-2.038 0,-2.925 2.555,-6.113001 5.706,-6.113001 3.1510001,0 5.7060001,3.188001 5.7060001,6.113001 z M 4.0687389,8.1071934 c 0.394,1.336 0.007,2.6259996 -0.862,2.8819996 -0.87,0.256001 -1.8929999,-0.619 -2.28599993,-1.9539996 -0.393,-1.336 -0.007,-2.626 0.86199993,-2.882 0.87,-0.256 1.893,0.619 2.286,1.954 z m 15.0000001,0.945 c -0.407,1.3319996 -1.442,2.1960006 -2.312,1.9299996 -0.869,-0.266 -1.244,-1.5609996 -0.837,-2.8919996 0.407,-1.332 1.442,-2.196 2.312,-1.93 0.869,0.265 1.244,1.56 0.837,2.892 z m -10.1100001,-4.859 c 0.365,1.897 -0.218,3.606 -1.302,3.814 -1.085,0.209 -2.261,-1.16 -2.626,-3.059 -0.365,-1.898 0.218,-3.6060001 1.302,-3.8150001 1.085,-0.20799996 2.261,1.1620001 2.626,3.0600001 z m 5.9960001,0.778 c -0.388,1.893 -1.578,3.25 -2.66,3.029 -1.082,-0.222 -1.647,-1.937 -1.26,-3.83 0.388,-1.894 1.578,-3.25000006 2.66,-3.0290001 1.082,0.222 1.647,1.9370001 1.26,3.8300001 z",
|
||||||
|
"back": "M2 16 18 4h6L12 14H50v4H12L24 28H18Z",
|
||||||
|
"theme": "M16 6a1 1 0 010 20Zm0-4a1 1 0 000 28A1 1 0 0016 2",
|
||||||
|
"menu": "M4 8H28v3H4Zm0 7H28v3H4Zm0 7H28v3H4Z"
|
||||||
|
}
|
||||||
|
|
@ -1,10 +1,8 @@
|
||||||
---
|
|
||||||
paw: "m 15.700739,16.184194 c 0,4.483 -2.555,2.038 -5.7060001,2.038 -3.151,0 -5.706,2.445 -5.706,-2.038 0,-2.925 2.555,-6.113001 5.706,-6.113001 3.1510001,0 5.7060001,3.188001 5.7060001,6.113001 z M 4.0687389,8.1071934 c 0.394,1.336 0.007,2.6259996 -0.862,2.8819996 -0.87,0.256001 -1.8929999,-0.619 -2.28599993,-1.9539996 -0.393,-1.336 -0.007,-2.626 0.86199993,-2.882 0.87,-0.256 1.893,0.619 2.286,1.954 z m 15.0000001,0.945 c -0.407,1.3319996 -1.442,2.1960006 -2.312,1.9299996 -0.869,-0.266 -1.244,-1.5609996 -0.837,-2.8919996 0.407,-1.332 1.442,-2.196 2.312,-1.93 0.869,0.265 1.244,1.56 0.837,2.892 z m -10.1100001,-4.859 c 0.365,1.897 -0.218,3.606 -1.302,3.814 -1.085,0.209 -2.261,-1.16 -2.626,-3.059 -0.365,-1.898 0.218,-3.6060001 1.302,-3.8150001 1.085,-0.20799996 2.261,1.1620001 2.626,3.0600001 z m 5.9960001,0.778 c -0.388,1.893 -1.578,3.25 -2.66,3.029 -1.082,-0.222 -1.647,-1.937 -1.26,-3.83 0.388,-1.894 1.578,-3.25000006 2.66,-3.0290001 1.082,0.222 1.647,1.9370001 1.26,3.8300001 z"
|
|
||||||
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>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
{%set currentPage = page.url.split('/')[1]|slugify%}
|
||||||
|
{%set pageOrder = collections.pages|sort(attribute='data.order')%}
|
||||||
|
{%set availableStyles = ['home', 'blog', 'gallery']%}
|
||||||
<head>
|
<head>
|
||||||
<title>
|
<title>
|
||||||
{%if page.url.split('/')%}
|
{%if page.url.split('/')%}
|
||||||
|
|
@ -15,118 +13,37 @@ theme: "M16 6a1 1 0 010 20Zm0-4a1 1 0 000 28A1 1 0 0016 2"
|
||||||
{%endif%}
|
{%endif%}
|
||||||
{{ site.name|safe }}
|
{{ site.name|safe }}
|
||||||
</title>
|
</title>
|
||||||
{% include "meta.njk" %}
|
|
||||||
<link rel="icon" href="/assets/img/icon/sundae.png">
|
<link rel="icon" href="/assets/img/icon/sundae.png">
|
||||||
<link rel="stylesheet" href="/assets/css/reset.css">
|
{%include "meta.njk"%}
|
||||||
<link rel="stylesheet" href="/assets/css/default/default.css">
|
{%include "stylesheets.njk"%}
|
||||||
<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>
|
</head>
|
||||||
<body id="{{ page.url.split('/')[1]|slugify }}">
|
<body id="{{ currentPage }}">
|
||||||
<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>
|
|
||||||
</details>
|
|
||||||
<details open="">
|
|
||||||
<summary>
|
|
||||||
Outgoing
|
|
||||||
</summary>
|
|
||||||
<ul role="list">
|
|
||||||
{% for key, items in outgoing %}
|
|
||||||
{% for item in items %}
|
|
||||||
{% if key != "signal" %}
|
|
||||||
<li>
|
|
||||||
<a href="{{ item.src }}">
|
|
||||||
<img src="/assets/img/icon/{{ item.icon }}" alt="" aria-hidden="true">{{ key | capitalize }}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
{% if key == "signal" %}
|
|
||||||
<li>
|
|
||||||
<button command="show-modal" commandfor="{{ items[0].id }}">
|
|
||||||
<img src="/assets/img/icon/{{ items[0].icon }}" alt="" aria-hidden="true">{{ key | capitalize }}
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
<dialog id="signal">
|
<dialog id="signal">
|
||||||
<article>
|
<article>
|
||||||
{% for article in collections.articles %}
|
{% include "../data/articles/what.html" %}
|
||||||
{% if article.fileSlug == 'what' %}
|
|
||||||
{{ article.content | safe }}
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
</article>
|
</article>
|
||||||
</dialog>
|
</dialog>
|
||||||
</details>
|
<nav class="navbar" id="floating">
|
||||||
<script src="/assets/js/what.js" type="module"></script>
|
{%include "nav-misc.njk"%}
|
||||||
<script src="/assets/js/details-save.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
</nav>
|
</nav>
|
||||||
|
<div id="sidebar" popover="">
|
||||||
|
<nav class="navbar" id="default">
|
||||||
|
{%include "nav-misc.njk"%}
|
||||||
|
{%include "nav.njk"%}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
<header>
|
<header>
|
||||||
<h1>
|
<h1>
|
||||||
{% for page in sortedPages %}
|
<a href="{{page.url}}">
|
||||||
{% if currentUrl.split('/')[1] === page.url.split('/')[1]|slugify %}
|
{%for page in pageOrder%}
|
||||||
|
{%if page.url|slugify == currentPage%}
|
||||||
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||||
<path d="{{ page.data.icon }}"></path>
|
<path d="{{icon[page.url|slugify]}}"></path>
|
||||||
</svg>
|
</svg>
|
||||||
{%endif%}
|
{%endif%}
|
||||||
{%endfor%}
|
{%endfor%}
|
||||||
{{ page.url.split('/')[1]|slugify|capitalize }}
|
{{ currentPage | capitalize }}
|
||||||
|
</a>
|
||||||
</h1>
|
</h1>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
|
|
@ -136,5 +53,7 @@ theme: "M16 6a1 1 0 010 20Zm0-4a1 1 0 000 28A1 1 0 0016 2"
|
||||||
<span id="message" aria-label="Random footer message">made with love</span>
|
<span id="message" aria-label="Random footer message">made with love</span>
|
||||||
<script src="/assets/js/footer.js"></script>
|
<script src="/assets/js/footer.js"></script>
|
||||||
</footer>
|
</footer>
|
||||||
|
<script src="/assets/js/what.js" type="module"></script>
|
||||||
|
<script src="/assets/js/theme.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
---
|
---
|
||||||
layout: base
|
layout: base
|
||||||
---
|
---
|
||||||
|
|
||||||
<article>
|
<article>
|
||||||
{{content|safe}}
|
{{content|safe}}
|
||||||
<section class="postscript">
|
<section class="postscript">
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
---
|
---
|
||||||
layout: base
|
layout: base
|
||||||
---
|
---
|
||||||
|
|
||||||
<article id="art">
|
<article id="art">
|
||||||
|
<div>
|
||||||
<h1>{{page.fileSlug}}
|
<h1>{{page.fileSlug}}
|
||||||
{%for flag in flags%}
|
{%for flag in flags%}
|
||||||
<img src="{{flag.src}}">
|
<img src="{{flag.src}}">
|
||||||
|
|
@ -11,7 +11,7 @@ layout: base
|
||||||
{{content|safe}}
|
{{content|safe}}
|
||||||
{%if programs and programs|length > 0%}
|
{%if programs and programs|length > 0%}
|
||||||
<p>Made with:</p>
|
<p>Made with:</p>
|
||||||
<ul>
|
<ul class="paws">
|
||||||
{%for program in programs%}
|
{%for program in programs%}
|
||||||
<li>
|
<li>
|
||||||
{{program.name|link(program.src)|safe}}
|
{{program.name|link(program.src)|safe}}
|
||||||
|
|
@ -22,7 +22,7 @@ layout: base
|
||||||
{%if palettes and palettes|length > 0%}
|
{%if palettes and palettes|length > 0%}
|
||||||
<p>Color palette used:</p>
|
<p>Color palette used:</p>
|
||||||
{%for palette in palettes%}
|
{%for palette in palettes%}
|
||||||
<ul>
|
<ul class="paws">
|
||||||
<li>
|
<li>
|
||||||
{%if palette.src%}
|
{%if palette.src%}
|
||||||
{{palette.name|link(palette.src)|safe}}
|
{{palette.name|link(palette.src)|safe}}
|
||||||
|
|
@ -32,6 +32,7 @@ layout: base
|
||||||
{%endfor%}
|
{%endfor%}
|
||||||
</ul>
|
</ul>
|
||||||
{%endif%}
|
{%endif%}
|
||||||
|
</div>
|
||||||
<section>
|
<section>
|
||||||
{%for image in images%}
|
{%for image in images%}
|
||||||
<a href="{{image.src}}">
|
<a href="{{image.src}}">
|
||||||
|
|
|
||||||
25
_src/_includes/nav-misc.njk
Normal file
25
_src/_includes/nav-misc.njk
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
<ul role="list">
|
||||||
|
<li>
|
||||||
|
<button popovertarget="sidebar">
|
||||||
|
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||||
|
<path d="{{svg.menu}}"></path>
|
||||||
|
</svg>
|
||||||
|
Toggle menu
|
||||||
|
</button>
|
||||||
|
<li>
|
||||||
|
<button class="theme-toggle">
|
||||||
|
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||||
|
<path d="{{svg.theme}}">
|
||||||
|
</svg>
|
||||||
|
Toggle theme
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="../">
|
||||||
|
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||||
|
<path d="{{svg.back}}"></path>
|
||||||
|
</svg>
|
||||||
|
Go back
|
||||||
|
</a>
|
||||||
|
<li>
|
||||||
|
</ul>
|
||||||
38
_src/_includes/nav.njk
Normal file
38
_src/_includes/nav.njk
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
<section>
|
||||||
|
<h3>Pages</h3>
|
||||||
|
<ul role="list">
|
||||||
|
{%for page in pageOrder%}
|
||||||
|
<li>
|
||||||
|
<a href="{{page.url}}" {%if page.url|slugify == currentPage%}aria-current="page"{%endif%}>
|
||||||
|
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||||
|
<path d="{{icon[page.url|slugify]}}"></path>
|
||||||
|
</svg>
|
||||||
|
{{page.fileSlug|capitalize}}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{%endfor%}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h3>Outgoing</h3>
|
||||||
|
<ul role="list">
|
||||||
|
{%for key, items in outgoing%}
|
||||||
|
{%for item in items%}
|
||||||
|
{%if key != "signal"%}
|
||||||
|
<li>
|
||||||
|
<a href="{{item.src}}">
|
||||||
|
<img src="/assets/img/icon/{{item.icon}}" alt="" aria-hidden="true">{{key|capitalize}}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{%endif%}
|
||||||
|
{%endfor%}
|
||||||
|
{%if key == "signal"%}
|
||||||
|
<li>
|
||||||
|
<button command="show-modal" commandfor="{{items[0].id}}">
|
||||||
|
<img src="/assets/img/icon/{{items[0].icon}}" alt="" aria-hidden="true">{{key|capitalize}}
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
{%endif%}
|
||||||
|
{%endfor%}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
7
_src/_includes/stylesheets.njk
Normal file
7
_src/_includes/stylesheets.njk
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<link rel="stylesheet" href="/assets/css/reset.css">
|
||||||
|
<link rel="stylesheet" href="/assets/css/default/fallback.css">
|
||||||
|
<link rel="preload" href="/assets/css/citrus/citrus.css" as="style">
|
||||||
|
<link rel="stylesheet" href="/assets/css/default/system.css" id="themed">
|
||||||
|
{%if currentPage === "home"%}
|
||||||
|
<link rel="stylesheet" href="/assets/css/pokesprite-pokemon-gen8.css">
|
||||||
|
{%endif%}
|
||||||
|
|
@ -1,108 +0,0 @@
|
||||||
#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, .addendum {
|
|
||||||
border-radius: 0;
|
|
||||||
border-width: 4px;
|
|
||||||
border-style: solid;
|
|
||||||
}
|
|
||||||
& aside {
|
|
||||||
border-color: var(--citrus-mix-light);
|
|
||||||
background-image: linear-gradient(135deg,
|
|
||||||
var(--citrus-light-extra) 5%,
|
|
||||||
var(--citrus-light) 50%, var(--citrus-light-extra)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
& .addendum {
|
|
||||||
border-color: var(--citrus-primary);
|
|
||||||
background-image: linear-gradient(135deg,
|
|
||||||
var(--citrus-mix-light) 5%,
|
|
||||||
var(--citrus-light) 50%, var(--citrus-mix-light)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
& pre {
|
|
||||||
border-radius: 4px;
|
|
||||||
color: var(--citrus-secondary);
|
|
||||||
background-color: var(--citrus-dark-extra);
|
|
||||||
background-size: 4px;
|
|
||||||
}
|
|
||||||
& .post-warning {
|
|
||||||
background-color: var(--citrus-primary);
|
|
||||||
}
|
|
||||||
& s {
|
|
||||||
text-decoration-color: #d00;
|
|
||||||
}
|
|
||||||
& .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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
231
_src/assets/css/citrus/citrus.css
Normal file
231
_src/assets/css/citrus/citrus.css
Normal file
|
|
@ -0,0 +1,231 @@
|
||||||
|
@import url("./nav.css");
|
||||||
|
@import url("./variables.css");
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: "Nosey Rodent";
|
||||||
|
background-attachment: local;
|
||||||
|
background-blend-mode: soft-light;
|
||||||
|
background-color: var(--citrus-primary);
|
||||||
|
background-image: var(--paw-tiled);
|
||||||
|
background-repeat: repeat;
|
||||||
|
background-size: 128px;
|
||||||
|
color: var(--citrus-dark-extra);
|
||||||
|
}
|
||||||
|
main article {
|
||||||
|
background:
|
||||||
|
var(--noise),
|
||||||
|
linear-gradient(
|
||||||
|
var(--citrus-light) 70%,
|
||||||
|
color-mix(in lch, var(--citrus-mix-light), var(--citrus-light)) 100%
|
||||||
|
);
|
||||||
|
box-shadow: var(--shadow-heavy);
|
||||||
|
border-radius: 2px;
|
||||||
|
& a,
|
||||||
|
button {
|
||||||
|
background-color: var(--citrus-mix-light);
|
||||||
|
color: var(--citrus-dark);
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--citrus-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& ul li::before {
|
||||||
|
background-color: var(--citrus-dark-extra);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#interests {
|
||||||
|
& li {
|
||||||
|
& a {
|
||||||
|
& span:has(img)::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-child(odd) {
|
||||||
|
transform: var(--rot-minus);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#gallery {
|
||||||
|
& main article {
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 0 0 4px color-mix(in lch, var(--light), var(--dark) 2%),
|
||||||
|
inset 0 0 0 8px var(--citrus-mix-dark),
|
||||||
|
var(--shadow-heavy);
|
||||||
|
background-color: color-mix(
|
||||||
|
in lch,
|
||||||
|
var(--citrus-mix-dark),
|
||||||
|
var(--citrus-mix)
|
||||||
|
);
|
||||||
|
background-image:
|
||||||
|
var(--noise),
|
||||||
|
linear-gradient(
|
||||||
|
135deg,
|
||||||
|
color-mix(in lch, var(--citrus-mix-dark), var(--citrus-mix)),
|
||||||
|
var(--citrus-mix-dark)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
& a:has(figure) {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& a:is(:not(:hover, :focus)) figure {
|
||||||
|
border-color: var(--light);
|
||||||
|
background-color: var(--light);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:is(#art li, #art section a):nth-child(odd) {
|
||||||
|
transform: var(--rot-minus);
|
||||||
|
}
|
||||||
|
#art div {
|
||||||
|
background-color: var(--citrus-light);
|
||||||
|
background-image: var(--noise), var(--paper);
|
||||||
|
background-size: auto, 4px;
|
||||||
|
box-shadow: var(--shadow-light);
|
||||||
|
margin-bottom: var(--pad-xl);
|
||||||
|
padding: var(--pad-xl);
|
||||||
|
transform: var(--rot-plus);
|
||||||
|
& p {
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#blog {
|
||||||
|
animation: none;
|
||||||
|
background-attachment: local, fixed;
|
||||||
|
background-blend-mode: overlay, normal;
|
||||||
|
background-color: var(--light);
|
||||||
|
background-image:
|
||||||
|
var(--dot),
|
||||||
|
linear-gradient(var(--citrus-mix-dark) 0% 10%, var(--citrus-dark) 100%);
|
||||||
|
background-size: 6px, contain;
|
||||||
|
& main article {
|
||||||
|
background-color: var(--citrus-light);
|
||||||
|
background-image: var(--noise);
|
||||||
|
background-repeat: repeat;
|
||||||
|
background-size: auto;
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 -2rem 3rem -4rem var(--dark),
|
||||||
|
var(--shadow-heavy);
|
||||||
|
& aside,
|
||||||
|
.addendum {
|
||||||
|
border-radius: 0;
|
||||||
|
border-width: 4px;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
& aside {
|
||||||
|
border-color: var(--citrus-mix-light);
|
||||||
|
background-image: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
var(--citrus-light-extra) 5%,
|
||||||
|
var(--citrus-light) 50%,
|
||||||
|
var(--citrus-light-extra)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
& .addendum {
|
||||||
|
border-color: var(--citrus-primary);
|
||||||
|
background-image: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
var(--citrus-mix-light) 5%,
|
||||||
|
var(--citrus-light) 50%,
|
||||||
|
var(--citrus-mix-light)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
& pre {
|
||||||
|
border-radius: 4px;
|
||||||
|
color: var(--citrus-secondary);
|
||||||
|
background-color: var(--citrus-dark-extra);
|
||||||
|
background-size: 4px;
|
||||||
|
}
|
||||||
|
& .post-warning {
|
||||||
|
background-color: var(--citrus-primary);
|
||||||
|
}
|
||||||
|
& s {
|
||||||
|
text-decoration-color: #d00;
|
||||||
|
}
|
||||||
|
& .postscript {
|
||||||
|
& span:has([alt]) {
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
width: var(--avatar);
|
||||||
|
height: var(--avatar);
|
||||||
|
position: absolute;
|
||||||
|
margin: 5px;
|
||||||
|
background-image:
|
||||||
|
radial-gradient(circle at 0px 0px, var(--light), transparent 50%),
|
||||||
|
linear-gradient(
|
||||||
|
135deg,
|
||||||
|
transparent 15%,
|
||||||
|
var(--light) 20%,
|
||||||
|
color-mix(in lch, var(--light), transparent 90%) 50%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& [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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 916px) {
|
||||||
|
body::after {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 916px) {
|
||||||
|
nav#default {
|
||||||
|
height: max-content;
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,79 +0,0 @@
|
||||||
@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 *, .postscript *, body nav *),.link,
|
|
||||||
#posts a {
|
|
||||||
color: var(--citrus-dark);
|
|
||||||
transition: background-color var(--trans);
|
|
||||||
background-color: var(--citrus-primary);
|
|
||||||
&:is(:hover, :focus) {
|
|
||||||
color: var(--citrus-dark-extra);
|
|
||||||
background-color: var(--citrus-secondary);
|
|
||||||
}
|
|
||||||
& a {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
#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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
& a 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: calc(var(--pad-xxl) * -1) 0 var(--pad-l) calc(var(--pad-xl) * -1);
|
|
||||||
background-image: var(--border), var(--lined), var(--noise);
|
|
||||||
background-size: 32px, 32px;
|
|
||||||
background-blend-mode: darken;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
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 {
|
|
||||||
width: 16ch;
|
|
||||||
margin: var(--pad-sm);
|
|
||||||
box-shadow: var(--shadow-light);
|
|
||||||
background-image: linear-gradient(color-mix(in lch, var(--citrus-light-extra), var(--citrus-primary) 50%), var(--citrus-primary) 200%);
|
|
||||||
& img {
|
|
||||||
filter: drop-shadow(0 0 1px var(--citrus-dark));
|
|
||||||
}
|
|
||||||
&:nth-child(odd) {
|
|
||||||
transform: rotate(1deg);
|
|
||||||
}
|
|
||||||
& a {
|
|
||||||
align-content: center;
|
|
||||||
& span:has(img)::after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,18 +1,21 @@
|
||||||
body > nav {
|
.navbar {
|
||||||
border-right: 4px solid;
|
|
||||||
color: var(--citrus-dark);
|
color: var(--citrus-dark);
|
||||||
& summary {
|
& section {
|
||||||
|
background: var(--details-bg);
|
||||||
|
box-shadow: var(--details-shine);
|
||||||
|
border: var(--details-border);
|
||||||
|
& h3 {
|
||||||
filter: drop-shadow(2px 0 var(--citrus-dark))
|
filter: drop-shadow(2px 0 var(--citrus-dark))
|
||||||
drop-shadow(-2px 0 var(--citrus-dark))
|
drop-shadow(-2px 0 var(--citrus-dark))
|
||||||
drop-shadow(0 2px var(--citrus-dark))
|
drop-shadow(0 2px var(--citrus-dark))
|
||||||
drop-shadow(0px -2px var(--citrus-dark));
|
drop-shadow(0px -2px var(--citrus-dark));
|
||||||
color: var(--citrus-light);
|
color: var(--citrus-light);
|
||||||
}
|
}
|
||||||
& li *:is(a ,button) {
|
}
|
||||||
|
& li :is(a, button) {
|
||||||
background: var(--button-bg);
|
background: var(--button-bg);
|
||||||
box-shadow: var(--button-shine);
|
box-shadow: var(--button-shine);
|
||||||
border: var(--button-border);
|
border: var(--button-border);
|
||||||
border-radius: var(--round);
|
|
||||||
color: inherit;
|
color: inherit;
|
||||||
&[aria-current] {
|
&[aria-current] {
|
||||||
background: var(--button-current-bg);
|
background: var(--button-current-bg);
|
||||||
|
|
@ -20,38 +23,69 @@ body > nav {
|
||||||
border: var(--button-current-border);
|
border: var(--button-current-border);
|
||||||
color: var(--citrus-light);
|
color: var(--citrus-light);
|
||||||
}
|
}
|
||||||
&:is(:hover, :focus):not([aria-current="page"]) {
|
&:is(:hover, :focus):not([aria-current]) {
|
||||||
background: var(--button-hover-bg);
|
background: var(--button-hover-bg);
|
||||||
box-shadow: var(--button-hover-shine);
|
box-shadow: var(--button-hover-shine);
|
||||||
border: var(--button-hover-border);
|
border: var(--button-hover-border);
|
||||||
transition: background-image var(--trans), border-color var(--trans),
|
transition:
|
||||||
|
background-image var(--trans),
|
||||||
|
border-color var(--trans),
|
||||||
box-shadow var(--trans);
|
box-shadow var(--trans);
|
||||||
color: var(--citrus-mix-dark);
|
color: var(--citrus-mix-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
& details,
|
|
||||||
details[open] {
|
|
||||||
background: var(--details-bg);
|
|
||||||
box-shadow: var(--details-shine);
|
|
||||||
border: var(--details-border);
|
|
||||||
}
|
}
|
||||||
|
.navbar section,
|
||||||
|
.navbar li :is(a, button) {
|
||||||
|
border-radius: var(--round);
|
||||||
}
|
}
|
||||||
body > nav,
|
#default,
|
||||||
|
#floating,
|
||||||
header {
|
header {
|
||||||
|
color: var(--citrus-dark);
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
background-blend-mode: screen;
|
|
||||||
background-image: var(--nav-bg);
|
background-image: var(--nav-bg);
|
||||||
background-size: 6px;
|
background-size: 6px;
|
||||||
border-color: var(--citrus-dark);
|
|
||||||
}
|
}
|
||||||
header {
|
#floating,
|
||||||
width: var(--view);
|
#default {
|
||||||
border-right-width: 4px;
|
border-bottom-style: solid;
|
||||||
border-right-style: solid;
|
border-right-style: solid;
|
||||||
border-bottom-width: 4px;
|
border-bottom-width: 4px;
|
||||||
border-bottom-style: solid;
|
border-right-width: 4px;
|
||||||
border-bottom-right-radius: 100px;
|
}
|
||||||
margin-left: calc(var(--view) - 4px);
|
#default {
|
||||||
position: relative;
|
border-bottom-right-radius: var(--pad-l);
|
||||||
padding: calc(var(--pad-m) - 2px) var(--pad-sm);
|
}
|
||||||
|
body {
|
||||||
|
position: relative;
|
||||||
|
z-index: -3;
|
||||||
|
& main {
|
||||||
|
position: inherit;
|
||||||
|
z-index: -2;
|
||||||
|
}
|
||||||
|
& #sidebar {
|
||||||
|
position: inherit;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 916px) {
|
||||||
|
header {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 916px) {
|
||||||
|
header {
|
||||||
|
border-bottom-right-radius: var(--pad-xl);
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-width: 4px;
|
||||||
|
border-right-style: solid;
|
||||||
|
border-right-width: 4px;
|
||||||
|
display: flex;
|
||||||
|
margin-left: calc(var(--view) - 4px);
|
||||||
|
padding: var(--pad-m) 0;
|
||||||
|
width: var(--view);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,9 +5,15 @@
|
||||||
--citrus-dark: color-mix(in lch, var(--citrus-secondary), var(--dark) 60%);
|
--citrus-dark: color-mix(in lch, var(--citrus-secondary), var(--dark) 60%);
|
||||||
--citrus-light-extra: color-mix(in lch, var(--citrus-light), var(--light));
|
--citrus-light-extra: color-mix(in lch, var(--citrus-light), var(--light));
|
||||||
--citrus-dark-extra: color-mix(in lch, var(--citrus-dark), var(--dark));
|
--citrus-dark-extra: color-mix(in lch, var(--citrus-dark), var(--dark));
|
||||||
--citrus-mix: color-mix(in lch,var(--citrus-primary),var(--citrus-secondary));
|
--citrus-mix: color-mix(
|
||||||
|
in lch,
|
||||||
|
var(--citrus-primary),
|
||||||
|
var(--citrus-secondary)
|
||||||
|
);
|
||||||
--citrus-mix-light: color-mix(in lch, var(--citrus-light), var(--citrus-mix));
|
--citrus-mix-light: color-mix(in lch, var(--citrus-light), var(--citrus-mix));
|
||||||
--citrus-mix-dark: color-mix(in lch, var(--citrus-dark), var(--citrus-mix));
|
--citrus-mix-dark: color-mix(in lch, var(--citrus-dark), var(--citrus-mix));
|
||||||
|
--rot-plus: rotate(0.5deg);
|
||||||
|
--rot-minus: rotate(-0.5deg);
|
||||||
--shadow-light: 0.2rem 0.2rem 0.2rem 0.1rem #0002;
|
--shadow-light: 0.2rem 0.2rem 0.2rem 0.1rem #0002;
|
||||||
--shadow-heavy: 0.2rem 0.2rem 0.4rem 0.2rem #0004;
|
--shadow-heavy: 0.2rem 0.2rem 0.4rem 0.2rem #0004;
|
||||||
--checker: url("/assets/img/theme/citrus/checker.png");
|
--checker: url("/assets/img/theme/citrus/checker.png");
|
||||||
|
|
@ -16,17 +22,43 @@
|
||||||
--paper: url("/assets/img/theme/citrus/paper.png");
|
--paper: url("/assets/img/theme/citrus/paper.png");
|
||||||
--noise: url("/assets/img/theme/citrus/imagedoc-lightnoise.png");
|
--noise: url("/assets/img/theme/citrus/imagedoc-lightnoise.png");
|
||||||
--border: url("/assets/img/theme/citrus/border.png");
|
--border: url("/assets/img/theme/citrus/border.png");
|
||||||
--nav-bg: var(--dot), linear-gradient(var(--citrus-primary), var(--citrus-secondary) 60%, var(--citrus-primary) 120%);
|
--nav-bg:
|
||||||
--button-bg: linear-gradient(var(--citrus-primary) 30%, var(--citrus-mix) 80%);
|
var(--dot),
|
||||||
|
linear-gradient(
|
||||||
|
var(--citrus-primary),
|
||||||
|
var(--citrus-secondary) 60%,
|
||||||
|
var(--citrus-primary) 120%
|
||||||
|
);
|
||||||
|
--button-bg: linear-gradient(
|
||||||
|
var(--citrus-primary) 30%,
|
||||||
|
var(--citrus-mix) 80%
|
||||||
|
);
|
||||||
--button-border: 2px solid var(--citrus-dark);
|
--button-border: 2px solid var(--citrus-dark);
|
||||||
--button-shine: inset 0px 2px var(--citrus-light), inset 0px -2px var(--citrus-mix);
|
--button-shine:
|
||||||
--button-hover-bg: linear-gradient(var(--citrus-light),var(--citrus-primary),var(--citrus-mix-light));
|
inset 0px 2px var(--citrus-light), inset 0px -2px var(--citrus-mix);
|
||||||
|
--button-hover-bg: linear-gradient(
|
||||||
|
var(--citrus-light),
|
||||||
|
var(--citrus-primary),
|
||||||
|
var(--citrus-mix-light)
|
||||||
|
);
|
||||||
--button-hover-border: 2px solid var(--citrus-light);
|
--button-hover-border: 2px solid var(--citrus-light);
|
||||||
--button-hover-shine: inset 0 -2px 0 0 var(--citrus-mix);
|
--button-hover-shine: inset 0 -2px 0 0 var(--citrus-mix);
|
||||||
--button-current-bg: linear-gradient(var(--citrus-mix-dark),var(--citrus-dark-extra) 200%);
|
--button-current-bg: linear-gradient(
|
||||||
|
var(--citrus-mix-dark),
|
||||||
|
var(--citrus-dark-extra) 200%
|
||||||
|
);
|
||||||
--button-current-border: 2px solid var(--citrus-dark-extra);
|
--button-current-border: 2px solid var(--citrus-dark-extra);
|
||||||
--button-current-shine: inset 0px 2px 0 var(--citrus-mix-light), inset 0 -2px 0 var(--citrus-mix-dark);
|
--button-current-shine:
|
||||||
--details-bg: linear-gradient(-45deg,var(--citrus-primary),var(--citrus-mix),var(--citrus-primary));
|
inset 0px 2px 0 var(--citrus-mix-light),
|
||||||
--details-shine: inset 0 2px 0 var(--citrus-light-extra), inset 2px 0 0 var(--citrus-light), inset 0 -2px 0 var(--citrus-primary), inset -2px 0 0 var(--citrus-primary);
|
inset 0 -2px 0 var(--citrus-mix-dark);
|
||||||
|
--details-bg: linear-gradient(
|
||||||
|
-45deg,
|
||||||
|
var(--citrus-primary),
|
||||||
|
var(--citrus-mix),
|
||||||
|
var(--citrus-primary)
|
||||||
|
);
|
||||||
|
--details-shine:
|
||||||
|
inset 0 2px 0 var(--citrus-light-extra), inset 2px 0 0 var(--citrus-light),
|
||||||
|
inset 0 -2px 0 var(--citrus-primary), inset -2px 0 0 var(--citrus-primary);
|
||||||
--details-border: 2px solid var(--citrus-dark);
|
--details-border: 2px solid var(--citrus-dark);
|
||||||
}
|
}
|
||||||
|
|
@ -1,183 +0,0 @@
|
||||||
:root {
|
|
||||||
--avatar: 3rem;
|
|
||||||
}
|
|
||||||
article:not(#blog:has(#posts) *) {
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
article {
|
|
||||||
max-width: var(--post);
|
|
||||||
& ul {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
& > .postscript::after {
|
|
||||||
background-color: var(--primary);
|
|
||||||
}
|
|
||||||
& section:not(section:has(p)) {
|
|
||||||
display: flex;
|
|
||||||
gap: var(--pad-l);
|
|
||||||
}
|
|
||||||
& aside {
|
|
||||||
float: right;
|
|
||||||
border-radius: var(--round);
|
|
||||||
width: 66%;
|
|
||||||
}
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
margin-bottom: var(--pad-m);
|
|
||||||
}
|
|
||||||
& .post-warning {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
content: "";
|
|
||||||
display: inherit;
|
|
||||||
border-width: 2px;
|
|
||||||
border-style: dashed;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.addendum,
|
|
||||||
.post-warning,
|
|
||||||
article aside {
|
|
||||||
margin: var(--pad-l) 0;
|
|
||||||
padding: var(--pad-l);
|
|
||||||
}
|
|
||||||
article > .addendum {
|
|
||||||
border-image-slice: 1;
|
|
||||||
border-image-width: 2px;
|
|
||||||
border-image-outset: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
article > .postscript {
|
|
||||||
margin: 0 0 auto auto;
|
|
||||||
padding: var(--pad-xl) 0 var(--pad-xxl) 0;
|
|
||||||
&::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: 64px;
|
|
||||||
height: 64px;
|
|
||||||
mask-image: var(--paw);
|
|
||||||
mask-size: 100%;
|
|
||||||
mask-repeat: no-repeat;
|
|
||||||
transform: rotate(15deg);
|
|
||||||
}
|
|
||||||
& p {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
transition: background-color var(--trans);
|
|
||||||
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-size: 0.8rem;
|
|
||||||
word-wrap: anywhere;
|
|
||||||
&:hover {
|
|
||||||
background-color: #3a76f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
& 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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
& 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#posts {
|
|
||||||
max-width: var(--post);
|
|
||||||
& ul {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--pad-l);
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
& a {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 2px;
|
|
||||||
border-radius: var(--round);
|
|
||||||
padding: var(--pad-m);
|
|
||||||
font-size: 1.125rem;
|
|
||||||
font-weight: bold;
|
|
||||||
text-decoration: none;
|
|
||||||
word-break: break-word;
|
|
||||||
& time,
|
|
||||||
p {
|
|
||||||
display: flex;
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 920px) {
|
|
||||||
article aside {
|
|
||||||
float: unset;
|
|
||||||
width: fit-content;
|
|
||||||
}
|
|
||||||
article section {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
#posts {
|
|
||||||
max-width: unset;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
article > .postscript {
|
|
||||||
& p {
|
|
||||||
margin-right: var(--pad-sm);
|
|
||||||
& > a img {
|
|
||||||
height: auto;
|
|
||||||
max-height: var(--view);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
|
||||||
article > .postscript {
|
|
||||||
& p,
|
|
||||||
p > img {
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#blog #posts a {
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,351 +0,0 @@
|
||||||
@import url("./variables.css");
|
|
||||||
@import url("./nav.css");
|
|
||||||
@import url("./motion.css");
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--view: 18rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* i hate default styles >:( and also chrome */
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
font-family: "Rubik", sans-serif;
|
|
||||||
display: block;
|
|
||||||
font-size: 2rem;
|
|
||||||
margin-block-start: 0;
|
|
||||||
margin-block-end: 0;
|
|
||||||
margin-inline-start: 0;
|
|
||||||
margin-inline-end: 0;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: "Rubik", sans-serif;
|
|
||||||
font-size: 100%;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
& a,
|
|
||||||
button {
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color var(--trans);
|
|
||||||
|
|
||||||
&:is(:hover, :focus) {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: currentColor;
|
|
||||||
stroke: currentColor;
|
|
||||||
stroke-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
padding-top: var(--pad-xl);
|
|
||||||
padding-left: calc(var(--view) + var(--pad-xl));
|
|
||||||
|
|
||||||
& svg {
|
|
||||||
width: 2rem;
|
|
||||||
height: 2rem;
|
|
||||||
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));
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
details {
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
& summary::marker {
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-anchor {
|
|
||||||
display: inline-block;
|
|
||||||
transition:
|
|
||||||
color var(--trans),
|
|
||||||
background-color var(--trans);
|
|
||||||
height: max-content;
|
|
||||||
padding: 0 var(--pad-m);
|
|
||||||
margin: 0 0 0 calc(var(--pad-xl) * -1);
|
|
||||||
border-radius: 0 var(--round) var(--round) 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
article {
|
|
||||||
color: inherit;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 2px;
|
|
||||||
border-radius: var(--round);
|
|
||||||
height: max-content;
|
|
||||||
padding: var(--pad-xl);
|
|
||||||
|
|
||||||
& a:has(figure) {
|
|
||||||
border-radius: var(--round);
|
|
||||||
|
|
||||||
& figure {
|
|
||||||
border-color: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& s {
|
|
||||||
text-decoration-style: line-through;
|
|
||||||
text-decoration-thickness: 0.1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
& u {
|
|
||||||
text-decoration-style: double;
|
|
||||||
text-decoration-thickness: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
& em {
|
|
||||||
font-weight: 200;
|
|
||||||
}
|
|
||||||
|
|
||||||
& p {
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
& p:not(:last-child, [aria-label]) {
|
|
||||||
padding-bottom: var(--pad-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
& code:not(pre *) {
|
|
||||||
padding: 0 var(--pad-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
& pre {
|
|
||||||
display: flex;
|
|
||||||
width: auto;
|
|
||||||
padding: var(--pad-m);
|
|
||||||
white-space: pre-wrap;
|
|
||||||
word-break: break-word;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 2px;
|
|
||||||
transition:
|
|
||||||
background-color var(--trans),
|
|
||||||
border-color var(--trans);
|
|
||||||
}
|
|
||||||
|
|
||||||
& pre,
|
|
||||||
code:not(pre *) {
|
|
||||||
border-radius: var(--round);
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
& figure {
|
|
||||||
margin: 0;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 2px;
|
|
||||||
padding: var(--pad-m);
|
|
||||||
border-radius: inherit;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
& ul:not([role="list"]):is(#art *) {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0 0 var(--pad-sm) var(--pad-xl);
|
|
||||||
}
|
|
||||||
|
|
||||||
& li:not([role] *, #changelog *) {
|
|
||||||
&::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: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
& figcaption {
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: italic;
|
|
||||||
padding-top: var(--pad-sm);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& > :first-child > code {
|
|
||||||
display: flex;
|
|
||||||
width: fit-content;
|
|
||||||
margin: var(--pad-sm) 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:is(main article, main section):not(:last-child) {
|
|
||||||
margin-bottom: var(--pad-m);
|
|
||||||
}
|
|
||||||
|
|
||||||
img[src*="/assets/img/flag/"] {
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 2px;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
margin-left: var(--pad-m);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:last-child) {
|
|
||||||
margin-right: var(--pad-m);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.link {
|
|
||||||
display: inline-flex;
|
|
||||||
|
|
||||||
& a {
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
& img {
|
|
||||||
position: relative;
|
|
||||||
vertical-align: sub;
|
|
||||||
margin: 0 var(--pad-sm);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
article a:not(.link *, a:has(img)) {
|
|
||||||
display: inline-flex;
|
|
||||||
padding: 0 var(--pad-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
dialog button[commandfor] {
|
|
||||||
width: max-content;
|
|
||||||
padding: 0 var(--pad-sm);
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
dialog#signal {
|
|
||||||
cursor: default;
|
|
||||||
background: black;
|
|
||||||
border: none;
|
|
||||||
margin: 0 auto;
|
|
||||||
text-align: center;
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: fixed;
|
|
||||||
padding: var(--pad-xl);
|
|
||||||
|
|
||||||
& article {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
border: 0;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0 auto;
|
|
||||||
max-width: fit-content;
|
|
||||||
background: none;
|
|
||||||
word-wrap: break-word;
|
|
||||||
color: white;
|
|
||||||
|
|
||||||
& h1 {
|
|
||||||
font-size: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
& p {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
& a {
|
|
||||||
margin: auto 0 0 auto;
|
|
||||||
}
|
|
||||||
& h1,
|
|
||||||
p,
|
|
||||||
a {
|
|
||||||
font-family: "Times New Roman", Times, serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
& img {
|
|
||||||
border: 4px solid white;
|
|
||||||
padding: var(--pad-sm);
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 250px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 920px) {
|
|
||||||
body::after {
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
padding-left: 0;
|
|
||||||
padding-top: var(--pad-m);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
padding: var(--pad-l);
|
|
||||||
}
|
|
||||||
|
|
||||||
main > section {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
main > section {
|
|
||||||
width: initial;
|
|
||||||
}
|
|
||||||
|
|
||||||
article {
|
|
||||||
max-width: initial;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
561
_src/assets/css/default/fallback.css
Normal file
561
_src/assets/css/default/fallback.css
Normal file
|
|
@ -0,0 +1,561 @@
|
||||||
|
@import url("./variables.css");
|
||||||
|
@import url("./nav.css");
|
||||||
|
@import url("./motion.css");
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-size: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
& a,
|
||||||
|
button {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
overflow: hidden;
|
||||||
|
padding: var(--pad-xl) var(--pad-xl) 0 calc(var(--view) + var(--pad-xl));
|
||||||
|
position: relative;
|
||||||
|
width: fit-content;
|
||||||
|
margin-bottom: var(--pad-xl);
|
||||||
|
& ul[role="list"] {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
& article {
|
||||||
|
color: inherit;
|
||||||
|
height: max-content;
|
||||||
|
max-width: var(--main);
|
||||||
|
padding: var(--pad-xl);
|
||||||
|
width: auto;
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-bottom: var(--pad-l);
|
||||||
|
}
|
||||||
|
& s {
|
||||||
|
text-decoration-style: line-through;
|
||||||
|
text-decoration-thickness: 0.1em;
|
||||||
|
}
|
||||||
|
& u {
|
||||||
|
text-decoration-style: double;
|
||||||
|
text-decoration-thickness: 2px;
|
||||||
|
}
|
||||||
|
& em {
|
||||||
|
font-weight: 200;
|
||||||
|
}
|
||||||
|
& p {
|
||||||
|
word-wrap: break-word;
|
||||||
|
&:not(li p):not(:last-child) {
|
||||||
|
padding-bottom: var(--pad-m);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& pre {
|
||||||
|
display: flex;
|
||||||
|
width: auto;
|
||||||
|
padding: var(--pad-m);
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
& a {
|
||||||
|
padding: 2px;
|
||||||
|
& > img {
|
||||||
|
display: inline-flex;
|
||||||
|
height: auto;
|
||||||
|
vertical-align: middle;
|
||||||
|
padding-right: 2px;
|
||||||
|
}
|
||||||
|
&:has(figure) {
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& figure {
|
||||||
|
margin: 0;
|
||||||
|
padding: var(--pad-m);
|
||||||
|
border-radius: inherit;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
& a {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
& svg {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
margin-right: var(--pad-m);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
color: var(--dark);
|
||||||
|
display: inline-flex;
|
||||||
|
inset-block: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: sticky;
|
||||||
|
width: 100%;
|
||||||
|
z-index: -1;
|
||||||
|
& span {
|
||||||
|
width: inherit;
|
||||||
|
background-image: var(--transgender);
|
||||||
|
padding: 0 var(--pad-s);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
display: block;
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 0;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
details {
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
& summary::marker {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
fill: currentColor;
|
||||||
|
stroke: currentColor;
|
||||||
|
stroke-width: 0;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.paws {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 var(--pad-xl);
|
||||||
|
& li::marker {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
& li::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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
img[src*="/assets/img/flag/"] {
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 2px;
|
||||||
|
&:first-child {
|
||||||
|
margin-left: var(--pad-m);
|
||||||
|
}
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-right: var(--pad-m);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* home.html */
|
||||||
|
#bio .emoji {
|
||||||
|
display: inline-flex;
|
||||||
|
height: 20px;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 20px;
|
||||||
|
&::after,
|
||||||
|
img {
|
||||||
|
filter: drop-shadow(0 0 0.5px #000a);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#badges ul {
|
||||||
|
gap: var(--pad-s);
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
#interests {
|
||||||
|
& a {
|
||||||
|
align-items: center;
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: auto;
|
||||||
|
text-align: center;
|
||||||
|
width: 120px;
|
||||||
|
&:not(:hover, :focus) {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
& span:has(img)::after {
|
||||||
|
background-image: url("/assets/img/icon/shortcut.png");
|
||||||
|
background-size: 100%;
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
height: 24px;
|
||||||
|
margin: -1.5rem 0 0 -0.5rem;
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
width: 24px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.games img {
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
.manga img {
|
||||||
|
height: 128px;
|
||||||
|
}
|
||||||
|
#pkmn {
|
||||||
|
background-image: url("/assets/img/pkmn/bg/box.png");
|
||||||
|
border-bottom-color: #78a068;
|
||||||
|
border-left-color: #c8f8c0;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-right-color: #78a068;
|
||||||
|
border-style: solid;
|
||||||
|
border-top-color: #c8f8c0;
|
||||||
|
border-width: 3px;
|
||||||
|
margin: var(--pad-l) 0 0 0;
|
||||||
|
width: fit-content;
|
||||||
|
& li {
|
||||||
|
display: flex;
|
||||||
|
margin-left: -12px;
|
||||||
|
margin-top: -8px;
|
||||||
|
& 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#agender {
|
||||||
|
background-image: var(--agender);
|
||||||
|
}
|
||||||
|
#aromantic {
|
||||||
|
background-image: var(--aromantic);
|
||||||
|
}
|
||||||
|
#pansexual {
|
||||||
|
background-image: var(--pansexual);
|
||||||
|
}
|
||||||
|
#badges img {
|
||||||
|
max-height: 31px;
|
||||||
|
width: 88px;
|
||||||
|
}
|
||||||
|
/* changelog.html */
|
||||||
|
#changelog li {
|
||||||
|
&::before {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
&::marker {
|
||||||
|
content: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* gallery.html */
|
||||||
|
#art {
|
||||||
|
& h1,
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
& p {
|
||||||
|
max-width: var(--post);
|
||||||
|
}
|
||||||
|
& section:has(a:nth-child(n + 2)) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: var(--pad-l);
|
||||||
|
}
|
||||||
|
& section:has(a:nth-child(n + 3)) {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
& section {
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-bottom: var(--pad-l);
|
||||||
|
}
|
||||||
|
& a {
|
||||||
|
display: flex;
|
||||||
|
width: calc(var(--post) - var(--view));
|
||||||
|
flex-direction: column;
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
& time {
|
||||||
|
margin: var(--pad-m) 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#artworks {
|
||||||
|
& ul {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(
|
||||||
|
auto-fill,
|
||||||
|
minmax(min(var(--thumb), 100%), 1fr)
|
||||||
|
);
|
||||||
|
gap: var(--pad-l);
|
||||||
|
& a {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& figure {
|
||||||
|
margin: 0;
|
||||||
|
& img {
|
||||||
|
width: 100%;
|
||||||
|
height: var(--thumb);
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
& figcaption {
|
||||||
|
display: inline-flex;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
& .count {
|
||||||
|
margin: auto 0 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* blog.html */
|
||||||
|
#blog {
|
||||||
|
& main article {
|
||||||
|
max-width: var(--post);
|
||||||
|
& .postscript {
|
||||||
|
margin: 0 0 auto auto;
|
||||||
|
padding: var(--pad-xl) 0 var(--pad-xxl) 0;
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
mask-image: var(--paw);
|
||||||
|
mask-size: 100%;
|
||||||
|
mask-repeat: no-repeat;
|
||||||
|
transform: rotate(15deg);
|
||||||
|
}
|
||||||
|
& p {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
transition: background-color var(--trans);
|
||||||
|
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-size: 0.8rem;
|
||||||
|
word-wrap: anywhere;
|
||||||
|
&:hover {
|
||||||
|
background-color: #3a76f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
& 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& span:has([alt="Profile picture"]) {
|
||||||
|
width: var(--avatar);
|
||||||
|
height: var(--avatar);
|
||||||
|
display: flex;
|
||||||
|
float: right;
|
||||||
|
& [alt="Profile picture"] {
|
||||||
|
display: flex;
|
||||||
|
box-sizing: content-box;
|
||||||
|
margin: 0 0 0 auto;
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& .postscript::after {
|
||||||
|
background-color: var(--primary);
|
||||||
|
}
|
||||||
|
& section:has(figure) {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--pad-l);
|
||||||
|
}
|
||||||
|
& aside {
|
||||||
|
float: right;
|
||||||
|
border-radius: var(--round);
|
||||||
|
width: 66%;
|
||||||
|
}
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
margin-bottom: var(--pad-m);
|
||||||
|
}
|
||||||
|
& .post-warning {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
display: inherit;
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: dashed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& #posts {
|
||||||
|
& ul {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--pad-l);
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
& a {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: var(--pad-m);
|
||||||
|
text-decoration: none;
|
||||||
|
word-break: break-word;
|
||||||
|
& time,
|
||||||
|
p {
|
||||||
|
display: flex;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.addendum,
|
||||||
|
.post-warning,
|
||||||
|
#blog main article aside {
|
||||||
|
margin: var(--pad-l) 0;
|
||||||
|
padding: var(--pad-l);
|
||||||
|
}
|
||||||
|
/* easter egg :) */
|
||||||
|
#signal {
|
||||||
|
background: black;
|
||||||
|
border: 0;
|
||||||
|
color: white;
|
||||||
|
font-family: "Times New Roman", Times, serif;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
max-height: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
& article {
|
||||||
|
align-content: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: fit-content;
|
||||||
|
& h1 {
|
||||||
|
display: inline-flex;
|
||||||
|
font-size: 4rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
& p {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
& a {
|
||||||
|
margin: auto 0 0 auto;
|
||||||
|
}
|
||||||
|
& img {
|
||||||
|
border: 4px solid white;
|
||||||
|
max-height: 250px;
|
||||||
|
max-width: 100%;
|
||||||
|
padding: var(--pad-s);
|
||||||
|
}
|
||||||
|
& button {
|
||||||
|
inset-block: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
position: sticky;
|
||||||
|
margin: var(--pad-xl) auto;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 916px) {
|
||||||
|
#sidebar {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
#floating {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#default button[popovertarget] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 916px) {
|
||||||
|
/* Reset */
|
||||||
|
header,
|
||||||
|
footer,
|
||||||
|
main {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
footer span {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
article {
|
||||||
|
margin: var(--pad-m);
|
||||||
|
padding: var(--pad-l);
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
margin: calc(var(--pad-xxl) + var(--pad-l)) 0 0 0;
|
||||||
|
& h1 {
|
||||||
|
margin: auto 0 0 auto;
|
||||||
|
padding-right: var(--pad-m);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#default::before {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
body::after {
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
#blog {
|
||||||
|
& main article {
|
||||||
|
max-width: initial;
|
||||||
|
& aside {
|
||||||
|
float: unset;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
& section {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
& .postscript {
|
||||||
|
& p {
|
||||||
|
margin-right: var(--pad-sm);
|
||||||
|
& > a img {
|
||||||
|
height: auto;
|
||||||
|
max-height: var(--view);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#art {
|
||||||
|
& p {
|
||||||
|
max-width: auto;
|
||||||
|
}
|
||||||
|
& a:has(img) {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
& section:has(a:nth-child(n + 2)) {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,93 +0,0 @@
|
||||||
:root {
|
|
||||||
--thumb: 16rem;
|
|
||||||
}
|
|
||||||
#gallery {
|
|
||||||
& time {
|
|
||||||
display: flex;
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#artworks {
|
|
||||||
& ul {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(
|
|
||||||
auto-fill,
|
|
||||||
minmax(min(var(--thumb), 100%), 1fr)
|
|
||||||
);
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
gap: var(--pad-l);
|
|
||||||
& a {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& figure {
|
|
||||||
margin: 0;
|
|
||||||
border-style: solid;
|
|
||||||
& img {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
height: var(--thumb);
|
|
||||||
object-fit: contain;
|
|
||||||
border-radius: var(--round);
|
|
||||||
}
|
|
||||||
|
|
||||||
& figcaption {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: baseline;
|
|
||||||
text-decoration-style: none;
|
|
||||||
}
|
|
||||||
& .count {
|
|
||||||
margin: auto 0 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#art {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
width: fit-content;
|
|
||||||
& p {
|
|
||||||
max-width: var(--post);
|
|
||||||
}
|
|
||||||
& h3 {
|
|
||||||
display: flex;
|
|
||||||
gap: var(--pad-sm);
|
|
||||||
}
|
|
||||||
& section:has(a:nth-child(n + 2)) {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: var(--pad-l);
|
|
||||||
}
|
|
||||||
& section:has(a:nth-child(n + 3)) {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
& section {
|
|
||||||
& a {
|
|
||||||
display: flex;
|
|
||||||
width: calc(var(--post) - var(--view));
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 1500px) {
|
|
||||||
#art section:has(a:nth-child(n + 2)) {
|
|
||||||
flex-direction: column;
|
|
||||||
& a {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 920px) {
|
|
||||||
#art p {
|
|
||||||
max-width: auto;
|
|
||||||
}
|
|
||||||
#art a:has(img) {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
#art section:has(a:nth-child(n + 2)) {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,160 +0,0 @@
|
||||||
@keyframes jump {
|
|
||||||
0% {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: translateY(-4px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
article#bio {
|
|
||||||
& .emoji {
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
display: inline-flex;
|
|
||||||
vertical-align: middle;
|
|
||||||
&::after,
|
|
||||||
img {
|
|
||||||
filter: drop-shadow(0 0 0.5px #000a);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
article#badges {
|
|
||||||
& ul {
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: var(--pad-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
& a {
|
|
||||||
display: flex;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
& img {
|
|
||||||
box-sizing: content-box;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
article#interests {
|
|
||||||
& ul {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin: 0;
|
|
||||||
padding: var(--pad-l) 0;
|
|
||||||
}
|
|
||||||
& li {
|
|
||||||
display: flex;
|
|
||||||
width: 14ch;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
text-align: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
& a {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#pkmn {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
background-image: url("/assets/img/pkmn/bg/box.png");
|
|
||||||
border-radius: 5px;
|
|
||||||
width: fit-content;
|
|
||||||
border-bottom-color: #78a068;
|
|
||||||
border-left-color: #c8f8c0;
|
|
||||||
border-right-color: #78a068;
|
|
||||||
border-top-color: #c8f8c0;
|
|
||||||
border-width: 3px;
|
|
||||||
border-style: solid;
|
|
||||||
margin: var(--pad-l) 0 0 0;
|
|
||||||
|
|
||||||
& li {
|
|
||||||
display: flex;
|
|
||||||
margin-top: -8px;
|
|
||||||
margin-left: -12px;
|
|
||||||
|
|
||||||
& 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: var(--agender);
|
|
||||||
}
|
|
||||||
|
|
||||||
#aromantic {
|
|
||||||
background-image: var(--aromantic);
|
|
||||||
}
|
|
||||||
|
|
||||||
#pansexual {
|
|
||||||
background-image: var(--pansexual);
|
|
||||||
}
|
|
||||||
#badges img {
|
|
||||||
max-height: 31px;
|
|
||||||
width: 88px;
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 920px) {
|
|
||||||
article#interests {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
& ul {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
& li a {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -14,12 +14,10 @@
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
|
|
||||||
& footer {
|
& footer {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
& header {
|
& header {
|
||||||
top: 0;
|
top: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -27,7 +25,6 @@
|
||||||
justify-self: center;
|
justify-self: center;
|
||||||
& a,
|
& a,
|
||||||
img {
|
img {
|
||||||
z-index: 1;
|
|
||||||
display: inherit;
|
display: inherit;
|
||||||
flex-direction: inherit;
|
flex-direction: inherit;
|
||||||
}
|
}
|
||||||
|
|
@ -38,7 +35,6 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& footer,
|
& footer,
|
||||||
header {
|
header {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
/* Scrolling pride flag text */
|
/* Scrolling pride flag text */
|
||||||
article#bio span[id],
|
#bio span[id],
|
||||||
footer span {
|
footer span {
|
||||||
font-family: "Nosey Rodent", sans-serif;
|
font-family: "Nosey Rodent", sans-serif;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
@ -15,24 +15,21 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
body {
|
|
||||||
animation: none !important;
|
|
||||||
}
|
|
||||||
/* Buttons */
|
/* Buttons */
|
||||||
:is(a, button),
|
:is(a, button),
|
||||||
span:has(a) {
|
span:has(a) {
|
||||||
transition: none !important;
|
transition: none;
|
||||||
}
|
}
|
||||||
/* Permalinks */
|
/* Permalinks */
|
||||||
.header-anchor,
|
.header-anchor,
|
||||||
article pre {
|
main article pre {
|
||||||
transition: none !important;
|
transition: none;
|
||||||
}
|
}
|
||||||
/* Images */
|
/* Images */
|
||||||
#gallery a:has(figure),
|
#gallery a:has(figure),
|
||||||
#blog article figure,
|
#blog main article figure,
|
||||||
a img {
|
a img {
|
||||||
transition: none !important;
|
transition: none;
|
||||||
}
|
}
|
||||||
.emoji:has(img[alt*="🐇"]) {
|
.emoji:has(img[alt*="🐇"]) {
|
||||||
& img {
|
& img {
|
||||||
|
|
@ -44,12 +41,12 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* Scrolling pride flag text */
|
/* Scrolling pride flag text */
|
||||||
article#bio span[id], footer span {
|
#bio span[id] {
|
||||||
transition: none !important;
|
transition: none;
|
||||||
animation: none !important;
|
animation: none;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
background-clip: initial !important;
|
background-clip: initial;
|
||||||
background: initial !important;
|
background: initial;
|
||||||
&::before {
|
&::before {
|
||||||
content: "";
|
content: "";
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
|
@ -62,6 +59,9 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
footer span {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
#aromantic::before {
|
#aromantic::before {
|
||||||
background-image: url("/assets/img/flag/aromantic.svg");
|
background-image: url("/assets/img/flag/aromantic.svg");
|
||||||
}
|
}
|
||||||
|
|
@ -71,12 +71,21 @@
|
||||||
#pansexual::before {
|
#pansexual::before {
|
||||||
background-image: url("/assets/img/flag/pansexual.svg");
|
background-image: url("/assets/img/flag/pansexual.svg");
|
||||||
}
|
}
|
||||||
footer span::before {
|
|
||||||
background-image: url("/assets/img/flag/trans.svg");
|
|
||||||
}
|
|
||||||
/* Jumping critters */
|
/* Jumping critters */
|
||||||
#pkmn span:hover {
|
#pkmn span:hover {
|
||||||
animation: none !important;
|
animation: none;
|
||||||
transform: translateY(-4px);
|
transform: translateY(-4px);
|
||||||
}
|
}
|
||||||
|
#art div {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
main article > .postscript {
|
||||||
|
& p,
|
||||||
|
p > img {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#blog #posts a {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,146 +1,103 @@
|
||||||
body > nav::before,
|
.navbar {
|
||||||
body::after {
|
|
||||||
z-index: -1;
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
mask-image: url("/assets/img/theme/sundae_sit-lines.png");
|
|
||||||
mask-repeat: no-repeat;
|
|
||||||
margin: 0;
|
|
||||||
width: inherit;
|
|
||||||
height: inherit;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
body > nav::before {
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
mask-size: 160%;
|
|
||||||
-webkit-mask-position-x: -25px;
|
|
||||||
-webkit-mask-position-y: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body::after {
|
|
||||||
content: none;
|
|
||||||
mask-size: 100%;
|
|
||||||
width: 100%;
|
|
||||||
height: 100vw;
|
|
||||||
-webkit-mask-position-x: 0;
|
|
||||||
-webkit-mask-position-y: bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
body > nav {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
gap: var(--pad-m);
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
overflow-y: scroll;
|
||||||
padding: var(--pad-l);
|
padding: var(--pad-l);
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: var(--view);
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: scroll;
|
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
& * svg,
|
width: var(--view);
|
||||||
li img {
|
& section {
|
||||||
|
font-weight: bold;
|
||||||
|
& h3 {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
height: var(--pad-xl);
|
||||||
|
margin: var(--pad-s) auto 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& ul {
|
||||||
|
margin: 0 var(--pad-s) var(--pad-s);
|
||||||
|
padding: 0;
|
||||||
|
& li {
|
||||||
|
margin-bottom: inherit;
|
||||||
|
& a,
|
||||||
|
button {
|
||||||
|
display: flex;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: bold;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 2.125rem;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
& img,
|
||||||
|
svg {
|
||||||
|
align-self: center;
|
||||||
margin: 0 8px 0 8px;
|
margin: 0 8px 0 8px;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
align-self: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
& details {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
& ul {
|
|
||||||
margin: var(--pad-sm);
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
& li,
|
|
||||||
button {
|
|
||||||
padding: 0;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: inherit;
|
|
||||||
|
|
||||||
& img {
|
& img {
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& details {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
}
|
}
|
||||||
|
#default::before,
|
||||||
& li *:is(a ,button) {
|
|
||||||
display: flex;
|
|
||||||
font-size: 1.125rem;
|
|
||||||
width: 100%;
|
|
||||||
font-weight: bold;
|
|
||||||
height: 36px;
|
|
||||||
line-height: var(--pad-xl);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
& > nav {
|
|
||||||
gap: var(--pad-m);
|
|
||||||
border-right-width: 1px;
|
|
||||||
border-right-style: solid;
|
|
||||||
|
|
||||||
& li *:is(a ,button) {
|
|
||||||
align-items: center;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 2px;
|
|
||||||
border-radius: var(--round);
|
|
||||||
}
|
|
||||||
|
|
||||||
& details {
|
|
||||||
border-radius: var(--round);
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
& details > summary {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0;
|
|
||||||
height: var(--pad-xl);
|
|
||||||
}
|
|
||||||
& details[open], details:not([open]) {
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 920px) {
|
|
||||||
body > nav {
|
|
||||||
position: initial;
|
|
||||||
width: 100%;
|
|
||||||
overflow: initial;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: start;
|
|
||||||
& li *:is(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 {
|
body::after {
|
||||||
content: "";
|
content: "";
|
||||||
|
height: inherit;
|
||||||
|
margin: 0;
|
||||||
|
mask-image: url("/assets/img/theme/sundae_sit-lines.png");
|
||||||
|
mask-repeat: no-repeat;
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
width: inherit;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
#default::before {
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
mask-position-x: -25px;
|
||||||
|
mask-position-y: 90%;
|
||||||
|
mask-size: 160%;
|
||||||
|
}
|
||||||
|
body::after {
|
||||||
|
content: none;
|
||||||
|
height: 100vw;
|
||||||
|
mask-position-x: 0;
|
||||||
|
mask-position-y: bottom;
|
||||||
|
mask-size: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#floating {
|
||||||
|
border-bottom-right-radius: var(--pad-l);
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-width: 2px;
|
||||||
|
border-right-style: solid;
|
||||||
|
border-right-width: 2px;
|
||||||
|
height: fit-content;
|
||||||
|
top: 0;
|
||||||
|
width: var(--float);
|
||||||
|
& button {
|
||||||
|
font-size: 0;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
& a {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
#sidebar {
|
||||||
|
background: none;
|
||||||
|
border: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
#floating,
|
||||||
|
#sidebar {
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,2 +1,36 @@
|
||||||
@import url("./theme-dark.css");
|
@import url("./theme-dark.css");
|
||||||
@import url("./theme-light.css");
|
@import url("./theme-light.css");
|
||||||
|
body {
|
||||||
|
font-family: "Rubik", sans-serif;
|
||||||
|
}
|
||||||
|
main article,
|
||||||
|
main article a:has(figure),
|
||||||
|
#blog .addendum,
|
||||||
|
#blog #posts a,
|
||||||
|
#gallery #artworks a,
|
||||||
|
header a, .navbar section, .navbar li :is(a, button) {
|
||||||
|
border-radius: var(--round);
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 2px;
|
||||||
|
}
|
||||||
|
main article {
|
||||||
|
& a figure {
|
||||||
|
border-color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
margin-top: var(--pad-xl);
|
||||||
|
margin-left: calc(var(--view) + var(--pad-xl));
|
||||||
|
& a {
|
||||||
|
padding: var(--pad-s);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#blog {
|
||||||
|
& [alt="Profile picture"] {
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#default {
|
||||||
|
border-right-style: solid;
|
||||||
|
border-right-width: 2px;
|
||||||
|
}
|
||||||
|
|
@ -1,117 +1,86 @@
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
article,
|
main article,
|
||||||
body,
|
body,
|
||||||
header svg {
|
header svg {
|
||||||
color: var(--secondary-light-300);
|
color: var(--secondary-light-300);
|
||||||
}
|
}
|
||||||
|
main article {
|
||||||
article {
|
|
||||||
border-color: var(--secondary-300);
|
border-color: var(--secondary-300);
|
||||||
background-color: var(--secondary-200);
|
background-color: var(--secondary-200);
|
||||||
|
& #default {
|
||||||
& aside {
|
|
||||||
box-shadow: inset 0 0 0 2px var(--secondary-500);
|
box-shadow: inset 0 0 0 2px var(--secondary-500);
|
||||||
background-color: var(--secondary-300);
|
background-color: var(--secondary-300);
|
||||||
}
|
}
|
||||||
|
|
||||||
& s,
|
& s,
|
||||||
u {
|
u {
|
||||||
text-decoration-color: color-mix(in lch, red, var(--secondary-500) 20%);
|
text-decoration-color: color-mix(in lch, red, var(--secondary-500) 20%);
|
||||||
}
|
}
|
||||||
|
|
||||||
& code:not(pre *) {
|
& code:not(pre *) {
|
||||||
color: var(--secondary-400);
|
color: var(--secondary-400);
|
||||||
background-color: var(--secondary-light-400);
|
background-color: var(--secondary-light-400);
|
||||||
}
|
}
|
||||||
|
|
||||||
& pre {
|
& pre {
|
||||||
background-color: var(--secondary-100);
|
background-color: var(--secondary-100);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: var(--secondary);
|
border-color: var(--secondary);
|
||||||
background-color: var(--secondary-400);
|
background-color: var(--secondary-400);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& pre,
|
& pre,
|
||||||
code {
|
code {
|
||||||
border-color: var(--secondary-400);
|
border-color: var(--secondary-400);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* blog.css */
|
|
||||||
& .post-warning {
|
& .post-warning {
|
||||||
background-color: var(--secondary);
|
background-color: var(--secondary);
|
||||||
color: var(--secondary-100);
|
color: var(--secondary-100);
|
||||||
|
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
background-color: var(--secondary);
|
background-color: var(--secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& .addendum {
|
& .addendum {
|
||||||
box-shadow: inset 0 0 0 2px var(--secondary);
|
|
||||||
border-image-source: linear-gradient(
|
|
||||||
45deg,
|
|
||||||
var(--secondary),
|
|
||||||
var(--secondary-600),
|
|
||||||
var(--secondary)
|
|
||||||
);
|
|
||||||
background-color: var(--secondary-400);
|
background-color: var(--secondary-400);
|
||||||
|
border-color: var(--secondary);
|
||||||
|
}
|
||||||
|
& ul li::before {
|
||||||
|
background-color: var(--secondary-light-300);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#posts {
|
#posts {
|
||||||
& p:not(:last-child) {
|
& p:not(:last-child) {
|
||||||
color: var(--secondary-light-700);
|
color: var(--secondary-light-700);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* default.css */
|
|
||||||
body {
|
body {
|
||||||
background-color: var(--secondary-100);
|
background-color: var(--secondary-100);
|
||||||
& :is(a, button):not(span *, .postscript *, dialog *),
|
& a,
|
||||||
span:has(a) {
|
button {
|
||||||
color: var(--secondary-light-400);
|
color: var(--secondary-light-400);
|
||||||
border-color: var(--secondary-600);
|
border-color: var(--secondary-600);
|
||||||
background-color: var(--secondary-300);
|
background-color: color-mix(in lch, var(--secondary-300), transparent);
|
||||||
&:is(:hover, :focus) {
|
&:is(:hover, :focus) {
|
||||||
color: var(--secondary-light-500);
|
color: var(--secondary-light-500);
|
||||||
border-color: currentColor;
|
border-color: currentColor;
|
||||||
background-color: var(--secondary-500);
|
background-color: var(--secondary-500);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:is(.header-anchor):is(:hover, :focus) {
|
|
||||||
background-color: var(--secondary-light-400);
|
|
||||||
color: var(--secondary-300);
|
|
||||||
box-shadow: 0 0 0 2px var(--secondary-300);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
& span a {
|
& span a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
& #default,
|
||||||
& > nav {
|
#floating {
|
||||||
background-color: inherit;
|
|
||||||
border-color: var(--secondary);
|
|
||||||
& details {
|
|
||||||
background-color: var(--secondary-100);
|
background-color: var(--secondary-100);
|
||||||
&:not([open]) {
|
border-color: var(--secondary);
|
||||||
color: var(--secondary);
|
& section {
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& details[open] {
|
|
||||||
border-color: var(--secondary);
|
border-color: var(--secondary);
|
||||||
background-color: var(--secondary-300);
|
background-color: var(--secondary-300);
|
||||||
color: var(--secondary-light-300);
|
color: var(--secondary-light-300);
|
||||||
|
|
||||||
& a[aria-current] {
|
& a[aria-current] {
|
||||||
color: var(--secondary-500);
|
color: var(--secondary-500);
|
||||||
border-color: var(--secondary-light-500);
|
border-color: var(--secondary-light-500);
|
||||||
background-color: var(--secondary-light-500);
|
background-color: var(--secondary-light-500);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
background-image: linear-gradient(
|
background-image: linear-gradient(
|
||||||
to bottom,
|
to bottom,
|
||||||
|
|
@ -120,34 +89,20 @@
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after,
|
&::after,
|
||||||
& > nav::before {
|
& #default::before {
|
||||||
background-color: var(--secondary);
|
background-color: var(--secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* home.css */
|
|
||||||
ul:not([role]) li::before {
|
|
||||||
background-color: var(--secondary-light-300);
|
|
||||||
}
|
|
||||||
|
|
||||||
#interests {
|
#interests {
|
||||||
& a:is(:hover, :focus):not(.header-anchor) {
|
& a:is(:hover, :focus):not(.header-anchor) {
|
||||||
box-shadow: 0 0 0 1px currentColor;
|
box-shadow: 0 0 0 1px currentColor;
|
||||||
background-color: var(--secondary-500);
|
background-color: var(--secondary-500);
|
||||||
}
|
}
|
||||||
|
|
||||||
& img {
|
|
||||||
box-shadow: 0 0 0 1px
|
|
||||||
color-mix(in lch, transparent, var(--secondary-500) 70%);
|
|
||||||
}
|
|
||||||
|
|
||||||
& details h3 {
|
& details h3 {
|
||||||
border-color: var(--secondary-600);
|
border-color: var(--secondary-600);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a:has(img[src*="/assets/img/button"]) {
|
a:has(img[src*="/assets/img/button"]) {
|
||||||
background-color: unset;
|
background-color: unset;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,117 +1,86 @@
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
article,
|
main article,
|
||||||
body,
|
body,
|
||||||
header svg {
|
header svg {
|
||||||
color: var(--primary-dark-300);
|
color: var(--primary-dark-300);
|
||||||
}
|
}
|
||||||
|
main article {
|
||||||
article {
|
|
||||||
border-color: var(--primary-300);
|
border-color: var(--primary-300);
|
||||||
background-color: var(--primary-200);
|
background-color: var(--primary-200);
|
||||||
|
& #default {
|
||||||
& aside {
|
|
||||||
box-shadow: inset 0 0 0 2px var(--primary-500);
|
box-shadow: inset 0 0 0 2px var(--primary-500);
|
||||||
background-color: var(--primary-300);
|
background-color: var(--primary-300);
|
||||||
}
|
}
|
||||||
|
|
||||||
& s,
|
& s,
|
||||||
u {
|
u {
|
||||||
text-decoration-color: color-mix(in lch, red, var(--primary-500) 20%);
|
text-decoration-color: color-mix(in lch, red, var(--primary-500) 20%);
|
||||||
}
|
}
|
||||||
|
|
||||||
& code:not(pre *) {
|
& code:not(pre *) {
|
||||||
color: var(--primary-400);
|
color: var(--primary-400);
|
||||||
background-color: var(--primary-dark-400);
|
background-color: var(--primary-dark-400);
|
||||||
}
|
}
|
||||||
|
|
||||||
& pre {
|
& pre {
|
||||||
background-color: var(--primary-100);
|
background-color: var(--primary-100);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: var(--primary);
|
border-color: var(--primary);
|
||||||
background-color: var(--primary-400);
|
background-color: var(--primary-400);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& pre,
|
& pre,
|
||||||
code {
|
code {
|
||||||
border-color: var(--primary-400);
|
border-color: var(--primary-400);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* blog.css */
|
|
||||||
& .post-warning {
|
& .post-warning {
|
||||||
background-color: var(--primary);
|
background-color: var(--primary);
|
||||||
color: var(--primary-dark-100);
|
color: var(--primary-dark-100);
|
||||||
|
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
background-color: var(--primary);
|
background-color: var(--primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& .addendum {
|
& .addendum {
|
||||||
box-shadow: inset 0 0 0 2px var(--primary);
|
|
||||||
border-image-source: linear-gradient(
|
|
||||||
45deg,
|
|
||||||
var(--primary),
|
|
||||||
var(--primary-600),
|
|
||||||
var(--primary)
|
|
||||||
);
|
|
||||||
background-color: var(--primary-400);
|
background-color: var(--primary-400);
|
||||||
|
border-color: var(--primary);
|
||||||
|
}
|
||||||
|
& ul:not([role]) li::before {
|
||||||
|
background-color: var(--primary-dark-300);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#posts {
|
#posts {
|
||||||
& p:not(:last-child) {
|
& p:not(:last-child) {
|
||||||
color: var(--primary-dark-700);
|
color: var(--primary-dark-700);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* default.css */
|
|
||||||
body {
|
body {
|
||||||
background-color: var(--primary-100);
|
background-color: var(--primary-100);
|
||||||
& :is(a, button):not(span *, .postscript *, dialog *),
|
& a,
|
||||||
span:has(a) {
|
button {
|
||||||
color: var(--primary-dark-400);
|
color: var(--primary-dark-400);
|
||||||
border-color: var(--primary-600);
|
border-color: var(--primary-600);
|
||||||
background-color: var(--primary-400);
|
background-color: color-mix(in lch, var(--primary-400), transparent);
|
||||||
&:is(:hover, :focus) {
|
&:is(:hover, :focus) {
|
||||||
color: var(--primary-dark-500);
|
color: var(--primary-dark-500);
|
||||||
border-color: currentColor;
|
border-color: currentColor;
|
||||||
background-color: var(--primary-600);
|
background-color: var(--primary-600);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:is(.header-anchor):is(:hover, :focus) {
|
|
||||||
background-color: var(--primary-dark-400);
|
|
||||||
color: var(--primary-300);
|
|
||||||
box-shadow: 0 0 0 2px var(--primary-300);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
& span a {
|
& span a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
& #default,
|
||||||
& > nav {
|
#floating {
|
||||||
background-color: inherit;
|
|
||||||
border-color: var(--primary-dark-500);
|
|
||||||
& details {
|
|
||||||
background-color: var(--primary-100);
|
background-color: var(--primary-100);
|
||||||
&:not([open]) {
|
border-color: var(--primary-dark-500);
|
||||||
color: var(--primary-dark-500);
|
& section {
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& details[open] {
|
|
||||||
border-color: var(--primary-dark-800);
|
border-color: var(--primary-dark-800);
|
||||||
background-color: var(--primary-300);
|
background-color: var(--primary-300);
|
||||||
color: var(--primary-dark-300);
|
color: var(--primary-dark-300);
|
||||||
|
|
||||||
& a[aria-current] {
|
& a[aria-current] {
|
||||||
color: var(--primary-500);
|
color: var(--primary-500);
|
||||||
border-color: var(--primary-dark-500);
|
border-color: var(--primary-dark-500);
|
||||||
background-color: var(--primary-dark-500);
|
background-color: var(--primary-dark-500);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
background-image: linear-gradient(
|
background-image: linear-gradient(
|
||||||
to bottom,
|
to bottom,
|
||||||
|
|
@ -120,34 +89,20 @@
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after,
|
&::after,
|
||||||
& > nav::before {
|
& #default::before {
|
||||||
background-color: var(--primary-dark-500);
|
background-color: var(--primary-dark-500);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* home.css */
|
|
||||||
ul:not([role]) li::before {
|
|
||||||
background-color: var(--primary-dark-300);
|
|
||||||
}
|
|
||||||
|
|
||||||
#interests {
|
#interests {
|
||||||
& a:is(:hover, :focus):not(.header-anchor) {
|
& a:is(:hover, :focus):not(.header-anchor) {
|
||||||
box-shadow: 0 0 0 1px currentColor;
|
box-shadow: 0 0 0 1px currentColor;
|
||||||
background-color: var(--primary-500);
|
background-color: var(--primary-500);
|
||||||
}
|
}
|
||||||
|
|
||||||
& img {
|
|
||||||
box-shadow: 0 0 0 1px
|
|
||||||
color-mix(in lch, transparent, var(--primary-dark-500) 30%);
|
|
||||||
}
|
|
||||||
|
|
||||||
& details h3 {
|
& details h3 {
|
||||||
border-color: var(--primary-dark-600);
|
border-color: var(--primary-dark-600);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a:has(img[src*="/assets/img/button"]) {
|
a:has(img[src*="/assets/img/button"]) {
|
||||||
background-color: unset;
|
background-color: unset;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -39,17 +39,21 @@
|
||||||
--secondary-700: color-mix(in lch, var(--secondary), var(--dark) 30%);
|
--secondary-700: color-mix(in lch, var(--secondary), var(--dark) 30%);
|
||||||
--secondary-800: color-mix(in lch, var(--secondary), var(--dark) 20%);
|
--secondary-800: color-mix(in lch, var(--secondary), var(--dark) 20%);
|
||||||
--secondary-900: color-mix(in lch, var(--secondary), var(--dark) 10%);
|
--secondary-900: color-mix(in lch, var(--secondary), var(--dark) 10%);
|
||||||
--trans: 300ms;
|
--avatar: 3rem; /* Blog avatar */
|
||||||
--image: 24rem;
|
--flag: 45deg; /* Pride flag */
|
||||||
--post: 75ch;
|
--image: 24rem; /* Postscript images */
|
||||||
--round: 16px;
|
--main: 108rem; /* Main width */
|
||||||
--pad-xxl: 4rem;
|
--post: 75ch; /* Article text width */
|
||||||
--pad-xl: 2rem;
|
--view: 300px; /* Sidebar width */
|
||||||
--pad-lm: 1.4rem;
|
--float: 88px; /* Floating sidebar width */
|
||||||
--pad-l: 1rem;
|
--thumb: 16rem; /* Gallery artwork thumbnail */
|
||||||
|
--pad-s: 0.4rem;
|
||||||
--pad-m: 0.8rem;
|
--pad-m: 0.8rem;
|
||||||
--pad-sm: 0.4rem;
|
--pad-l: 1rem;
|
||||||
--flag: 45deg;
|
--pad-xl: 2rem;
|
||||||
|
--pad-xxl: 4rem;
|
||||||
|
--round: 16px; /* Border radius */
|
||||||
|
--trans: 300ms;
|
||||||
--paw: url("/assets/img/theme/paw.svg");
|
--paw: url("/assets/img/theme/paw.svg");
|
||||||
--paw-tiled: url("/assets/img/theme/paw-tiled.png");
|
--paw-tiled: url("/assets/img/theme/paw-tiled.png");
|
||||||
--outlined: drop-shadow(0 0.5px var(--dark)) drop-shadow(0 -0.5px var(--dark))
|
--outlined: drop-shadow(0 0.5px var(--dark)) drop-shadow(0 -0.5px var(--dark))
|
||||||
|
|
@ -98,17 +102,6 @@
|
||||||
#00d2ff 0
|
#00d2ff 0
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes mainbg {
|
|
||||||
0% {
|
|
||||||
background-position: 0rem 0rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
background-position: 256px 256px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slide {
|
@keyframes slide {
|
||||||
0% {
|
0% {
|
||||||
background-position: 0% 100%;
|
background-position: 0% 100%;
|
||||||
|
|
@ -118,23 +111,24 @@
|
||||||
background-position: 200% 100%;
|
background-position: 200% 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@keyframes jump {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
}
|
||||||
|
}
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: Rubik;
|
font-family: Rubik;
|
||||||
src: url("/assets/fonts/Rubik.ttf") format("truetype");
|
src: url("/assets/fonts/Rubik.ttf") format("truetype");
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: Urbanist;
|
font-family: Urbanist;
|
||||||
src: url("/assets/fonts/Urbanist-Bold.ttf") format("truetype");
|
src: url("/assets/fonts/Urbanist-Bold.ttf") format("truetype");
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: Nosey Rodent;
|
font-family: Nosey Rodent;
|
||||||
src: url("/assets/fonts/noseyrodent-Regular.ttf") format("truetype");
|
src: url("/assets/fonts/noseyrodent-Regular.ttf") format("truetype");
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: Impact;
|
|
||||||
src: url("/assets/fonts/Impact-Regular.ttf") format("truetype");
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -6,14 +6,12 @@
|
||||||
*::after {
|
*::after {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Prevent font size inflation */
|
/* Prevent font size inflation */
|
||||||
html {
|
html {
|
||||||
-moz-text-size-adjust: none;
|
-moz-text-size-adjust: none;
|
||||||
-webkit-text-size-adjust: none;
|
-webkit-text-size-adjust: none;
|
||||||
text-size-adjust: none;
|
text-size-adjust: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Remove default margin in favour of better control in authored CSS */
|
/* Remove default margin in favour of better control in authored CSS */
|
||||||
body,
|
body,
|
||||||
h1,
|
h1,
|
||||||
|
|
@ -26,21 +24,17 @@ blockquote,
|
||||||
dl,
|
dl,
|
||||||
dd {
|
dd {
|
||||||
margin-block-end: 0;
|
margin-block-end: 0;
|
||||||
margin-block-start: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
|
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
|
||||||
ul[role='list'],
|
ul[role="list"],
|
||||||
ol[role='list'] {
|
ol[role="list"] {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Set core body defaults */
|
/* Set core body defaults */
|
||||||
body {
|
body {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Set shorter line heights on headings and interactive elements */
|
/* Set shorter line heights on headings and interactive elements */
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
|
|
@ -51,7 +45,6 @@ input,
|
||||||
label {
|
label {
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Balance text wrapping on headings */
|
/* Balance text wrapping on headings */
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
|
|
@ -59,20 +52,17 @@ h3,
|
||||||
h4 {
|
h4 {
|
||||||
text-wrap: balance;
|
text-wrap: balance;
|
||||||
}
|
}
|
||||||
|
/* A elements that don't have a class get default styles */
|
||||||
/* A elements that don't have a class get default styles
|
|
||||||
a:not([class]) {
|
a:not([class]) {
|
||||||
text-decoration-skip-ink: auto;
|
text-decoration-skip-ink: auto;
|
||||||
color: currentColor;
|
color: currentColor;
|
||||||
}
|
}
|
||||||
*/
|
|
||||||
|
|
||||||
/* Make images easier to work with */
|
/* Make images easier to work with */
|
||||||
img,
|
img,
|
||||||
picture {
|
picture {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Inherit fonts for inputs and buttons */
|
/* Inherit fonts for inputs and buttons */
|
||||||
input,
|
input,
|
||||||
button,
|
button,
|
||||||
|
|
@ -81,12 +71,10 @@ select {
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Make sure textareas without a rows attribute are not tiny */
|
/* Make sure textareas without a rows attribute are not tiny */
|
||||||
textarea:not([rows]) {
|
textarea:not([rows]) {
|
||||||
min-height: 10em;
|
min-height: 10em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Anything that has been anchored to should have extra scroll margin */
|
/* Anything that has been anchored to should have extra scroll margin */
|
||||||
:target {
|
:target {
|
||||||
scroll-margin-block: 5ex;
|
scroll-margin-block: 5ex;
|
||||||
|
|
|
||||||
|
|
@ -1,14 +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);
|
|
||||||
});
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
const basePath = "/assets/css";
|
const basePath = "/assets/css";
|
||||||
const themeToggle = document.getElementById("theme-toggle");
|
const themeToggles = document.querySelectorAll(".theme-toggle");
|
||||||
const themeStylesheet = document.getElementById("themed");
|
const themeStylesheet = document.getElementById("themed");
|
||||||
|
|
||||||
const themes = [
|
const themes = [
|
||||||
{ name: "system", file: "default/system.css" },
|
{ name: "system", file: "default/system.css" },
|
||||||
{ name: "citrus", file: "citrus/default.css" },
|
{ name: "citrus", file: "citrus/citrus.css" },
|
||||||
];
|
];
|
||||||
|
|
||||||
let currentTheme = localStorage.getItem("theme") || themes[0].name;
|
let currentTheme = localStorage.getItem("theme") || themes[0].name;
|
||||||
|
|
@ -12,13 +12,15 @@ setTheme(currentTheme);
|
||||||
|
|
||||||
function setTheme(themeName) {
|
function setTheme(themeName) {
|
||||||
const theme = themes.find(t => t.name === themeName);
|
const theme = themes.find(t => t.name === themeName);
|
||||||
if (theme) {
|
if (theme && themeStylesheet) {
|
||||||
themeStylesheet.href = `${basePath}/${theme.file}`;
|
themeStylesheet.href = `${basePath}/${theme.file}`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
themeToggle.addEventListener("click", () => {
|
themeToggles.forEach(btn =>
|
||||||
|
btn.addEventListener("click", () => {
|
||||||
currentTheme = themes[(themes.findIndex(t => t.name === currentTheme) + 1) % themes.length].name;
|
currentTheme = themes[(themes.findIndex(t => t.name === currentTheme) + 1) % themes.length].name;
|
||||||
setTheme(currentTheme);
|
setTheme(currentTheme);
|
||||||
localStorage.setItem("theme", currentTheme);
|
localStorage.setItem("theme", currentTheme);
|
||||||
});
|
})
|
||||||
|
);
|
||||||
|
|
@ -4,6 +4,7 @@ images:
|
||||||
alt: Various pixel art animations of Sundae as a character from Nuclear Throne.
|
alt: Various pixel art animations of Sundae as a character from Nuclear Throne.
|
||||||
date: 2021-01-25
|
date: 2021-01-25
|
||||||
pixel: true
|
pixel: true
|
||||||
|
fit: contain
|
||||||
programs:
|
programs:
|
||||||
- name: paint.net
|
- name: paint.net
|
||||||
src: https://www.getpaint.net/
|
src: https://www.getpaint.net/
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
{
|
{
|
||||||
"permalink": "/gallery/{{page.fileSlug|slug}}/",
|
"permalink": "/gallery/original/{{page.fileSlug|slug}}/",
|
||||||
"tags": "artworks"
|
"tags": "artworks"
|
||||||
}
|
}
|
||||||
|
|
@ -3,6 +3,7 @@ images:
|
||||||
- src: /assets/img/art/sundae_refsheet-new-unfinished.png
|
- src: /assets/img/art/sundae_refsheet-new-unfinished.png
|
||||||
alt: Reference/model sheet of Sundae with a full-length front portrait, T-posed.
|
alt: Reference/model sheet of Sundae with a full-length front portrait, T-posed.
|
||||||
date: 2025-02-11
|
date: 2025-02-11
|
||||||
|
fit: scale-down
|
||||||
programs:
|
programs:
|
||||||
- name: Krita
|
- name: Krita
|
||||||
src: https://krita.org/
|
src: https://krita.org/
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ images:
|
||||||
alt: Half-length portrait of Sundae getting a head pat from a disembodied white hand.
|
alt: Half-length portrait of Sundae getting a head pat from a disembodied white hand.
|
||||||
date: 2021-11-18
|
date: 2021-11-18
|
||||||
pixel: true
|
pixel: true
|
||||||
|
fit: scale-down
|
||||||
programs:
|
programs:
|
||||||
- name: MS Paint
|
- name: MS Paint
|
||||||
src: https://www.microsoft.com/en-us/windows/paint
|
src: https://www.microsoft.com/en-us/windows/paint
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ images:
|
||||||
alt: Side portrait of Kass, looking back at the player.
|
alt: Side portrait of Kass, looking back at the player.
|
||||||
date: 2023-02-23
|
date: 2023-02-23
|
||||||
pixel: true
|
pixel: true
|
||||||
|
position: -25px
|
||||||
attachments:
|
attachments:
|
||||||
- src: /assets/img/blog/kass.jpg
|
- src: /assets/img/blog/kass.jpg
|
||||||
alt: In-game screenshot of Kass that I took as reference.
|
alt: In-game screenshot of Kass that I took as reference.
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@ images:
|
||||||
- src: /assets/img/art/petscii_sue.png
|
- src: /assets/img/art/petscii_sue.png
|
||||||
alt: Sue Sakamoto sitting and looking out from the Outer Wall.
|
alt: Sue Sakamoto sitting and looking out from the Outer Wall.
|
||||||
date: 2023-01-16
|
date: 2023-01-16
|
||||||
|
position: right
|
||||||
palettes:
|
palettes:
|
||||||
- name: Commodore 64
|
- name: Commodore 64
|
||||||
---
|
---
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
{
|
{
|
||||||
"permalink": "/gallery/{{page.fileSlug|slug}}/",
|
"permalink": "/gallery/fanart/{{page.fileSlug|slug}}/",
|
||||||
"tags": "fanarts"
|
"tags": "fanarts"
|
||||||
}
|
}
|
||||||
|
|
@ -3,6 +3,7 @@ images:
|
||||||
- src: /assets/img/art/klonoa_sitting.png
|
- src: /assets/img/art/klonoa_sitting.png
|
||||||
alt: Klonoa sitting on a ledge, with a hand on his knee and right leg dangling from the viewer's side.
|
alt: Klonoa sitting on a ledge, with a hand on his knee and right leg dangling from the viewer's side.
|
||||||
date: 2021-11-18
|
date: 2021-11-18
|
||||||
|
fit: scale-down
|
||||||
programs:
|
programs:
|
||||||
- name: MS Paint
|
- name: MS Paint
|
||||||
src: https://www.microsoft.com/en-us/windows/paint
|
src: https://www.microsoft.com/en-us/windows/paint
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@ images:
|
||||||
- src: /assets/img/art/mallow.png
|
- 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.
|
alt: Mallow from Cavern Crusher, sitting on the ledge of a mossy stone pit with water at the bottom.
|
||||||
date: 2025-08-03
|
date: 2025-08-03
|
||||||
|
position: left
|
||||||
programs:
|
programs:
|
||||||
- name: Krita
|
- name: Krita
|
||||||
src: https://krita.org/
|
src: https://krita.org/
|
||||||
|
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
## Bio
|
|
||||||
|
|
||||||
<img src="/assets/img/art/sundae_icon.svg" alt="Vector icon of Sunny" style="width: 128px;">
|
|
||||||
|
|
||||||
Hi! My name's Sunny. I'm:
|
|
||||||
|
|
||||||
- an artist
|
|
||||||
- a writer
|
|
||||||
- an audio and video editor
|
|
||||||
- a graphic designer
|
|
||||||
- a web designer
|
|
||||||
- a bunny <span class="emoji"><img src="/assets/img/icon/rabbit_1f407.gif" alt="🐇"></span>
|
|
||||||
|
|
||||||
I identify as: <span id="agender">agender</span>, <span id="aromantic">aromantic</span> and <span id="pansexual">pansexual</span>.
|
|
||||||
|
|
||||||
_TO DO: add more text here plz. kthxbai ^\_^_
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
## Fan art
|
|
||||||
|
|
||||||
Various artworks featuring characters from other media
|
|
||||||
12
_src/data/articles/home-bio.html
Normal file
12
_src/data/articles/home-bio.html
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
<img src="/assets/img/art/sundae_icon.svg" alt="Vector icon of Sunny" style="width: 128px;">
|
||||||
|
<p>Hi! My name's Sunny. I'm:</p>
|
||||||
|
<ul class="paws">
|
||||||
|
<li>an artist</li>
|
||||||
|
<li>a writer</li>
|
||||||
|
<li>an audio and video editor</li>
|
||||||
|
<li>a graphic designer</li>
|
||||||
|
<li>a web designer</li>
|
||||||
|
<li>a bunny <span class="emoji"><img src="/assets/img/icon/rabbit_1f407.gif" alt="🐇"></span></li>
|
||||||
|
</ul>
|
||||||
|
<p>I identify as: <span id="agender">agender</span>, <span id="aromantic">aromantic</span> and <span id="pansexual">pansexual</span>.</p>
|
||||||
|
<p><i>TO DO: add more text here plz. kthxbai ^_^</i></p>
|
||||||
3
_src/data/articles/home-interests.html
Normal file
3
_src/data/articles/home-interests.html
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<p>Below are lists of media that I've enjoyed and/or still enjoy.</p>
|
||||||
|
<p>It is a non-exclusive list, so not everything ever is on here. Just whatever comes to mind to recommend.</p>
|
||||||
|
<p>There will be <b>a lot</b> of music, though.</p>
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
## Interests
|
|
||||||
|
|
||||||
Below are lists of media that I've enjoyed and/or still enjoy.
|
|
||||||
|
|
||||||
It is a non-exclusive list, so not everything ever is on here. Just whatever comes to mind to recommend.
|
|
||||||
|
|
||||||
There will be **a lot** of music, though.
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
## Original characters
|
|
||||||
|
|
||||||
My own characters that I've drawn
|
|
||||||
|
|
@ -15,7 +15,7 @@ I haven't worked on much of anything the past 8+ months, and out of the blue, I
|
||||||
|
|
||||||
### So, what's new?
|
### So, what's new?
|
||||||
|
|
||||||
It's now {{"open source"|link:"https://bunsin.space/forgejo/sundae/website"}} under <abbr title="Creative Commons Attribution-NonCommercial-ShareAlike 4.0">CC-BY-NC-SA 4.0</abbr>!
|
It's now {{"open source"|link:"https://moth.ink/forgejo/sundae/website"}} under <abbr title="Creative Commons Attribution-NonCommercial-ShareAlike 4.0">CC-BY-NC-SA 4.0</abbr>!
|
||||||
|
|
||||||
Besides that, a lot is new, actually. For starters, I ported the site over to a fresh build of {{"Eleventy 3.1.0"|link:"https://github.com/11ty/eleventy/releases/tag/v3.1.0"}}, which was way easier than I expected, {{"since I originally started from a base"|link:"/blog/break-time#i-have-no-some-idea-what-i'm-doing"}}.
|
Besides that, a lot is new, actually. For starters, I ported the site over to a fresh build of {{"Eleventy 3.1.0"|link:"https://github.com/11ty/eleventy/releases/tag/v3.1.0"}}, which was way easier than I expected, {{"since I originally started from a base"|link:"/blog/break-time#i-have-no-some-idea-what-i'm-doing"}}.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1 @@
|
||||||
## {{page.fileSlug|readable}}
|
|
||||||
|
|
||||||
- Created my Neocities account!
|
- Created my Neocities account!
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
## {{page.fileSlug|readable}}
|
|
||||||
|
|
||||||
- Added [Home](/home), [Gallery](/gallery) and ~~About~~
|
- Added [Home](/home), [Gallery](/gallery) and ~~About~~
|
||||||
- ~~About~~ contains Pokémon boxes and a small bio
|
- ~~About~~ contains Pokémon boxes and a small bio
|
||||||
- Added links to other pages
|
- Added links to other pages
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,6 @@
|
||||||
---
|
---
|
||||||
title: Version 0
|
title: Version 0
|
||||||
---
|
---
|
||||||
|
|
||||||
## {{page.fileSlug|readable}} <code>{{title}}</code>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- Added sidebar
|
- Added sidebar
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
## {{page.fileSlug|readable}}
|
|
||||||
|
|
||||||
- Working on my [interests](/home#interests)...
|
- Working on my [interests](/home#interests)...
|
||||||
- Added ~~Favorite Pokémon~~
|
- Added ~~Favorite Pokémon~~
|
||||||
- Moved Pokémon boxes from ~~About~~
|
- Moved Pokémon boxes from ~~About~~
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1 @@
|
||||||
## {{page.fileSlug|readable}}
|
|
||||||
|
|
||||||
- [Gallery](/gallery) implemented
|
- [Gallery](/gallery) implemented
|
||||||
|
|
|
||||||
|
|
@ -2,8 +2,6 @@
|
||||||
title: Version 1
|
title: Version 1
|
||||||
---
|
---
|
||||||
|
|
||||||
## {{page.fileSlug|readable}} <code>{{title}}</code>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- Changed backgrounds
|
- Changed backgrounds
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
## {{page.fileSlug|readable}}
|
|
||||||
|
|
||||||
- Changed [Gallery](/gallery)
|
- Changed [Gallery](/gallery)
|
||||||
- Now implementing {{"CSS grid layout"|link:"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout"}}
|
- Now implementing {{"CSS grid layout"|link:"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout"}}
|
||||||
- Removed Sunny's portrait from the sidebar
|
- Removed Sunny's portrait from the sidebar
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
## {{page.fileSlug|readable}}
|
|
||||||
|
|
||||||
- Changed ~~About~~
|
- Changed ~~About~~
|
||||||
- Added a collection of games and music that I enjoy
|
- Added a collection of games and music that I enjoy
|
||||||
- Added 88x31 buttons to the footer of the page
|
- Added 88x31 buttons to the footer of the page
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1 @@
|
||||||
## {{page.fileSlug|readable}}
|
|
||||||
|
|
||||||
- Made a 88x31 button! [](/)
|
- Made a 88x31 button! [](/)
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
## {{page.fileSlug|readable}}
|
|
||||||
|
|
||||||
- Re-added and moved Sunny's portrait to my [bio](/home#bio)
|
- Re-added and moved Sunny's portrait to my [bio](/home#bio)
|
||||||
- Changed [Gallery](/gallery)
|
- Changed [Gallery](/gallery)
|
||||||
- Added sections for [original characters](/gallery/#original-characters) and [fan art](/gallery#fan-art)
|
- Added sections for [original characters](/gallery/#original-characters) and [fan art](/gallery#fan-art)
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1 @@
|
||||||
## {{page.fileSlug|readable}}
|
|
||||||
|
|
||||||
- Wrote more about my [interests](/home#interests)
|
- Wrote more about my [interests](/home#interests)
|
||||||
|
|
@ -1,3 +1 @@
|
||||||
## {{page.fileSlug|readable}}
|
|
||||||
|
|
||||||
- Starting work on a re-design. I fixed a few inconsistencies beforehand
|
- Starting work on a re-design. I fixed a few inconsistencies beforehand
|
||||||
|
|
@ -2,8 +2,6 @@
|
||||||
title: Version 2
|
title: Version 2
|
||||||
---
|
---
|
||||||
|
|
||||||
## {{page.fileSlug|readable}} <code>{{title}}</code>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Added a lot of visual flair with to page elements to look like everyday objects, with the exception being: the header, sidebar and topbar, as they're supposed to be UI.
|
Added a lot of visual flair with to page elements to look like everyday objects, with the exception being: the header, sidebar and topbar, as they're supposed to be UI.
|
||||||
|
|
|
||||||
|
|
@ -2,8 +2,6 @@
|
||||||
title: Version 3
|
title: Version 3
|
||||||
---
|
---
|
||||||
|
|
||||||
## {{page.fileSlug|readable}} <code>{{title}}</code>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Some considerations were put into making page elements stand out more. I tried to remove redundant rules and nesting when necessary, and tried my best to conform to {{"semantic HTML"|link:"https://developer.mozilla.org/en-US/curriculum/core/semantic-html/"}}.
|
Some considerations were put into making page elements stand out more. I tried to remove redundant rules and nesting when necessary, and tried my best to conform to {{"semantic HTML"|link:"https://developer.mozilla.org/en-US/curriculum/core/semantic-html/"}}.
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,2 @@
|
||||||
## {{page.fileSlug|readable}}
|
|
||||||
|
|
||||||
- Changed ~~About~~
|
- Changed ~~About~~
|
||||||
- Updated the look of the jewel CD cases in my [interests](/home#interests)
|
- Updated the look of the jewel CD cases in my [interests](/home#interests)
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
## {{page.fileSlug|readable}}
|
|
||||||
|
|
||||||
- Fixed a couple of small issues regarding mobile view
|
- Fixed a couple of small issues regarding mobile view
|
||||||
- Changed [Gallery](/gallery)
|
- Changed [Gallery](/gallery)
|
||||||
- Artworks now work (ha) with keyboard navigation
|
- Artworks now work (ha) with keyboard navigation
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,2 @@
|
||||||
## {{page.fileSlug|readable}}
|
|
||||||
|
|
||||||
- Added ~~Jukebox~~
|
- Added ~~Jukebox~~
|
||||||
- A page with a music player featuring a pre-defined track list from various video games and accompanying backgrounds that fade-in on track change
|
- A page with a music player featuring a pre-defined track list from various video games and accompanying backgrounds that fade-in on track change
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,2 @@
|
||||||
## {{page.fileSlug|readable}}
|
|
||||||
|
|
||||||
- Drafted ~~Jukebox~~
|
- Drafted ~~Jukebox~~
|
||||||
- I am bad at JavaScript
|
- I am bad at JavaScript
|
||||||
|
|
|
||||||
|
|
@ -2,8 +2,6 @@
|
||||||
title: Version 4
|
title: Version 4
|
||||||
---
|
---
|
||||||
|
|
||||||
## {{page.fileSlug|readable}} <code>{{title}}</code>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- Shiny buttons are BACK!
|
- Shiny buttons are BACK!
|
||||||
|
|
|
||||||
|
|
@ -2,8 +2,6 @@
|
||||||
title: Version 5
|
title: Version 5
|
||||||
---
|
---
|
||||||
|
|
||||||
## {{page.fileSlug|readable}} <code>{{title}}</code>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Re-wrote the website with {{"Eleventy"|link:"https://11ty.dev/"}}.
|
Re-wrote the website with {{"Eleventy"|link:"https://11ty.dev/"}}.
|
||||||
|
|
|
||||||
|
|
@ -2,8 +2,6 @@
|
||||||
title: Version 6
|
title: Version 6
|
||||||
---
|
---
|
||||||
|
|
||||||
## {{page.fileSlug|readable}} <code>{{title}}</code>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Re-wrote the site, again.
|
Re-wrote the site, again.
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
## {{page.fileSlug|readable}}
|
|
||||||
|
|
||||||
Polished the old theme
|
Polished the old theme
|
||||||
|
|
||||||
- Changed [Home](/home)
|
- Changed [Home](/home)
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
## {{page.fileSlug|readable}}
|
|
||||||
|
|
||||||
- Changed sidebar
|
- Changed sidebar
|
||||||
- Added icon for [Changelog](/changelog)
|
- Added icon for [Changelog](/changelog)
|
||||||
- For some reason I forgot give it an icon, it previously used the Gallery icon
|
- For some reason I forgot give it an icon, it previously used the Gallery icon
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,10 @@
|
||||||
## {{page.fileSlug|readable}}
|
|
||||||
|
|
||||||
Website (hopefully) fixed for Chromium-based browsers _...grr_
|
Website (hopefully) fixed for Chromium-based browsers _...grr_
|
||||||
|
|
||||||
- Changed sidebar
|
- Changed sidebar
|
||||||
- ~~Added an animated tiled paw background for desktop view~~
|
- ~~Added an animated tiled paw background for desktop view~~
|
||||||
- Changed [Home](/home)
|
- Changed [Home](/home)
|
||||||
- Updated the Pokémon box, now using a spritesheet instead of individual files
|
- Updated the Pokémon box, now using a spritesheet instead of individual files
|
||||||
- Ironically, this is marginally slower than before, because it includes every Pokémon (up to Gen 8), not just my favorites.<br>(Works great if you've [forked my site](https://bunsin.space/forgejo/sundae/website) and want to change it to include your personal favorites, though!)
|
- Ironically, this is marginally slower than before, because it includes every Pokémon (up to Gen 8), not just my favorites.<br>(Works great if you've [forked my site](https://moth.ink/forgejo/sundae/website) and want to change it to include your personal favorites, though!)
|
||||||
- Downscaled media images in [interests](/home#interests) to `300px` to offset network load
|
- Downscaled media images in [interests](/home#interests) to `300px` to offset network load
|
||||||
- Changed [Changelog](/changelog)
|
- Changed [Changelog](/changelog)
|
||||||
- **Actually** processed with [Prettier](https://github.com/prettier/prettier), now.
|
- **Actually** processed with [Prettier](https://github.com/prettier/prettier), now.
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
## {{page.fileSlug|readable}}
|
|
||||||
|
|
||||||
Actively trying to accommodate for accessibility
|
Actively trying to accommodate for accessibility
|
||||||
|
|
||||||
- Added `header` to pages back in
|
- Added `header` to pages back in
|
||||||
|
|
|
||||||
|
|
@ -2,8 +2,6 @@
|
||||||
title: Version 7
|
title: Version 7
|
||||||
---
|
---
|
||||||
|
|
||||||
## {{page.fileSlug|readable}} <code>{{title}}</code>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Overhauled the old theme
|
Overhauled the old theme
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
## {{page.fileSlug|readable}}
|
|
||||||
|
|
||||||
- Changed [Index](/) and [Blog](/blog)
|
- Changed [Index](/) and [Blog](/blog)
|
||||||
- Updated with miscellaneous disclaimers
|
- Updated with miscellaneous disclaimers
|
||||||
- Implemented proper off-site links everywhere with favicons as an Eleventy filter **(FINALLY)**
|
- Implemented proper off-site links everywhere with favicons as an Eleventy filter **(FINALLY)**
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
## {{page.fileSlug|readable}}
|
|
||||||
|
|
||||||
- Updated to {{"Eleventy v3.1.2"|link:"https://github.com/11ty/eleventy/releases/tag/v3.1.2"}}
|
- Updated to {{"Eleventy v3.1.2"|link:"https://github.com/11ty/eleventy/releases/tag/v3.1.2"}}
|
||||||
- Should hopefully be able to be compiled without throwing errors now.
|
- Should hopefully be able to be compiled without throwing errors now.
|
||||||
- Updated [Gallery](/gallery)
|
- Updated [Gallery](/gallery)
|
||||||
|
|
|
||||||
2
_src/data/changelog/2026-04-02.md
Normal file
2
_src/data/changelog/2026-04-02.md
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
- Updated a few links, due to moving domains
|
||||||
|
- Started working on a redesign for the sidebar, mostly intended for easier mobile navigation
|
||||||
4
_src/data/changelog/2026-04-07.md
Normal file
4
_src/data/changelog/2026-04-07.md
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
- Changed sidebar
|
||||||
|
- Now toggleable on lower resolutions
|
||||||
|
- Changed [Gallery](/gallery)
|
||||||
|
- Redesigned to look like a corkboard
|
||||||
|
|
@ -22,7 +22,6 @@
|
||||||
>Mastodon</a
|
>Mastodon</a
|
||||||
>
|
>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<p>
|
<p>
|
||||||
This site eats cookies for breakfast.
|
This site eats cookies for breakfast.
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,8 @@
|
||||||
---
|
---
|
||||||
title: "Blog"
|
|
||||||
order: 3
|
order: 3
|
||||||
icon: "m5 3h15l7 7v20H5zm5 22h12v-3H10zm0-6h12v-3H10zm0-6h9v-3h-9z"
|
|
||||||
---
|
---
|
||||||
<section id="posts">
|
<article id="posts">
|
||||||
|
<nav>
|
||||||
<ul role="list">
|
<ul role="list">
|
||||||
{% for post in collections.posts reversed %}
|
{% for post in collections.posts reversed %}
|
||||||
<li>
|
<li>
|
||||||
|
|
@ -17,8 +16,9 @@ icon: "m5 3h15l7 7v20H5zm5 22h12v-3H10zm0-6h12v-3H10zm0-6h9v-3h-9z"
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</article>
|
||||||
<article>
|
<article>
|
||||||
<p>...I'll eventually write more stuff worth talking about on here when the motivation strikes.</p>
|
<p>...I'll eventually write more stuff worth talking about on here when the motivation strikes.</p>
|
||||||
</article>
|
</article>
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,10 @@
|
||||||
---
|
---
|
||||||
title: "Changelog"
|
|
||||||
order: 2
|
order: 2
|
||||||
icon: "M10 25H21V22H10Zm4-13H10v3h4v4h3V15h4V12H17V8H14ZM5 3H20l7 7V30H5Z"
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{%for update in collections.updates reversed%}
|
{%for update in collections.updates reversed%}
|
||||||
<article>
|
<article>
|
||||||
|
<h2><time datetime="{{update.fileSlug}}">{{update.fileSlug|readable}}</time></h2>
|
||||||
|
{%if update.data.title%}<span>{{update.data.title}}</span>{%endif%}
|
||||||
{{update.content}}
|
{{update.content}}
|
||||||
</article>
|
</article>
|
||||||
{%endfor%}
|
{%endfor%}
|
||||||
|
|
@ -1,21 +1,23 @@
|
||||||
---
|
---
|
||||||
title: "Gallery"
|
|
||||||
order: 4
|
order: 4
|
||||||
icon: "M2 2V30H30V2H2M5 26l6-9 5 6 5-9 6 12H5"
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<section id="artworks">
|
<section id="artworks">
|
||||||
<article>
|
<article>
|
||||||
{%for article in collections.articles%} {%if article.fileSlug == 'ocs'%}
|
<nav>
|
||||||
{{ article.content }} {%endif%} {%endfor%}
|
|
||||||
<ul role="list">
|
<ul role="list">
|
||||||
{% assign sortedArtworks = collections.artworks | sortByFirstDate %} {%for artwork in sortedArtworks %}
|
{% assign sortedArtworks = collections.artworks | sortByFirstDate %} {%for artwork in sortedArtworks %}
|
||||||
<li>
|
<li>
|
||||||
<a href="{{artwork.page.url}}">
|
<a href="{{artwork.page.url}}">
|
||||||
<figure>
|
<figure>
|
||||||
{%if artwork.data.images[0]%}
|
{%if artwork.data.images[0]%}
|
||||||
<img src="{{artwork.data.images[0].src}}" alt="{{artwork.data.images[0].alt}}" {%if artwork.data.images[0].pixel%} style="image-rendering: pixelated" {%endif%} />
|
<span>
|
||||||
<figcaption>{{artwork.page.fileSlug}}{%if artwork.data.images.size > 1%}<p class="count">(+{{artwork.data.images.size| minus: 1}})</p>{%endif%}</figcaption>
|
<img src="{{artwork.data.images[0].src}}" alt="" style="{%if artwork.data.images[0].pixel%}image-rendering: pixelated;{%endif%}{%if artwork.data.images[0].position%}object-position:{{artwork.data.images[0].position}};{%endif%}{%if artwork.data.images[0].fit%}object-fit:{{artwork.data.images[0].fit}}{%endif%}"/>
|
||||||
|
</span>
|
||||||
|
<figcaption>
|
||||||
|
{{artwork.page.fileSlug}}{%if artwork.data.images.size > 1%}
|
||||||
|
<p class="count">(+{{artwork.data.images.size| minus: 1}})</p>
|
||||||
|
{%endif%}
|
||||||
|
</figcaption>
|
||||||
{% if artwork.data.images[0].date %}
|
{% if artwork.data.images[0].date %}
|
||||||
<time datetime="{{artwork.data.images[0].date|ISO}}">{{artwork.data.images[0].date|readable}}</time>
|
<time datetime="{{artwork.data.images[0].date|ISO}}">{{artwork.data.images[0].date|readable}}</time>
|
||||||
{%endif%} {%endif%}
|
{%endif%} {%endif%}
|
||||||
|
|
@ -24,10 +26,10 @@ icon: "M2 2V30H30V2H2M5 26l6-9 5 6 5-9 6 12H5"
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
|
</nav>
|
||||||
</article>
|
</article>
|
||||||
<article>
|
<article>
|
||||||
{%for article in collections.articles%} {%if article.fileSlug == 'fanart'%}
|
<nav>
|
||||||
{{ article.content }} {%endif%} {%endfor%}
|
|
||||||
<ul role="list">
|
<ul role="list">
|
||||||
{%assign sortedFanarts = collections.fanarts|sortByFirstDate%} {%for
|
{%assign sortedFanarts = collections.fanarts|sortByFirstDate%} {%for
|
||||||
fanart in sortedFanarts%}
|
fanart in sortedFanarts%}
|
||||||
|
|
@ -35,7 +37,7 @@ icon: "M2 2V30H30V2H2M5 26l6-9 5 6 5-9 6 12H5"
|
||||||
<a href="{{fanart.page.url}}">
|
<a href="{{fanart.page.url}}">
|
||||||
<figure>
|
<figure>
|
||||||
{%if fanart.data.images[0]%}
|
{%if fanart.data.images[0]%}
|
||||||
<img src="{{fanart.data.images[0].src}}" alt="{{fanart.data.images[0].alt}}" />
|
<img src="{{fanart.data.images[0].src}}" alt="" style="{%if fanart.data.images[0].pixel%}image-rendering: pixelated;{%endif%}{%if fanart.data.images[0].position%}object-position:{{fanart.data.images[0].position}};{%endif%}{%if fanart.data.images[0].fit%}object-fit:{{fanart.data.images[0].fit}}{%endif%}"/>
|
||||||
<figcaption>{{fanart.page.fileSlug}}</figcaption>
|
<figcaption>{{fanart.page.fileSlug}}</figcaption>
|
||||||
{%if fanart.data.images[0].date%}
|
{%if fanart.data.images[0].date%}
|
||||||
<time datetime="{{fanart.data.images[0].date|ISO}}">{{fanart.data.images[0].date|readable}}</time>
|
<time datetime="{{fanart.data.images[0].date|ISO}}">{{fanart.data.images[0].date|readable}}</time>
|
||||||
|
|
@ -45,5 +47,6 @@ icon: "M2 2V30H30V2H2M5 26l6-9 5 6 5-9 6 12H5"
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
|
</nav>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,11 @@
|
||||||
---
|
---
|
||||||
title: "Home"
|
|
||||||
order: 1
|
order: 1
|
||||||
icon: "M20 20V30h8V12L16 2 4 12V30h8V20Z"
|
|
||||||
---
|
---
|
||||||
<article id="bio">
|
<article id="bio">
|
||||||
{%for article in collections.articles%} {%if article.fileSlug == 'bio'%} {{
|
{%include "../data/articles/home-bio.html"%}
|
||||||
article.content }} {%endif%} {%endfor%}
|
|
||||||
</article>
|
</article>
|
||||||
<article id="interests">
|
<article id="interests">
|
||||||
{%for article in collections.articles%} {%if article.fileSlug == 'interests'%}
|
{%include "../data/articles/home-interests.html"%}
|
||||||
{{ article.content }} {%endif%} {%endfor%}
|
|
||||||
<details open="">
|
<details open="">
|
||||||
<summary>
|
<summary>
|
||||||
<h3>Games</h3>
|
<h3>Games</h3>
|
||||||
|
|
@ -18,7 +14,7 @@ icon: "M20 20V30h8V12L16 2 4 12V30h8V20Z"
|
||||||
{%for item in media-games.items%}
|
{%for item in media-games.items%}
|
||||||
<li>
|
<li>
|
||||||
<a href="{{item.src}}">
|
<a href="{{item.src}}">
|
||||||
<span><img src="/assets/img/media/games/{{item.cover}}" alt="Game icon for {{item.title}}"/></span><span>{{item.title}}</span>
|
<span><img src="/assets/img/media/games/{{item.cover}}" alt=""/></span><span>{{item.title}}</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{%endfor%}
|
{%endfor%}
|
||||||
|
|
@ -32,7 +28,7 @@ icon: "M20 20V30h8V12L16 2 4 12V30h8V20Z"
|
||||||
{%for item in media-albums.items%}
|
{%for item in media-albums.items%}
|
||||||
<li>
|
<li>
|
||||||
<a href="{{item.src}}">
|
<a href="{{item.src}}">
|
||||||
<span><img src="/assets/img/media/music/albums/{{item.cover}}" alt="Album art cover for {{item.title}}"/></span><span>{{item.artist}} - {{item.title}}</span>
|
<span><img src="/assets/img/media/music/albums/{{item.cover}}" alt=""/></span><span>{{item.artist}} - {{item.title}}</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{%endfor%}
|
{%endfor%}
|
||||||
|
|
@ -46,7 +42,7 @@ icon: "M20 20V30h8V12L16 2 4 12V30h8V20Z"
|
||||||
{%for item in media-modules.items%}
|
{%for item in media-modules.items%}
|
||||||
<li>
|
<li>
|
||||||
<a href="{{item.src}}">
|
<a href="{{item.src}}">
|
||||||
<span><img src="/assets/img/media/music/{{item.tracker}}.png" alt="{{item.tracker|capitalize}} module"/></span><span>{{item.artist}} - {{item.title}}</span>
|
<span><img src="/assets/img/media/music/{{item.tracker}}.png" alt=""/></span><span>{{item.artist}} - {{item.title}}</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{%endfor%}
|
{%endfor%}
|
||||||
|
|
@ -60,7 +56,7 @@ icon: "M20 20V30h8V12L16 2 4 12V30h8V20Z"
|
||||||
{%for item in media-manga.items%}
|
{%for item in media-manga.items%}
|
||||||
<li>
|
<li>
|
||||||
<a href="{{item.src}}">
|
<a href="{{item.src}}">
|
||||||
<span><img src="/assets/img/media/manga/{{item.cover}}" alt="Manga art cover for {{item.alt}}"/></span><span>{{item.title}}</span>
|
<span><img src="/assets/img/media/manga/{{item.cover}}" alt=""/></span><span>{{item.title}}</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{%endfor%}
|
{%endfor%}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"layout": "base",
|
"layout": "base",
|
||||||
"permalink": "/{{ title | slug }}/",
|
"permalink": "/{{page.fileSlug}}/",
|
||||||
"tags": "pages"
|
"tags": "pages"
|
||||||
}
|
}
|
||||||
|
|
@ -1,25 +1,59 @@
|
||||||
import markdownIt from "markdown-it";
|
import markdownIt from "markdown-it";
|
||||||
import markdownItAnchor from "markdown-it-anchor";
|
import markdownItAnchor from "markdown-it-anchor";
|
||||||
|
import slugify from "slugify";
|
||||||
import { format } from "date-fns";
|
import { format } from "date-fns";
|
||||||
|
|
||||||
export default async function (eleventyConfig) {
|
export default async function (eleventyConfig) {
|
||||||
const markdownItOptions = {
|
/*
|
||||||
html: true
|
|
||||||
};
|
const linkAfterHeader = markdownItAnchor.permalink.linkAfterHeader({
|
||||||
|
class: "anchor",
|
||||||
|
symbol: "<span hidden>#</span>",
|
||||||
|
style: "aria-labelledby",
|
||||||
|
});
|
||||||
const markdownItAnchorOptions = {
|
const markdownItAnchorOptions = {
|
||||||
permalink: true, permalinkBefore: true, permalinkSymbol: '#'
|
level: [1, 2, 3],
|
||||||
};
|
slugify: (str) =>
|
||||||
const markdownLib = markdownIt(markdownItOptions).use(
|
slugify(str, {
|
||||||
markdownItAnchor,
|
lower: true,
|
||||||
markdownItAnchorOptions
|
strict: true,
|
||||||
|
remove: /["]/g,
|
||||||
|
}),
|
||||||
|
tabIndex: false,
|
||||||
|
permalink(slug, opts, state, idx) {
|
||||||
|
state.tokens.splice(
|
||||||
|
idx,
|
||||||
|
0,
|
||||||
|
Object.assign(new state.Token("div_open", "div", 1), {
|
||||||
|
// Add class "header-wrapper [h1 or h2 or h3]"
|
||||||
|
attrs: [["class", `heading-wrapper ${state.tokens[idx].tag}`]],
|
||||||
|
block: true,
|
||||||
|
})
|
||||||
);
|
);
|
||||||
eleventyConfig.setLibrary("md", markdownLib);
|
|
||||||
|
state.tokens.splice(
|
||||||
|
idx + 4,
|
||||||
|
0,
|
||||||
|
Object.assign(new state.Token("div_close", "div", -1), {
|
||||||
|
block: true,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
linkAfterHeader(slug, opts, state, idx + 1);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
let markdownLibrary = markdownIt({
|
||||||
|
html: true,
|
||||||
|
}).use(markdownItAnchor, markdownItAnchorOptions);
|
||||||
|
eleventyConfig.setLibrary("md", markdownLibrary);
|
||||||
|
|
||||||
|
*/
|
||||||
const assets = "./_src/assets/";
|
const assets = "./_src/assets/";
|
||||||
eleventyConfig.addPassthroughCopy(assets);
|
eleventyConfig.addPassthroughCopy(assets);
|
||||||
eleventyConfig.addWatchTarget(assets);
|
eleventyConfig.addWatchTarget(assets);
|
||||||
eleventyConfig.addFilter("sortByFirstDate", items => items.sort((a, b) => new Date(b.data.images[0].date) - new Date(a.data.images[0].date)));
|
eleventyConfig.addFilter("sortByFirstDate", items => items.sort((a, b) => new Date(b.data.images[0].date) - new Date(a.data.images[0].date)));
|
||||||
eleventyConfig.addFilter("link", function(text, url) {
|
eleventyConfig.addFilter("link", function(text, url) {
|
||||||
return `<span class="link"><a href="${url}"><img src="https://www.google.com/s2/favicons?domain=${url}" alt=""/>${text}</a></span>`;
|
return `<a href="${url}"><img src="https://www.google.com/s2/favicons?domain=${url}" alt=""/>${text}</a>`;
|
||||||
});
|
});
|
||||||
eleventyConfig.addFilter("ISO", (dateObj) => {
|
eleventyConfig.addFilter("ISO", (dateObj) => {
|
||||||
return format(dateObj, ("yyyy-LL-dd"));
|
return format(dateObj, ("yyyy-LL-dd"));
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue