Tweak styles

lumen-notes · Dec 26, 2024 · 2b8055b · 2b8055b
1 parent d63114c
commit 2b8055b
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 9 deletions.
diff --git a/src/components/calendar.tsx b/src/components/calendar.tsx
@@ -238,7 +238,7 @@ function CalendarItem({
           <span className="hidden @[3rem]:inline">{name}</span>
           <span
             className={cx(
-              isToday && "-mx-1 -my-[0.125rem] rounded px-1 py-[0.125rem]",
+              isToday && "-mx-1 -my-[0.125rem] rounded-sm px-1 py-[0.125rem]",
               // Outline the current day
               isToday && !isActive && "shadow-[inset_0_0_0_1px_currentColor]",
               // Make outline bolder if current day is active

diff --git a/src/components/github-avatar.tsx b/src/components/github-avatar.tsx
@@ -10,7 +10,7 @@ export function GitHubAvatar({ login, size = 32, className, style, ...props }: G
     <div
       aria-hidden
       className={cx(
-        "inline-block size-icon flex-shrink-0 rounded-full bg-[white] bg-cover ring-1 ring-inset ring-border-secondary 2x:ring-[0.5px]",
+        "inline-block size-icon flex-shrink-0 rounded-full bg-[white] bg-cover ring-1 ring-inset ring-border-secondary",
         className,
       )}
       style={{

diff --git a/src/components/markdown.tsx b/src/components/markdown.tsx
@@ -226,7 +226,7 @@ function MarkdownContent({ children, className }: { children: string; className?
 function BookCover({ isbn }: { isbn: string }) {
   return (
     <a
-      className="focus-ring inline-block aspect-[2/3] h-20 rounded-sm bg-bg-secondary bg-cover bg-center shadow-sm ring-1 ring-inset ring-border-secondary transition-[box-shadow] hover:shadow-md 2x:ring-[0.5px]"
+      className="focus-ring inline-block aspect-[2/3] h-20 rounded-sm bg-bg-secondary bg-cover bg-center shadow-sm ring-1 ring-inset ring-border-secondary transition-[box-shadow] hover:shadow-md"
       href={`https://openlibrary.org/isbn/${isbn}`}
       target="_blank"
       rel="noopener noreferrer"

diff --git a/src/components/note-favicon.tsx b/src/components/note-favicon.tsx
@@ -59,7 +59,7 @@ export const NoteFavicon = React.memo(
       icon = (
         <div
           data-testid="favicon-isbn"
-          className="focus-ring inline-block aspect-[3/4] h-icon rounded-[2px] bg-bg-secondary bg-cover bg-center shadow-sm ring-1 ring-inset ring-border-secondary 2x:ring-[0.5px]"
+          className="focus-ring inline-block aspect-[3/4] h-icon rounded-[2px] bg-bg-secondary bg-cover bg-center shadow-sm ring-1 ring-inset ring-border-secondary"
           style={{
             backgroundImage: `url(https://covers.openlibrary.org/b/isbn/${note.frontmatter.isbn}-S.jpg)`,
           }}

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -70,7 +70,7 @@ body:has([data-resizing="true"]) * {
 /* Card */
 
 .card {
-  @apply rounded-lg border-0 ring-1 ring-border-secondary 2x:ring-[0.5px] dark:ring-inset;
+  @apply rounded-lg border-0 ring-1 ring-border-secondary dark:ring-inset;
 }
 
 .card-1 {

diff --git a/src/styles/variables.css b/src/styles/variables.css
@@ -73,10 +73,10 @@
   --font-weight-bold: 550;
 
   /* Border radii */
-  --border-radius-sm: 6px; /* base - 2px */
-  --border-radius-base: 8px; /* base */
-  --border-radius-lg: 12px; /* base + 4px */
-  --border-radius-xl: 16px; /* base + 8px */
+  --border-radius-sm: 4px; /* base - 2px */
+  --border-radius-base: 6px; /* base */
+  --border-radius-lg: 8px; /* base + 4px */
+  --border-radius-xl: 12px; /* base + 8px */
   --border-radius-full: 9999px;
 
   /* Icons */
@@ -116,6 +116,13 @@
     --font-weight-normal: 450;
     --font-weight-bold: 600;
 
+    /* Border radii */
+    --border-radius-sm: 6px; /* base - 2px */
+    --border-radius-base: 8px; /* base */
+    --border-radius-lg: 12px; /* base + 4px */
+    --border-radius-xl: 16px; /* base + 8px */
+    --border-radius-full: 9999px;
+
     /* Icons */
     --icon-size: 20px;
   }