oh no i bit more than i could chew oh fuck oh shit *dies*
This commit is contained in:
parent
790147ea05
commit
19b436ead1
SSH key fingerprint:
SHA256:MsJkKuo4PUdjQDpLeaURy81drKkW14exlTHp+8QFu6M
73 changed files with 553 additions and 780 deletions
|
|
@ -34,6 +34,7 @@
|
|||
</div>
|
||||
<header>
|
||||
<h1>
|
||||
<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">
|
||||
|
|
@ -41,7 +42,8 @@
|
|||
</svg>
|
||||
{%endif%}
|
||||
{%endfor%}
|
||||
{{ page.fileSlug|capitalize }}
|
||||
{{ currentPage | capitalize }}
|
||||
</a>
|
||||
</h1>
|
||||
</header>
|
||||
<main>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
---
|
||||
layout: base
|
||||
---
|
||||
|
||||
<article>
|
||||
{{content|safe}}
|
||||
<section class="postscript">
|
||||
{{blurb|safe}} <span><img src="{{avatar}}" alt="Profile picture"/></span>
|
||||
</section>
|
||||
{{content|safe}}
|
||||
<section class="postscript">
|
||||
{{blurb|safe}} <span><img src="{{avatar}}" alt="Profile picture"/></span>
|
||||
</section>
|
||||
</article>
|
||||
|
|
@ -1,56 +1,57 @@
|
|||
---
|
||||
layout: base
|
||||
---
|
||||
|
||||
<article id="art">
|
||||
<h1>{{ page.fileSlug }}
|
||||
{%for flag in flags%}
|
||||
<img src="{{ flag.src }}">
|
||||
{%endfor%}
|
||||
</h1>
|
||||
{{ content|safe }}
|
||||
{%if programs and programs|length > 0%}
|
||||
<p>Made with:</p>
|
||||
<ul>
|
||||
{%for program in programs%}
|
||||
<li>
|
||||
{{ program.name|link(program.src)|safe }}
|
||||
</li>
|
||||
{%endfor%}
|
||||
</ul>
|
||||
{%endif%}
|
||||
{%if palettes and palettes|length > 0%}
|
||||
<p>Color palette used:</p>
|
||||
{%for palette in palettes%}
|
||||
<ul>
|
||||
<li>
|
||||
{%if palette.src%}
|
||||
{{ palette.name|link(palette.src)|safe }}
|
||||
{%endif%}
|
||||
</li>
|
||||
</ul>
|
||||
{%endfor%}
|
||||
</ul>
|
||||
{%endif%}
|
||||
<section>
|
||||
{%for image in images%}
|
||||
<a href="{{ image.src }}">
|
||||
<figure>
|
||||
<img src="{{ image.src }}" alt="" {%if image.pixel%} style="image-rendering: pixelated" {%endif%}>
|
||||
<figcaption>{{ image.alt }}</figcaption>
|
||||
<time datetime="{{ image.date|ISO }}">{{ image.date|readable }}</time>
|
||||
</figure>
|
||||
</a>
|
||||
{%endfor%}
|
||||
</section>
|
||||
{%for attachment in attachments%}
|
||||
<section class="attachment">
|
||||
<a href="{{ attachment.src }}">
|
||||
<figure>
|
||||
<img src="{{ attachment.src }}">
|
||||
<figcaption>{{ attachment.alt }}</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</section>
|
||||
{%endfor%}
|
||||
</article>
|
||||
<div>
|
||||
<h1>{{page.fileSlug}}
|
||||
{%for flag in flags%}
|
||||
<img src="{{flag.src}}">
|
||||
{%endfor%}
|
||||
</h1>
|
||||
{{content|safe}}
|
||||
{%if programs and programs|length > 0%}
|
||||
<p>Made with:</p>
|
||||
<ul class="paws">
|
||||
{%for program in programs%}
|
||||
<li>
|
||||
{{program.name|link(program.src)|safe}}
|
||||
</li>
|
||||
{%endfor%}
|
||||
</ul>
|
||||
{%endif%}
|
||||
{%if palettes and palettes|length > 0%}
|
||||
<p>Color palette used:</p>
|
||||
{%for palette in palettes%}
|
||||
<ul class="paws">
|
||||
<li>
|
||||
{%if palette.src%}
|
||||
{{palette.name|link(palette.src)|safe}}
|
||||
{%endif%}
|
||||
</li>
|
||||
</ul>
|
||||
{%endfor%}
|
||||
</ul>
|
||||
{%endif%}
|
||||
</div>
|
||||
<section>
|
||||
{%for image in images%}
|
||||
<a href="{{image.src}}">
|
||||
<figure>
|
||||
<img src="{{image.src}}" alt="" {%if image.pixel%} style="image-rendering: pixelated" {%endif%}>
|
||||
<figcaption>{{image.alt}}</figcaption>
|
||||
<time datetime="{{image.date|ISO}}">{{image.date|readable}}</time>
|
||||
</figure>
|
||||
</a>
|
||||
{%endfor%}
|
||||
</section>
|
||||
{%for attachment in attachments%}
|
||||
<section class="attachment">
|
||||
<a href="{{attachment.src}}">
|
||||
<figure>
|
||||
<img src="{{attachment.src}}">
|
||||
<figcaption>{{attachment.alt}}</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</section>
|
||||
{%endfor%}
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
<ul role="list">
|
||||
{%for page in pageOrder%}
|
||||
<li>
|
||||
<a href="{{ page.url }}" {%if page.url|slugify == currentPage%}aria-current="page"{%endif%}>
|
||||
<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>
|
||||
<path d="{{icon[page.url|slugify]}}"></path>
|
||||
</svg>
|
||||
{{ page.fileSlug|capitalize }}
|
||||
{{page.fileSlug|capitalize}}
|
||||
</a>
|
||||
</li>
|
||||
{%endfor%}
|
||||
|
|
@ -20,16 +20,16 @@
|
|||
{%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 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 command="show-modal" commandfor="{{items[0].id}}">
|
||||
<img src="/assets/img/icon/{{items[0].icon}}" alt="" aria-hidden="true">{{key|capitalize}}
|
||||
</button>
|
||||
</li>
|
||||
{%endif%}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<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/{{ currentPage }}.css">
|
||||
<link rel="stylesheet" href="/assets/css/default/{{currentPage}}.css">
|
||||
<link rel="stylesheet" href="/assets/css/default/system.css" id="themed">
|
||||
{%if currentPage === "home"%}
|
||||
<link rel="stylesheet" href="/assets/css/pokesprite-pokemon-gen8.css">
|
||||
|
|
|
|||
|
|
@ -1,35 +1,41 @@
|
|||
#blog {
|
||||
animation: none;
|
||||
background-attachment: local, fixed;
|
||||
background-blend-mode: overlay, normal;
|
||||
background-color: var(--light);
|
||||
background-image: var(--dot),
|
||||
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 {
|
||||
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,
|
||||
background-image: linear-gradient(
|
||||
135deg,
|
||||
var(--citrus-light-extra) 5%,
|
||||
var(--citrus-light) 50%, var(--citrus-light-extra)
|
||||
var(--citrus-light) 50%,
|
||||
var(--citrus-light-extra)
|
||||
);
|
||||
}
|
||||
& .addendum {
|
||||
border-color: var(--citrus-primary);
|
||||
background-image: linear-gradient(135deg,
|
||||
background-image: linear-gradient(
|
||||
135deg,
|
||||
var(--citrus-mix-light) 5%,
|
||||
var(--citrus-light) 50%, var(--citrus-mix-light)
|
||||
var(--citrus-light) 50%,
|
||||
var(--citrus-mix-light)
|
||||
);
|
||||
}
|
||||
& pre {
|
||||
|
|
@ -72,7 +78,8 @@
|
|||
border-width: 3px;
|
||||
box-sizing: inherit;
|
||||
padding: 2px;
|
||||
background-image: radial-gradient(
|
||||
background-image:
|
||||
radial-gradient(
|
||||
ellipse at 50% -0%,
|
||||
var(--light) 20%,
|
||||
var(--dark) 150%
|
||||
|
|
@ -82,8 +89,10 @@
|
|||
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);
|
||||
box-shadow:
|
||||
0 0 0 2px var(--citrus-mix-dark),
|
||||
inset 0 0 0 2px var(--citrus-mix),
|
||||
var(--shadow-light);
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -99,10 +108,6 @@
|
|||
& p:not(:last-child) {
|
||||
color: var(--citrus-dark);
|
||||
}
|
||||
&:not(:hover, :focus) {
|
||||
background-color: var(--citrus-light);
|
||||
border-color: var(--citrus-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,34 +4,21 @@
|
|||
@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-attachment: local;
|
||||
background-blend-mode: soft-light;
|
||||
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;
|
||||
background-size: 128px;
|
||||
color: var(--citrus-dark-extra);
|
||||
}
|
||||
header {
|
||||
main :is(a, button) {
|
||||
background-color: var(--citrus-mix-light);
|
||||
border-color: var(--citrus-mix);
|
||||
color: var(--citrus-dark);
|
||||
}
|
||||
ul:not([role]) li::before {
|
||||
ul li::before {
|
||||
background-color: var(--citrus-dark-extra);
|
||||
}
|
||||
article {
|
||||
|
|
@ -41,25 +28,20 @@ article {
|
|||
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;
|
||||
}
|
||||
border-radius: 2px;
|
||||
}
|
||||
@media screen and (max-width: 916px) {
|
||||
header {
|
||||
width: calc(100% - var(--float) + 4px);
|
||||
margin: auto 0 0 auto;
|
||||
padding: var(--pad-xl) 0 0 0;
|
||||
body::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 916px) {
|
||||
nav#default {
|
||||
height: max-content;
|
||||
}
|
||||
header {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,28 @@
|
|||
#gallery {
|
||||
& article {
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
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);
|
||||
transition:
|
||||
border-color var(--trans),
|
||||
background-color var(--trans);
|
||||
box-shadow: var(--shadow-light);
|
||||
&:is(:hover, :focus) {
|
||||
& figure {
|
||||
|
|
@ -16,30 +33,26 @@
|
|||
}
|
||||
& a figure {
|
||||
border-width: 4px;
|
||||
border-radius: 0;
|
||||
&: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;
|
||||
}
|
||||
: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;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,25 +1,12 @@
|
|||
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-s);
|
||||
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;
|
||||
#interests {
|
||||
& li {
|
||||
& a {
|
||||
& span:has(img)::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&:nth-child(odd) {
|
||||
transform: var(--rot-minus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
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);
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
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);
|
||||
|
|
@ -37,12 +37,15 @@
|
|||
}
|
||||
}
|
||||
nav#default,
|
||||
nav#floating, header {
|
||||
nav#floating,
|
||||
header {
|
||||
color: var(--citrus-dark);
|
||||
background-attachment: fixed;
|
||||
background-image: var(--nav-bg);
|
||||
background-size: 6px;
|
||||
}
|
||||
nav#floating, nav#default {
|
||||
nav#floating,
|
||||
nav#default {
|
||||
border-bottom-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-width: 4px;
|
||||
|
|
@ -51,3 +54,22 @@ nav#floating, nav#default {
|
|||
nav#default {
|
||||
border-bottom-right-radius: var(--pad-l);
|
||||
}
|
||||
@media screen and (max-width: 916px) {
|
||||
header {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 916px) {
|
||||
header {
|
||||
display: flex;
|
||||
width: var(--view);
|
||||
border-right-width: 4px;
|
||||
border-right-style: solid;
|
||||
border-bottom-width: 4px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-right-radius: 100px;
|
||||
margin-left: calc(var(--view) - 4px);
|
||||
padding: var(--pad-m) 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -90,7 +90,9 @@ article > .postscript {
|
|||
gap: var(--pad-m);
|
||||
}
|
||||
& > img {
|
||||
transition: height var(--trans), border-radius var(--trans),
|
||||
transition:
|
||||
height var(--trans),
|
||||
border-radius var(--trans),
|
||||
background-color var(--trans);
|
||||
border-radius: var(--round);
|
||||
min-height: fit-content;
|
||||
|
|
@ -114,7 +116,6 @@ article > .postscript {
|
|||
}
|
||||
|
||||
#posts {
|
||||
max-width: var(--post);
|
||||
& ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -142,7 +143,7 @@ article > .postscript {
|
|||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 920px) {
|
||||
@media screen and (max-width: 916px) {
|
||||
article aside {
|
||||
float: unset;
|
||||
width: fit-content;
|
||||
|
|
@ -150,10 +151,6 @@ article > .postscript {
|
|||
article section {
|
||||
flex-direction: column;
|
||||
}
|
||||
#posts {
|
||||
max-width: unset;
|
||||
width: auto;
|
||||
}
|
||||
article > .postscript {
|
||||
& p {
|
||||
margin-right: var(--pad-sm);
|
||||
|
|
@ -164,14 +161,3 @@ article > .postscript {
|
|||
}
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
article > .postscript {
|
||||
& p,
|
||||
p > img {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
#blog #posts a {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
8
_src/assets/css/default/changelog.css
Normal file
8
_src/assets/css/default/changelog.css
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
li {
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
&::marker {
|
||||
content: initial;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import url("./media.css");
|
||||
@import url("./motion.css");
|
||||
@import url("./variables.css");
|
||||
@import url("./nav.css");
|
||||
|
||||
|
|
@ -9,144 +9,113 @@ 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;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
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));
|
||||
|
||||
margin-top: var(--pad-xl);
|
||||
margin-left: calc(var(--view) + var(--pad-xl));
|
||||
& a {
|
||||
display: flex;
|
||||
padding: var(--pad-s);
|
||||
border-radius: var(--round);
|
||||
}
|
||||
& 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));
|
||||
margin: auto 0 0 auto;
|
||||
width: fit-content;
|
||||
justify-content: center;
|
||||
position: sticky;
|
||||
inset-block: 100%;
|
||||
text-align: center;
|
||||
|
||||
& span {
|
||||
background-image: var(--transgender);
|
||||
padding: 0 var(--pad-s);
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
width: var(--main);
|
||||
width: fit-content;
|
||||
padding: var(--pad-xl);
|
||||
padding-left: calc(var(--view) + var(--pad-xl));
|
||||
padding-right: var(--view);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
& ul[role="list"] {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
width: auto;
|
||||
max-width: var(--main);
|
||||
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-s);
|
||||
}
|
||||
|
||||
& code:not(pre *) {
|
||||
padding: 0 var(--pad-s);
|
||||
}
|
||||
|
||||
& pre {
|
||||
display: flex;
|
||||
width: auto;
|
||||
|
|
@ -155,17 +124,7 @@ article {
|
|||
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;
|
||||
|
|
@ -175,96 +134,52 @@ article {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
& ul:not([role="list"]):is(#art *) {
|
||||
padding: 0;
|
||||
margin: 0 0 var(--pad-s) 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);
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& section {
|
||||
& a:has(figure) {
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
& figure img {
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
& figcaption {
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
padding-top: var(--pad-s);
|
||||
padding: var(--pad-m) 0;
|
||||
}
|
||||
}
|
||||
|
||||
& > :first-child > code {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
margin: var(--pad-s) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.paws li::marker {
|
||||
content: none;
|
||||
}
|
||||
.paws 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);
|
||||
}
|
||||
: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-s);
|
||||
}
|
||||
}
|
||||
|
||||
article a:not(.link *, a:has(img)) {
|
||||
display: inline-flex;
|
||||
padding: 0 var(--pad-s);
|
||||
}
|
||||
|
||||
dialog button[commandfor="signal"] {
|
||||
width: max-content;
|
||||
padding: 0 var(--pad-s);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
dialog#signal {
|
||||
#signal {
|
||||
cursor: default;
|
||||
background: black;
|
||||
border: none;
|
||||
|
|
@ -276,7 +191,6 @@ dialog#signal {
|
|||
height: 100%;
|
||||
position: fixed;
|
||||
padding: var(--pad-xl);
|
||||
|
||||
& article {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -288,15 +202,12 @@ dialog#signal {
|
|||
background: none;
|
||||
word-wrap: break-word;
|
||||
color: white;
|
||||
|
||||
& h1 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
& p {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
& a {
|
||||
margin: auto 0 0 auto;
|
||||
}
|
||||
|
|
@ -305,7 +216,6 @@ dialog#signal {
|
|||
a {
|
||||
font-family: "Times New Roman", Times, serif;
|
||||
}
|
||||
|
||||
& img {
|
||||
border: 4px solid white;
|
||||
padding: var(--pad-s);
|
||||
|
|
@ -314,21 +224,22 @@ dialog#signal {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 916px) {
|
||||
div#sidebar {
|
||||
#sidebar {
|
||||
display: flex;
|
||||
}
|
||||
nav#floating {
|
||||
#floating {
|
||||
display: none;
|
||||
}
|
||||
nav#default button[popovertarget] {
|
||||
#default button[popovertarget] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 916px) {
|
||||
/* Reset */
|
||||
header, footer, main {
|
||||
header,
|
||||
footer,
|
||||
main {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
|
|
@ -338,11 +249,13 @@ dialog#signal {
|
|||
padding: var(--pad-l);
|
||||
}
|
||||
header {
|
||||
text-align: right;
|
||||
margin: calc(var(--pad-xxl) + var(--pad-l)) 0 0 0;
|
||||
}
|
||||
header h1 {
|
||||
margin: auto 0 0 auto;
|
||||
padding-right: var(--pad-m);
|
||||
}
|
||||
/* Move navbar artwork */
|
||||
nav#default::before {
|
||||
#default::before {
|
||||
content: none;
|
||||
}
|
||||
body::after {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,3 @@
|
|||
#gallery {
|
||||
& time {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
#artworks {
|
||||
& ul {
|
||||
display: grid;
|
||||
|
|
@ -11,29 +5,21 @@
|
|||
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: cover;
|
||||
}
|
||||
|
||||
& figcaption {
|
||||
display: inline-flex;
|
||||
font-size: 1.4rem;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
text-decoration-style: none;
|
||||
}
|
||||
& .count {
|
||||
margin: auto 0 0 auto;
|
||||
|
|
@ -42,16 +28,9 @@
|
|||
}
|
||||
|
||||
#art {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: fit-content;
|
||||
& p {
|
||||
max-width: var(--post);
|
||||
}
|
||||
& h3 {
|
||||
display: flex;
|
||||
gap: var(--pad-s);
|
||||
}
|
||||
& section:has(a:nth-child(n + 2)) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -68,14 +47,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
@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: 916px) {
|
||||
#art p {
|
||||
max-width: auto;
|
||||
|
|
|
|||
|
|
@ -7,116 +7,65 @@
|
|||
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);
|
||||
}
|
||||
#bio .emoji {
|
||||
display: inline-flex;
|
||||
height: 20px;
|
||||
vertical-align: middle;
|
||||
width: 20px;
|
||||
&::after,
|
||||
img {
|
||||
filter: drop-shadow(0 0 0.5px #000a);
|
||||
}
|
||||
}
|
||||
|
||||
article#badges {
|
||||
& ul {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--pad-s);
|
||||
}
|
||||
|
||||
& a {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
}
|
||||
& img {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
#badges ul {
|
||||
gap: var(--pad-s);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
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-s);
|
||||
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;
|
||||
#interests a {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: 160px;
|
||||
&:not(:hover, :focus) {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
#interests 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-radius: 5px;
|
||||
width: fit-content;
|
||||
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;
|
||||
border-style: solid;
|
||||
margin: var(--pad-l) 0 0 0;
|
||||
|
||||
width: fit-content;
|
||||
& li {
|
||||
display: flex;
|
||||
margin-top: -8px;
|
||||
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)
|
||||
|
|
@ -124,19 +73,13 @@ article#interests {
|
|||
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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,12 +14,10 @@
|
|||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
|
||||
& footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
& header {
|
||||
top: 0;
|
||||
display: flex;
|
||||
|
|
@ -37,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,9 +15,6 @@
|
|||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
body {
|
||||
animation: none;
|
||||
}
|
||||
/* Buttons */
|
||||
:is(a, button),
|
||||
span:has(a) {
|
||||
|
|
@ -44,7 +41,8 @@
|
|||
}
|
||||
}
|
||||
/* Scrolling pride flag text */
|
||||
article#bio span[id], footer span {
|
||||
article#bio span[id],
|
||||
footer span {
|
||||
transition: none;
|
||||
animation: none;
|
||||
color: inherit;
|
||||
|
|
@ -79,4 +77,16 @@
|
|||
animation: none;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
#art div {
|
||||
transform: none;
|
||||
}
|
||||
article > .postscript {
|
||||
& p,
|
||||
p > img {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
#blog #posts a {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,127 +1,128 @@
|
|||
.navbar {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
z-index: 2;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
padding: var(--pad-l);
|
||||
width: var(--view);
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: none;
|
||||
gap: var(--pad-m);
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
padding: var(--pad-l);
|
||||
position: fixed;
|
||||
scrollbar-width: none;
|
||||
width: var(--view);
|
||||
& li *:is(a, button) {
|
||||
align-items: center;
|
||||
border-radius: var(--round);
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-radius: var(--round);
|
||||
}
|
||||
|
||||
& section {
|
||||
border-radius: var(--round);
|
||||
font-weight: bold;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
|
||||
border-width: 2px;
|
||||
font-weight: bold;
|
||||
& h3 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
height: var(--pad-xl);
|
||||
font-size: 1.4rem;
|
||||
height: var(--pad-xl);
|
||||
margin: var(--pad-s) auto 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
& * svg,
|
||||
li img {
|
||||
align-self: center;
|
||||
margin: 0 8px 0 8px;
|
||||
width: 20px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
& ul {
|
||||
margin-top: 0;
|
||||
margin: var(--pad-s);
|
||||
padding: 0;
|
||||
|
||||
& li,
|
||||
button {
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
margin-bottom: inherit;
|
||||
|
||||
padding: 0;
|
||||
& img {
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& li *:is(a, button) {
|
||||
display: flex;
|
||||
font-size: 1.125rem;
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
height: 36px;
|
||||
line-height: var(--pad-xl);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
nav#default::before,
|
||||
#default::before,
|
||||
body::after {
|
||||
z-index: -1;
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: inherit;
|
||||
margin: 0;
|
||||
mask-image: url("/assets/img/theme/sundae_sit-lines.png");
|
||||
mask-repeat: no-repeat;
|
||||
margin: 0;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
width: inherit;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
nav#default::before {
|
||||
#default::before {
|
||||
-webkit-mask-position-x: -25px;
|
||||
-webkit-mask-position-y: 90%;
|
||||
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;
|
||||
content: none;
|
||||
height: 100vw;
|
||||
mask-size: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
nav#floating {
|
||||
width: var(--float);
|
||||
height: fit-content;
|
||||
border-bottom-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-width: 2px;
|
||||
border-right-width: 2px;
|
||||
#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 {
|
||||
width: fit-content;
|
||||
font-size: 0;
|
||||
width: fit-content;
|
||||
}
|
||||
& a {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
div#sidebar {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
#sidebar {
|
||||
background: none;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
nav#default {
|
||||
#default {
|
||||
border: 0;
|
||||
border-right-style: solid;
|
||||
border-right-width: 2px;
|
||||
}
|
||||
/* hack to make the header look seamless with the nav when using citrus theme */
|
||||
body {
|
||||
position: relative;
|
||||
z-index: -3;
|
||||
& main {
|
||||
position: inherit;
|
||||
z-index: -2;
|
||||
}
|
||||
& #sidebar {
|
||||
position: inherit;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,52 +4,42 @@
|
|||
header svg {
|
||||
color: var(--secondary-light-300);
|
||||
}
|
||||
|
||||
article {
|
||||
border-color: var(--secondary-300);
|
||||
background-color: var(--secondary-200);
|
||||
|
||||
& #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 {
|
||||
background-color: var(--secondary-400);
|
||||
box-shadow: inset 0 0 0 2px var(--secondary);
|
||||
border-image-source: linear-gradient(
|
||||
45deg,
|
||||
|
|
@ -57,20 +47,17 @@
|
|||
var(--secondary-600),
|
||||
var(--secondary)
|
||||
);
|
||||
background-color: var(--secondary-400);
|
||||
}
|
||||
}
|
||||
|
||||
#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: color-mix(in lch, var(--secondary-300), transparent);
|
||||
|
|
@ -79,24 +66,17 @@
|
|||
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#default,
|
||||
nav#floating {
|
||||
& #default,
|
||||
#floating {
|
||||
background-color: var(--secondary-100);
|
||||
border-color: var(--secondary);
|
||||
& section {
|
||||
border-color: var(--secondary);
|
||||
background-color: color-mix(in lch, var(--secondary-300), transparent);
|
||||
background-color: var(--secondary-300);
|
||||
color: var(--secondary-light-300);
|
||||
& a[aria-current] {
|
||||
color: var(--secondary-500);
|
||||
|
|
@ -104,7 +84,6 @@
|
|||
background-color: var(--secondary-light-500);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
|
|
@ -113,34 +92,27 @@
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
&::after,
|
||||
& nav#default::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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,52 +4,42 @@
|
|||
header svg {
|
||||
color: var(--primary-dark-300);
|
||||
}
|
||||
|
||||
article {
|
||||
border-color: var(--primary-300);
|
||||
background-color: var(--primary-200);
|
||||
|
||||
& #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 {
|
||||
background-color: var(--primary-400);
|
||||
box-shadow: inset 0 0 0 2px var(--primary);
|
||||
border-image-source: linear-gradient(
|
||||
45deg,
|
||||
|
|
@ -57,46 +47,36 @@
|
|||
var(--primary-600),
|
||||
var(--primary)
|
||||
);
|
||||
background-color: var(--primary-400);
|
||||
}
|
||||
}
|
||||
|
||||
#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#default,
|
||||
nav#floating {
|
||||
& #default,
|
||||
#floating {
|
||||
background-color: var(--primary-100);
|
||||
border-color: var(--primary-dark-500);
|
||||
& section {
|
||||
border-color: var(--primary-dark-800);
|
||||
background-color: color-mix(in lch, var(--primary-300), transparent);
|
||||
background-color: var(--primary-300);
|
||||
color: var(--primary-dark-300);
|
||||
& a[aria-current] {
|
||||
color: var(--primary-500);
|
||||
|
|
@ -104,7 +84,6 @@
|
|||
background-color: var(--primary-dark-500);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
|
|
@ -113,34 +92,27 @@
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
&::after,
|
||||
& nav#default::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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
--pad-l: 1rem;
|
||||
--pad-xl: 2rem;
|
||||
--pad-xxl: 4rem;
|
||||
--round: 16px;
|
||||
--round: 16px; /* Border radius */
|
||||
--trans: 300ms;
|
||||
--paw: url("/assets/img/theme/paw.svg");
|
||||
--paw-tiled: url("/assets/img/theme/paw-tiled.png");
|
||||
|
|
@ -102,17 +102,6 @@
|
|||
#00d2ff 0
|
||||
);
|
||||
}
|
||||
|
||||
@keyframes mainbg {
|
||||
0% {
|
||||
background-position: 0rem 0rem;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 256px 256px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide {
|
||||
0% {
|
||||
background-position: 0% 100%;
|
||||
|
|
@ -122,17 +111,14 @@
|
|||
background-position: 200% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@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");
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ images:
|
|||
alt: Various pixel art animations of Sundae as a character from Nuclear Throne.
|
||||
date: 2021-01-25
|
||||
pixel: true
|
||||
position: left
|
||||
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
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"permalink": "/gallery/{{page.fileSlug|slug}}/",
|
||||
"permalink": "/gallery/fanart/{{page.fileSlug|slug}}/",
|
||||
"tags": "fanarts"
|
||||
}
|
||||
|
|
@ -3,7 +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
|
||||
position: -60px
|
||||
fit: scale-down
|
||||
programs:
|
||||
- name: MS Paint
|
||||
src: https://www.microsoft.com/en-us/windows/paint
|
||||
|
|
|
|||
|
|
@ -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,5 +1,5 @@
|
|||
{
|
||||
"layout": "blog",
|
||||
"permalink": "/blog/{{ page.fileSlug | slug }}/",
|
||||
"permalink": "/blog/{{page.fileSlug|slug}}/",
|
||||
"tags": "posts"
|
||||
}
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
- Changed sidebar
|
||||
- Toggleable on mobile
|
||||
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
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
---
|
||||
order: 3
|
||||
---
|
||||
<section id="posts">
|
||||
<article id="posts">
|
||||
<nav>
|
||||
<ul role="list">
|
||||
{% for post in collections.posts reversed %}
|
||||
<li>
|
||||
|
|
@ -15,8 +16,9 @@ order: 3
|
|||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
<article>
|
||||
<p>...I'll eventually write more stuff worth talking about on here when the motivation strikes.</p>
|
||||
</article>
|
||||
</ul>
|
||||
</section>
|
||||
</nav>
|
||||
</article>
|
||||
<article>
|
||||
<p>...I'll eventually write more stuff worth talking about on here when the motivation strikes.</p>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
---
|
||||
order: 2
|
||||
---
|
||||
|
||||
{%for update in collections.updates reversed%}
|
||||
<article>
|
||||
{{ update.content }}
|
||||
<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,47 +1,50 @@
|
|||
---
|
||||
order: 4
|
||||
---
|
||||
|
||||
<section id="artworks">
|
||||
<article>
|
||||
{%for article in collections.articles%} {%if article.fileSlug == 'ocs'%}
|
||||
{{ article.content }} {%endif%} {%endfor%}
|
||||
<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}}" 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%}"/>
|
||||
<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%}
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<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="" 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%}"/>
|
||||
<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%}
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
</article>
|
||||
<article>
|
||||
{%for article in collections.articles%} {%if article.fileSlug == 'fanart'%}
|
||||
{{ article.content }} {%endif%} {%endfor%}
|
||||
<ul role="list">
|
||||
{%assign sortedFanarts = collections.fanarts|sortByFirstDate%} {%for
|
||||
fanart in sortedFanarts%}
|
||||
<li>
|
||||
<a href="{{fanart.page.url}}">
|
||||
<figure>
|
||||
{%if fanart.data.images[0]%}
|
||||
<img src="{{fanart.data.images[0].src}}" alt="{{fanart.data.images[0].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%}"/>
|
||||
<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>
|
||||
{%endif%} {%endif%}
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<nav>
|
||||
<ul role="list">
|
||||
{%assign sortedFanarts = collections.fanarts|sortByFirstDate%} {%for
|
||||
fanart in sortedFanarts%}
|
||||
<li>
|
||||
<a href="{{fanart.page.url}}">
|
||||
<figure>
|
||||
{%if fanart.data.images[0]%}
|
||||
<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>
|
||||
{%endif%} {%endif%}
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
</article>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -2,12 +2,10 @@
|
|||
order: 1
|
||||
---
|
||||
<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>
|
||||
|
|
@ -16,7 +14,7 @@ order: 1
|
|||
{%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%}
|
||||
|
|
@ -30,7 +28,7 @@ order: 1
|
|||
{%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%}
|
||||
|
|
@ -44,7 +42,7 @@ order: 1
|
|||
{%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%}
|
||||
|
|
@ -58,7 +56,7 @@ order: 1
|
|||
{%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": "/{{ page.fileSlug }}/",
|
||||
"permalink": "/{{page.fileSlug}}/",
|
||||
"tags": "pages"
|
||||
}
|
||||
|
|
@ -1,19 +1,53 @@
|
|||
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 markdownItAnchorOptions = {
|
||||
permalink: true, permalinkBefore: true, permalinkSymbol: '#'
|
||||
};
|
||||
const markdownLib = markdownIt(markdownItOptions).use(
|
||||
markdownItAnchor,
|
||||
markdownItAnchorOptions
|
||||
);
|
||||
eleventyConfig.setLibrary("md", markdownLib);
|
||||
/*
|
||||
|
||||
const linkAfterHeader = markdownItAnchor.permalink.linkAfterHeader({
|
||||
class: "anchor",
|
||||
symbol: "<span hidden>#</span>",
|
||||
style: "aria-labelledby",
|
||||
});
|
||||
const 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,
|
||||
})
|
||||
);
|
||||
|
||||
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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue