fix: note blockquote style

Innei · Aug 18, 2023 · cb2b5e4 · cb2b5e4 · vercel · Aug 18, 2023
1 parent ba7a6d1
commit cb2b5e4
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/app/notes/[id]/page.module.css b/src/app/notes/[id]/page.module.css
@@ -1,4 +1,12 @@
 .with-indent {
+  & {
+    --padding-h: -1rem;
+
+    @screen lg {
+      --padding-h: -45px;
+    }
+  }
+
   :global {
     .paragraph:first-child {
       margin-bottom: 4rem;
@@ -35,8 +43,8 @@
         }
       }
 
-      margin-left: calc(-3em + 2px);
-      margin-right: calc(-3em + 2px);
+      margin-left: var(--padding-h);
+      margin-right: var(--padding-h);
 
       line-height: 1.8;
       padding: 1em 1em 1em 2em;

diff --git a/src/components/widgets/note/NoteBanner.tsx b/src/components/widgets/note/NoteBanner.tsx
@@ -47,7 +47,7 @@ export const NoteRootBanner = () => {
   if (!banner) return null
 
   return (
-    <div className="mx-[-1rem] mb-4 mt-8 text-sm lg:mx-[-3rem]">
+    <div className="mx-[var(--padding-h)] mb-4 mt-8 text-sm">
       <NoteBanner {...banner} />
     </div>
   )