Feat/add table and dark mode (#69)

* feat: add css table * feat: add dark mode * feat: images with brightness
halivert · Dec 28, 2024 · 6512444 · 6512444
1 parent ed74604
commit 6512444
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 9 deletions.
diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
@@ -11,7 +11,7 @@ const t = useTranslations(lang)
 
 <template>
   <footer
-    class="flex z-20 bg-background-300 border-t-2 border-background-400"
+    class="flex flex-col lg:flex-row z-20 bg-background-300 border-t-2 border-background-400 dark:bg-gray-900 dark:border-background-950"
     style="grid-area: footer"
   >
     <div class="flex-1 basis-1/5 flex items-center justify-center">

diff --git a/src/components/AppMenu.vue b/src/components/AppMenu.vue
@@ -37,7 +37,12 @@ function itemIsActive(href: string, exact?: boolean) {
         <li>
           <a
             class="inline-flex lg:flex items-center justify-center aspect-square max-h-28 mx-auto min-h-0 rounded-full px-3 py-2"
-            :class="{ 'bg-background-400/50': itemIsActive('/', true) }"
+            :class="{
+              'bg-background-400/50 dark:bg-background-900/50': itemIsActive(
+                '/',
+                true,
+              ),
+            }"
             :href="getRelativeLocaleUrl(lang, '/')"
           >
             <slot />
@@ -52,7 +57,9 @@ function itemIsActive(href: string, exact?: boolean) {
           <a
             class="block px-3 py-2 lg:px-6 lg:py-4 rounded-full"
             :class="{
-              'bg-background-400/50': itemIsActive(link.match ?? href),
+              'bg-background-400/50 dark:bg-background-900/50': itemIsActive(
+                link.match ?? href,
+              ),
             }"
             :href="getRelativeLocaleUrl(lang, href)"
             >{{ link.text }}</a

diff --git a/src/layouts/BlogPaginationLayout.astro b/src/layouts/BlogPaginationLayout.astro
@@ -28,7 +28,7 @@ const title = category ? `${t(category.id)} |` : ""
 		{
 			category && (
 				<div class="py-3 lg:px-10 px-3">
-					<div class="bg-background-400/60 lg:border-t-2 lg:border-l-2 lg:border-b-0 lg:border-r-0 border-b-2 border-r-2 border-primary-500 rounded-tl-3xl rounded-br-3xl py-3 px-8">
+					<div class="bg-background-400/60 dark:bg-gray-900/70 lg:border-t-2 lg:border-l-2 lg:border-b-0 lg:border-r-0 border-b-2 border-r-2 border-primary-500 rounded-tl-3xl rounded-br-3xl py-3 px-8">
 						<h2 class="text-3xl mb-2 font-title font-semibold">
 							{t(category.id)}
 						</h2>

diff --git a/src/layouts/html.astro b/src/layouts/html.astro
@@ -65,7 +65,7 @@ const t = useTranslations(lang)
 	</head>
 
 	<body
-		class="relative min-h-dvh grid bg-background-200 text-text-950 text-base antialiased selection:bg-accent-400 selection:text-text-950 font-body overflow-x-hidden"
+		class="relative min-h-dvh grid bg-background-200 text-text-950 text-base antialiased selection:bg-accent-400 selection:text-text-950 font-body overflow-x-hidden dark:bg-gray-950 dark:text-text-100"
 	>
 		<!--  -->
 		<!-- 		{% unless page.hide_skip_link or layout.hide_skip_link %} -->

diff --git a/src/styles/main.css b/src/styles/main.css
@@ -12,7 +12,6 @@
 }
 
 @media (prefers-color-scheme: dark) {
-
   .astro-code,
   .astro-code span {
     color: var(--shiki-dark);
@@ -32,8 +31,12 @@
     src: url(/webfonts/Iosevka-Regular.woff2) format("woff2");
   }
 
+  :not(.dark) img {
+    @apply dark:brightness-75;
+  }
+
   a {
-    @apply text-primary-700;
+    @apply text-primary-700 dark:text-primary-400;
   }
 
   hr {
@@ -45,7 +48,7 @@
   }
 
   .tag {
-    @apply bg-background-400/60;
+    @apply bg-background-400/60 dark:bg-background-600/60;
   }
 
   .content {
@@ -59,7 +62,8 @@
 
     p:not(:last-child),
     blockquote:not(:last-child),
-    pre {
+    pre:not(:last-child),
+    table:not(:last-child) {
       @apply mb-4;
     }
 
@@ -107,6 +111,41 @@
     h6 {
       @apply mt-4 mb-2 font-title;
     }
+
+    table {
+      @apply w-full border-collapse;
+
+      caption {
+        @apply font-title text-lg;
+      }
+
+      th {
+        @apply font-semibold;
+      }
+
+      td,
+      th {
+        @apply py-2 px-4;
+      }
+
+      tbody,
+      tfoot {
+        td,
+        th {
+          @apply border border-accent-700;
+        }
+      }
+
+      tbody {
+        tr:nth-child(2n) {
+          @apply bg-accent-400/10;
+        }
+      }
+
+      tfoot {
+        @apply bg-accent-700/20;
+      }
+    }
   }
 }