remanso-space/remanso
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(home): highlight linked note card on "durable enough" click

Browse Source
This commit is contained in:
Julien Calixte
2026-04-20 16:38:00 +02:00
parent b1be42b5bf
commit 668f73b546
1 changed files with 24 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/WelcomeWorld.vue
View File

@@ -1,7 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import fontColorContrast from "font-color-contrast" import fontColorContrast from "font-color-contrast"
import { getHex } from "pastel-color" import { getHex } from "pastel-color"
import { computed } from "vue" import { computed, ref } from "vue"
import { useRouter } from "vue-router" import { useRouter } from "vue-router"
import SignInAtproto from "@/components/SignInAtproto.vue" import SignInAtproto from "@/components/SignInAtproto.vue"
@@ -57,6 +57,12 @@ const today = computed(() =>
}) })
) )
const offsetHighlighted = ref(false)
const flashOffset = () => {
offsetHighlighted.value = true
setTimeout(() => { offsetHighlighted.value = false }, 900)
}
const reviewRepo = computed(() => savedFavoriteRepos.value[0] ?? null) const reviewRepo = computed(() => savedFavoriteRepos.value[0] ?? null)
const showReviewCard = computed( const showReviewCard = computed(
() => cardsToReview.value.length > 0 && reviewRepo.value !== null () => cardsToReview.value.length > 0 && reviewRepo.value !== null
@@ -331,9 +337,7 @@ const showReviewCard = computed(
spellcheck="false" spellcheck="false"
autocapitalize="off" autocapitalize="off"
/> />
<button type="submit" class="hw-btn hw-btn-pink gh-go"> <button type="submit" class="hw-btn hw-btn-pink gh-go">→</button>
Open →
</button>
</form> </form>
</div> </div>
<!-- CTA 02: Public notes --> <!-- CTA 02: Public notes -->
@@ -444,12 +448,12 @@ const showReviewCard = computed(
<div class="note-body"> <div class="note-body">
<p> <p>
A note should be small enough to hold one idea and A note should be small enough to hold one idea and
<a class="note-link" href="#">durable enough</a> <a class="note-link" href="#" @click.prevent="flashOffset">durable enough</a>
to outlive the day it was written. to outlive the day it was written.
</p> </p>
<p> <p>
Luhmann called this the Luhmann called this the
<a class="note-link" href="#">zettelkasten</a>: a slip-box <a class="note-link" href="#" @click.prevent>zettelkasten</a>: a slip-box
of thoughts you converse with, rather than a hoard of pages of thoughts you converse with, rather than a hoard of pages
you re-read. you re-read.
</p> </p>
@@ -464,7 +468,7 @@ const showReviewCard = computed(
</ul> </ul>
</div> </div>
</article> </article>
<article class="note-preview note-preview-offset"> <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
@@ -1204,6 +1208,19 @@ 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;
outline: 2px solid transparent;
outline-offset: 3px;
}
.note-preview--flash {
animation: note-flash 0.9s ease forwards;
}
@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); }
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); }
100% { box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 20px 40px -25px rgba(0,0,0,.15); }
} }
.note-header { .note-header {