adjust codeblock style

namachan10777 · Jun 25, 2024 · 09783aa · 09783aa
1 parent d749423
commit 09783aa
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 14 deletions.
diff --git a/src/components/composite/search-dialog.astro b/src/components/composite/search-dialog.astro
@@ -24,8 +24,7 @@ import { Icon } from "astro-icon/components";
     display: grid;
     grid-template-columns: auto 1fr auto;
     align-items: center;
-    column-gap: 1rem;
-    row-gap: 2rem;
+    gap: 2rem 1rem;
   }
 
   .search-box {
@@ -104,15 +103,14 @@ import { Icon } from "astro-icon/components";
 
   dialog {
     padding: 1rem;
-    border: none;
     background-color: var(--bg);
     border: solid var(--fg-normal) 1px;
     margin-top: 4rem;
     margin-inline: 1rem;
     width: 100%;
   }
 
-  @media screen and (min-width: 768px) {
+  @media screen and (width >= 768px) {
     dialog {
       width: 50%;
       margin-inline: auto;

diff --git a/src/components/mdx/pre.astro b/src/components/mdx/pre.astro
@@ -94,6 +94,14 @@ export interface Props {
       transform: scale(1.1);
     }
 
+    pre {
+      overflow-x: auto;
+      scrollbar-color: var(--fg-thumb) var(--fg-track);
+      font-size: var(--font-size-sm);
+      padding-block: 1rem;
+      border-radius: 0.2rem;
+    }
+
     pre :global(code) {
       counter-reset: line;
       font-family: var(--font-mono);
@@ -110,12 +118,6 @@ export interface Props {
       width: calc(var(--font-size-sm) * 2);
     }
 
-    pre {
-      overflow-x: auto;
-      scrollbar-color: var(--fg-thumb) var(--fg-track);
-      font-size: var(--font-size-sm);
-    }
-
     :global(body):has(theme-switcher[data-theme="dark"]) pre {
       background-color: var(--shiki-dark-bg);
     }

diff --git a/src/layouts/global.css b/src/layouts/global.css
@@ -11,7 +11,6 @@
   --font-size-sm: 0.875rem;
   --header-height: 3rem;
   --footer-height: 3rem;
-
   --light-bg: white;
   --light-bg-code: #eee;
   --light-bg-codeblock: #fff;
@@ -24,8 +23,7 @@
   --light-fg-linenum: rgb(0 0 0 / 40%);
   --light-fg-thumb: #bbb;
   --light-fg-track: #ddd;
-  --light-bg-mark: rgb(255, 238, 84);
-
+  --light-bg-mark: rgb(255 238 84);
   --dark-bg: #202020;
   --dark-bg-code: #303030;
   --dark-bg-codeblock: #303030;
@@ -38,7 +36,7 @@
   --dark-fg-linenum: rgb(255 255 255 / 40%);
   --dark-fg-thumb: #555;
   --dark-fg-track: #333;
-  --dark-bg-mark: rgb(121, 109, 7);
+  --dark-bg-mark: rgb(121 109 7);
 }
 
 body {