From 5b4ce3416332fa0b4aa62600893881caf9af75ff Mon Sep 17 00:00:00 2001 From: Leni Aniva Date: Wed, 16 Oct 2024 17:04:54 -0700 Subject: [PATCH 1/3] fix: Set tw prose colours --- tailwind.config.ts | 77 ++++++++++++++++++++++------------------------ 1 file changed, 36 insertions(+), 41 deletions(-) diff --git a/tailwind.config.ts b/tailwind.config.ts index 7a0263f..cbe2c08 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -121,57 +121,52 @@ const config: Config = { maxWidth: "100%", }; const themeTokiwa = { - h1: { - color: theme('colors.eucalyptus.700'), - }, - h2: { - color: theme('colors.eucalyptus.700'), - }, - h3: { - color: theme('colors.eucalyptus.800'), - }, - h4: { - color: theme('colors.eucalyptus.800'), - }, + '--tw-prose-body': theme('colors.gray.900'), + '--tw-prose-headings': theme('colors.eucalyptus.700'), + '--tw-prose-lead': theme('colors.eucalyptus.400'), + '--tw-prose-links': theme('colors.eucalyptus.400'), + '--tw-prose-bold': theme('colors.eucalyptus.800'), + '--tw-prose-counters': theme('colors.gray.900'), + '--tw-prose-bullets': theme('colors.java.900'), + '--tw-prose-hr': theme('colors.gray.600'), + '--tw-prose-quotes': theme('colors.gray.900'), + '--tw-prose-quote-borders': theme('colors.eucalyptus.700'), + '--tw-prose-captions': theme('colors.gray.800'), + '--tw-prose-code': theme('colors.sunglow.900'), + '--tw-prose-pre-code': theme('colors.gray.500'), + '--tw-prose-pre-bg': theme('colors.gray.500'), + '--tw-prose-th-borders': theme('colors.gray.500'), + '--tw-prose-td-borders': theme('colors.gray.500'), a: { color: theme('colors.eucalyptus.400'), - "&:focus": { + "&:hover, &:focus": { color: theme('colors.java.500'), }, }, - blockquote: { - color: theme('colors.gray.800'), - }, - code: { - color: theme('colors.gray.800'), - }, }; const themeStar = { - color: theme('colors.gray.200'), - h1: { - color: theme('colors.eucalyptus.300'), - }, - h2: { - color: theme('colors.eucalyptus.300'), - }, - h3: { - color: theme('colors.eucalyptus.200'), - }, - h4: { - color: theme('colors.eucalyptus.200'), - }, + '--tw-prose-body': theme('colors.gray.400'), + '--tw-prose-headings': theme('colors.eucalyptus.500'), + '--tw-prose-lead': theme('colors.eucalyptus.400'), + '--tw-prose-links': theme('colors.eucalyptus.500'), + '--tw-prose-bold': theme('colors.eucalyptus.100'), + '--tw-prose-counters': theme('colors.gray.100'), + '--tw-prose-bullets': theme('colors.java.100'), + '--tw-prose-hr': theme('colors.gray.400'), + '--tw-prose-quotes': theme('colors.gray.100'), + '--tw-prose-quote-borders': theme('colors.eucalyptus.300'), + '--tw-prose-captions': theme('colors.gray.200'), + '--tw-prose-code': theme('colors.sunglow.100'), + '--tw-prose-pre-code': theme('colors.gray.500'), + '--tw-prose-pre-bg': theme('colors.gray.500'), + '--tw-prose-th-borders': theme('colors.gray.500'), + '--tw-prose-td-borders': theme('colors.gray.500'), a: { - color: theme('colors.eucalyptus.500'), - "&:focus": { - color: theme('colors.java.500'), + color: theme('colors.eucalyptus.300'), + "&:hover, &:focus": { + color: theme('colors.java.400'), }, }, - blockquote: { - color: theme('colors.gray.300'), - }, - code: { - color: theme('colors.gray.300'), - }, }; return { From a10e282166ebceb5621450b735526b7aab235d78 Mon Sep 17 00:00:00 2001 From: Leni Aniva Date: Wed, 16 Oct 2024 17:20:15 -0700 Subject: [PATCH 2/3] feat: Use less intensive colour for dark mode code --- tailwind.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tailwind.config.ts b/tailwind.config.ts index cbe2c08..848a2cd 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -156,7 +156,7 @@ const config: Config = { '--tw-prose-quotes': theme('colors.gray.100'), '--tw-prose-quote-borders': theme('colors.eucalyptus.300'), '--tw-prose-captions': theme('colors.gray.200'), - '--tw-prose-code': theme('colors.sunglow.100'), + '--tw-prose-code': theme('colors.sunglow.300'), '--tw-prose-pre-code': theme('colors.gray.500'), '--tw-prose-pre-bg': theme('colors.gray.500'), '--tw-prose-th-borders': theme('colors.gray.500'), From a8f3f7aad2241225567c6ef1c880180ac707f69e Mon Sep 17 00:00:00 2001 From: Leni Aniva Date: Wed, 16 Oct 2024 23:23:00 -0700 Subject: [PATCH 3/3] fix: Remove box shadow; Fix footer colour --- src/app.css | 4 +++- src/routes/+page.svelte | 4 ++-- src/routes/Footer.svelte | 3 ++- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/app.css b/src/app.css index 158009e..e577683 100644 --- a/src/app.css +++ b/src/app.css @@ -37,13 +37,14 @@ --radius: 0.5rem; + --shadow: theme('colors.java.800'); --name: theme('colors.java.800'); --navlink: theme('colors.eucalyptus.400'); } .dark { --background: 20 14.3% 4.1%; - --foreground: 230 9.1% 97.8%; + --foreground: 150 9.1% 70%; --muted: 12 6.5% 15.1%; --muted-foreground: 24 5.4% 63.9%; @@ -70,6 +71,7 @@ --destructive-foreground: 60 9.1% 97.8%; --ring: 24 5.7% 82.9%; + --shadow: theme('colors.java.100'); --name: theme('colors.java.300'); --navlink: theme('colors.eucalyptus.200'); } diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 419be02..88d8cd3 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -138,8 +138,8 @@ width: 100%; @apply bg-background; @apply dark:bg-gray-800; - box-shadow: - 0px -5px 10px 10px var(--foreground); + /*box-shadow: + 0px -5px 5px var(--shadow);*/ } #bio { max-width: max(50vw, 100vh); diff --git a/src/routes/Footer.svelte b/src/routes/Footer.svelte index d8433cb..65443af 100644 --- a/src/routes/Footer.svelte +++ b/src/routes/Footer.svelte @@ -7,6 +7,7 @@ text-align: center; bottom: 10px; font-size: 12px; - color: #888; + background-color: var(--background); + color: var(--foreground); }