diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss index 054023d..b695fce 100644 --- a/src/assets/css/style.scss +++ b/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 + } + } diff --git a/windi.config.js b/windi.config.js index a85a4ef..f8593dc 100644 --- a/windi.config.js +++ b/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') ], }