unfinished bullCRAP
This commit is contained in:
parent
4972cbe693
commit
cb5ba4fb82
SSH key fingerprint:
SHA256:MsJkKuo4PUdjQDpLeaURy81drKkW14exlTHp+8QFu6M
23 changed files with 351 additions and 347 deletions
|
|
@ -2,9 +2,12 @@
|
|||
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"
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
{% set currentUrl %}{{ page.url }}{% endset %}
|
||||
{% set sortedPages = collections.pages|sort(attribute='data.order') %}
|
||||
<head>
|
||||
<title>
|
||||
{% if page.url.split('/') %}
|
||||
|
|
@ -21,120 +24,81 @@ theme: "M16 6a1 1 0 010 20Zm0-4a1 1 0 000 28A1 1 0 0016 2"
|
|||
<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/" %}
|
||||
{% if currentUrl === "/home/" %}
|
||||
<link rel="stylesheet" href="/assets/css/pokesprite-pokemon-gen8.css">
|
||||
{% endif %}
|
||||
{% set availableStyles = ['home', 'blog', 'gallery'] %}
|
||||
{% if page.url %}
|
||||
{% if currentUrl %}
|
||||
{% if availableStyles.indexOf(page.url.split('/')[1]|slugify) !== -1 %}
|
||||
<link rel="stylesheet" href="/assets/css/default/{{ page.url.split('/')[1]|slugify }}.css">
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</head>
|
||||
<body id="{{ page.url.split('/')[1]|slugify }}">
|
||||
<nav>
|
||||
<details open="">
|
||||
<summary>
|
||||
Navigation
|
||||
</summary>
|
||||
{% set currentUrl %}{{ page.url }}{% endset %}
|
||||
{% set sortedPages = collections.pages|sort(attribute='data.order') %}
|
||||
<dialog id="signal">
|
||||
<article>
|
||||
{% for article in collections.articles %}
|
||||
{% if article.fileSlug == 'what' %}
|
||||
{{ article.content | safe }}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</article>
|
||||
</dialog>
|
||||
<section>
|
||||
<nav class="navbar" id="floating">
|
||||
<ul role="list">
|
||||
<li>
|
||||
<a href="../">
|
||||
<button popovertarget="mobile" aria-label="Toggle menu">
|
||||
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="{{ back }}"></path>
|
||||
<path d="{{menu}}"></path>
|
||||
</svg>
|
||||
Back
|
||||
</a>
|
||||
</button>
|
||||
</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 %}
|
||||
<button id="theme-toggle" aria-label="Toggle theme">
|
||||
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="{{ theme }}">
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
<details open="">
|
||||
<summary>
|
||||
Options
|
||||
</summary>
|
||||
</nav>
|
||||
</section>
|
||||
<section id="mobile" popover="">
|
||||
<nav class="navbar">
|
||||
{% include "nav.njk" %}
|
||||
<ul role="list">
|
||||
<li>
|
||||
<button id="theme-toggle">
|
||||
<button id="theme-toggle" aria-label="Toggle theme">
|
||||
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="{{ theme }}">
|
||||
</svg>
|
||||
Toggle theme
|
||||
</button>
|
||||
</li>
|
||||
</li>
|
||||
</ul>
|
||||
<script src="/assets/js/theme.js"></script>
|
||||
</details>
|
||||
<details open="">
|
||||
<summary>
|
||||
Outgoing
|
||||
</summary>
|
||||
<ul role="list">
|
||||
{% for key, items in outgoing %}
|
||||
{% for item in items %}
|
||||
{% if key != "signal" %}
|
||||
<li>
|
||||
<a href="{{ item.src }}">
|
||||
<img src="/assets/img/icon/{{ item.icon }}" alt="" aria-hidden="true">{{ key | capitalize }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if key == "signal" %}
|
||||
<li>
|
||||
<button command="show-modal" commandfor="{{ items[0].id }}">
|
||||
<img src="/assets/img/icon/{{ items[0].icon }}" alt="" aria-hidden="true">{{ key | capitalize }}
|
||||
</button>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<dialog id="signal">
|
||||
<article>
|
||||
{% for article in collections.articles %}
|
||||
{% if article.fileSlug == 'what' %}
|
||||
{{ article.content | safe }}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</article>
|
||||
</dialog>
|
||||
</details>
|
||||
<script src="/assets/js/what.js" type="module"></script>
|
||||
<script src="/assets/js/details-save.js"></script>
|
||||
</nav>
|
||||
</section>
|
||||
<header>
|
||||
<h1>
|
||||
{% for page in sortedPages %}
|
||||
{% if currentUrl.split('/')[1] === page.url.split('/')[1]|slugify %}
|
||||
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="{{ page.data.icon }}"></path>
|
||||
</svg>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{{ page.url.split('/')[1]|slugify|capitalize }}
|
||||
</h1>
|
||||
</header>
|
||||
<main>
|
||||
{{ content | safe }}
|
||||
</main>
|
||||
<footer>
|
||||
<span id="message" aria-label="Random footer message">made with love</span>
|
||||
<script src="/assets/js/footer.js"></script>
|
||||
</footer>
|
||||
<script src="/assets/js/what.js" type="module"></script>
|
||||
<script src="/assets/js/theme.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</nav>
|
||||
<header>
|
||||
<h1>
|
||||
{% for page in sortedPages %}
|
||||
{% if currentUrl.split('/')[1] === page.url.split('/')[1]|slugify %}
|
||||
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="{{ page.data.icon }}"></path>
|
||||
</svg>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{{ page.url.split('/')[1]|slugify|capitalize }}
|
||||
</h1>
|
||||
</header>
|
||||
<main>
|
||||
{{ content | safe }}
|
||||
</main>
|
||||
<footer>
|
||||
<span id="message" aria-label="Random footer message">made with love</span>
|
||||
<script src="/assets/js/footer.js"></script>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
24
_src/_includes/nav-main.njk
Normal file
24
_src/_includes/nav-main.njk
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<section>
|
||||
<h3>Pages</h3>
|
||||
<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>
|
||||
Go 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.fileSlug | capitalize }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
23
_src/_includes/nav-outgoing.njk
Normal file
23
_src/_includes/nav-outgoing.njk
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<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>
|
||||
2
_src/_includes/nav.njk
Normal file
2
_src/_includes/nav.njk
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
{% include "nav-main.njk" %}
|
||||
{% include "nav-outgoing.njk" %}
|
||||
|
|
@ -1,10 +1,12 @@
|
|||
@import url("./media.css");
|
||||
@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,
|
||||
:is(a, button):not(span *, .postscript *, body nav *),
|
||||
.link,
|
||||
#posts a {
|
||||
color: var(--citrus-dark);
|
||||
transition: background-color var(--trans);
|
||||
|
|
@ -34,7 +36,8 @@ ul:not([role]) li::before {
|
|||
background-color: var(--citrus-dark-extra);
|
||||
}
|
||||
article {
|
||||
background: var(--noise),
|
||||
background:
|
||||
var(--noise),
|
||||
linear-gradient(
|
||||
var(--citrus-light) 70%,
|
||||
color-mix(in lch, var(--citrus-mix-light), var(--citrus-light)) 100%
|
||||
|
|
@ -50,30 +53,7 @@ article {
|
|||
background-color: var(--citrus-dark);
|
||||
color: var(--citrus-primary);
|
||||
}
|
||||
&:not(pre,code,a) {
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
42
_src/assets/css/citrus/media.css
Normal file
42
_src/assets/css/citrus/media.css
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
/* default.css */
|
||||
@media screen and (min-width: 920px) {
|
||||
header {
|
||||
width: var(--view);
|
||||
border-right-width: 4px;
|
||||
border-right-style: solid;
|
||||
border-bottom-width: 4px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-right-radius: 100px;
|
||||
margin-left: calc(var(--view) - 4px);
|
||||
position: relative;
|
||||
padding: calc(var(--pad-m) - 2px) var(--pad-sm);
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
/* nav.css */
|
||||
@media screen and (max-width: 920px) {
|
||||
header {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border-right: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
width: 100% !important;
|
||||
background-attachment: none !important;
|
||||
background-image: none !important;
|
||||
background-size: none !important;
|
||||
}
|
||||
body::after {
|
||||
content: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* gallery.css */
|
||||
@media screen and (max-width: 450px) {
|
||||
#artworks & article {
|
||||
&::before {
|
||||
width: calc(100% + var(--pad-l) * 2) !important;
|
||||
margin: -3rem 0 0 -16px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +1,18 @@
|
|||
body > nav {
|
||||
border-right: 4px solid;
|
||||
.navbar {
|
||||
color: var(--citrus-dark);
|
||||
& summary {
|
||||
filter: drop-shadow(2px 0 var(--citrus-dark))
|
||||
drop-shadow(-2px 0 var(--citrus-dark))
|
||||
drop-shadow(0 2px var(--citrus-dark))
|
||||
drop-shadow(0px -2px var(--citrus-dark));
|
||||
color: var(--citrus-light);
|
||||
& 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);
|
||||
|
|
@ -24,34 +28,28 @@ body > nav {
|
|||
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);
|
||||
}
|
||||
}
|
||||
body > nav,
|
||||
header {
|
||||
#mobile > nav,
|
||||
header,
|
||||
#floating {
|
||||
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, #mobile > nav {
|
||||
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;
|
||||
}
|
||||
#mobile > nav {
|
||||
height: max-content;
|
||||
border-bottom-right-radius: var(--pad-l);
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
@import url("./media.css");
|
||||
@import url("./variables.css");
|
||||
@import url("./nav.css");
|
||||
@import url("./motion.css");
|
||||
|
||||
|
||||
:root {
|
||||
--view: 18rem;
|
||||
|
|
@ -197,6 +198,7 @@ article {
|
|||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
margin: 0 0 0 calc(var(--pad-xl) * -1);
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -259,7 +261,7 @@ article a:not(.link *, a:has(img)) {
|
|||
padding: 0 var(--pad-sm);
|
||||
}
|
||||
|
||||
dialog button[commandfor] {
|
||||
dialog button[commandfor="signal"] {
|
||||
width: max-content;
|
||||
padding: 0 var(--pad-sm);
|
||||
margin: 0 auto;
|
||||
|
|
@ -315,37 +317,3 @@ dialog#signal {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -144,17 +144,3 @@ article#interests {
|
|||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@
|
|||
justify-self: center;
|
||||
& a,
|
||||
img {
|
||||
z-index: 1;
|
||||
display: inherit;
|
||||
flex-direction: inherit;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,77 @@
|
|||
/* default.css */
|
||||
@media screen and (max-width: 920px) {
|
||||
body::after {
|
||||
content: "" !important;
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
header {
|
||||
padding-left: 0 !important;
|
||||
padding-top: var(--pad-m) !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: var(--pad-l) !important;
|
||||
}
|
||||
|
||||
main > section {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
main > section {
|
||||
width: initial !important;
|
||||
}
|
||||
|
||||
article {
|
||||
max-width: initial !important;
|
||||
width: auto !important;
|
||||
}
|
||||
#mobile > nav {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* nav.css */
|
||||
@media screen and (min-width: 920px) {
|
||||
li:has(> button[popovertarget="mobile"]) {
|
||||
display: none !important;
|
||||
}
|
||||
#floating {
|
||||
display: none;
|
||||
}
|
||||
#mobile {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 920px) {
|
||||
#floating {
|
||||
position: sticky !important;
|
||||
top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* home.css */
|
||||
@media screen and (max-width: 920px) {
|
||||
article#interests {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
|
||||
& ul {
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
& li a {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
/* Scrolling pride flag text */
|
||||
article#bio span[id],
|
||||
|
|
@ -1,43 +1,38 @@
|
|||
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 {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
z-index: 2;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
padding: var(--pad-l);
|
||||
position: fixed;
|
||||
width: var(--view);
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: none;
|
||||
gap: var(--pad-m);
|
||||
|
||||
& li *:is(a, button) {
|
||||
align-items: center;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-radius: var(--round);
|
||||
}
|
||||
|
||||
& section {
|
||||
border-radius: var(--round);
|
||||
font-weight: bold;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
|
||||
& h3 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
height: var(--pad-xl);
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
& * svg,
|
||||
li img {
|
||||
margin: 0 8px 0 8px;
|
||||
|
|
@ -45,10 +40,6 @@ body > nav {
|
|||
align-self: center;
|
||||
}
|
||||
|
||||
& details {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
& ul {
|
||||
margin: var(--pad-sm);
|
||||
padding: 0;
|
||||
|
|
@ -65,11 +56,7 @@ body > nav {
|
|||
}
|
||||
}
|
||||
|
||||
& details {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
& li *:is(a ,button) {
|
||||
& li *:is(a, button) {
|
||||
display: flex;
|
||||
font-size: 1.125rem;
|
||||
width: 100%;
|
||||
|
|
@ -79,68 +66,57 @@ body > nav {
|
|||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
#mobile > 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;
|
||||
}
|
||||
@media screen and (max-width: 920px) {
|
||||
body > nav {
|
||||
position: initial;
|
||||
width: 100%;
|
||||
overflow: initial;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
& li *:is(a ,button) {
|
||||
line-height: initial;
|
||||
}
|
||||
& details {
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
}
|
||||
}
|
||||
body > nav::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 620px) {
|
||||
body > nav {
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
|
||||
& details {
|
||||
height: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
body::after {
|
||||
content: "";
|
||||
}
|
||||
#mobile > 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;
|
||||
}
|
||||
|
||||
button[popovertarget="mobile"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#floating {
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
border-bottom-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-width: 2px;
|
||||
border-right-width: 2px;
|
||||
border-bottom-right-radius: var(--pad-l);
|
||||
}
|
||||
|
||||
#mobile {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: 0;
|
||||
}
|
||||
#mobile > nav {
|
||||
border-right-style: solid;
|
||||
border-right-width: 2px;
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
border-color: var(--secondary-300);
|
||||
background-color: var(--secondary-200);
|
||||
|
||||
& aside {
|
||||
& #mobile {
|
||||
box-shadow: inset 0 0 0 2px var(--secondary-500);
|
||||
background-color: var(--secondary-300);
|
||||
}
|
||||
|
|
@ -90,21 +90,15 @@
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
& > nav {
|
||||
background-color: inherit;
|
||||
& #mobile > nav,
|
||||
#floating {
|
||||
background-color: var(--secondary-100);
|
||||
border-color: var(--secondary);
|
||||
& details {
|
||||
& section {
|
||||
background-color: var(--secondary-100);
|
||||
&:not([open]) {
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
& details[open] {
|
||||
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);
|
||||
|
|
@ -122,7 +116,7 @@
|
|||
}
|
||||
|
||||
&::after,
|
||||
& > nav::before {
|
||||
& #mobile > nav::before {
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
border-color: var(--primary-300);
|
||||
background-color: var(--primary-200);
|
||||
|
||||
& aside {
|
||||
& #mobile {
|
||||
box-shadow: inset 0 0 0 2px var(--primary-500);
|
||||
background-color: var(--primary-300);
|
||||
}
|
||||
|
|
@ -90,21 +90,15 @@
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
& > nav {
|
||||
background-color: inherit;
|
||||
& #mobile > nav,
|
||||
#floating {
|
||||
background-color: var(--primary-100);
|
||||
border-color: var(--primary-dark-500);
|
||||
& details {
|
||||
& section {
|
||||
background-color: var(--primary-100);
|
||||
&:not([open]) {
|
||||
color: var(--primary-dark-500);
|
||||
}
|
||||
}
|
||||
|
||||
& details[open] {
|
||||
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);
|
||||
|
|
@ -122,7 +116,7 @@
|
|||
}
|
||||
|
||||
&::after,
|
||||
& > nav::before {
|
||||
& #mobile > nav::before {
|
||||
background-color: var(--primary-dark-500);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -133,8 +133,3 @@
|
|||
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");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
4
_src/data/changelog/2026-03-23.md
Normal file
4
_src/data/changelog/2026-03-23.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
## {{page.fileSlug|readable}}
|
||||
|
||||
- Changed sidebar
|
||||
- Toggleable on mobile
|
||||
|
|
@ -22,7 +22,6 @@
|
|||
>Mastodon</a
|
||||
>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>
|
||||
This site eats cookies for breakfast.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
---
|
||||
title: "Blog"
|
||||
order: 3
|
||||
icon: "m5 3h15l7 7v20H5zm5 22h12v-3H10zm0-6h12v-3H10zm0-6h9v-3h-9z"
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
---
|
||||
title: "Changelog"
|
||||
order: 2
|
||||
icon: "M10 25H21V22H10Zm4-13H10v3h4v4h3V15h4V12H17V8H14ZM5 3H20l7 7V30H5Z"
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
---
|
||||
title: "Gallery"
|
||||
order: 4
|
||||
icon: "M2 2V30H30V2H2M5 26l6-9 5 6 5-9 6 12H5"
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
---
|
||||
title: "Home"
|
||||
order: 1
|
||||
icon: "M20 20V30h8V12L16 2 4 12V30h8V20Z"
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"layout": "base",
|
||||
"permalink": "/{{ title | slug }}/",
|
||||
"permalink": "/{{ page.fileSlug }}/",
|
||||
"tags": "pages"
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue