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>
|
||||
<html lang="en">
|
||||
{%set currentPage = page.url.split('/')[1]|slugify%}
|
||||
{%set pageOrder = collections.pages|sort(attribute='data.order')%}
|
||||
{%set availableStyles = ['home', 'blog', 'gallery']%}
|
||||
<head>
|
||||
<title>
|
||||
{%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%}
|
||||
{{ site.name|safe }}
|
||||
</title>
|
||||
{% include "meta.njk" %}
|
||||
<link rel="icon" href="/assets/img/icon/sundae.png">
|
||||
<link rel="stylesheet" href="/assets/css/reset.css">
|
||||
<link rel="stylesheet" href="/assets/css/default/default.css">
|
||||
<link rel="preload" href="/assets/css/citrus/default.css" as="style">
|
||||
<link rel="stylesheet" href="/assets/css/default/system.css" id="themed">
|
||||
{% if page.url === "/home/" %}
|
||||
<link rel="stylesheet" href="/assets/css/pokesprite-pokemon-gen8.css">
|
||||
{% endif %}
|
||||
{% set availableStyles = ['home', 'blog', 'gallery'] %}
|
||||
{% if page.url %}
|
||||
{% if availableStyles.indexOf(page.url.split('/')[1]|slugify) !== -1 %}
|
||||
<link rel="stylesheet" href="/assets/css/default/{{ page.url.split('/')[1]|slugify }}.css">
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{%include "meta.njk"%}
|
||||
{%include "stylesheets.njk"%}
|
||||
</head>
|
||||
<body id="{{ page.url.split('/')[1]|slugify }}">
|
||||
<nav>
|
||||
<details open="">
|
||||
<summary>
|
||||
Navigation
|
||||
</summary>
|
||||
{% set currentUrl %}{{ page.url }}{% endset %}
|
||||
{% set sortedPages = collections.pages|sort(attribute='data.order') %}
|
||||
<ul role="list">
|
||||
<li>
|
||||
<a href="../">
|
||||
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="{{ back }}"></path>
|
||||
</svg>
|
||||
Back
|
||||
</a>
|
||||
</li>
|
||||
{% for page in sortedPages %}
|
||||
<li>
|
||||
<a href="{{ page.url }}" {% if currentUrl.split('/')[1] === page.url.split('/')[1]|slugify %} aria-current="page" {% endif %}>
|
||||
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="{{ page.data.icon }}"></path>
|
||||
</svg>
|
||||
{{ page.data.title }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
<details open="">
|
||||
<summary>
|
||||
Options
|
||||
</summary>
|
||||
<ul role="list">
|
||||
<li>
|
||||
<button id="theme-toggle">
|
||||
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="{{ theme }}">
|
||||
</svg>
|
||||
Toggle theme
|
||||
</button>
|
||||
</li>
|
||||
</li>
|
||||
</ul>
|
||||
<script src="/assets/js/theme.js"></script>
|
||||
</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>
|
||||
<body id="{{ currentPage }}">
|
||||
<dialog id="signal">
|
||||
<article>
|
||||
{% for article in collections.articles %}
|
||||
{% if article.fileSlug == 'what' %}
|
||||
{{ article.content | safe }}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% include "../data/articles/what.html" %}
|
||||
</article>
|
||||
</dialog>
|
||||
</details>
|
||||
<script src="/assets/js/what.js" type="module"></script>
|
||||
<script src="/assets/js/details-save.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<nav class="navbar" id="floating">
|
||||
{%include "nav-misc.njk"%}
|
||||
</nav>
|
||||
<div id="sidebar" popover="">
|
||||
<nav class="navbar" id="default">
|
||||
{%include "nav-misc.njk"%}
|
||||
{%include "nav.njk"%}
|
||||
</nav>
|
||||
</div>
|
||||
<header>
|
||||
<h1>
|
||||
{% for page in sortedPages %}
|
||||
{% if currentUrl.split('/')[1] === page.url.split('/')[1]|slugify %}
|
||||
<a href="{{page.url}}">
|
||||
{%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">
|
||||
<path d="{{ page.data.icon }}"></path>
|
||||
<path d="{{icon[page.url|slugify]}}"></path>
|
||||
</svg>
|
||||
{%endif%}
|
||||
{%endfor%}
|
||||
{{ page.url.split('/')[1]|slugify|capitalize }}
|
||||
{{ currentPage | capitalize }}
|
||||
</a>
|
||||
</h1>
|
||||
</header>
|
||||
<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>
|
||||
<script src="/assets/js/footer.js"></script>
|
||||
</footer>
|
||||
<script src="/assets/js/what.js" type="module"></script>
|
||||
<script src="/assets/js/theme.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
layout: base
|
||||
---
|
||||
|
||||
<article>
|
||||
{{content|safe}}
|
||||
<section class="postscript">
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
layout: base
|
||||
---
|
||||
|
||||
<article id="art">
|
||||
<div>
|
||||
<h1>{{page.fileSlug}}
|
||||
{%for flag in flags%}
|
||||
<img src="{{flag.src}}">
|
||||
|
|
@ -11,7 +11,7 @@ layout: base
|
|||
{{content|safe}}
|
||||
{%if programs and programs|length > 0%}
|
||||
<p>Made with:</p>
|
||||
<ul>
|
||||
<ul class="paws">
|
||||
{%for program in programs%}
|
||||
<li>
|
||||
{{program.name|link(program.src)|safe}}
|
||||
|
|
@ -22,7 +22,7 @@ layout: base
|
|||
{%if palettes and palettes|length > 0%}
|
||||
<p>Color palette used:</p>
|
||||
{%for palette in palettes%}
|
||||
<ul>
|
||||
<ul class="paws">
|
||||
<li>
|
||||
{%if palette.src%}
|
||||
{{palette.name|link(palette.src)|safe}}
|
||||
|
|
@ -32,6 +32,7 @@ layout: base
|
|||
{%endfor%}
|
||||
</ul>
|
||||
{%endif%}
|
||||
</div>
|
||||
<section>
|
||||
{%for image in images%}
|
||||
<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 {
|
||||
border-right: 4px solid;
|
||||
.navbar {
|
||||
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))
|
||||
drop-shadow(-2px 0 var(--citrus-dark))
|
||||
drop-shadow(0 2px var(--citrus-dark))
|
||||
drop-shadow(0px -2px var(--citrus-dark));
|
||||
color: var(--citrus-light);
|
||||
}
|
||||
& li *:is(a ,button) {
|
||||
}
|
||||
& li :is(a, button) {
|
||||
background: var(--button-bg);
|
||||
box-shadow: var(--button-shine);
|
||||
border: var(--button-border);
|
||||
border-radius: var(--round);
|
||||
color: inherit;
|
||||
&[aria-current] {
|
||||
background: var(--button-current-bg);
|
||||
|
|
@ -20,38 +23,69 @@ body > nav {
|
|||
border: var(--button-current-border);
|
||||
color: var(--citrus-light);
|
||||
}
|
||||
&:is(:hover, :focus):not([aria-current="page"]) {
|
||||
&:is(:hover, :focus):not([aria-current]) {
|
||||
background: var(--button-hover-bg);
|
||||
box-shadow: var(--button-hover-shine);
|
||||
border: var(--button-hover-border);
|
||||
transition: background-image var(--trans), border-color var(--trans),
|
||||
transition:
|
||||
background-image var(--trans),
|
||||
border-color var(--trans),
|
||||
box-shadow var(--trans);
|
||||
color: var(--citrus-mix-dark);
|
||||
}
|
||||
}
|
||||
& details,
|
||||
details[open] {
|
||||
background: var(--details-bg);
|
||||
box-shadow: var(--details-shine);
|
||||
border: var(--details-border);
|
||||
}
|
||||
.navbar section,
|
||||
.navbar li :is(a, button) {
|
||||
border-radius: var(--round);
|
||||
}
|
||||
body > nav,
|
||||
#default,
|
||||
#floating,
|
||||
header {
|
||||
color: var(--citrus-dark);
|
||||
background-attachment: fixed;
|
||||
background-blend-mode: screen;
|
||||
background-image: var(--nav-bg);
|
||||
background-size: 6px;
|
||||
border-color: var(--citrus-dark);
|
||||
}
|
||||
header {
|
||||
width: var(--view);
|
||||
border-right-width: 4px;
|
||||
#floating,
|
||||
#default {
|
||||
border-bottom-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-width: 4px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-right-radius: 100px;
|
||||
margin-left: calc(var(--view) - 4px);
|
||||
position: relative;
|
||||
padding: calc(var(--pad-m) - 2px) var(--pad-sm);
|
||||
border-right-width: 4px;
|
||||
}
|
||||
#default {
|
||||
border-bottom-right-radius: var(--pad-l);
|
||||
}
|
||||
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-light-extra: color-mix(in lch, var(--citrus-light), var(--light));
|
||||
--citrus-dark-extra: color-mix(in lch, var(--citrus-dark), var(--dark));
|
||||
--citrus-mix: color-mix(in lch,var(--citrus-primary),var(--citrus-secondary));
|
||||
--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-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-heavy: 0.2rem 0.2rem 0.4rem 0.2rem #0004;
|
||||
--checker: url("/assets/img/theme/citrus/checker.png");
|
||||
|
|
@ -16,17 +22,43 @@
|
|||
--paper: url("/assets/img/theme/citrus/paper.png");
|
||||
--noise: url("/assets/img/theme/citrus/imagedoc-lightnoise.png");
|
||||
--border: url("/assets/img/theme/citrus/border.png");
|
||||
--nav-bg: var(--dot), linear-gradient(var(--citrus-primary), var(--citrus-secondary) 60%, var(--citrus-primary) 120%);
|
||||
--button-bg: linear-gradient(var(--citrus-primary) 30%, var(--citrus-mix) 80%);
|
||||
--nav-bg:
|
||||
var(--dot),
|
||||
linear-gradient(
|
||||
var(--citrus-primary),
|
||||
var(--citrus-secondary) 60%,
|
||||
var(--citrus-primary) 120%
|
||||
);
|
||||
--button-bg: linear-gradient(
|
||||
var(--citrus-primary) 30%,
|
||||
var(--citrus-mix) 80%
|
||||
);
|
||||
--button-border: 2px solid var(--citrus-dark);
|
||||
--button-shine: inset 0px 2px var(--citrus-light), inset 0px -2px var(--citrus-mix);
|
||||
--button-hover-bg: linear-gradient(var(--citrus-light),var(--citrus-primary),var(--citrus-mix-light));
|
||||
--button-shine:
|
||||
inset 0px 2px var(--citrus-light), inset 0px -2px var(--citrus-mix);
|
||||
--button-hover-bg: linear-gradient(
|
||||
var(--citrus-light),
|
||||
var(--citrus-primary),
|
||||
var(--citrus-mix-light)
|
||||
);
|
||||
--button-hover-border: 2px solid var(--citrus-light);
|
||||
--button-hover-shine: inset 0 -2px 0 0 var(--citrus-mix);
|
||||
--button-current-bg: linear-gradient(var(--citrus-mix-dark),var(--citrus-dark-extra) 200%);
|
||||
--button-current-bg: linear-gradient(
|
||||
var(--citrus-mix-dark),
|
||||
var(--citrus-dark-extra) 200%
|
||||
);
|
||||
--button-current-border: 2px solid var(--citrus-dark-extra);
|
||||
--button-current-shine: inset 0px 2px 0 var(--citrus-mix-light), inset 0 -2px 0 var(--citrus-mix-dark);
|
||||
--details-bg: linear-gradient(-45deg,var(--citrus-primary),var(--citrus-mix),var(--citrus-primary));
|
||||
--details-shine: inset 0 2px 0 var(--citrus-light-extra), inset 2px 0 0 var(--citrus-light), inset 0 -2px 0 var(--citrus-primary), inset -2px 0 0 var(--citrus-primary);
|
||||
--button-current-shine:
|
||||
inset 0px 2px 0 var(--citrus-mix-light),
|
||||
inset 0 -2px 0 var(--citrus-mix-dark);
|
||||
--details-bg: linear-gradient(
|
||||
-45deg,
|
||||
var(--citrus-primary),
|
||||
var(--citrus-mix),
|
||||
var(--citrus-primary)
|
||||
);
|
||||
--details-shine:
|
||||
inset 0 2px 0 var(--citrus-light-extra), inset 2px 0 0 var(--citrus-light),
|
||||
inset 0 -2px 0 var(--citrus-primary), inset -2px 0 0 var(--citrus-primary);
|
||||
--details-border: 2px solid var(--citrus-dark);
|
||||
}
|
||||
|
|
@ -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-position: center;
|
||||
background-size: contain;
|
||||
|
||||
& footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
& header {
|
||||
top: 0;
|
||||
display: flex;
|
||||
|
|
@ -27,7 +25,6 @@
|
|||
justify-self: center;
|
||||
& a,
|
||||
img {
|
||||
z-index: 1;
|
||||
display: inherit;
|
||||
flex-direction: inherit;
|
||||
}
|
||||
|
|
@ -38,7 +35,6 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
& footer,
|
||||
header {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@media (prefers-reduced-motion: no-preference) {
|
||||
/* Scrolling pride flag text */
|
||||
article#bio span[id],
|
||||
#bio span[id],
|
||||
footer span {
|
||||
font-family: "Nosey Rodent", sans-serif;
|
||||
font-weight: bold;
|
||||
|
|
@ -15,24 +15,21 @@
|
|||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
body {
|
||||
animation: none !important;
|
||||
}
|
||||
/* Buttons */
|
||||
:is(a, button),
|
||||
span:has(a) {
|
||||
transition: none !important;
|
||||
transition: none;
|
||||
}
|
||||
/* Permalinks */
|
||||
.header-anchor,
|
||||
article pre {
|
||||
transition: none !important;
|
||||
main article pre {
|
||||
transition: none;
|
||||
}
|
||||
/* Images */
|
||||
#gallery a:has(figure),
|
||||
#blog article figure,
|
||||
#blog main article figure,
|
||||
a img {
|
||||
transition: none !important;
|
||||
transition: none;
|
||||
}
|
||||
.emoji:has(img[alt*="🐇"]) {
|
||||
& img {
|
||||
|
|
@ -44,12 +41,12 @@
|
|||
}
|
||||
}
|
||||
/* Scrolling pride flag text */
|
||||
article#bio span[id], footer span {
|
||||
transition: none !important;
|
||||
animation: none !important;
|
||||
#bio span[id] {
|
||||
transition: none;
|
||||
animation: none;
|
||||
color: inherit;
|
||||
background-clip: initial !important;
|
||||
background: initial !important;
|
||||
background-clip: initial;
|
||||
background: initial;
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-flex;
|
||||
|
|
@ -62,6 +59,9 @@
|
|||
position: relative;
|
||||
}
|
||||
}
|
||||
footer span {
|
||||
width: 100%;
|
||||
}
|
||||
#aromantic::before {
|
||||
background-image: url("/assets/img/flag/aromantic.svg");
|
||||
}
|
||||
|
|
@ -71,12 +71,21 @@
|
|||
#pansexual::before {
|
||||
background-image: url("/assets/img/flag/pansexual.svg");
|
||||
}
|
||||
footer span::before {
|
||||
background-image: url("/assets/img/flag/trans.svg");
|
||||
}
|
||||
/* Jumping critters */
|
||||
#pkmn span:hover {
|
||||
animation: none !important;
|
||||
animation: none;
|
||||
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,
|
||||
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 {
|
||||
.navbar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--pad-m);
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
padding: var(--pad-l);
|
||||
position: fixed;
|
||||
width: var(--view);
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: none;
|
||||
& * svg,
|
||||
li img {
|
||||
width: var(--view);
|
||||
& 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;
|
||||
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 {
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& details {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
& 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;
|
||||
}
|
||||
}
|
||||
|
||||
#default::before,
|
||||
body::after {
|
||||
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-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) {
|
||||
article,
|
||||
main article,
|
||||
body,
|
||||
header svg {
|
||||
color: var(--secondary-light-300);
|
||||
}
|
||||
|
||||
article {
|
||||
main article {
|
||||
border-color: var(--secondary-300);
|
||||
background-color: var(--secondary-200);
|
||||
|
||||
& aside {
|
||||
& #default {
|
||||
box-shadow: inset 0 0 0 2px var(--secondary-500);
|
||||
background-color: var(--secondary-300);
|
||||
}
|
||||
|
||||
& s,
|
||||
u {
|
||||
text-decoration-color: color-mix(in lch, red, var(--secondary-500) 20%);
|
||||
}
|
||||
|
||||
& code:not(pre *) {
|
||||
color: var(--secondary-400);
|
||||
background-color: var(--secondary-light-400);
|
||||
}
|
||||
|
||||
& pre {
|
||||
background-color: var(--secondary-100);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--secondary);
|
||||
background-color: var(--secondary-400);
|
||||
}
|
||||
}
|
||||
|
||||
& pre,
|
||||
code {
|
||||
border-color: var(--secondary-400);
|
||||
}
|
||||
|
||||
/* blog.css */
|
||||
& .post-warning {
|
||||
background-color: var(--secondary);
|
||||
color: var(--secondary-100);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
& .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);
|
||||
border-color: var(--secondary);
|
||||
}
|
||||
& ul li::before {
|
||||
background-color: var(--secondary-light-300);
|
||||
}
|
||||
}
|
||||
|
||||
#posts {
|
||||
& p:not(:last-child) {
|
||||
color: var(--secondary-light-700);
|
||||
}
|
||||
}
|
||||
/* default.css */
|
||||
body {
|
||||
background-color: var(--secondary-100);
|
||||
& :is(a, button):not(span *, .postscript *, dialog *),
|
||||
span:has(a) {
|
||||
& a,
|
||||
button {
|
||||
color: var(--secondary-light-400);
|
||||
border-color: var(--secondary-600);
|
||||
background-color: var(--secondary-300);
|
||||
background-color: color-mix(in lch, var(--secondary-300), transparent);
|
||||
&:is(:hover, :focus) {
|
||||
color: var(--secondary-light-500);
|
||||
border-color: currentColor;
|
||||
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 {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
& > nav {
|
||||
background-color: inherit;
|
||||
border-color: var(--secondary);
|
||||
& details {
|
||||
& #default,
|
||||
#floating {
|
||||
background-color: var(--secondary-100);
|
||||
&:not([open]) {
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
& details[open] {
|
||||
border-color: var(--secondary);
|
||||
& section {
|
||||
border-color: var(--secondary);
|
||||
background-color: var(--secondary-300);
|
||||
color: var(--secondary-light-300);
|
||||
|
||||
& a[aria-current] {
|
||||
color: var(--secondary-500);
|
||||
border-color: var(--secondary-light-500);
|
||||
background-color: var(--secondary-light-500);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
|
|
@ -120,34 +89,20 @@
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
&::after,
|
||||
& > nav::before {
|
||||
& #default::before {
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
/* home.css */
|
||||
ul:not([role]) li::before {
|
||||
background-color: var(--secondary-light-300);
|
||||
}
|
||||
|
||||
#interests {
|
||||
& a:is(:hover, :focus):not(.header-anchor) {
|
||||
box-shadow: 0 0 0 1px currentColor;
|
||||
background-color: var(--secondary-500);
|
||||
}
|
||||
|
||||
& img {
|
||||
box-shadow: 0 0 0 1px
|
||||
color-mix(in lch, transparent, var(--secondary-500) 70%);
|
||||
}
|
||||
|
||||
& details h3 {
|
||||
border-color: var(--secondary-600);
|
||||
}
|
||||
}
|
||||
|
||||
a:has(img[src*="/assets/img/button"]) {
|
||||
background-color: unset;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,117 +1,86 @@
|
|||
@media (prefers-color-scheme: light) {
|
||||
article,
|
||||
main article,
|
||||
body,
|
||||
header svg {
|
||||
color: var(--primary-dark-300);
|
||||
}
|
||||
|
||||
article {
|
||||
main article {
|
||||
border-color: var(--primary-300);
|
||||
background-color: var(--primary-200);
|
||||
|
||||
& aside {
|
||||
& #default {
|
||||
box-shadow: inset 0 0 0 2px var(--primary-500);
|
||||
background-color: var(--primary-300);
|
||||
}
|
||||
|
||||
& s,
|
||||
u {
|
||||
text-decoration-color: color-mix(in lch, red, var(--primary-500) 20%);
|
||||
}
|
||||
|
||||
& code:not(pre *) {
|
||||
color: var(--primary-400);
|
||||
background-color: var(--primary-dark-400);
|
||||
}
|
||||
|
||||
& pre {
|
||||
background-color: var(--primary-100);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--primary);
|
||||
background-color: var(--primary-400);
|
||||
}
|
||||
}
|
||||
|
||||
& pre,
|
||||
code {
|
||||
border-color: var(--primary-400);
|
||||
}
|
||||
|
||||
/* blog.css */
|
||||
& .post-warning {
|
||||
background-color: var(--primary);
|
||||
color: var(--primary-dark-100);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
& .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);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
& ul:not([role]) li::before {
|
||||
background-color: var(--primary-dark-300);
|
||||
}
|
||||
}
|
||||
|
||||
#posts {
|
||||
& p:not(:last-child) {
|
||||
color: var(--primary-dark-700);
|
||||
}
|
||||
}
|
||||
/* default.css */
|
||||
body {
|
||||
background-color: var(--primary-100);
|
||||
& :is(a, button):not(span *, .postscript *, dialog *),
|
||||
span:has(a) {
|
||||
& a,
|
||||
button {
|
||||
color: var(--primary-dark-400);
|
||||
border-color: var(--primary-600);
|
||||
background-color: var(--primary-400);
|
||||
background-color: color-mix(in lch, var(--primary-400), transparent);
|
||||
&:is(:hover, :focus) {
|
||||
color: var(--primary-dark-500);
|
||||
border-color: currentColor;
|
||||
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 {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
& > nav {
|
||||
background-color: inherit;
|
||||
border-color: var(--primary-dark-500);
|
||||
& details {
|
||||
& #default,
|
||||
#floating {
|
||||
background-color: var(--primary-100);
|
||||
&:not([open]) {
|
||||
color: var(--primary-dark-500);
|
||||
}
|
||||
}
|
||||
|
||||
& details[open] {
|
||||
border-color: var(--primary-dark-500);
|
||||
& section {
|
||||
border-color: var(--primary-dark-800);
|
||||
background-color: var(--primary-300);
|
||||
color: var(--primary-dark-300);
|
||||
|
||||
& a[aria-current] {
|
||||
color: var(--primary-500);
|
||||
border-color: var(--primary-dark-500);
|
||||
background-color: var(--primary-dark-500);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
|
|
@ -120,34 +89,20 @@
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
&::after,
|
||||
& > nav::before {
|
||||
& #default::before {
|
||||
background-color: var(--primary-dark-500);
|
||||
}
|
||||
}
|
||||
|
||||
/* home.css */
|
||||
ul:not([role]) li::before {
|
||||
background-color: var(--primary-dark-300);
|
||||
}
|
||||
|
||||
#interests {
|
||||
& a:is(:hover, :focus):not(.header-anchor) {
|
||||
box-shadow: 0 0 0 1px currentColor;
|
||||
background-color: var(--primary-500);
|
||||
}
|
||||
|
||||
& img {
|
||||
box-shadow: 0 0 0 1px
|
||||
color-mix(in lch, transparent, var(--primary-dark-500) 30%);
|
||||
}
|
||||
|
||||
& details h3 {
|
||||
border-color: var(--primary-dark-600);
|
||||
}
|
||||
}
|
||||
|
||||
a:has(img[src*="/assets/img/button"]) {
|
||||
background-color: unset;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,17 +39,21 @@
|
|||
--secondary-700: color-mix(in lch, var(--secondary), var(--dark) 30%);
|
||||
--secondary-800: color-mix(in lch, var(--secondary), var(--dark) 20%);
|
||||
--secondary-900: color-mix(in lch, var(--secondary), var(--dark) 10%);
|
||||
--trans: 300ms;
|
||||
--image: 24rem;
|
||||
--post: 75ch;
|
||||
--round: 16px;
|
||||
--pad-xxl: 4rem;
|
||||
--pad-xl: 2rem;
|
||||
--pad-lm: 1.4rem;
|
||||
--pad-l: 1rem;
|
||||
--avatar: 3rem; /* Blog avatar */
|
||||
--flag: 45deg; /* Pride flag */
|
||||
--image: 24rem; /* Postscript images */
|
||||
--main: 108rem; /* Main width */
|
||||
--post: 75ch; /* Article text width */
|
||||
--view: 300px; /* Sidebar width */
|
||||
--float: 88px; /* Floating sidebar width */
|
||||
--thumb: 16rem; /* Gallery artwork thumbnail */
|
||||
--pad-s: 0.4rem;
|
||||
--pad-m: 0.8rem;
|
||||
--pad-sm: 0.4rem;
|
||||
--flag: 45deg;
|
||||
--pad-l: 1rem;
|
||||
--pad-xl: 2rem;
|
||||
--pad-xxl: 4rem;
|
||||
--round: 16px; /* Border radius */
|
||||
--trans: 300ms;
|
||||
--paw: url("/assets/img/theme/paw.svg");
|
||||
--paw-tiled: url("/assets/img/theme/paw-tiled.png");
|
||||
--outlined: drop-shadow(0 0.5px var(--dark)) drop-shadow(0 -0.5px var(--dark))
|
||||
|
|
@ -98,17 +102,6 @@
|
|||
#00d2ff 0
|
||||
);
|
||||
}
|
||||
|
||||
@keyframes mainbg {
|
||||
0% {
|
||||
background-position: 0rem 0rem;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 256px 256px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide {
|
||||
0% {
|
||||
background-position: 0% 100%;
|
||||
|
|
@ -118,23 +111,24 @@
|
|||
background-position: 200% 100%;
|
||||
}
|
||||
}
|
||||
@keyframes jump {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
@font-face {
|
||||
font-family: Rubik;
|
||||
src: url("/assets/fonts/Rubik.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Urbanist;
|
||||
src: url("/assets/fonts/Urbanist-Bold.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Nosey Rodent;
|
||||
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 {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Prevent font size inflation */
|
||||
html {
|
||||
-moz-text-size-adjust: none;
|
||||
-webkit-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
}
|
||||
|
||||
/* Remove default margin in favour of better control in authored CSS */
|
||||
body,
|
||||
h1,
|
||||
|
|
@ -26,21 +24,17 @@ blockquote,
|
|||
dl,
|
||||
dd {
|
||||
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 */
|
||||
ul[role='list'],
|
||||
ol[role='list'] {
|
||||
ul[role="list"],
|
||||
ol[role="list"] {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Set core body defaults */
|
||||
body {
|
||||
min-height: 100vh;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Set shorter line heights on headings and interactive elements */
|
||||
h1,
|
||||
h2,
|
||||
|
|
@ -51,7 +45,6 @@ input,
|
|||
label {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
/* Balance text wrapping on headings */
|
||||
h1,
|
||||
h2,
|
||||
|
|
@ -59,20 +52,17 @@ h3,
|
|||
h4 {
|
||||
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]) {
|
||||
text-decoration-skip-ink: auto;
|
||||
color: currentColor;
|
||||
}
|
||||
*/
|
||||
|
||||
/* Make images easier to work with */
|
||||
img,
|
||||
picture {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Inherit fonts for inputs and buttons */
|
||||
input,
|
||||
button,
|
||||
|
|
@ -81,12 +71,10 @@ select {
|
|||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
/* Make sure textareas without a rows attribute are not tiny */
|
||||
textarea:not([rows]) {
|
||||
min-height: 10em;
|
||||
}
|
||||
|
||||
/* Anything that has been anchored to should have extra scroll margin */
|
||||
:target {
|
||||
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 themeToggle = document.getElementById("theme-toggle");
|
||||
const themeToggles = document.querySelectorAll(".theme-toggle");
|
||||
const themeStylesheet = document.getElementById("themed");
|
||||
|
||||
const themes = [
|
||||
{ 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;
|
||||
|
|
@ -12,13 +12,15 @@ setTheme(currentTheme);
|
|||
|
||||
function setTheme(themeName) {
|
||||
const theme = themes.find(t => t.name === themeName);
|
||||
if (theme) {
|
||||
if (theme && themeStylesheet) {
|
||||
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;
|
||||
setTheme(currentTheme);
|
||||
localStorage.setItem("theme", currentTheme);
|
||||
});
|
||||
})
|
||||
);
|
||||
|
|
@ -4,6 +4,7 @@ images:
|
|||
alt: Various pixel art animations of Sundae as a character from Nuclear Throne.
|
||||
date: 2021-01-25
|
||||
pixel: true
|
||||
fit: contain
|
||||
programs:
|
||||
- name: paint.net
|
||||
src: https://www.getpaint.net/
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"permalink": "/gallery/{{page.fileSlug|slug}}/",
|
||||
"permalink": "/gallery/original/{{page.fileSlug|slug}}/",
|
||||
"tags": "artworks"
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@ images:
|
|||
- src: /assets/img/art/sundae_refsheet-new-unfinished.png
|
||||
alt: Reference/model sheet of Sundae with a full-length front portrait, T-posed.
|
||||
date: 2025-02-11
|
||||
fit: scale-down
|
||||
programs:
|
||||
- name: Krita
|
||||
src: https://krita.org/
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ images:
|
|||
alt: Half-length portrait of Sundae getting a head pat from a disembodied white hand.
|
||||
date: 2021-11-18
|
||||
pixel: true
|
||||
fit: scale-down
|
||||
programs:
|
||||
- name: MS 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.
|
||||
date: 2023-02-23
|
||||
pixel: true
|
||||
position: -25px
|
||||
attachments:
|
||||
- src: /assets/img/blog/kass.jpg
|
||||
alt: In-game screenshot of Kass that I took as reference.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ images:
|
|||
- src: /assets/img/art/petscii_sue.png
|
||||
alt: Sue Sakamoto sitting and looking out from the Outer Wall.
|
||||
date: 2023-01-16
|
||||
position: right
|
||||
palettes:
|
||||
- name: Commodore 64
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"permalink": "/gallery/{{page.fileSlug|slug}}/",
|
||||
"permalink": "/gallery/fanart/{{page.fileSlug|slug}}/",
|
||||
"tags": "fanarts"
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@ images:
|
|||
- src: /assets/img/art/klonoa_sitting.png
|
||||
alt: Klonoa sitting on a ledge, with a hand on his knee and right leg dangling from the viewer's side.
|
||||
date: 2021-11-18
|
||||
fit: scale-down
|
||||
programs:
|
||||
- name: MS Paint
|
||||
src: https://www.microsoft.com/en-us/windows/paint
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ images:
|
|||
- src: /assets/img/art/mallow.png
|
||||
alt: Mallow from Cavern Crusher, sitting on the ledge of a mossy stone pit with water at the bottom.
|
||||
date: 2025-08-03
|
||||
position: left
|
||||
programs:
|
||||
- name: Krita
|
||||
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?
|
||||
|
||||
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"}}.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
- Created my Neocities account!
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
- Added [Home](/home), [Gallery](/gallery) and ~~About~~
|
||||
- ~~About~~ contains Pokémon boxes and a small bio
|
||||
- Added links to other pages
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
---
|
||||
title: Version 0
|
||||
---
|
||||
|
||||
## {{page.fileSlug|readable}} <code>{{title}}</code>
|
||||
|
||||
|
||||
|
||||
- Added sidebar
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
- Working on my [interests](/home#interests)...
|
||||
- Added ~~Favorite Pokémon~~
|
||||
- Moved Pokémon boxes from ~~About~~
|
||||
|
|
|
|||
|
|
@ -1,3 +1 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
- [Gallery](/gallery) implemented
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
title: Version 1
|
||||
---
|
||||
|
||||
## {{page.fileSlug|readable}} <code>{{title}}</code>
|
||||
|
||||
|
||||
|
||||
- Changed backgrounds
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
- Changed [Gallery](/gallery)
|
||||
- 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
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
- Changed ~~About~~
|
||||
- Added a collection of games and music that I enjoy
|
||||
- Added 88x31 buttons to the footer of the page
|
||||
|
|
|
|||
|
|
@ -1,3 +1 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
- Made a 88x31 button! [](/)
|
||||
|
|
@ -1,5 +1,3 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
- Re-added and moved Sunny's portrait to my [bio](/home#bio)
|
||||
- Changed [Gallery](/gallery)
|
||||
- Added sections for [original characters](/gallery/#original-characters) and [fan art](/gallery#fan-art)
|
||||
|
|
|
|||
|
|
@ -1,3 +1 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
- 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
|
||||
|
|
@ -2,8 +2,6 @@
|
|||
title: Version 2
|
||||
---
|
||||
|
||||
## {{page.fileSlug|readable}} <code>{{title}}</code>
|
||||
|
||||
|
||||
|
||||
Added a lot of visual flair with to page elements to look like everyday objects, with the exception being: the header, sidebar and topbar, as they're supposed to be UI.
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
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/"}}.
|
||||
|
|
|
|||
|
|
@ -1,4 +1,2 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
- Changed ~~About~~
|
||||
- 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
|
||||
- Changed [Gallery](/gallery)
|
||||
- Artworks now work (ha) with keyboard navigation
|
||||
|
|
|
|||
|
|
@ -1,4 +1,2 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
- Added ~~Jukebox~~
|
||||
- A page with a music player featuring a pre-defined track list from various video games and accompanying backgrounds that fade-in on track change
|
||||
|
|
|
|||
|
|
@ -1,4 +1,2 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
- Drafted ~~Jukebox~~
|
||||
- I am bad at JavaScript
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
title: Version 4
|
||||
---
|
||||
|
||||
## {{page.fileSlug|readable}} <code>{{title}}</code>
|
||||
|
||||
|
||||
|
||||
- Shiny buttons are BACK!
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
title: Version 5
|
||||
---
|
||||
|
||||
## {{page.fileSlug|readable}} <code>{{title}}</code>
|
||||
|
||||
|
||||
|
||||
Re-wrote the website with {{"Eleventy"|link:"https://11ty.dev/"}}.
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
title: Version 6
|
||||
---
|
||||
|
||||
## {{page.fileSlug|readable}} <code>{{title}}</code>
|
||||
|
||||
|
||||
|
||||
Re-wrote the site, again.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
Polished the old theme
|
||||
|
||||
- Changed [Home](/home)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
- Changed sidebar
|
||||
- Added icon for [Changelog](/changelog)
|
||||
- For some reason I forgot give it an icon, it previously used the Gallery icon
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
Website (hopefully) fixed for Chromium-based browsers _...grr_
|
||||
|
||||
- Changed sidebar
|
||||
- ~~Added an animated tiled paw background for desktop view~~
|
||||
- Changed [Home](/home)
|
||||
- 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
|
||||
- Changed [Changelog](/changelog)
|
||||
- **Actually** processed with [Prettier](https://github.com/prettier/prettier), now.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
Actively trying to accommodate for accessibility
|
||||
|
||||
- Added `header` to pages back in
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
title: Version 7
|
||||
---
|
||||
|
||||
## {{page.fileSlug|readable}} <code>{{title}}</code>
|
||||
|
||||
|
||||
|
||||
Overhauled the old theme
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
- Changed [Index](/) and [Blog](/blog)
|
||||
- Updated with miscellaneous disclaimers
|
||||
- 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"}}
|
||||
- Should hopefully be able to be compiled without throwing errors now.
|
||||
- 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
|
||||
>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>
|
||||
This site eats cookies for breakfast.
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
---
|
||||
title: "Blog"
|
||||
order: 3
|
||||
icon: "m5 3h15l7 7v20H5zm5 22h12v-3H10zm0-6h12v-3H10zm0-6h9v-3h-9z"
|
||||
---
|
||||
<section id="posts">
|
||||
<article id="posts">
|
||||
<nav>
|
||||
<ul role="list">
|
||||
{% for post in collections.posts reversed %}
|
||||
<li>
|
||||
|
|
@ -17,8 +16,9 @@ icon: "m5 3h15l7 7v20H5zm5 22h12v-3H10zm0-6h12v-3H10zm0-6h9v-3h-9z"
|
|||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
</article>
|
||||
<article>
|
||||
<p>...I'll eventually write more stuff worth talking about on here when the motivation strikes.</p>
|
||||
</article>
|
||||
</ul>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
---
|
||||
title: "Changelog"
|
||||
order: 2
|
||||
icon: "M10 25H21V22H10Zm4-13H10v3h4v4h3V15h4V12H17V8H14ZM5 3H20l7 7V30H5Z"
|
||||
---
|
||||
|
||||
{%for update in collections.updates reversed%}
|
||||
<article>
|
||||
<h2><time datetime="{{update.fileSlug}}">{{update.fileSlug|readable}}</time></h2>
|
||||
{%if update.data.title%}<span>{{update.data.title}}</span>{%endif%}
|
||||
{{update.content}}
|
||||
</article>
|
||||
{%endfor%}
|
||||
|
|
@ -1,21 +1,23 @@
|
|||
---
|
||||
title: "Gallery"
|
||||
order: 4
|
||||
icon: "M2 2V30H30V2H2M5 26l6-9 5 6 5-9 6 12H5"
|
||||
---
|
||||
|
||||
<section id="artworks">
|
||||
<article>
|
||||
{%for article in collections.articles%} {%if article.fileSlug == 'ocs'%}
|
||||
{{ article.content }} {%endif%} {%endfor%}
|
||||
<nav>
|
||||
<ul role="list">
|
||||
{% assign sortedArtworks = collections.artworks | sortByFirstDate %} {%for artwork in sortedArtworks %}
|
||||
<li>
|
||||
<a href="{{artwork.page.url}}">
|
||||
<figure>
|
||||
{%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%} />
|
||||
<figcaption>{{artwork.page.fileSlug}}{%if artwork.data.images.size > 1%}<p class="count">(+{{artwork.data.images.size| minus: 1}})</p>{%endif%}</figcaption>
|
||||
<span>
|
||||
<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 %}
|
||||
<time datetime="{{artwork.data.images[0].date|ISO}}">{{artwork.data.images[0].date|readable}}</time>
|
||||
{%endif%} {%endif%}
|
||||
|
|
@ -24,10 +26,10 @@ icon: "M2 2V30H30V2H2M5 26l6-9 5 6 5-9 6 12H5"
|
|||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
</article>
|
||||
<article>
|
||||
{%for article in collections.articles%} {%if article.fileSlug == 'fanart'%}
|
||||
{{ article.content }} {%endif%} {%endfor%}
|
||||
<nav>
|
||||
<ul role="list">
|
||||
{%assign sortedFanarts = collections.fanarts|sortByFirstDate%} {%for
|
||||
fanart in sortedFanarts%}
|
||||
|
|
@ -35,7 +37,7 @@ icon: "M2 2V30H30V2H2M5 26l6-9 5 6 5-9 6 12H5"
|
|||
<a href="{{fanart.page.url}}">
|
||||
<figure>
|
||||
{%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>
|
||||
{%if fanart.data.images[0].date%}
|
||||
<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>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
</article>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,11 @@
|
|||
---
|
||||
title: "Home"
|
||||
order: 1
|
||||
icon: "M20 20V30h8V12L16 2 4 12V30h8V20Z"
|
||||
---
|
||||
<article id="bio">
|
||||
{%for article in collections.articles%} {%if article.fileSlug == 'bio'%} {{
|
||||
article.content }} {%endif%} {%endfor%}
|
||||
{%include "../data/articles/home-bio.html"%}
|
||||
</article>
|
||||
<article id="interests">
|
||||
{%for article in collections.articles%} {%if article.fileSlug == 'interests'%}
|
||||
{{ article.content }} {%endif%} {%endfor%}
|
||||
{%include "../data/articles/home-interests.html"%}
|
||||
<details open="">
|
||||
<summary>
|
||||
<h3>Games</h3>
|
||||
|
|
@ -18,7 +14,7 @@ icon: "M20 20V30h8V12L16 2 4 12V30h8V20Z"
|
|||
{%for item in media-games.items%}
|
||||
<li>
|
||||
<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>
|
||||
</li>
|
||||
{%endfor%}
|
||||
|
|
@ -32,7 +28,7 @@ icon: "M20 20V30h8V12L16 2 4 12V30h8V20Z"
|
|||
{%for item in media-albums.items%}
|
||||
<li>
|
||||
<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>
|
||||
</li>
|
||||
{%endfor%}
|
||||
|
|
@ -46,7 +42,7 @@ icon: "M20 20V30h8V12L16 2 4 12V30h8V20Z"
|
|||
{%for item in media-modules.items%}
|
||||
<li>
|
||||
<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>
|
||||
</li>
|
||||
{%endfor%}
|
||||
|
|
@ -60,7 +56,7 @@ icon: "M20 20V30h8V12L16 2 4 12V30h8V20Z"
|
|||
{%for item in media-manga.items%}
|
||||
<li>
|
||||
<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>
|
||||
</li>
|
||||
{%endfor%}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"layout": "base",
|
||||
"permalink": "/{{ title | slug }}/",
|
||||
"permalink": "/{{page.fileSlug}}/",
|
||||
"tags": "pages"
|
||||
}
|
||||
|
|
@ -1,25 +1,59 @@
|
|||
import markdownIt from "markdown-it";
|
||||
import markdownItAnchor from "markdown-it-anchor";
|
||||
import slugify from "slugify";
|
||||
import { format } from "date-fns";
|
||||
|
||||
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 = {
|
||||
permalink: true, permalinkBefore: true, permalinkSymbol: '#'
|
||||
};
|
||||
const markdownLib = markdownIt(markdownItOptions).use(
|
||||
markdownItAnchor,
|
||||
markdownItAnchorOptions
|
||||
level: [1, 2, 3],
|
||||
slugify: (str) =>
|
||||
slugify(str, {
|
||||
lower: true,
|
||||
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/";
|
||||
eleventyConfig.addPassthroughCopy(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("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) => {
|
||||
return format(dateObj, ("yyyy-LL-dd"));
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue