feat(ui): update some tailwind styles of post page

mateusfg7 · Jun 13, 2023 · 16f28cc · 16f28cc
1 parent c8fda49
commit 16f28cc
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 70 deletions.
diff --git a/src/styles/base.css b/src/styles/base.css
@@ -23,6 +23,9 @@
     div[data-rehype-pretty-code-title=''][data-theme='dark'] {
       display: none;
     }
+    div[data-rehype-pretty-code-caption=''][data-theme='dark'] {
+      display: none;
+    }
   }
 
   html.dark {
@@ -33,5 +36,8 @@
     div[data-rehype-pretty-code-title=''][data-theme='light'] {
       display: none;
     }
+    div[data-rehype-pretty-code-caption=''][data-theme='light'] {
+      display: none;
+    }
   }
 }
diff --git a/src/styles/components.css b/src/styles/components.css
@@ -16,6 +16,44 @@
   .post-content {
     @apply leading-6;
 
+    nav {
+      &.toc {
+        @apply p-4;
+        @apply rounded-lg border border-black/10 dark:border-white/10;
+
+        ol {
+          @apply list-none;
+
+          &.toc-level-2 {
+            @apply px-4;
+          }
+          &.toc-level-3 {
+            @apply px-6;
+          }
+          &.toc-level-4 {
+            @apply px-8;
+          }
+
+          a {
+            @apply text-neutral-900 dark:text-neutral-300;
+
+            &.toc-link-h1 {
+              @apply font-medium;
+            }
+            &.toc-link-h2 {
+              @apply font-normal;
+            }
+            &.toc-link-h3 {
+              @apply font-light;
+            }
+            &.toc-link-h4 {
+              @apply font-extralight;
+            }
+          }
+        }
+      }
+    }
+
     h1,
     h2,
     h3,
@@ -55,7 +93,7 @@
     }
 
     iframe {
-      @apply h-[350px] w-[700px] max-w-full rounded-lg;
+      @apply h-[26rem] w-full max-w-full rounded-lg;
     }
 
     a {
@@ -106,6 +144,17 @@
       @apply italic text-black/80 dark:text-white/70;
     }
 
+    input[type='checkbox'] {
+      @apply form-checkbox;
+      @apply bg-transparent;
+      @apply rounded border-neutral-400 dark:border-neutral-700;
+
+      &[checked=''] {
+        @apply bg-blue-600 dark:bg-blue-800;
+        @apply border-blue-600 dark:border-blue-800;
+      }
+    }
+
     ol {
       @apply list-inside list-decimal;
     }
@@ -123,20 +172,20 @@
         }
 
         code {
-          @apply leading-8;
+          @apply leading-none;
         }
       }
     }
 
     code {
-      @apply text-ellipsis break-words rounded-lg bg-black/[.05] py-[0.16rem] px-1 dark:bg-white/[.05];
+      @apply text-ellipsis break-words rounded-lg bg-black/5 py-[0.16rem] px-1 dark:bg-white/5;
     }
 
     div[data-rehype-pretty-code-fragment=''] {
       @apply overflow-hidden rounded-lg;
+      @apply bg-black/5 dark:bg-white/5;
 
       pre {
-        @apply bg-black/[.05] dark:bg-white/[.05];
         @apply overflow-auto;
 
         & > code {
@@ -173,97 +222,64 @@
       }
 
       div[data-rehype-pretty-code-title=''] {
-        @apply bg-black/[.05] p-3 dark:bg-white/[.05];
-        @apply italic text-gray-500;
-        @apply border-b border-b-gray-300 dark:border-b-gray-600;
+        @apply bg-black/[.03] p-2 dark:bg-white/[.03];
+        @apply text-neutral-500;
+        @apply border-b border-b-neutral-300 dark:border-b-neutral-600;
       }
-    }
-
-    nav {
-      &.toc {
-        @apply p-4;
-        @apply rounded-lg border border-black/10 dark:border-white/10;
-
-        ol {
-          @apply list-none;
-
-          &.toc-level-2 {
-            @apply px-4;
-          }
-          &.toc-level-3 {
-            @apply px-6;
-          }
-          &.toc-level-4 {
-            @apply px-8;
-          }
-
-          a {
-            @apply text-neutral-900 dark:text-neutral-300;
-
-            &.toc-link-h1 {
-              @apply font-medium;
-            }
-            &.toc-link-h2 {
-              @apply font-normal;
-            }
-            &.toc-link-h3 {
-              @apply font-light;
-            }
-            &.toc-link-h4 {
-              @apply font-extralight;
-            }
-          }
-        }
-      }
-    }
-
-    div.math-display {
-      @apply w-fit p-6;
-
-      span.katex-display {
-        @apply m-0;
-      }
-    }
-
-    section.footnotes[data-footnotes='true'] {
-      ol li p {
-        @apply inline;
+      div[data-rehype-pretty-code-caption=''] {
+        @apply p-2;
+        @apply italic text-neutral-500/80;
+        @apply border-t border-t-neutral-300/40 dark:border-t-neutral-600/40;
       }
     }
 
     p.hint {
       @apply w-max rounded-lg border p-3;
 
       &.tip {
-        @apply text-cyan-900 dark:text-cyan-600;
-        @apply border-cyan-900 dark:border-cyan-600;
-        @apply bg-cyan-900/10 dark:bg-cyan-600/10;
+        @apply text-cyan-700 dark:text-cyan-600;
+        @apply border-cyan-700 dark:border-cyan-600;
+        @apply bg-cyan-700/10 dark:bg-cyan-600/10;
 
         a {
-          @apply text-cyan-900 dark:text-cyan-600;
+          @apply text-cyan-700 dark:text-cyan-600;
           @apply font-medium;
         }
       }
       &.warn {
-        @apply text-amber-900 dark:text-amber-600;
-        @apply border-amber-900 dark:border-amber-600;
-        @apply bg-amber-900/10 dark:bg-amber-600/10;
+        @apply text-amber-700 dark:text-amber-600;
+        @apply border-amber-700 dark:border-amber-600;
+        @apply bg-amber-700/10 dark:bg-amber-600/10;
 
         a {
-          @apply text-amber-900 dark:text-amber-600;
+          @apply text-amber-700 dark:text-amber-600;
           @apply font-medium;
         }
       }
       &.error {
-        @apply text-red-900 dark:text-red-600;
-        @apply border-red-900 dark:border-red-600;
-        @apply bg-red-900/10 dark:bg-red-600/10;
+        @apply text-red-700 dark:text-red-600;
+        @apply border-red-700 dark:border-red-600;
+        @apply bg-red-700/10 dark:bg-red-600/10;
 
         a {
-          @apply text-red-900 dark:text-red-600;
+          @apply text-red-700 dark:text-red-600;
           @apply font-medium;
         }
       }
     }
+
+    div.math-display {
+      @apply w-fit p-6;
+
+      span.katex-display {
+        @apply m-0;
+      }
+    }
+
+    section.footnotes[data-footnotes='true'] {
+      ol li p {
+        @apply inline;
+      }
+    }
   }
 }