diff --git a/src/components/WelcomeWorld.vue b/src/components/WelcomeWorld.vue index 529a948..0c3e987 100644 --- a/src/components/WelcomeWorld.vue +++ b/src/components/WelcomeWorld.vue @@ -60,7 +60,9 @@ const today = computed(() => const offsetHighlighted = ref(false) const flashOffset = () => { offsetHighlighted.value = true - setTimeout(() => { offsetHighlighted.value = false }, 900) + setTimeout(() => { + offsetHighlighted.value = false + }, 900) } const reviewRepo = computed(() => savedFavoriteRepos.value[0] ?? null) @@ -91,7 +93,10 @@ const showReviewCard = computed( >Public notes Getting started @@ -111,7 +116,11 @@ const showReviewCard = computed( {{ displayUsername }} - @@ -157,7 +166,9 @@ const showReviewCard = computed( autocapitalize="off" /> - + @@ -182,7 +193,7 @@ const showReviewCard = computed( :class="{ 'size-xl': 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}`)" href="#" @@ -251,9 +262,14 @@ const showReviewCard = computed( :key="`${repo.user}-${repo.repo}`" > - {{ repo.user }} / {{ repo.repo }} + {{ repo.user }} / {{ repo.repo }} @@ -296,246 +312,259 @@ const showReviewCard = computed(
-
-
-
a quiet place for your notes
-

- Remanso is where your
- scattered thinking
- comes to rest. -

-

- 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 - calm, stackable notebook with backlinks where your thinking finally runs clear. -

-
- -
-
- 01 -
-
From a GitHub repo
-
- Point it at your markdown. Public works instantly, private - via OAuth. -
+
+
+
a quiet place for your notes
+

+ Remanso is where your
+ scattered thinking
+ comes to rest. +

+

+ 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 + calm, stackable notebook with backlinks where your thinking + finally runs clear. +

+
+ +
+
+ 01 +
+
From a GitHub repo
+
+ Point it at your markdown. Public works instantly, private + via OAuth.
-
- - -
-
- -
-
- 02 -
-
From the open network
-
- Your `.pub.md` files become public. - Read public notes published via ATProto — no account - needed. -
-
-
- - Browse public notes → -
+
+ + +
-
- new here? + +
+
+ 02 +
+
From the open network
+
+ Your `.pub.md` files become public. Read public notes + published via ATProto — no account needed. +
+
+
- try remanso-space/getting-started → + Browse public notes →
-
-
- Remanso -
-
-
+
+ new here? + + try remanso-space/getting-started → +
-
- - -
-
-
§ 01 — what is remanso
-

- Remanso is a Portuguese word for the still pool that - 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 - markdown files and lays them out as a linked notebook you can - read, follow, and add to. No lock-in. Your notes stay in Git. -

-
-
- ≣ -

Stacked notes

-

- 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. -

-
-
- ↹ -

Automatic backlinks

-

- Every mention becomes a two-way link. See every note that - points back at the one you're reading. -

-
-
- ◈ -

Your files, your Git

-

- Remanso reads GitHub directly. Edit in your favourite editor. - Ship to Bluesky via ATProto when you're ready to share. -

-
+
+
+ Remanso +
+
-
+ + - -
-
-
§ 02 — a note, in full
-

- This is what a note looks like.
- - Tap a link to stack another beside it. - -

-
-
-
- remanso-space / getting-started +
+
+
§ 01 — what is remanso
+

+ Remanso is a Portuguese word for the still pool that 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 markdown files and lays them + out as a linked notebook you can read, follow, and add to. No + lock-in. Your notes stay in Git. +

+
+
+ ≣ +

Stacked notes

+

+ 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. +

+
+
+ ↹ +

Automatic backlinks

+

+ Every mention becomes a two-way link. See every note that points + back at the one you're reading. +

+
+
+ ◈ +

Your files, your Git

+

+ Remanso reads GitHub directly. Edit in your favourite editor. + Ship to Bluesky via ATProto when you're ready to share. +

+
+
+
+
+ + +
+
+
§ 02 — a note, in full
+

+ This is what a note looks like.
+ + Tap a link to stack another beside it. + +

+
+
+
+ remanso-space / getting-started +
+

On keeping notes

+
+

+ A note should be small enough to hold one idea and + durable enough -

-

On keeping notes

-
-

- A note should be small enough to hold one idea and - durable enough - to outlive the day it was written. -

-

- Luhmann called this the - zettelkasten: a slip-box - of thoughts you converse with, rather than a hoard of pages - you re-read. -

-
-
-
↖ linked from
- -
-
-
-
- remanso-space / getting-started -
-

Durable enough

-
-

- A durable note survives its own context. You should be able - to pick it up six months from now and still know what it - means. -

-

- Rule of thumb: write the title as the claim, and the body as - the argument. -

-
-
-
↖ linked from
- -
-
-
+ to outlive the day it was written. +

+

+ Luhmann called this the + zettelkasten: + a slip-box of thoughts you converse with, rather than a hoard + of pages you re-read. +

+
+
+
↖ linked from
+ +
+
+
+
+ remanso-space / getting-started +
+

Durable enough

+
+

+ A durable note survives its own context. You should be able to + pick it up six months from now and still know what it means. +

+

+ Rule of thumb: write the title as the claim, and the body as + the argument. +

+
+
+
↖ linked from
+ +
+
-
+ + - -
-
-
§ 03 — zettelkasten, in a minute
-
    -
  1. - 01 -
    -

    One idea per note.

    -

    Keep them small. A note that does one thing gets reused.

    -
    -
    2. -
  2. - 02 -
    -

    Link, don't nest.

    -

    - Folders calcify. Links compound. Every - [like this](new-idea.md) becomes a door to a new idea. -

    -
    -
    3. -
  3. - 03 -
    -

    Let the web emerge.

    -

    - Don't plan the structure. Write, link, re-read. Structure is - a consequence of attention. -

    -
    -
    4. -
-
-
+ +
+
+
§ 03 — zettelkasten, in a minute
+
    +
  1. + 01 +
    +

    One idea per note.

    +

    Keep them small. A note that does one thing gets reused.

    +
    +
    2. +
  2. + 02 +
    +

    Link, don't nest.

    +

    + Folders calcify. Links compound. Every + [like this](new-idea.md) becomes a door to a new + idea. +

    +
    +
    3. +
  3. + 03 +
    +

    Let the web emerge.

    +

    + Don't plan the structure. Write, link, re-read. Structure is a + consequence of attention. +

    +
    +
    4. +
+
+
@@ -558,11 +587,16 @@ const showReviewCard = computed(
Product
Getting started - Public notes - made with ♥ by apoena.dev ↗ + made with ♥ by + apoena.dev ↗
@@ -629,19 +664,31 @@ const showReviewCard = computed( /* Derived from DaisyUI base tokens — adapts to any theme automatically. 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. */ - --hw-surface: var(--color-base-100); - --hw-paper: var(--color-base-200); + --hw-surface: var(--color-base-100); + --hw-paper: var(--color-base-200); --hw-paper-warm: var(--color-base-300); - --hw-ink: var(--color-base-content); - --hw-ink-soft: color-mix(in oklch, 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)); + --hw-ink: var(--color-base-content); + --hw-ink-soft: color-mix( + in oklch, + 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 */ - --hw-pink: #e36598; - --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-2:color-mix(in oklch, #e36598 22%, var(--color-base-200)); + --hw-pink: #e36598; + --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-2: color-mix(in oklch, #e36598 22%, var(--color-base-200)); --hw-leaf: #6b8e4e; --hw-serif: "Libertinus Serif", "Iowan Old Style", "Palatino", serif; --hw-mono: "Courier Prime", "IBM Plex Mono", ui-monospace, monospace; @@ -664,7 +711,8 @@ const showReviewCard = computed( position: fixed; inset: 0; pointer-events: none; - background-image: radial-gradient( + background-image: + radial-gradient( circle at 20% 10%, rgba(227, 101, 152, 0.04), transparent 40% @@ -691,7 +739,10 @@ main { background: transparent; color: var(--hw-ink); 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; display: inline-flex; align-items: center; @@ -826,7 +877,9 @@ main { cursor: pointer; font-family: var(--hw-serif); color: var(--hw-ink); - transition: border-color 0.15s, background 0.15s; + transition: + border-color 0.15s, + background 0.15s; &:hover { border-color: var(--hw-pink); @@ -885,16 +938,20 @@ main { border: 1px solid var(--hw-rule); border-right: none; 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); cursor: text; - transition: border-color 0.15s, box-shadow 0.15s; + transition: + border-color 0.15s, + box-shadow 0.15s; height: auto; outline: none; &:focus-within { 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); outline: none; } @@ -1000,7 +1057,10 @@ main { background: var(--hw-surface); border: 1px solid var(--hw-rule); 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 { border-color: var(--hw-pink-wash-2); @@ -1218,7 +1278,9 @@ main { border: 1px solid var(--hw-rule); border-radius: 4px; 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; font-size: 0.95rem; line-height: 1.6; @@ -1227,7 +1289,9 @@ main { .note-preview-offset { margin-top: 2.5rem; 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-offset: 3px; } @@ -1237,9 +1301,23 @@ main { } @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); } + 0% { + box-shadow: + 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 { @@ -1476,26 +1554,14 @@ img { padding: 1rem 1.1rem; border-radius: 6px; 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; position: relative; overflow: hidden; 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 { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.15); @@ -1883,8 +1949,5 @@ img { grid-column: span 1; } } - - } -