fix some stuff with fics loader
This commit is contained in:
parent
e56feaf1d0
commit
be0ffaeb93
1
public/.well-known/atproto-did
Normal file
1
public/.well-known/atproto-did
Normal file
@ -0,0 +1 @@
|
||||
did:plc:dg2qmmjic7mmecrbvpuhtvh6
|
||||
@ -1,9 +0,0 @@
|
||||
title: truly
|
||||
series: honkai
|
||||
publishedAt: 2021-05-20
|
||||
summary:
|
||||
this is crazy but...
|
||||
|
||||
but would you
|
||||
|
||||
> trust me?
|
||||
@ -1,11 +0,0 @@
|
||||
---
|
||||
title: take me on
|
||||
publishedAt: 2025-01-05
|
||||
notes: hahah
|
||||
---
|
||||
|
||||
dksafjasldkjfksdl
|
||||
kjfdlskafjaslk
|
||||
k
|
||||
|
||||
ss sddd
|
||||
@ -1,9 +0,0 @@
|
||||
title = "this is a test"
|
||||
series = [
|
||||
"test",
|
||||
"fandom 2"
|
||||
]
|
||||
publishedAt = 2022-12-22
|
||||
summary = """
|
||||
yeller
|
||||
"""
|
||||
@ -1,10 +0,0 @@
|
||||
---
|
||||
title: ch 1
|
||||
publishedAt: 2022-11-01
|
||||
notes: i wrote this in a fugue state while listening to [Waste by Oh Wonder](https://www.youtube.com/watch?v=Ar1grAdGkec)
|
||||
sortOrder: 1
|
||||
---
|
||||
|
||||
test
|
||||
|
||||
two
|
||||
@ -1,13 +0,0 @@
|
||||
---
|
||||
title: chapter 2
|
||||
publishedAt: 2023-12-12
|
||||
notes: i wrote this in a fugue state while listening to [Waste by Oh Wonder](https://www.youtube.com/watch?v=Ar1grAdGkec)
|
||||
sortOrder: 2
|
||||
---
|
||||
|
||||
tksdfalkjflkd
|
||||
kasdjfldk
|
||||
k
|
||||
|
||||
|
||||
kdsafsd
|
||||
@ -4,8 +4,6 @@ publishedAt: 2020-12-20T19:18:00
|
||||
notes: i wrote this in a fugue state while listening to [Waste by Oh Wonder](https://www.youtube.com/watch?v=Ar1grAdGkec)
|
||||
---
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -6,10 +6,6 @@ import Navbar from "~/Navbar.astro";
|
||||
import formatDate from "@/utils/formatDate";
|
||||
import moods from "@/utils/moods";
|
||||
|
||||
import outerBBS from "$/guild-bbs.png";
|
||||
import innerBBS from "$/guild-bbs-content.png";
|
||||
import sideBBS from "$/guild-bbs-list.png";
|
||||
|
||||
interface Props {
|
||||
id?: string;
|
||||
title: string;
|
||||
@ -31,435 +27,96 @@ blog.sort((a, b) => b.data.pubDate!.valueOf() - a.data.pubDate!.valueOf());
|
||||
---
|
||||
<Layout {title}>
|
||||
<Fragment slot="head">
|
||||
<link rel="preload" href={outerBBS.src} as="image" />
|
||||
<link rel="preload" href={innerBBS.src} as="image" />
|
||||
<link rel="preload" href={sideBBS.src} as="image" />
|
||||
<Font cssVariable="--arial" preload />
|
||||
<Font cssVariable="--dotumche-11" preload />
|
||||
<Font cssVariable="--dotumche-12" preload />
|
||||
<Font cssVariable="--dotum-11" preload />
|
||||
<Font cssVariable="--dotum-12" preload />
|
||||
<slot name="head" />
|
||||
</Fragment>
|
||||
<Navbar />
|
||||
|
||||
<main>
|
||||
<article id={id}>
|
||||
<header>
|
||||
<h1>{title}</h1>
|
||||
<div class="info">
|
||||
<time datetime={formatDate(date, true)}>
|
||||
<span class="title">Date</span>
|
||||
<span class="desc">{formatDate(date)}</span>
|
||||
</time>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
{currently && (
|
||||
<aside>
|
||||
<h2>Current</h2>
|
||||
{currently?.mood && (
|
||||
<dl>
|
||||
<dt class="title">Mood</dt>
|
||||
<dd class="desc">
|
||||
<Image src={`/src/assets/moods/${moods.find(mood => mood === currently?.mood)}.png`} width={36} height={36} alt="" />
|
||||
{currently.mood}
|
||||
</dd>
|
||||
</dl>
|
||||
)}
|
||||
{currently.playing && (
|
||||
<dl>
|
||||
<dt class="title">Game</dt>
|
||||
<dd class="desc">{currently.playing}</dd>
|
||||
</dl>
|
||||
)}
|
||||
{currently.watching && (
|
||||
<dl>
|
||||
<dt class="title">Show</dt>
|
||||
<dd class="desc">{currently.watching}</dd>
|
||||
</dl>
|
||||
)}
|
||||
{currently.reading && (
|
||||
<dl>
|
||||
<dt class="title">Book</dt>
|
||||
<dd class="desc">{currently.reading}</dd>
|
||||
</dl>
|
||||
)}
|
||||
{currently.listening && (
|
||||
<dl>
|
||||
<dt>Currently listening</dt>
|
||||
<dd>{currently.listening}</dd>
|
||||
</dl>
|
||||
)}
|
||||
</aside>
|
||||
)}
|
||||
</article>
|
||||
|
||||
<slot name="pagination" />
|
||||
|
||||
<nav id="blog-links">
|
||||
<div class="inner">
|
||||
<div class="nav-section">
|
||||
<h1><span class="title">recent posts</span></h1>
|
||||
<h2>recent posts</h2>
|
||||
<ul>
|
||||
{blog.map(entry => (
|
||||
<li>
|
||||
<span class="item">
|
||||
<a href={`/blog/${entry.id}`} class="entry-title" aria-labelledby={entry.id}>
|
||||
<span style="display: none">{entry.data.title}</span>
|
||||
</a>
|
||||
<span id={entry.id} class="link" aria-hidden="true">{entry.data.title}</span>
|
||||
<time datetime={formatDate(entry.data.pubDate!, true)}>
|
||||
{formatDate(entry.data.pubDate!, false, "MM/DD/YY")}
|
||||
</time>
|
||||
</span>
|
||||
<a href={`/blog/${entry.id}`} class="entry-title" aria-labelledby={entry.id}>
|
||||
{entry.data.title}
|
||||
</a>
|
||||
<time datetime={formatDate(entry.data.pubDate!, true)}>
|
||||
{formatDate(entry.data.pubDate!, false, "MM/DD/YY")}
|
||||
</time>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-section">
|
||||
<h1><span class="title">other links</span></h1>
|
||||
<h2>other links</h2>
|
||||
<ul>
|
||||
<li><span class="item"><a href="/blog" class="link">archive</a></span></li>
|
||||
<li><span class="item"><a href="/blog/rss.xml" class="link">rss feed</a></span></li>
|
||||
<li><a href="/blog" class="link">archive</a></li>
|
||||
<li><a href="/blog/rss.xml" class="link">rss feed</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<article id={id}>
|
||||
<div class="inner">
|
||||
<header>
|
||||
<h1>{title}</h1>
|
||||
<hr />
|
||||
<div class="info">
|
||||
<time datetime={formatDate(date, true)}>
|
||||
<span class="title">Date</span>
|
||||
<span class="desc">{formatDate(date)}</span>
|
||||
</time>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
{currently && (
|
||||
<aside>
|
||||
<h2>Current</h2>
|
||||
{currently?.mood && (
|
||||
<dl>
|
||||
<dt class="title">Mood</dt>
|
||||
<dd class="desc">
|
||||
<Image src={`/src/assets/moods/${moods.find(mood => mood === currently?.mood)}.png`} width={36} height={36} alt="" />
|
||||
{currently.mood}
|
||||
</dd>
|
||||
</dl>
|
||||
)}
|
||||
{currently.playing && (
|
||||
<dl>
|
||||
<dt class="title">Game</dt>
|
||||
<dd class="desc">{currently.playing}</dd>
|
||||
</dl>
|
||||
)}
|
||||
{currently.watching && (
|
||||
<dl>
|
||||
<dt class="title">Show</dt>
|
||||
<dd class="desc">{currently.watching}</dd>
|
||||
</dl>
|
||||
)}
|
||||
{currently.reading && (
|
||||
<dl>
|
||||
<dt class="title">Book</dt>
|
||||
<dd class="desc">{currently.reading}</dd>
|
||||
</dl>
|
||||
)}
|
||||
{currently.listening && (
|
||||
<dl>
|
||||
<dt>Currently listening</dt>
|
||||
<dd>{currently.listening}</dd>
|
||||
</dl>
|
||||
)}
|
||||
</aside>
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
<slot name="pagination" />
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
<style define:vars={{ outerBorder: `url(${outerBBS.src})`, innerBorder: `url(${innerBBS.src})`, sideBorder: `url(${sideBBS.src})` }}>
|
||||
body {
|
||||
image-rendering: pixelated;
|
||||
--bg-0: #fff;
|
||||
--bg-1: #eeffff;
|
||||
--bg-2: #eeeeff;
|
||||
--bg-3: #eee;
|
||||
--bg-4: #ddddee;
|
||||
--bg-5: #ddeeee;
|
||||
--bg-6: #ccccdd;
|
||||
--bg-7: #ccddee;
|
||||
--bg-8: #8888bb;
|
||||
--border-0: #000;
|
||||
--border-1: #334466;
|
||||
--border-2: #6699aa;
|
||||
--border-3: #7799bb;
|
||||
--border-4: #88aabb;
|
||||
--border-5: #99bbcc;
|
||||
--border-6: #bbccdd;
|
||||
--normal-color: #335577;
|
||||
--active-color: #aa0033;
|
||||
--active-border: #442266;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
h1 { font: bold 1rem var(--arial-font); }
|
||||
h2 {
|
||||
font: normal 1.5rem var(--dotum-12-font);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
main {
|
||||
font: 1rem var(--arial-font);
|
||||
letter-spacing: 1px;
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(auto, 75ch);
|
||||
justify-content: center;
|
||||
|
||||
@media screen and (max-width: 1360px) {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 76em) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
#blog-links {
|
||||
min-width: 28ch;
|
||||
border: 2px solid var(--border-0);
|
||||
border-image: var(--sideBorder) 22 8 40 7 fill / 44px 16px 80px 14px;
|
||||
background-color: var(--bg-0);
|
||||
padding: 42px 10px 78px;
|
||||
margin-right: -2px;
|
||||
|
||||
.inner {
|
||||
display: flex;
|
||||
height: calc(100% - 34px);
|
||||
flex-flow: column wrap;
|
||||
background-color: var(--bg-3);
|
||||
padding: 16px 6px;
|
||||
margin: 18px 20px 16px;
|
||||
border: 2px solid var(--border-6);
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding: 6px 2px;
|
||||
border-block: 2px solid var(--border-3);
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
background-color: var(--bg-8);
|
||||
color: var(--bg-0);
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
padding: 5px 2px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
padding: 4px 2px;
|
||||
border-bottom: 2px solid var(--bg-4);
|
||||
max-width: 100%;
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
font: normal 1.375rem var(--dotum-11-font);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
&.entry-title {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
~ .link {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 19ch;
|
||||
|
||||
@media screen and (max-width: 76em) {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
flex: 1;
|
||||
background-color: var(--bg-1);
|
||||
padding: 6px;
|
||||
color: var(--border-0);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
time {
|
||||
background-color: var(--bg-5);
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.link { background-color: var(--bg-7); }
|
||||
time { background-color: var(--border-6); }
|
||||
}
|
||||
}
|
||||
&:last-child { border: none; }
|
||||
}
|
||||
}
|
||||
|
||||
.nav-section {
|
||||
background-color: var(--bg-0);
|
||||
max-width: 100%;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 2px solid var(--border-2);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 76em) {
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
article {
|
||||
display: flex;
|
||||
border: 2px solid var(--border-0);
|
||||
border-image: var(--outerBorder) 19 9 38 11 fill / 38px 18px 76px 22px;
|
||||
background-color: var(--bg-3);
|
||||
padding: 36px 16px 74px 20px;
|
||||
|
||||
.inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 2px solid var(--border-2);
|
||||
border-image: var(--innerBorder) 3 2 2 fill / 6px 4px 4px;
|
||||
margin: 14px 4px 8px;
|
||||
padding: 4px 2px 2px;
|
||||
background-color: var(--bg-0);
|
||||
}
|
||||
|
||||
.title {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
font: normal 1.5em var(--dotum-12-font);
|
||||
background-color: var(--bg-2);
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.desc {
|
||||
background-color: var(--bg-4);
|
||||
padding: 4px 6px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
header {
|
||||
border-bottom: 2px solid var(--bg-6);
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 6px 2px;
|
||||
padding: 2px 0;
|
||||
background-color: var(--border-6);
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 2px;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: var(--bg-2) var(--bg-2) var(--bg-1) var(--bg-1);
|
||||
padding: 2px 4px;
|
||||
|
||||
time {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: var(--border-5);
|
||||
border: none;
|
||||
height: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
/* position: relative; */
|
||||
flex: 1;
|
||||
background-attachment: local;
|
||||
background-image: linear-gradient(to right, var(--bg-0) 5px, transparent 2px), linear-gradient(var(--bg-4) 2px, transparent 2px);
|
||||
background-size: 10px 2em;
|
||||
background-position-y: calc(2em - 2px);
|
||||
margin: 2rem 1rem;
|
||||
padding: 0 1rem;
|
||||
line-height: 2;
|
||||
max-height: 38em;
|
||||
overflow-y: auto;
|
||||
margin-trim: block;
|
||||
|
||||
p {
|
||||
margin-block: 2em;
|
||||
|
||||
&:has(> img) {
|
||||
margin-block: 0;
|
||||
}
|
||||
}
|
||||
a, del, s { text-decoration-thickness: 2px; }
|
||||
a {
|
||||
color: var(--normal-color);
|
||||
|
||||
&:visited {
|
||||
color: var(--active-border);
|
||||
}
|
||||
&:hover {
|
||||
color: var(--active-color);
|
||||
}
|
||||
&:active, &:focus {
|
||||
color: var(--normal-color);
|
||||
}
|
||||
}
|
||||
|
||||
figure {
|
||||
border: 2px solid var(--border-5);
|
||||
border-image: var(--innerBorder) 3 2 2 fill / 6px 4px 4px;
|
||||
padding: 4px 2px 2px;
|
||||
background-color: var(--bg-0);
|
||||
width: max-content;
|
||||
margin: 0 auto;
|
||||
|
||||
img {
|
||||
min-height: 2em;
|
||||
border-bottom: 2px solid var(--border-3);
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-family: var(--dotum-11-font);
|
||||
font-size: calc(1em + 2px);
|
||||
color: var(--border-1);
|
||||
background-color: var(--bg-3);
|
||||
margin: 4px;
|
||||
padding: 0 6px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@supports not (margin-trim: block) {
|
||||
p:first-child { margin-block-start: 0; }
|
||||
p:last-child { margin-block-end: 0; }
|
||||
}
|
||||
|
||||
@media screen and (max-width: 950px) {
|
||||
background-position-y: 0.8rem;
|
||||
padding: 1rem;
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
aside {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: repeat(4, auto);
|
||||
border-top: 2px solid var(--border-4);
|
||||
|
||||
h2 {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
grid-area: 1 / 1 / -1;
|
||||
padding: 0 4px 0 8px;
|
||||
height: 100%;
|
||||
border-top: 2px solid var(--border-1);
|
||||
border-right: 2px solid var(--border-4);
|
||||
background-color: var(--bg-7);
|
||||
}
|
||||
|
||||
dl {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2px 6px;
|
||||
border-bottom: 2px solid var(--border-4);
|
||||
border-top: 2px solid var(--border-1);
|
||||
border-left: 2px solid var(--border-1);
|
||||
|
||||
&:first-of-type > dd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin: -2px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
&:last-child { border-bottom: none; }
|
||||
}
|
||||
}
|
||||
}
|
||||
<style>
|
||||
</style>
|
||||
@ -2,7 +2,6 @@
|
||||
import Blog from '@/layouts/Blog.astro';
|
||||
import type { GetStaticPaths } from 'astro';
|
||||
import { getCollection, render } from 'astro:content';
|
||||
import buttons from "$/guild-bbs-buttons.png";
|
||||
|
||||
export const getStaticPaths = (async () => {
|
||||
const blog = await getCollection("blog");
|
||||
@ -24,7 +23,6 @@ const next = current === 0 ? undefined : blog[current - 1];
|
||||
<Blog id={entry.id} title={entry.data.title!} date={entry.data.pubDate!} currently={entry.data.currently}>
|
||||
<Fragment slot="head">
|
||||
<meta name="description" content={entry.body?.substring(0, 150) + "…"} />
|
||||
<link rel="preload" href={buttons.src} as="image" />
|
||||
</Fragment>
|
||||
|
||||
<Content />
|
||||
@ -33,116 +31,15 @@ const next = current === 0 ? undefined : blog[current - 1];
|
||||
<footer id="blog-pagination" slot="pagination">
|
||||
{previous && (
|
||||
<a id="previous" aria-label="go to previous post" href={`/blog/${previous.id}`}>
|
||||
<div class="arrow" />
|
||||
<div class="title">
|
||||
<span>{previous.data.title}</span>
|
||||
</div>
|
||||
<span>{previous.data.title}</span>
|
||||
</a>
|
||||
)}
|
||||
|
||||
{next && (
|
||||
<a id="next" aria-label="go to next post" href={`/blog/${next.id}`}>
|
||||
<div class="title">
|
||||
<span>{next.data.title}</span>
|
||||
</div>
|
||||
<div class="arrow" />
|
||||
<span>{next.data.title}</span>
|
||||
</a>
|
||||
)}
|
||||
</footer>
|
||||
)}
|
||||
</Blog>
|
||||
|
||||
<style define:vars={{ buttons: `url(${buttons.src})` }}>
|
||||
#blog-pagination {
|
||||
margin: 1rem 0;
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
|
||||
.arrow {
|
||||
width: 36px;
|
||||
height: 50px;
|
||||
background: var(--buttons) no-repeat top left;
|
||||
}
|
||||
|
||||
#previous {
|
||||
grid-column: 1 / 2;
|
||||
justify-self: left;
|
||||
|
||||
.arrow { background-position: 0 0; }
|
||||
&:hover .arrow { background-position: -36px 0; }
|
||||
&:active .arrow, &:focus .arrow { background-position: -72px 0; }
|
||||
|
||||
.title {
|
||||
border-left: none;
|
||||
margin-left: -2px;
|
||||
padding-left: calc(0.5em + 2px);
|
||||
}
|
||||
}
|
||||
|
||||
#next {
|
||||
grid-column: 2 / -1;
|
||||
justify-self: right;
|
||||
|
||||
.arrow { background-position: -108px 0; }
|
||||
&:hover .arrow { background-position: -144px 0; }
|
||||
&:active .arrow, &:focus .arrow { background-position: -180px 0; }
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-right: none;
|
||||
margin-right: -2px;
|
||||
padding-right: calc(0.5em + 2px);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: stretch;
|
||||
font: normal 1.5rem var(--dotum-12-font);
|
||||
color: var(--normal-color);
|
||||
text-decoration: none;
|
||||
|
||||
.title {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
padding: 0 0.5em;
|
||||
background-color: var(--bg-7);
|
||||
border: 2px solid var(--border-1);
|
||||
box-shadow:
|
||||
inset 2px 2px 0 0 var(--bg-0),
|
||||
inset 4px 4px 0 0 var(--bg-5),
|
||||
inset -2px -2px 0 0 var(--border-5),
|
||||
inset -4px -4px 0 0 var(--border-6);
|
||||
|
||||
@media screen and (468px > width) {
|
||||
> span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: calc(12ch + 1em);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--active-color);
|
||||
.title { border-color: var(--active-border); }
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
color: var(--normal-color);
|
||||
.title {
|
||||
border-color: var(--border-1);
|
||||
box-shadow:
|
||||
inset -2px -2px 0 0 var(--bg-0),
|
||||
inset -4px -4px 0 0 var(--bg-5),
|
||||
inset 2px 2px 0 0 var(--border-5),
|
||||
inset 4px 4px 0 0 var(--border-6);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</Blog>
|
||||
@ -1,6 +1,5 @@
|
||||
---
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import Figure from "~/Figure.astro";
|
||||
import formatDate from "@/utils/formatDate";
|
||||
import { getCollection } from "astro:content";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
@ -59,14 +59,14 @@ const notes = fic.rendered && await parser.parse((fic.rendered.metadata!.frontma
|
||||
</dl>
|
||||
|
||||
<div class="links">
|
||||
{fic.data.chapters && <>
|
||||
<a class="button" href={`/fics/${chapters[0].id}`}>start reading</a>
|
||||
{chapters && <>
|
||||
{/* <a class="button" href={`/fics/${chapters[0].id}`}>start reading</a> */}
|
||||
<a class="button" href={`/fics/${Astro.params.ficId}/rss.xml`}>rss feed</a>
|
||||
</>}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{fic.data.chapters && (
|
||||
{chapters && (
|
||||
<h2>chapters</h2>
|
||||
<ul>
|
||||
{chapters.map(chapter => (
|
||||
@ -75,7 +75,6 @@ const notes = fic.rendered && await parser.parse((fic.rendered.metadata!.frontma
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{fic.body && (
|
||||
<section id="oneshot">
|
||||
<ChapterContent lastModified={lastMod} notes={notes}>
|
||||
|
||||
@ -1,21 +1,24 @@
|
||||
---
|
||||
import { Font } from 'astro:assets';
|
||||
import Layout from '@/layouts/Layout.astro';
|
||||
import Navbar from '~/Navbar.astro';
|
||||
|
||||
import bulletin from "$/acnl-bulletin.png";
|
||||
import outerBBS from "$/guild-bbs.png";
|
||||
import innerBBS from "$/guild-bbs-content.png";
|
||||
import sideBBS from "$/guild-bbs-list.png";
|
||||
import buttons from "$/guild-bbs-buttons.png";
|
||||
---
|
||||
<Layout>
|
||||
<Fragment slot="head">
|
||||
<link rel="preload" href={outerBBS.src} as="image" />
|
||||
<link rel="preload" href={innerBBS.src} as="image" />
|
||||
<link rel="preload" href={sideBBS.src} as="image" />
|
||||
<link rel="preload" href={buttons.src} as="image" />
|
||||
<Font cssVariable="--arial" preload />
|
||||
</Fragment>
|
||||
|
||||
<Navbar />
|
||||
<main>
|
||||
<section id="welcome">
|
||||
<div class="card">
|
||||
<h1>welcome!</h1>
|
||||
<article>
|
||||
this is
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="updates">
|
||||
<article class="update card">
|
||||
<h1>update title</h1>
|
||||
@ -24,6 +27,26 @@ import bulletin from "$/acnl-bulletin.png";
|
||||
<p>some stuff happened</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<footer id="updates-pagination">
|
||||
<a id="previous" aria-label="go to previous post" href="javascript:void(0)">
|
||||
<div class="arrow" />
|
||||
<div class="title">prev</div>
|
||||
</a>
|
||||
<a id="next" aria-label="go to next post" href="javascript:void(0)">
|
||||
<div class="title">next</div>
|
||||
<div class="arrow" />
|
||||
</a>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
<section id="welcome">
|
||||
<div class="card">
|
||||
<h1>welcome!</h1>
|
||||
<article>
|
||||
this is
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="wall">
|
||||
@ -36,76 +59,146 @@ import bulletin from "$/acnl-bulletin.png";
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
<style define:vars={{ bulletin: `url(${bulletin.src})` }}>
|
||||
body {
|
||||
--acnl-border: #ac6835;
|
||||
--acnl-bg: #8c5321;
|
||||
--card-border-1: #ffd53c;
|
||||
--card-border-2: #5acbbd;
|
||||
--card-bg: white;
|
||||
<style define:vars={{ outerBorder: `url(${outerBBS.src})`, innerBorder: `url(${innerBBS.src})`, sideBorder: `url(${sideBBS.src})`, buttons: `url(${buttons.src})` }}>
|
||||
main {
|
||||
image-rendering: pixelated;
|
||||
--bg-0: #fff;
|
||||
--bg-1: #eeffff;
|
||||
--bg-2: #eeeeff;
|
||||
--bg-3: #eee;
|
||||
--bg-4: #ddddee;
|
||||
--bg-5: #ddeeee;
|
||||
--bg-6: #ccccdd;
|
||||
--bg-7: #ccddee;
|
||||
--bg-8: #8888bb;
|
||||
--border-0: #000;
|
||||
--border-1: #334466;
|
||||
--border-2: #6699aa;
|
||||
--border-3: #7799bb;
|
||||
--border-4: #88aabb;
|
||||
--border-5: #99bbcc;
|
||||
--border-6: #bbccdd;
|
||||
--normal-color: #335577;
|
||||
--active-color: #aa0033;
|
||||
--active-border: #442266;
|
||||
color: #000;
|
||||
|
||||
font: 1rem var(--arial-font);
|
||||
letter-spacing: 1px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
main {
|
||||
h1 { font: bold 1rem var(--arial-font); }
|
||||
|
||||
/* UPDATES */
|
||||
#updates {
|
||||
border-image: var(--sideBorder) 22 9 40 8 fill / 44px 18px 80px 16px;
|
||||
padding: 44px 18px 80px 16px;
|
||||
margin-right: -2px;
|
||||
}
|
||||
|
||||
#updates-pagination {
|
||||
margin: 1rem 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
max-width: 50em;
|
||||
margin: 0 auto;
|
||||
|
||||
@media screen and (max-width: 1360px) {
|
||||
margin: 0 1rem;
|
||||
.arrow {
|
||||
width: 36px;
|
||||
height: 50px;
|
||||
background: var(--buttons) no-repeat top left;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 76em) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
h1 { font-size: 2rem; }
|
||||
|
||||
.board {
|
||||
image-rendering: pixelated;
|
||||
border: 2px solid var(--acnl-border);
|
||||
background-color: transparent;
|
||||
border-image: var(--bulletin) 42 30 30 fill / 42px 30px 30px;
|
||||
padding: 42px 30px 30px;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 6px solid black;
|
||||
background-color: var(--card-bg);
|
||||
box-shadow: inset 0 0 0 4px var(--card-bg), inset 0 0 0 6px black;
|
||||
padding: calc(1rem + 4px);
|
||||
|
||||
h1 {
|
||||
padding-bottom: 2px;
|
||||
border-bottom: 2px solid black;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
#previous {
|
||||
grid-column: 1 / 2;
|
||||
justify-self: left;
|
||||
|
||||
.arrow { background-position: 0 0; }
|
||||
&:hover .arrow { background-position: -36px 0; }
|
||||
&:active .arrow, &:focus .arrow { background-position: -72px 0; }
|
||||
|
||||
.title {
|
||||
border-left: none;
|
||||
margin-left: -2px;
|
||||
padding-left: calc(0.5em + 2px);
|
||||
}
|
||||
}
|
||||
|
||||
#next {
|
||||
grid-column: 2 / -1;
|
||||
justify-self: right;
|
||||
|
||||
.arrow { background-position: -108px 0; }
|
||||
&:hover .arrow { background-position: -144px 0; }
|
||||
&:active .arrow, &:focus .arrow { background-position: -180px 0; }
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-right: none;
|
||||
margin-right: -2px;
|
||||
padding-right: calc(0.5em + 2px);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: stretch;
|
||||
color: var(--normal-color);
|
||||
text-decoration: none;
|
||||
|
||||
.title {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
padding: 0 0.5em;
|
||||
background-color: var(--bg-7);
|
||||
border: 2px solid var(--border-1);
|
||||
box-shadow:
|
||||
inset 2px 2px 0 0 var(--bg-0),
|
||||
inset 4px 4px 0 0 var(--bg-5),
|
||||
inset -2px -2px 0 0 var(--border-5),
|
||||
inset -4px -4px 0 0 var(--border-6);
|
||||
|
||||
@media screen and (468px > width) {
|
||||
> span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: calc(12ch + 1em);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--active-color);
|
||||
.title { border-color: var(--active-border); }
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
color: var(--normal-color);
|
||||
.title {
|
||||
border-color: var(--border-1);
|
||||
box-shadow:
|
||||
inset -2px -2px 0 0 var(--bg-0),
|
||||
inset -4px -4px 0 0 var(--bg-5),
|
||||
inset 2px 2px 0 0 var(--border-5),
|
||||
inset 4px 4px 0 0 var(--border-6);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* WELCOME */
|
||||
#welcome {
|
||||
.card {
|
||||
border-color: var(--card-border-1);
|
||||
box-shadow: inset 0 0 0 4px var(--card-bg), inset 0 0 0 6px var(--card-border-1);
|
||||
height: 100%;
|
||||
|
||||
h1 { border-bottom-color: var(--card-border-1); }
|
||||
}
|
||||
border-image: var(--outerBorder) 20 9 39 11 fill / 40px 18px 78px 22px;
|
||||
padding: 40px 18px 78px 22px;
|
||||
}
|
||||
|
||||
#updates {
|
||||
.card {
|
||||
border-color: var(--card-border-2);
|
||||
box-shadow: inset 0 0 0 4px var(--card-bg), inset 0 0 0 6px var(--card-border-2);
|
||||
|
||||
h1 { border-bottom-color: var(--card-border-2); }
|
||||
}
|
||||
}
|
||||
|
||||
#wall {
|
||||
grid-column: 1 / -1;
|
||||
/* INNER BORDERS */
|
||||
.inner {
|
||||
border-image: var(--innerBorder) 3 2 2 2 fill / 6px 4px 4px;
|
||||
padding: 6px 4px 4px;
|
||||
}
|
||||
</style>
|
||||
@ -81,7 +81,10 @@ async function getAllChapters(metaPath: string) {
|
||||
const ficFolder = fic.split("/").at(-1);
|
||||
const entries = await Array.fromAsync(glob(fic + '/*.md'));
|
||||
const chapters = entries.map(chapter => path.relative(fic, chapter));
|
||||
return chapters.map(chapter => `${ficFolder}/${chapter}`);
|
||||
return chapters.map(chapter => {
|
||||
const chapterWithoutExt = path.parse(chapter).name; // needed for loader to properly grab ids
|
||||
return `${ficFolder}/${chapterWithoutExt}`;
|
||||
});
|
||||
}
|
||||
|
||||
// unused for now
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user