💻 | Rework typography style

src/assets/css/style.scss

@@ -19,5 +19,49 @@ body {
 }
 
 .nuxt-content-editor {
-  @apply dark:bg-dark-800 border dark:border-white border-black border-solid;
+  @apply dark:(bg-dark-800 text-white) border dark:border-white border-black border-solid;
+}
+
+//TODO remove with windicss/typography
+.nuxt-content-container {
+  p {
+    @apply text-gray-700 dark:text-gray-400
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-bold text-black dark:text-white mt-8 mb-4
+  }
+
+  ul {
+    @apply list-inside list-disc my-4 text-gray-700 dark:text-gray-400
+  }
+
+  p, li {
+    @apply text-lg
+  }
+
+  h1 {
+    @apply text-4xl
+  }
+
+  h2 {
+    @apply text-3xl
+  }
+
+  h3 {
+    @apply text-2xl
+  }
+
+  h4 {
+    @apply text-xl
+  }
+
+  h5 {
+    @apply text-lg
+  }
+
+  h6 {
+    @apply text-sm
+  }
+
 }

windi.config.js

@@ -1,5 +1,4 @@
 const colors = require('windicss/colors')
-const typography = require('windicss/plugin/typography')
 
 module.exports = {
   presets: [],
@@ -11,17 +10,16 @@ module.exports = {
           css: [
             {
               a: {
-                color: theme('colors.green.400'),
+                color: theme('colors.teal.400'),
                 transitionDuration: '300ms',
                 cursor: 'pointer',
-                borderBottomColor: theme('colors.dark.200'),
+                borderBottomColor: theme('colors.gray.200'),
                 borderOpacity: '0%',
                 borderBottomWidth: '2px',
                 borderBottomStyle: 'solid',
                 textDecoration: 'none',
                 '&:hover': {
-                  borderBottomColor: theme('colors.green.400'),
-                  color: theme('colors.black')
+                  borderBottomColor: theme('colors.teal.400'),
                 }
               }
             }
@@ -35,16 +33,15 @@ module.exports = {
                 color: theme('colors.dark.100'),
               },
               a: {
-                color: theme('colors.green.400'),
+                color: theme('colors.teal.400'),
                 transitionDuration: '300ms',
                 cursor: 'pointer',
-                borderBottomColor: theme('colors.dark.200'),
+                borderBottomColor: theme('colors.gray.700'),
                 borderBottomWidth: '2px',
                 borderBottomStyle: 'solid',
                 textDecoration: 'none',
                 '&:hover': {
-                  borderBottomColor: theme('colors.green.400'),
-                  color: theme('colors.white')
+                  borderBottomColor: theme('colors.teal.400'),
                 }
               },
               strong: {
@@ -832,6 +829,6 @@ module.exports = {
     'disabled',
   ],
   plugins: [
-    typography
+    require('windicss/plugin/typography')
   ],
 }