Visual polish

lumen-notes · Dec 13, 2024 · c5f4d5d · c5f4d5d
1 parent 4ee8fd9
commit c5f4d5d
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 24 deletions.
diff --git a/src/components/note-preview.tsx b/src/components/note-preview.tsx
@@ -16,31 +16,19 @@ export function NotePreview({ note }: { note: Note }) {
       className="flex aspect-[5/3] w-full flex-col gap-1.5 overflow-hidden p-3 [contain:layout_paint]"
     >
       {(note.type === "daily" || note.type === "weekly") && !note.title ? (
-        <div className="flex h-6 items-center gap-2.5 pr-8 coarse:pr-10">
-          <div className="grid h-5 w-5 place-items-center">
-            {note.type === "daily" ? (
-              <CalendarDateIcon16
-                date={new Date(note.id).getUTCDate()}
-                className="h-4 w-4 text-text-secondary coarse:h-5 coarse:w-5"
-              />
-            ) : (
-              <CalendarIcon16 className="h-4 w-4 text-text-secondary coarse:h-5 coarse:w-5" />
-            )}
-          </div>
-          <div className="flex w-0 flex-grow items-baseline gap-2.5">
-            <span className="truncate font-semibold">{note.displayName}</span>
-            <span className="truncate text-sm text-text-secondary">
-              {note.type === "daily" ? formatDateDistance(note.id) : formatWeekDistance(note.id)}
-            </span>
-          </div>
+        <div className="mb-1 flex items-baseline gap-2.5">
+          <span className="truncate font-semibold">{note.displayName}</span>
+          <span className="truncate text-sm text-text-secondary">
+            {note.type === "daily" ? formatDateDistance(note.id) : formatWeekDistance(note.id)}
+          </span>
         </div>
       ) : null}
       <div className="flex-grow overflow-hidden [mask-image:linear-gradient(to_bottom,black_0%,black_75%,transparent_100%)] [&_*::-webkit-scrollbar]:hidden">
         <div className="w-[125%] origin-top-left scale-[80%]">
           <Markdown hideFrontmatter>{note.content}</Markdown>
         </div>
       </div>
-      <div className="flex flex-wrap gap-1.5 pr-10 coarse:pr-12">
+      <div className="flex flex-wrap gap-1.5 pr-10 empty:hidden coarse:pr-12">
         {note.tags.slice(0, NUM_VISIBLE_TAGS).map((tag) => (
           <div
             key={tag}

diff --git a/src/routes/notes_.$.tsx b/src/routes/notes_.$.tsx
@@ -489,7 +489,7 @@ function NotePage() {
       floatingActions={
         <div className="flex gap-2 sm:hidden">
           {(!note && editorValue) || isDirty ? (
-            <div className="flex rounded-lg bg-bg-backdrop backdrop-blur-sm">
+            <div className="flex rounded-lg bg-bg-backdrop backdrop-blur-md">
               <Button
                 disabled={isSignedOut}
                 variant="primary"
@@ -501,7 +501,7 @@ function NotePage() {
               </Button>
             </div>
           ) : null}
-          <div className="flex rounded-lg bg-bg-backdrop backdrop-blur-sm">
+          <div className="flex rounded-lg bg-bg-backdrop backdrop-blur-md">
             <IconButton
               aria-label={mode === "read" ? "Write mode" : "Read mode"}
               shortcut={toggleModeShortcut}

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -78,11 +78,11 @@ body:has([data-resizing="true"]) * {
 }
 
 .card-2 {
-  @apply card bg-bg-overlay shadow-lg;
+  @apply card bg-bg-overlay-backdrop shadow-lg backdrop-blur-lg;
 }
 
 .card-3 {
-  @apply card bg-bg-overlay shadow-2xl;
+  @apply card bg-bg-overlay-backdrop shadow-2xl backdrop-blur-xl;
 }
 
 /* Nav item */

diff --git a/src/styles/variables.css b/src/styles/variables.css
@@ -42,7 +42,8 @@
   --color-bg-inset: var(--neutral-2);
   --color-bg-card: white;
   --color-bg-overlay: white;
-  --color-bg-backdrop: hsla(0 0% 99% / 0.65); /* var(--color-bg-inset) at 65% opacity */
+  --color-bg-backdrop: #fcfcfccc;
+  --color-bg-overlay-backdrop: #ffffffcc;
   --color-bg-secondary: var(--neutral-a3);
   --color-bg-tertiary: var(--neutral-a4);
   --color-bg-code-block: var(--neutral-3);
@@ -82,7 +83,8 @@
     --color-bg-inset: black;
     --color-bg-card: var(--neutral-2);
     --color-bg-overlay: var(--neutral-3);
-    --color-bg-backdrop: hsla(0 0% 7% / 0.65); /* var(--color-bg-inset) at 65% opacity */
+    --color-bg-backdrop: #111111cc;
+    --color-bg-overlay-backdrop: #222222cc;
 
     /* Border colors */
     --color-border-focus: var(--cyan-11);

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -42,6 +42,7 @@ module.exports = {
         card: "var(--color-bg-card)",
         overlay: "var(--color-bg-overlay)",
         backdrop: "var(--color-bg-backdrop)",
+        "overlay-backdrop": "var(--color-bg-overlay-backdrop)",
         secondary: "var(--color-bg-secondary)",
         tertiary: "var(--color-bg-tertiary)",
         "code-block": "var(--color-bg-code-block)",