fix: no more after for repos
This commit is contained in:
Julien Calixte
@@ -60,7 +60,9 @@ const today = computed(() =>
|
|||||||
const offsetHighlighted = ref(false)
|
const offsetHighlighted = ref(false)
|
||||||
const flashOffset = () => {
|
const flashOffset = () => {
|
||||||
offsetHighlighted.value = true
|
offsetHighlighted.value = true
|
||||||
setTimeout(() => { offsetHighlighted.value = false }, 900)
|
setTimeout(() => {
|
||||||
|
offsetHighlighted.value = false
|
||||||
|
}, 900)
|
||||||
}
|
}
|
||||||
|
|
||||||
const reviewRepo = computed(() => savedFavoriteRepos.value[0] ?? null)
|
const reviewRepo = computed(() => savedFavoriteRepos.value[0] ?? null)
|
||||||
@@ -91,7 +93,10 @@ const showReviewCard = computed(
|
|||||||
>Public notes</router-link
|
>Public notes</router-link
|
||||||
>
|
>
|
||||||
<router-link
|
<router-link
|
||||||
:to="{ name: 'FluxNoteView', params: { user: 'remanso-space', repo: 'getting-started' } }"
|
:to="{
|
||||||
|
name: 'FluxNoteView',
|
||||||
|
params: { user: 'remanso-space', repo: 'getting-started' }
|
||||||
|
}"
|
||||||
class="navlink"
|
class="navlink"
|
||||||
>Getting started</router-link
|
>Getting started</router-link
|
||||||
>
|
>
|
||||||
@@ -111,7 +116,11 @@ const showReviewCard = computed(
|
|||||||
</span>
|
</span>
|
||||||
<span class="profile-name">{{ displayUsername }}</span>
|
<span class="profile-name">{{ displayUsername }}</span>
|
||||||
</button>
|
</button>
|
||||||
<button v-else class="hw-btn hw-btn-ghost" onclick="profile_modal.showModal()">
|
<button
|
||||||
|
v-else
|
||||||
|
class="hw-btn hw-btn-ghost"
|
||||||
|
onclick="profile_modal.showModal()"
|
||||||
|
>
|
||||||
Sign in
|
Sign in
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -157,7 +166,9 @@ const showReviewCard = computed(
|
|||||||
autocapitalize="off"
|
autocapitalize="off"
|
||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
<button type="submit" class="hw-btn hw-btn-pink gh-go">→</button>
|
<button type="submit" class="hw-btn hw-btn-pink gh-go">
|
||||||
|
→
|
||||||
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -182,7 +193,7 @@ const showReviewCard = computed(
|
|||||||
:class="{
|
:class="{
|
||||||
'size-xl': i === 0 && savedFavoriteRepos.length > 1,
|
'size-xl': i === 0 && savedFavoriteRepos.length > 1,
|
||||||
'size-lg': i > 0 || savedFavoriteRepos.length === 1,
|
'size-lg': i > 0 || savedFavoriteRepos.length === 1,
|
||||||
'featured': i === 0 && savedFavoriteRepos.length > 1
|
featured: i === 0 && savedFavoriteRepos.length > 1
|
||||||
}"
|
}"
|
||||||
:style="tileStyle(`${repo.name}-${username}`)"
|
:style="tileStyle(`${repo.name}-${username}`)"
|
||||||
href="#"
|
href="#"
|
||||||
@@ -251,9 +262,14 @@ const showReviewCard = computed(
|
|||||||
:key="`${repo.user}-${repo.repo}`"
|
:key="`${repo.user}-${repo.repo}`"
|
||||||
>
|
>
|
||||||
<router-link
|
<router-link
|
||||||
:to="{ name: 'FluxNoteView', params: { user: repo.user, repo: repo.repo } }"
|
:to="{
|
||||||
|
name: 'FluxNoteView',
|
||||||
|
params: { user: repo.user, repo: repo.repo }
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<span class="r-path mono">{{ repo.user }} / {{ repo.repo }}</span>
|
<span class="r-path mono"
|
||||||
|
>{{ repo.user }} / {{ repo.repo }}</span
|
||||||
|
>
|
||||||
</router-link>
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
@@ -296,246 +312,259 @@ const showReviewCard = computed(
|
|||||||
<!-- =========== Editorial (always visible) ============== -->
|
<!-- =========== Editorial (always visible) ============== -->
|
||||||
<!-- Hero -->
|
<!-- Hero -->
|
||||||
<section class="hero-ed">
|
<section class="hero-ed">
|
||||||
<div class="hero-ed-inner">
|
<div class="hero-ed-inner">
|
||||||
<div class="hero-ed-left">
|
<div class="hero-ed-left">
|
||||||
<div class="eyebrow mono">a quiet place for your notes</div>
|
<div class="eyebrow mono">a quiet place for your notes</div>
|
||||||
<h1 class="display">
|
<h1 class="display">
|
||||||
Remanso is where your<br />
|
Remanso is where your<br />
|
||||||
<em>scattered thinking</em><br />
|
<em>scattered thinking</em><br />
|
||||||
comes to rest.
|
comes to rest.
|
||||||
</h1>
|
</h1>
|
||||||
<p class="lede">
|
<p class="lede">
|
||||||
Point it at any markdown — a GitHub repo of your own, or public
|
Point it at any markdown — a GitHub repo of your own, or public
|
||||||
notes from the open ATProto network — and Remanso turns it into a
|
notes from the open ATProto network — and Remanso turns it into a
|
||||||
calm, stackable notebook with backlinks where your thinking finally runs clear.
|
calm, stackable notebook with backlinks where your thinking
|
||||||
</p>
|
finally runs clear.
|
||||||
<div class="hero-ed-paths">
|
</p>
|
||||||
<!-- CTA 01: GitHub repo -->
|
<div class="hero-ed-paths">
|
||||||
<div class="hero-ed-path">
|
<!-- CTA 01: GitHub repo -->
|
||||||
<div class="hep-head">
|
<div class="hero-ed-path">
|
||||||
<span class="hep-n mono">01</span>
|
<div class="hep-head">
|
||||||
<div>
|
<span class="hep-n mono">01</span>
|
||||||
<div class="hep-t">From a GitHub repo</div>
|
<div>
|
||||||
<div class="hep-d">
|
<div class="hep-t">From a GitHub repo</div>
|
||||||
Point it at your markdown. Public works instantly, private
|
<div class="hep-d">
|
||||||
via OAuth.
|
Point it at your markdown. Public works instantly, private
|
||||||
</div>
|
via OAuth.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<form class="gh-form" @submit.prevent="submit">
|
|
||||||
<label class="input gh-input-group">
|
|
||||||
<span class="gh-prefix mono">github/</span>
|
|
||||||
<input
|
|
||||||
v-model="userInput"
|
|
||||||
placeholder="user"
|
|
||||||
class="gh-input"
|
|
||||||
spellcheck="false"
|
|
||||||
autocapitalize="off"
|
|
||||||
/>
|
|
||||||
<span class="gh-slash">/</span>
|
|
||||||
<input
|
|
||||||
v-model="repoInput"
|
|
||||||
placeholder="repo"
|
|
||||||
class="gh-input"
|
|
||||||
spellcheck="false"
|
|
||||||
autocapitalize="off"
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<button type="submit" class="hw-btn hw-btn-pink gh-go">→</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<!-- CTA 02: Public notes -->
|
|
||||||
<div class="hero-ed-path">
|
|
||||||
<div class="hep-head">
|
|
||||||
<span class="hep-n mono">02</span>
|
|
||||||
<div>
|
|
||||||
<div class="hep-t">From the open network</div>
|
|
||||||
<div class="hep-d">
|
|
||||||
Your `.pub.md` files become public.
|
|
||||||
Read public notes published via ATProto — no account
|
|
||||||
needed.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<router-link
|
|
||||||
:to="{ name: 'PublicNoteListView' }"
|
|
||||||
class="hw-btn hw-btn-pink hep-btn"
|
|
||||||
>
|
|
||||||
Browse public notes →
|
|
||||||
</router-link>
|
|
||||||
</div>
|
</div>
|
||||||
|
<form class="gh-form" @submit.prevent="submit">
|
||||||
|
<label class="input gh-input-group">
|
||||||
|
<span class="gh-prefix mono">github/</span>
|
||||||
|
<input
|
||||||
|
v-model="userInput"
|
||||||
|
placeholder="user"
|
||||||
|
class="gh-input"
|
||||||
|
spellcheck="false"
|
||||||
|
autocapitalize="off"
|
||||||
|
/>
|
||||||
|
<span class="gh-slash">/</span>
|
||||||
|
<input
|
||||||
|
v-model="repoInput"
|
||||||
|
placeholder="repo"
|
||||||
|
class="gh-input"
|
||||||
|
spellcheck="false"
|
||||||
|
autocapitalize="off"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<button type="submit" class="hw-btn hw-btn-pink gh-go">
|
||||||
|
→
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="hero-ed-sample mono">
|
<!-- CTA 02: Public notes -->
|
||||||
new here?
|
<div class="hero-ed-path">
|
||||||
|
<div class="hep-head">
|
||||||
|
<span class="hep-n mono">02</span>
|
||||||
|
<div>
|
||||||
|
<div class="hep-t">From the open network</div>
|
||||||
|
<div class="hep-d">
|
||||||
|
Your `.pub.md` files become public. Read public notes
|
||||||
|
published via ATProto — no account needed.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<router-link
|
<router-link
|
||||||
:to="{ name: 'FluxNoteView', params: { user: 'remanso-space', repo: 'getting-started' } }"
|
:to="{ name: 'PublicNoteListView' }"
|
||||||
|
class="hw-btn hw-btn-pink hep-btn"
|
||||||
>
|
>
|
||||||
try remanso-space/getting-started →
|
Browse public notes →
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="hero-ed-right">
|
<div class="hero-ed-sample mono">
|
||||||
<div class="flower-stage">
|
new here?
|
||||||
<img
|
<router-link
|
||||||
src="/favicon.png"
|
:to="{
|
||||||
alt="Remanso"
|
name: 'FluxNoteView',
|
||||||
class="flower-mark"
|
params: { user: 'remanso-space', repo: 'getting-started' }
|
||||||
width="240"
|
}"
|
||||||
height="240"
|
>
|
||||||
/>
|
try remanso-space/getting-started →
|
||||||
<div class="flower-ripple" />
|
</router-link>
|
||||||
<div class="flower-ripple r2" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<div class="hero-ed-right">
|
||||||
|
<div class="flower-stage">
|
||||||
<!-- Manifesto -->
|
<img
|
||||||
<section class="manifesto" id="about">
|
src="/favicon.png"
|
||||||
<div class="manifesto-inner">
|
alt="Remanso"
|
||||||
<div class="section-label mono">§ 01 — what is remanso</div>
|
class="flower-mark"
|
||||||
<p class="drop-cap manifesto-p">
|
width="240"
|
||||||
<em>Remanso</em> is a Portuguese word for the still pool that
|
height="240"
|
||||||
forms where a river slows. The current still moves through — but for a moment, it is calm enough to see the bottom.
|
/>
|
||||||
This is what notes should feel like. A Remanso takes your
|
<div class="flower-ripple" />
|
||||||
markdown files and lays them out as a linked notebook you can
|
<div class="flower-ripple r2" />
|
||||||
read, follow, and add to. No lock-in. Your notes stay in Git.
|
|
||||||
</p>
|
|
||||||
<div class="feature-row">
|
|
||||||
<div class="feat">
|
|
||||||
<span class="feat-icon">≣</span>
|
|
||||||
<h4>Stacked notes</h4>
|
|
||||||
<p>
|
|
||||||
Click a link and the next note slides in beside the current
|
|
||||||
one. Your train of thought stays visible — never lose where
|
|
||||||
you came from.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="feat">
|
|
||||||
<span class="feat-icon">↹</span>
|
|
||||||
<h4>Automatic backlinks</h4>
|
|
||||||
<p>
|
|
||||||
Every mention becomes a two-way link. See every note that
|
|
||||||
points back at the one you're reading.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="feat">
|
|
||||||
<span class="feat-icon">◈</span>
|
|
||||||
<h4>Your files, your Git</h4>
|
|
||||||
<p>
|
|
||||||
Remanso reads GitHub directly. Edit in your favourite editor.
|
|
||||||
Ship to Bluesky via ATProto when you're ready to share.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- Demo notes -->
|
<!-- Manifesto -->
|
||||||
<section class="demo" id="getting-started">
|
<section class="manifesto" id="about">
|
||||||
<div class="demo-inner">
|
<div class="manifesto-inner">
|
||||||
<div class="section-label mono">§ 02 — a note, in full</div>
|
<div class="section-label mono">§ 01 — what is remanso</div>
|
||||||
<h2 class="h2">
|
<p class="drop-cap manifesto-p">
|
||||||
This is what a note looks like.<br />
|
<em>Remanso</em> is a Portuguese word for the still pool that forms
|
||||||
<span class="h2-quiet italic">
|
where a river slows. The current still moves through — but for a
|
||||||
Tap a link to stack another beside it.
|
moment, it is calm enough to see the bottom. This is what notes
|
||||||
</span>
|
should feel like. A Remanso takes your markdown files and lays them
|
||||||
</h2>
|
out as a linked notebook you can read, follow, and add to. No
|
||||||
<div class="demo-notes">
|
lock-in. Your notes stay in Git.
|
||||||
<article class="note-preview">
|
</p>
|
||||||
<div class="note-header">
|
<div class="feature-row">
|
||||||
<span class="mono note-breadcrumb"
|
<div class="feat">
|
||||||
>remanso-space / getting-started</span
|
<span class="feat-icon">≣</span>
|
||||||
|
<h4>Stacked notes</h4>
|
||||||
|
<p>
|
||||||
|
Click a link and the next note slides in beside the current one.
|
||||||
|
Your train of thought stays visible — never lose where you came
|
||||||
|
from.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="feat">
|
||||||
|
<span class="feat-icon">↹</span>
|
||||||
|
<h4>Automatic backlinks</h4>
|
||||||
|
<p>
|
||||||
|
Every mention becomes a two-way link. See every note that points
|
||||||
|
back at the one you're reading.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="feat">
|
||||||
|
<span class="feat-icon">◈</span>
|
||||||
|
<h4>Your files, your Git</h4>
|
||||||
|
<p>
|
||||||
|
Remanso reads GitHub directly. Edit in your favourite editor.
|
||||||
|
Ship to Bluesky via ATProto when you're ready to share.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Demo notes -->
|
||||||
|
<section class="demo" id="getting-started">
|
||||||
|
<div class="demo-inner">
|
||||||
|
<div class="section-label mono">§ 02 — a note, in full</div>
|
||||||
|
<h2 class="h2">
|
||||||
|
This is what a note looks like.<br />
|
||||||
|
<span class="h2-quiet italic">
|
||||||
|
Tap a link to stack another beside it.
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
<div class="demo-notes">
|
||||||
|
<article class="note-preview">
|
||||||
|
<div class="note-header">
|
||||||
|
<span class="mono note-breadcrumb"
|
||||||
|
>remanso-space / getting-started</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<h3 class="note-title">On keeping notes</h3>
|
||||||
|
<div class="note-body">
|
||||||
|
<p>
|
||||||
|
A note should be small enough to hold one idea and
|
||||||
|
<a class="note-link" href="#" @click.prevent="flashOffset"
|
||||||
|
>durable enough</a
|
||||||
>
|
>
|
||||||
</div>
|
to outlive the day it was written.
|
||||||
<h3 class="note-title">On keeping notes</h3>
|
</p>
|
||||||
<div class="note-body">
|
<p>
|
||||||
<p>
|
Luhmann called this the
|
||||||
A note should be small enough to hold one idea and
|
<a class="note-link" href="#" @click.prevent>zettelkasten</a>:
|
||||||
<a class="note-link" href="#" @click.prevent="flashOffset">durable enough</a>
|
a slip-box of thoughts you converse with, rather than a hoard
|
||||||
to outlive the day it was written.
|
of pages you re-read.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
</div>
|
||||||
Luhmann called this the
|
<div class="note-backlinks">
|
||||||
<a class="note-link" href="#" @click.prevent>zettelkasten</a>: a slip-box
|
<div class="backlinks-h mono">↖ linked from</div>
|
||||||
of thoughts you converse with, rather than a hoard of pages
|
<ul>
|
||||||
you re-read.
|
<li>
|
||||||
</p>
|
<a @click.prevent href="#"
|
||||||
</div>
|
>why links are better than folders</a
|
||||||
<div class="note-backlinks">
|
>
|
||||||
<div class="backlinks-h mono">↖ linked from</div>
|
</li>
|
||||||
<ul>
|
<li><a @click.prevent href="#">a reading diary</a></li>
|
||||||
<li>
|
</ul>
|
||||||
<a @click.prevent href="#">why links are better than folders</a>
|
</div>
|
||||||
</li>
|
</article>
|
||||||
<li><a @click.prevent href="#">a reading diary</a></li>
|
<article
|
||||||
</ul>
|
class="note-preview note-preview-offset"
|
||||||
</div>
|
:class="{ 'note-preview--flash': offsetHighlighted }"
|
||||||
</article>
|
>
|
||||||
<article class="note-preview note-preview-offset" :class="{ 'note-preview--flash': offsetHighlighted }">
|
<div class="note-header">
|
||||||
<div class="note-header">
|
<span class="mono note-breadcrumb"
|
||||||
<span class="mono note-breadcrumb"
|
>remanso-space / getting-started</span
|
||||||
>remanso-space / getting-started</span
|
>
|
||||||
>
|
</div>
|
||||||
</div>
|
<h3 class="note-title">Durable enough</h3>
|
||||||
<h3 class="note-title">Durable enough</h3>
|
<div class="note-body">
|
||||||
<div class="note-body">
|
<p>
|
||||||
<p>
|
A durable note survives its own context. You should be able to
|
||||||
A durable note survives its own context. You should be able
|
pick it up six months from now and still know what it means.
|
||||||
to pick it up six months from now and still know what it
|
</p>
|
||||||
means.
|
<p>
|
||||||
</p>
|
Rule of thumb: write the title as the claim, and the body as
|
||||||
<p>
|
the argument.
|
||||||
Rule of thumb: write the title as the claim, and the body as
|
</p>
|
||||||
the argument.
|
</div>
|
||||||
</p>
|
<div class="note-backlinks">
|
||||||
</div>
|
<div class="backlinks-h mono">↖ linked from</div>
|
||||||
<div class="note-backlinks">
|
<ul>
|
||||||
<div class="backlinks-h mono">↖ linked from</div>
|
<li><a @click.prevent href="#">on keeping notes</a></li>
|
||||||
<ul>
|
</ul>
|
||||||
<li><a @click.prevent href="#">on keeping notes</a></li>
|
</div>
|
||||||
</ul>
|
</article>
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- Zettelkasten primer -->
|
<!-- Zettelkasten primer -->
|
||||||
<section class="zk" id="zk">
|
<section class="zk" id="zk">
|
||||||
<div class="zk-inner">
|
<div class="zk-inner">
|
||||||
<div class="section-label mono">§ 03 — zettelkasten, in a minute</div>
|
<div class="section-label mono">§ 03 — zettelkasten, in a minute</div>
|
||||||
<ol class="zk-steps">
|
<ol class="zk-steps">
|
||||||
<li>
|
<li>
|
||||||
<span class="zk-n mono">01</span>
|
<span class="zk-n mono">01</span>
|
||||||
<div>
|
<div>
|
||||||
<h4>One idea per note.</h4>
|
<h4>One idea per note.</h4>
|
||||||
<p>Keep them small. A note that does one thing gets reused.</p>
|
<p>Keep them small. A note that does one thing gets reused.</p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span class="zk-n mono">02</span>
|
<span class="zk-n mono">02</span>
|
||||||
<div>
|
<div>
|
||||||
<h4>Link, don't nest.</h4>
|
<h4>Link, don't nest.</h4>
|
||||||
<p>
|
<p>
|
||||||
Folders calcify. Links compound. Every
|
Folders calcify. Links compound. Every
|
||||||
<code>[like this](new-idea.md)</code> becomes a door to a new idea.
|
<code>[like this](new-idea.md)</code> becomes a door to a new
|
||||||
</p>
|
idea.
|
||||||
</div>
|
</p>
|
||||||
</li>
|
</div>
|
||||||
<li>
|
</li>
|
||||||
<span class="zk-n mono">03</span>
|
<li>
|
||||||
<div>
|
<span class="zk-n mono">03</span>
|
||||||
<h4>Let the web emerge.</h4>
|
<div>
|
||||||
<p>
|
<h4>Let the web emerge.</h4>
|
||||||
Don't plan the structure. Write, link, re-read. Structure is
|
<p>
|
||||||
a consequence of attention.
|
Don't plan the structure. Write, link, re-read. Structure is a
|
||||||
</p>
|
consequence of attention.
|
||||||
</div>
|
</p>
|
||||||
</li>
|
</div>
|
||||||
</ol>
|
</li>
|
||||||
</div>
|
</ol>
|
||||||
</section>
|
</div>
|
||||||
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!-- ── Footer ─────────────────────────────────────────── -->
|
<!-- ── Footer ─────────────────────────────────────────── -->
|
||||||
@@ -558,11 +587,16 @@ const showReviewCard = computed(
|
|||||||
<div>
|
<div>
|
||||||
<div class="footer-h">Product</div>
|
<div class="footer-h">Product</div>
|
||||||
<router-link
|
<router-link
|
||||||
:to="{ name: 'FluxNoteView', params: { user: 'remanso-space', repo: 'getting-started' } }"
|
:to="{
|
||||||
|
name: 'FluxNoteView',
|
||||||
|
params: { user: 'remanso-space', repo: 'getting-started' }
|
||||||
|
}"
|
||||||
class="footer-link"
|
class="footer-link"
|
||||||
>Getting started</router-link
|
>Getting started</router-link
|
||||||
>
|
>
|
||||||
<router-link :to="{ name: 'PublicNoteListView' }" class="footer-link"
|
<router-link
|
||||||
|
:to="{ name: 'PublicNoteListView' }"
|
||||||
|
class="footer-link"
|
||||||
>Public notes</router-link
|
>Public notes</router-link
|
||||||
>
|
>
|
||||||
<router-link :to="{ name: 'RepoList' }" class="footer-link"
|
<router-link :to="{ name: 'RepoList' }" class="footer-link"
|
||||||
@@ -580,13 +614,14 @@ const showReviewCard = computed(
|
|||||||
<div class="footer-fine">
|
<div class="footer-fine">
|
||||||
<theme-swap />
|
<theme-swap />
|
||||||
<span>
|
<span>
|
||||||
made with <span style="color: var(--hw-pink-deep)">♥</span> by <a
|
made with <span style="color: var(--hw-pink-deep)">♥</span> by
|
||||||
href="https://apoena.dev"
|
<a
|
||||||
target="_blank"
|
href="https://apoena.dev"
|
||||||
rel="noreferrer"
|
target="_blank"
|
||||||
class="footer-link"
|
rel="noreferrer"
|
||||||
>apoena.dev ↗</a
|
class="footer-link"
|
||||||
>
|
>apoena.dev ↗</a
|
||||||
|
>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
@@ -629,19 +664,31 @@ const showReviewCard = computed(
|
|||||||
/* Derived from DaisyUI base tokens — adapts to any theme automatically.
|
/* Derived from DaisyUI base tokens — adapts to any theme automatically.
|
||||||
base-100 is the lightest surface; base-200/300 are progressively deeper.
|
base-100 is the lightest surface; base-200/300 are progressively deeper.
|
||||||
Paper uses base-200 so cards (base-100) appear slightly elevated above it. */
|
Paper uses base-200 so cards (base-100) appear slightly elevated above it. */
|
||||||
--hw-surface: var(--color-base-100);
|
--hw-surface: var(--color-base-100);
|
||||||
--hw-paper: var(--color-base-200);
|
--hw-paper: var(--color-base-200);
|
||||||
--hw-paper-warm: var(--color-base-300);
|
--hw-paper-warm: var(--color-base-300);
|
||||||
--hw-ink: var(--color-base-content);
|
--hw-ink: var(--color-base-content);
|
||||||
--hw-ink-soft: color-mix(in oklch, var(--color-base-content) 65%, var(--color-base-200));
|
--hw-ink-soft: color-mix(
|
||||||
--hw-ink-faint: color-mix(in oklch, var(--color-base-content) 38%, var(--color-base-200));
|
in oklch,
|
||||||
--hw-rule: color-mix(in oklch, var(--color-base-content) 12%, var(--color-base-200));
|
var(--color-base-content) 65%,
|
||||||
|
var(--color-base-200)
|
||||||
|
);
|
||||||
|
--hw-ink-faint: color-mix(
|
||||||
|
in oklch,
|
||||||
|
var(--color-base-content) 38%,
|
||||||
|
var(--color-base-200)
|
||||||
|
);
|
||||||
|
--hw-rule: color-mix(
|
||||||
|
in oklch,
|
||||||
|
var(--color-base-content) 12%,
|
||||||
|
var(--color-base-200)
|
||||||
|
);
|
||||||
|
|
||||||
/* Brand accent — intentionally fixed, not derived from the active theme */
|
/* Brand accent — intentionally fixed, not derived from the active theme */
|
||||||
--hw-pink: #e36598;
|
--hw-pink: #e36598;
|
||||||
--hw-pink-deep: color-mix(in oklch, #e36598 75%, var(--color-base-content));
|
--hw-pink-deep: color-mix(in oklch, #e36598 75%, var(--color-base-content));
|
||||||
--hw-pink-wash: color-mix(in oklch, #e36598 12%, var(--color-base-200));
|
--hw-pink-wash: color-mix(in oklch, #e36598 12%, var(--color-base-200));
|
||||||
--hw-pink-wash-2:color-mix(in oklch, #e36598 22%, var(--color-base-200));
|
--hw-pink-wash-2: color-mix(in oklch, #e36598 22%, var(--color-base-200));
|
||||||
--hw-leaf: #6b8e4e;
|
--hw-leaf: #6b8e4e;
|
||||||
--hw-serif: "Libertinus Serif", "Iowan Old Style", "Palatino", serif;
|
--hw-serif: "Libertinus Serif", "Iowan Old Style", "Palatino", serif;
|
||||||
--hw-mono: "Courier Prime", "IBM Plex Mono", ui-monospace, monospace;
|
--hw-mono: "Courier Prime", "IBM Plex Mono", ui-monospace, monospace;
|
||||||
@@ -664,7 +711,8 @@ const showReviewCard = computed(
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
background-image: radial-gradient(
|
background-image:
|
||||||
|
radial-gradient(
|
||||||
circle at 20% 10%,
|
circle at 20% 10%,
|
||||||
rgba(227, 101, 152, 0.04),
|
rgba(227, 101, 152, 0.04),
|
||||||
transparent 40%
|
transparent 40%
|
||||||
@@ -691,7 +739,10 @@ main {
|
|||||||
background: transparent;
|
background: transparent;
|
||||||
color: var(--hw-ink);
|
color: var(--hw-ink);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background 0.15s, color 0.15s, transform 0.1s;
|
transition:
|
||||||
|
background 0.15s,
|
||||||
|
color 0.15s,
|
||||||
|
transform 0.1s;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -826,7 +877,9 @@ main {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-family: var(--hw-serif);
|
font-family: var(--hw-serif);
|
||||||
color: var(--hw-ink);
|
color: var(--hw-ink);
|
||||||
transition: border-color 0.15s, background 0.15s;
|
transition:
|
||||||
|
border-color 0.15s,
|
||||||
|
background 0.15s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: var(--hw-pink);
|
border-color: var(--hw-pink);
|
||||||
@@ -885,16 +938,20 @@ main {
|
|||||||
border: 1px solid var(--hw-rule);
|
border: 1px solid var(--hw-rule);
|
||||||
border-right: none;
|
border-right: none;
|
||||||
border-radius: 999px 0 0 999px;
|
border-radius: 999px 0 0 999px;
|
||||||
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02),
|
box-shadow:
|
||||||
|
0 1px 0 rgba(0, 0, 0, 0.02),
|
||||||
0 6px 18px -10px rgba(201, 74, 125, 0.15);
|
0 6px 18px -10px rgba(201, 74, 125, 0.15);
|
||||||
cursor: text;
|
cursor: text;
|
||||||
transition: border-color 0.15s, box-shadow 0.15s;
|
transition:
|
||||||
|
border-color 0.15s,
|
||||||
|
box-shadow 0.15s;
|
||||||
height: auto;
|
height: auto;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
||||||
&:focus-within {
|
&:focus-within {
|
||||||
border-color: var(--hw-pink);
|
border-color: var(--hw-pink);
|
||||||
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02),
|
box-shadow:
|
||||||
|
0 1px 0 rgba(0, 0, 0, 0.02),
|
||||||
0 10px 28px -10px rgba(201, 74, 125, 0.25);
|
0 10px 28px -10px rgba(201, 74, 125, 0.25);
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
@@ -1000,7 +1057,10 @@ main {
|
|||||||
background: var(--hw-surface);
|
background: var(--hw-surface);
|
||||||
border: 1px solid var(--hw-rule);
|
border: 1px solid var(--hw-rule);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
transition: border-color 0.15s, box-shadow 0.2s, transform 0.15s;
|
transition:
|
||||||
|
border-color 0.15s,
|
||||||
|
box-shadow 0.2s,
|
||||||
|
transform 0.15s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: var(--hw-pink-wash-2);
|
border-color: var(--hw-pink-wash-2);
|
||||||
@@ -1218,7 +1278,9 @@ main {
|
|||||||
border: 1px solid var(--hw-rule);
|
border: 1px solid var(--hw-rule);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 1.5rem 1.75rem 1.25rem;
|
padding: 1.5rem 1.75rem 1.25rem;
|
||||||
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 20px 40px -25px rgba(0, 0, 0, 0.15);
|
box-shadow:
|
||||||
|
0 1px 0 rgba(0, 0, 0, 0.02),
|
||||||
|
0 20px 40px -25px rgba(0, 0, 0, 0.15);
|
||||||
max-width: 420px;
|
max-width: 420px;
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
@@ -1227,7 +1289,9 @@ main {
|
|||||||
.note-preview-offset {
|
.note-preview-offset {
|
||||||
margin-top: 2.5rem;
|
margin-top: 2.5rem;
|
||||||
transform: rotate(0.4deg);
|
transform: rotate(0.4deg);
|
||||||
transition: box-shadow 0.15s ease, outline-color 0.15s ease;
|
transition:
|
||||||
|
box-shadow 0.15s ease,
|
||||||
|
outline-color 0.15s ease;
|
||||||
outline: 2px solid transparent;
|
outline: 2px solid transparent;
|
||||||
outline-offset: 3px;
|
outline-offset: 3px;
|
||||||
}
|
}
|
||||||
@@ -1237,9 +1301,23 @@ main {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes note-flash {
|
@keyframes note-flash {
|
||||||
0% { box-shadow: 0 0 0 3px var(--hw-pink-wash-2), 0 1px 0 rgba(0,0,0,.02), 0 20px 40px -25px rgba(0,0,0,.15); }
|
0% {
|
||||||
25% { box-shadow: 0 0 0 6px var(--hw-pink-wash-2), 0 1px 0 rgba(0,0,0,.02), 0 20px 40px -25px rgba(0,0,0,.15); }
|
box-shadow:
|
||||||
100% { box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 20px 40px -25px rgba(0,0,0,.15); }
|
0 0 0 3px var(--hw-pink-wash-2),
|
||||||
|
0 1px 0 rgba(0, 0, 0, 0.02),
|
||||||
|
0 20px 40px -25px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
box-shadow:
|
||||||
|
0 0 0 6px var(--hw-pink-wash-2),
|
||||||
|
0 1px 0 rgba(0, 0, 0, 0.02),
|
||||||
|
0 20px 40px -25px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
box-shadow:
|
||||||
|
0 1px 0 rgba(0, 0, 0, 0.02),
|
||||||
|
0 20px 40px -25px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.note-header {
|
.note-header {
|
||||||
@@ -1476,26 +1554,14 @@ img {
|
|||||||
padding: 1rem 1.1rem;
|
padding: 1rem 1.1rem;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border: 1px solid rgba(0, 0, 0, 0.04);
|
border: 1px solid rgba(0, 0, 0, 0.04);
|
||||||
transition: transform 0.15s ease, box-shadow 0.2s ease;
|
transition:
|
||||||
|
transform 0.15s ease,
|
||||||
|
box-shadow 0.2s ease;
|
||||||
min-height: 110px;
|
min-height: 110px;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
inset: auto -20% -40% auto;
|
|
||||||
width: 80%;
|
|
||||||
height: 80%;
|
|
||||||
background: radial-gradient(
|
|
||||||
circle,
|
|
||||||
rgba(255, 255, 255, 0.5),
|
|
||||||
transparent 60%
|
|
||||||
);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.15);
|
||||||
@@ -1883,8 +1949,5 @@ img {
|
|||||||
grid-column: span 1;
|
grid-column: span 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user