Merge pull request #232 from immichFrame/dev/jw/fontshadow

Add text-shadow to app.css to improve readability
immichFrame · Dec 13, 2024 · a0c29cb · a0c29cb
2 parents 2e6c44a + f6f08c2
commit a0c29cb
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 20 deletions.
diff --git a/immichFrame.Web/src/app.css b/immichFrame.Web/src/app.css
@@ -60,4 +60,4 @@ html {
 	height: 100%;
 	width: 100%;
 	font-size: 17px;
-}
+}
diff --git a/immichFrame.Web/src/lib/components/elements/asset-info.svelte b/immichFrame.Web/src/lib/components/elements/asset-info.svelte
@@ -61,18 +61,18 @@
 		{$configStore.style == 'blur' ? 'backdrop-blur-lg rounded-tl-2xl' : ''}	"
 	>
 		{#if showPhotoDate && formattedDate}
-			<p class="text-sm font-thin">{formattedDate}</p>
+			<p class="text-sm font-thin text-shadow-sm">{formattedDate}</p>
 		{/if}
 		{#if showImageDesc && desc}
-			<p class="text-base font-light">{desc}</p>
+			<p class="text-base font-light text-shadow-sm">{desc}</p>
 		{/if}
 		{#if showPeopleDesc && availablePeople}
-			<p class="text-sm font-light">
+			<p class="text-sm font-light text-shadow-sm">
 				{availablePeople.map((x) => x.name).join(', ')}
 			</p>
 		{/if}
 		{#if showLocation && location}
-			<p class="text-base font-light">{location}</p>
+			<p class="text-base font-light text-shadow-sm">{location}</p>
 		{/if}
 	</div>
 {/if}
diff --git a/immichFrame.Web/src/lib/components/elements/clock.svelte b/immichFrame.Web/src/lib/components/elements/clock.svelte
@@ -50,17 +50,17 @@
 	{$configStore.style == 'blur' ? 'backdrop-blur-lg rounded-tr-2xl' : ''}	
 	drop-shadow-2xl p-3"
 >
-	<p class="mt-2 text-sm sm:text-sm md:text-md lg:text-xl font-thin">{formattedDate}</p>
-	<p class="mt-2 text-4xl sm:text-4xl md:text-6xl lg:text-8xl font-bold">{timePortion}</p>
+	<p class="mt-2 text-sm sm:text-sm md:text-md lg:text-xl font-thin text-shadow-sm">{formattedDate}</p>
+	<p class="mt-2 text-4xl sm:text-4xl md:text-6xl lg:text-8xl font-bold text-shadow-lg">{timePortion}</p>
 	{#if weather}
 		<div>
-			<div class="text-xl sm:text-xl md:text-2xl lg:text-3xl font-semibold">
+			<div class="text-xl sm:text-xl md:text-2xl lg:text-3xl font-semibold text-shadow-sm">
 				{weather.location},
 				{weather.temperature?.toFixed(1)}
 				{weather.unit}
 			</div>
 			{#if $configStore.showWeatherDescription}
-				<p class="text-sm sm:text-sm md:text-md lg:text-xl">{weather.description}</p>
+				<p class="text-sm sm:text-sm md:text-md lg:text-xl text-shadow-sm">{weather.description}</p>
 			{/if}
 		</div>
 	{/if}

diff --git a/immichFrame.Web/tailwind.config.js b/immichFrame.Web/tailwind.config.js
@@ -1,14 +1,30 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-	mode: 'jit',
-	content: ['./src/**/*.{html,js,svelte,ts}'],
-	theme: {
-		extend: {
-			colors: {
-				primary: 'var(--primary-color)',
-				secondary: 'var(--secondary-color)'
-			}
-		}
-	},
-	plugins: []
+  mode: 'jit',
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {
+      colors: {
+        primary: 'var(--primary-color)',
+        secondary: 'var(--secondary-color)',
+      },
+      textShadow: {
+        sm: '2px 2px 4px rgba(0, 0, 0, 0.8)', //for small text
+        lg: '3px 3px 6px rgba(0, 0, 0, 0.5)', //for large text
+      },
+    },
+  },
+  plugins: [
+    function ({ addUtilities, theme, e }) {
+      const textShadows = theme('textShadow');
+      const textShadowUtilities = Object.keys(textShadows).reduce((acc, key) => {
+        acc[`.${e(`text-shadow-${key}`)}`] = {
+          textShadow: textShadows[key],
+        };
+        return acc;
+      }, {});
+
+      addUtilities(textShadowUtilities);
+    },
+  ],
 };