feat(style): update site style

Author: ansidev

src/assets/scss/_base.scss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

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';
+    }
+  }
+}

src/assets/scss/app.scss

@@ -0,0 +1,2 @@
+@import 'base';
+@import 'styles';

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'

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: [

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'],