From dd1f9fff9d7a514f0a7f56a94beb103b0f8328a2 Mon Sep 17 00:00:00 2001
From: Le Minh Tri <ansidev@gmail.com>
Date: Sat, 25 Feb 2023 21:51:46 +0700
Subject: [PATCH] feat(style): update site style

---
 src/assets/scss/_base.scss   |  3 ++
 src/assets/scss/_styles.scss | 62 ++++++++++++++++++++++++++++++++++++
 src/assets/scss/app.scss     |  2 ++
 src/layouts/AppLayout.astro  |  2 ++
 tailwind.config.cjs          | 28 +++++++++++++++-
 theme.config.cjs             |  8 ++---
 6 files changed, 100 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/scss/_base.scss
 create mode 100644 src/assets/scss/_styles.scss
 create mode 100644 src/assets/scss/app.scss

diff --git a/src/assets/scss/_base.scss b/src/assets/scss/_base.scss
new file mode 100644
index 00000000..b5c61c95
--- /dev/null
+++ b/src/assets/scss/_base.scss
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/assets/scss/_styles.scss b/src/assets/scss/_styles.scss
new file mode 100644
index 00000000..004d79d2
--- /dev/null
+++ b/src/assets/scss/_styles.scss
@@ -0,0 +1,62 @@
+%link {
+  @apply no-underline;
+  @apply text-style-link hover:text-style-link-hover;
+}
+
+a {
+  @extend %link;
+}
+
+/* Badge CSS */
+%badge {
+  @apply px-3 py-2 border rounded-full border-style-primary;
+}
+
+.badge-default {
+  @extend %badge;
+  @apply bg-style-primary text-style-primary-inverted;
+}
+
+.badge-outline {
+  @extend %badge;
+  @apply bg-transparent text-style-secondary hover:bg-style-primary hover:text-style-primary-inverted;
+}
+
+/* Prose CSS */
+.prose {
+  @apply transition duration-150 ease-in w-full max-w-5xl;
+  @apply prose-a:no-underline prose-a:break-words;
+  & :is(:where(a):not(:where([class~='not-prose'] *))) {
+    @extend %link;
+  }
+
+  li:has(> a.new) {
+    list-style-type: '\2610';
+    padding-inline-start: 1ch;
+
+    &::marker {
+      @apply pt-1 text-gray-500;
+    }
+  }
+
+  li:has(> a.internal:not(.new)) {
+    list-style-type: '\2611';
+    padding-inline-start: 1ch;
+
+    &::marker {
+      @apply pt-1 text-green-500;
+    }
+  }
+
+  a.new {
+    @apply text-gray-500;
+  }
+
+  a.internal:not(.new) {
+    @apply text-green-500 hover:text-style-secondary;
+
+    &::after {
+      content: ' \2192';
+    }
+  }
+}
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
new file mode 100644
index 00000000..5cb25987
--- /dev/null
+++ b/src/assets/scss/app.scss
@@ -0,0 +1,2 @@
+@import 'base';
+@import 'styles';
diff --git a/src/layouts/AppLayout.astro b/src/layouts/AppLayout.astro
index 5ddee69d..bef74a21 100644
--- a/src/layouts/AppLayout.astro
+++ b/src/layouts/AppLayout.astro
@@ -1,4 +1,6 @@
 ---
+import '@/assets/scss/app.scss'
+
 import AppFooter from '@/components/AppFooter.astro'
 import AppHeader from '@/components/AppHeader.astro'
 import SEOMeta from '@/components/SEOMeta.astro'
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index f740f9fa..0fd2f7e3 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -9,7 +9,33 @@ module.exports = {
     extend: {
       colors: {
         transparent: 'transparent',
-      }
+      },
+      typography: theme => ({
+        DEFAULT: {
+          css: {
+            color: theme('textColor.style.primary'),
+            '--tw-prose-headings': theme('textColor.style.primary'),
+            '--tw-prose-bold': theme('textColor.style.primary'),
+            '--tw-prose-quotes': theme('textColor.style.primary'),
+            '--tw-prose-code': theme('textColor.style.primary-inverted'),
+            '--tw-prose-pre-bg': theme('textColor.style.primary'),
+            code: {
+              backgroundColor: theme('backgroundColor.style.primary'),
+              paddingTop: '2px',
+              paddingBottom: '5px',
+              paddingLeft: '5px',
+              paddingRight: '5px',
+              borderRadius: '3px',
+            },
+            'code::before': {
+              content: 'none',
+            },
+            'code::after': {
+              content: 'none',
+            },
+          }
+        },
+      }),
     },
   },
   plugins: [
diff --git a/theme.config.cjs b/theme.config.cjs
index 1fc1d78d..7b0f1cea 100644
--- a/theme.config.cjs
+++ b/theme.config.cjs
@@ -21,8 +21,6 @@ const darkTheme = ({ primary, secondary, tertiary }) => {
     fill: primary,
     text: secondary,
     'text-inverted': tertiary,
-    link: colors.blue['500'],
-    'link-hover': colors.pink['500'],
   }
 
   const textDifficultyColors = {
@@ -40,6 +38,8 @@ const darkTheme = ({ primary, secondary, tertiary }) => {
         primary: baseColors.text,
         'primary-inverted': baseColors['text-inverted'],
         secondary: baseColors.fill,
+        link: colors.blue['500'],
+        'link-hover': colors.pink['500'],
       },
       site: {
         'title': baseColors.text,
@@ -93,8 +93,6 @@ const lightTheme = ({ primary, secondary, tertiary }) => {
     fill: primary,
     text: secondary,
     'text-inverted': tertiary,
-    link: colors.blue['500'],
-    'link-hover': colors.pink['500'],
   }
 
   const textDifficultyColors = {
@@ -112,6 +110,8 @@ const lightTheme = ({ primary, secondary, tertiary }) => {
         primary: baseColors.text,
         'primary-inverted': baseColors['text-inverted'],
         secondary: baseColors.fill,
+        link: colors.blue['500'],
+        'link-hover': colors.pink['500'],
       },
       site: {
         'title': baseColors['text-inverted'],