Code block styling updates (#1312)

denoland · Jan 6, 2025 · 9137c5a · 9137c5a
1 parent 82df85d
commit 9137c5a
Showing 1 changed file with 21 additions and 29 deletions.
diff --git a/styles.css b/styles.css
@@ -200,8 +200,8 @@ h1 {
 
 pre:has(code.highlight),
 pre.highlight:has(code) {
-  @apply px-8 py-6 max-sm:-mx-4;
-  @apply max-sm:rounded-none !important;
+  @apply px-4 py-8 max-sm:-mx-4 border-x-0 sm:border sm:px-8
+    max-sm:!rounded-none;
 }
 
 pre:has(code.highlight):where(:hover, :focus) + .copyButton,
@@ -223,19 +223,18 @@ pre.highlight:has(code):where(:hover, :focus) + .copyButton {
   }
 }
 
-.markdownBlockTitle + div > pre:has(code.highlight) {
-  @apply rounded-t-none border-t-0;
-}
-
 .ddoc .markdown-body tr:nth-child(2n) {
   @apply bg-background-secondary !important;
 }
 
 .markdownBlockTitle {
-  background-color: var(--bgColor-muted, var(--color-canvas-subtle));
-  @apply px-8 py-3 max-sm:-mx-4 sm:rounded-t-md border text-sm font-semibold
-    dark:bg-background-secondary dark:text-foreground-secondary
-    dark:border-background-tertiary;
+  @apply bg-slate-100 p-2 leading-none rounded border text-xs font-semibold z-10
+    relative w-max !-mb-4 text-foreground-secondary/80 sm:left-2
+    dark:border-background-tertiary dark:bg-slate-900;
+}
+
+.deno-tabs .markdownBlockTitle {
+  @apply left-2;
 }
 
 .markdown-body h2:hover .anchor-end {
@@ -413,8 +412,8 @@ body {
 }
 
 .markdown-body > pre.snippet-code[data-example-position="only"] {
-  @apply md:border-t md:border-b md:pt-4 rounded-t h-full md:rounded;
-  md: rounded-b;
+  @apply md:border-t md:border-b md:pt-4 rounded-t h-full md:rounded
+    md:rounded-b;
 }
 
 .markdown-body > pre.snippet-code[data-example-position="first"] {
@@ -431,32 +430,32 @@ body {
 }
 
 .deno-tabs {
-  @apply -mx-4 mb-4 md:mx-0;
+  @apply -mx-4 mb-6 sm:mx-0;
 }
 
 .deno-tabs > ul.deno-tabs-buttons {
-  @apply flex flex-wrap list-none p-0 ml-4 md:m-0;
+  @apply flex flex-wrap list-none p-0 ml-4 sm:m-0;
 }
 
 .deno-tabs > ul.deno-tabs-buttons > li {
-  @apply m-0 m-0;
+  @apply m-0;
 }
 
 .deno-tabs > ul.deno-tabs-buttons > li > button {
-  @apply inline-block mr-2 px-4 py-2 text-sm font-semibold text-slate-700
+  @apply inline-block mr-2 px-4 py-2 text-sm font-semibold text-slate-500
     rounded-t bg-slate-100/80 hover:bg-blue-50 border border-transparent
-    border-b-0 dark:text-slate-400 dark:bg-transparent
-    dark:border-background-tertiary dark:hover:bg-slate-700;
+    border-b-0 dark:text-slate-500 dark:bg-transparent
+    dark:border-background-tertiary dark:hover:bg-slate-600;
 }
 
 .deno-tabs > ul.deno-tabs-buttons > li > button[data-active="true"] {
   @apply border-slate-200 bg-slate-100 text-slate-950 border-b-0 z-10 -mb-[1px]
-    pb-[calc(0.5rem+1px)] relative dark:text-foreground-secondary
+    pb-[calc(0.5rem+1px)] relative dark:text-slate-50
     dark:bg-background-secondary dark:border-background-tertiary;
 }
 
 .deno-tabs > div.deno-tabs-content > div {
-  @apply hidden py-4 px-4 rounded rounded-tl-none bg-slate-100 border
+  @apply hidden p-2 sm:rounded-lg sm:rounded-tl-none sm:p-4 bg-slate-100 border
     border-slate-200 dark:bg-background-secondary
     dark:border-background-tertiary;
 }
@@ -471,14 +470,7 @@ body {
 
 .markdown-body .deno-tabs pre {
   @apply border mx-0 bg-white border-slate-200 dark:bg-background-primary
-    dark:border-background-tertiary;
-}
-
-.deno-tabs .markdownBlockTitle {
-  @apply px-8 py-2 max-sm:-mx-4 sm:rounded-t-md border border-slate-200
-    bg-slate-50 text-slate-900 text-sm font-semibold
-    dark:bg-background-secondary dark:border-background-tertiary
-    dark:text-foreground-secondary;
+    !rounded dark:border-background-tertiary;
 }
 
 /* Strips bottom margin in instances where multiple code samples exist in a tab. */
@@ -488,7 +480,7 @@ body {
 
 .markdown-body .highlight pre,
 .markdown-body pre {
-  @apply bg-gray-50 dark:border-background-tertiary
+  @apply bg-slate-50 dark:border-background-tertiary
     dark:bg-background-secondary;
 }