From 6e2e2ca1214101d9d7e52c09f1c345690f6e67bc Mon Sep 17 00:00:00 2001
From: phil <uniphil@gmail.com>
Date: Tue, 11 Aug 2026 19:31:25 -0400
Subject: [PATCH] download card tweaks

---
 src/components/repo/DetailsCard.svelte |  4 ++++
 src/components/repo/RepoCard.svelte    | 19 +++++++++++++------
 src/components/repo/RepoView.svelte    |  2 +-
 src/lib/copy.ts                        |  2 +-
 4 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/repo/DetailsCard.svelte b/src/components/repo/DetailsCard.svelte
index 96a450b..832cb2d 100644
--- a/src/components/repo/DetailsCard.svelte
+++ b/src/components/repo/DetailsCard.svelte
@@ -131,12 +131,16 @@
 </details>
 
 <style>
+  details {
+    margin: var(--space-12) var(--space-4);
+  }
   summary {
     cursor: pointer;
     font-weight: 600;
   }
   section {
     margin-top: var(--space-6);
+    padding: 0 var(--space-4);
   }
   section:first-of-type {
     margin-top: var(--space-4);
diff --git a/src/components/repo/RepoCard.svelte b/src/components/repo/RepoCard.svelte
index 0a40463..856ab27 100644
--- a/src/components/repo/RepoCard.svelte
+++ b/src/components/repo/RepoCard.svelte
@@ -28,7 +28,7 @@
   {#if info.archive.available}
     <div class="card">
       <RepoHeader {info} />
-      <h3>Data available!</h3>
+      <h3 class="yay">Data available!</h3>
       <p>{DATA_AVAILABLE_LINE}</p>
       {#if info.syncState.state !== 'synchronized'}
         <p>{SNAPSHOT_LINE}</p>
@@ -36,13 +36,14 @@
       <p class="downloads">
         Download:
         <a class="btn blah" href={repoDownloadUrl(info.did, 'car')}>CAR file</a>
-        or
+        <span class="advice">standard archive format, <strong>recommended</strong></span>
+      </p>
+      <p>
+        Alternative:
         <a class="btn blah" href={repoDownloadUrl(info.did, 'star-lite')}>STAR-lite</a>
+        <span class="advice">(efficient and small, not supported everywhere)</span>
       </p>
-      <details class="how-to-choose">
-        <summary>How to choose?</summary>
-        <p>(TODO: guidance for choosing between CAR and STAR-lite)</p>
-      </details>
+
       {@render statusLine()}
     </div>
   {:else}
@@ -83,6 +84,12 @@
   .card :global(.did-heading) {
     margin: 0 0 var(--space-6);
   }
+  .yay {
+    color: var(--color-accent2);
+  }
+  .advice {
+    color: var(--color-muted);
+  }
   .downloads {
     margin-top: var(--space-6);
   }
diff --git a/src/components/repo/RepoView.svelte b/src/components/repo/RepoView.svelte
index 145bf03..c081a4d 100644
--- a/src/components/repo/RepoView.svelte
+++ b/src/components/repo/RepoView.svelte
@@ -132,7 +132,7 @@
   }
   /* extra separation between the primary card and the technical details */
   article > :global(* + details) {
-    margin-top: var(--space-8);
+    margin-top: var(--space-12);
   }
   code {
     overflow-wrap: anywhere;
diff --git a/src/lib/copy.ts b/src/lib/copy.ts
index 9f76c84..fe984dd 100644
--- a/src/lib/copy.ts
+++ b/src/lib/copy.ts
@@ -19,7 +19,7 @@ export const HANDLE_MATCH_EXACT_LINE = 'This handle matches an account:';
 export const HANDLE_MATCH_FUZZY_LINE = 'Accounts with similar handles:';
 
 export const DATA_AVAILABLE_LINE =
-  "Hubble has a complete copy of this account's public data repository, ready to download as a portable archive.";
+  "Hubble has synchronized this account's public data.";
 
 export const LOCALLY_MODERATED_LINE =
   'This repo is currently unavailable due to a hubble moderation action.';
-- 
2.51.2