Unitto Popstar update

- Dark mode - Privacy policy updated
sadellie · Nov 28, 2023 · 4ea5cd1 · 4ea5cd1
1 parent bfc7995
commit 4ea5cd1
Show file tree

Hide file tree

Showing 24 changed files with 142 additions and 89 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,5 @@
 # Sad Ellie's cool website
-Build with SvelteKit
+
+```
+npm run dev
+```
diff --git a/src/lib/images/unitto/hero.png b/src/lib/images/unitto/hero.png
diff --git a/src/lib/images/unitto/post-horizontal1.png b/src/lib/images/unitto/post-horizontal1.png
diff --git a/src/lib/images/unitto/post-horizontal2.png b/src/lib/images/unitto/post-horizontal2.png
diff --git a/src/lib/images/unitto/post-horizontal3.png b/src/lib/images/unitto/post-horizontal3.png
diff --git a/src/lib/images/unitto/post-horizontal4.png b/src/lib/images/unitto/post-horizontal4.png
diff --git a/src/lib/images/unitto/post-vertical1.png b/src/lib/images/unitto/post-vertical1.png
diff --git a/src/lib/images/unitto/post-vertical2.png b/src/lib/images/unitto/post-vertical2.png
diff --git a/src/lib/images/unitto/post-vertical3.png b/src/lib/images/unitto/post-vertical3.png
diff --git a/src/lib/images/unitto/post-vertical4.png b/src/lib/images/unitto/post-vertical4.png
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -16,27 +16,27 @@
 	import Telegram from "./Telegram.svelte";
 </script>
 
-<div class="flex flex-col place-items-center p-8 bg-fuchsia-50">
+<div class="flex flex-col place-items-center p-8 bg-fuchsia-50 dark:bg-fuchsia-950 text-black dark:text-white">
 	<div
-		class="flex flex-col bg-fuchsia-200 py-16 xl:py-32 rounded-3xl place-items-center gap-8 bg-center bg-cover w-full relative"
+		class="flex flex-col py-16 xl:py-32 rounded-3xl place-items-center gap-8 bg-center bg-cover w-full relative dark:invert"
 		style="background-image: url({hero});"
 	>
-		<div class="flex flex-col place place-items-center">
+		<div class="flex flex-col place place-items-center dark:invert">
 			<p class="text-6xl md:text-8xl xl:text-9xl text-center font-medium">
 				Sad Ellie
 			</p>
 			<p class="text-xl md:text-2xl text-center">young IT specialist</p>
 		</div>
 		<a href="#contact">
 			<button
-				class="py-6 px-12 bg-fuchsia-600 hover:bg-fuchsia-500 transition-colors rounded-full text-2xl font-medium text-white"
+				class="py-6 px-12 bg-fuchsia-600 dark:bg-fuchsia-800 hover:bg-fuchsia-500 dark:hover:bg-fuchsia-700 transition-colors rounded-full text-2xl font-medium text-white dark:invert"
 			>
 				Contact
 			</button>
 		</a>
 	</div>
 
-	<div class="max-w-screen-xl">
+	<div class="max-w-screen-xl text-black dark:text-fuchsia-50">
 		<p class="text-4xl font-medium pt-16 pb-4 w-full">Who is Sad Ellie?</p>
 
 		<p class="w-full text-lg pb-2">

diff --git a/src/routes/Contact.svelte b/src/routes/Contact.svelte
@@ -1,16 +1,14 @@
 <script lang="ts">
-    import Email from "./Email.svelte";
-
     export let title: string;
     export let href: string;
     export let img: string;
 </script>
 
 <a
-    class="group/item flex flex-col rounded-2xl hover:rounded-3xl bg-fuchsia-100 hover:bg-fuchsia-200 overflow-hidden transition-all"
+    class="group/item flex flex-col rounded-2xl hover:rounded-3xl bg-fuchsia-100 dark:bg-fuchsia-900 hover:bg-fuchsia-200 dark:hover:bg-fuchsia-800 overflow-hidden transition-all h-full"
     {href}
     ><div
-        class="relative flex place-content-center place-items-center rounded-b-2xl bg-gradient-to-tl overflow-hidden from-fuchsia-100 via-pink-100 to-blue-100"
+        class="relative flex place-content-center place-items-center rounded-b-2xl bg-gradient-to-tl overflow-hidden from-fuchsia-800 via-pink-900 to-blue-900"
     >
         <div class="opacity-0 group-hover/item:opacity-100 transition-all rounded-b-2xl h-48 w-full bg-cover bg-center object-scale-down" style="background-image: url({img})"/>
         <div

diff --git a/src/routes/Product.svelte b/src/routes/Product.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <a
-    class="group/item flex flex-col rounded-2xl hover:rounded-3xl bg-fuchsia-100 hover:bg-fuchsia-200 overflow-hidden transition-all h-full"
+    class="group/item flex flex-col rounded-2xl hover:rounded-3xl bg-fuchsia-100 dark:bg-fuchsia-900 hover:bg-fuchsia-200 dark:hover:bg-fuchsia-800 overflow-hidden transition-all h-full"
     href={href}
 >
     <div class="rounded-b-2xl h-48 w-full bg-cover bg-center object-scale-down" style="background-image: url({imgSrc})"/>

diff --git a/src/routes/unitto/+layout.svelte b/src/routes/unitto/+layout.svelte
@@ -24,7 +24,7 @@
     }
 </script>
 
-<div class="relative bg-white">
+<div class="relative bg-unitto-dark-background text-unitto-dark-onBackground">
     <!-- Top bar -->
     <TopBar on:menuClick={openMenu} />
 
@@ -33,12 +33,12 @@
 
     <!-- Nav bar -->
     <div
-        class="lg:hidden z-20 fixed top-0 h-full transition-transform -translate-x-full px-2 w-80 rounded-e-3xl bg-unitto-surface"
+        class="lg:hidden z-20 fixed top-0 h-full transition-transform -translate-x-full px-2 w-80 rounded-e-3xl bg-unitto-dark-surface text-unitto-dark-onSurface"
         id="drawer"
     >
         <button on:click={closeMenu}>
             <span
-                class="material-symbols-outlined hover:bg-unitto-surfaceContainer-inactive-hover rounded-full p-3 m-2"
+                class="material-symbols-outlined hover:bg-unitto-dark-surfaceContainer-inactive-hover rounded-full p-3 m-2"
             >
                 menu_open
             </span>
@@ -67,7 +67,7 @@
     </div>
 
     <div class="flex flex-row relative">
-        <div class="hidden lg:block sticky top-0 h-screen bg-unitto-surface">
+        <div class="hidden lg:block sticky top-0 h-screen bg-unitto-dark-surface text-unitto-dark-onSurface">
             <!-- Navigation rail -->
             <div class="flex flex-col gap-4 pt-6">
                 <TabListItemVertical

diff --git a/src/routes/unitto/+page.svelte b/src/routes/unitto/+page.svelte
@@ -61,7 +61,7 @@
                 },
                 {
                     title: "Unit converter",
-                    support: "700 Units and currencies for every situation",
+                    support: "570 Units and currencies for every situation",
                 },
                 {
                     title: "The list goes on",
@@ -204,6 +204,6 @@
         </div>
     </div>
 
-    <hr />
+    <hr class="border-unitto-dark-outline"/>
     <Footer />
 </div>
diff --git a/src/routes/unitto/FeatureDetail.svelte b/src/routes/unitto/FeatureDetail.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import snake from "$lib/images/unitto/snake.svg";
     import Snake from "./Snake.svelte";
     export let image: string;
     export let title: string;

diff --git a/src/routes/unitto/FeatureItem.svelte b/src/routes/unitto/FeatureItem.svelte
@@ -12,7 +12,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-    class="p-6 rounded-3xl bg-unitto-surface flex flex-row items-stretch hover:bg-unitto-surfaceContainer-active-hover transition-colors"
+    class="p-6 rounded-3xl bg-unitto-dark-surface text-unitto-dark-onSurface flex flex-row items-stretch hover:bg-unitto-dark-surfaceContainer-inactive-hover transition-colors"
     class:cursor-pointer={href}
     class:gap-2={support != ""}
     on:click={onClick}

diff --git a/src/routes/unitto/Footer.svelte b/src/routes/unitto/Footer.svelte
@@ -6,7 +6,7 @@
     <div class="grid grid-cols-1 p-4 gap-4">
         <div class="flex justify-start items-center gap-4">
             <img
-                class="w-28 p-2 rounded-3xl border-2 bg-unitto-background hover:scale-110 hover:-translate-y-5 transition-all hover:shadow-2xl"
+                class="w-28 p-2 rounded-3xl border-2 border-unitto-dark-outline bg-unitto-dark-background hover:scale-110 hover:-translate-y-5 transition-all hover:shadow-2xl"
                 src={unittoLogo}
                 alt="unitto"
             />

diff --git a/src/routes/unitto/Hero.svelte b/src/routes/unitto/Hero.svelte
@@ -3,15 +3,14 @@
 
     export let features: Array<Feature>
     import FeatureItem from "./FeatureItem.svelte";
-    import hero from "$lib/images/unitto/hero.jpg";
+    import hero from "$lib/images/unitto/hero.png";
 </script>
 
 <div
-    class="flex flex-col bg-green-200 py-24 xl:py-32 rounded-3xl place-items-center gap-16 bg-center bg-cover"
+    class="flex flex-col py-24 xl:py-32 rounded-3xl place-items-center gap-16 bg-center bg-cover backdrop-invert-0 bg-white/30"
     style="background-image: url({hero});"
 >
     <div class="flex flex-col place place-items-center">
-        <!-- <img src={heroSymbols} alt="hero" /> -->
         <p class="text-6xl md:text-8xl xl:text-9xl text-center font-medium">
             Unitto
         </p>

diff --git a/src/routes/unitto/TabListItemHorizontal.svelte b/src/routes/unitto/TabListItemHorizontal.svelte
@@ -5,8 +5,8 @@
     export let href: string;
 
     $: background = isSelected
-    ? "bg-unitto-secondaryContainer hover:bg-unitto-surfaceContainer-active-hover"
-    : "hover:bg-unitto-surfaceContainer-inactive-hover"
+    ? "bg-unitto-dark-secondaryContainer hover:bg-unitto-dark-surfaceContainer-active-hover"
+    : "hover:bg-unitto-dark-surfaceContainer-inactive-hover"
 
     $: icon_state_class = isSelected
         ? "text-unitto-on-secondary-container"

diff --git a/src/routes/unitto/TopBar.svelte b/src/routes/unitto/TopBar.svelte
@@ -4,27 +4,22 @@
     const dispatch = createEventDispatcher();
     let y: number
 
-    // $: background = (y > 0) ? "bg-unitto-surface-variant" : "bg-white"
-    // $: iconHover = (y > 0) ? "hover:bg-unitto-surface-variant-hover" : "hover:bg-slate-100"
-    $: background = "bg-white"
-    $: iconHover = "hover:bg-slate-100"
-
     function click() {
         console.log(y);
         
         dispatch('menuClick')
     }
 </script>
 
-<div class="lg:hidden flex place-items-center sticky px-2 top-0 z-10 transition-colors {background}">
+<div class="lg:hidden flex place-items-center sticky px-2 top-0 z-10 transition-colors bg-unitto-dark-background text-unitto-dark-onBackground">
     <button on:click={click}>
         <span
-            class="material-symbols-outlined rounded-full p-3 m-2 {iconHover}"
+            class="material-symbols-outlined rounded-full p-3 m-2 hover:bg-unitto-dark-surfaceContainer-inactive-hover"
             >menu</span
         >
     </button>
     <a
-        class="rounded-full flex flex-row items-center gap-4 p-2 {iconHover}"
+        class="rounded-full flex flex-row items-center gap-4 p-2 hover:bg-unitto-dark-surfaceContainer-inactive-hover"
         href="/unitto"
     >
         <img class="w-8" src={unittoLogo} alt="" />

diff --git a/src/routes/unitto/privacy/+page.svelte b/src/routes/unitto/privacy/+page.svelte
@@ -36,12 +36,13 @@
         <p class="text-2xl font-medium">Log Data</p>
         <p>
             I want to inform you that whenever you use my Service, in a case of
-            an error in the app I collect data and information (through
+            an error in the app I may collect data and information (through
             third-party products) on your phone called Log Data. This Log Data
             may include information such as your device Internet Protocol (“IP”)
             address, device name, operating system version, the configuration of
             the app when utilizing my Service, the time and date of your use of
-            the Service, and other statistics.
+            the Service, and other statistics. This information may be send by
+            Google Play Services.
         </p>
         <p class="text-2xl font-medium">Cookies</p>
         <p>
@@ -115,7 +116,7 @@
             notify you of any changes by posting the new Privacy Policy on this
             page.
         </p>
-        <p>This policy is effective as of 2023-01-18</p>
+        <p>This policy is effective as of 2023-11-28</p>
         <p class="text-2xl font-medium">Contact Us</p>
         <p>
             If you have any questions or suggestions about my Privacy Policy, do

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -5,58 +5,113 @@ const config = {
   theme: {
     extend: {
       colors: {
-        'unitto': {
-          "primary": "#006d34",
-          "onPrimary": "#ffffff",
-          "primaryContainer": "#7efba0",
-          "onPrimaryContainer": "#00210b",
-          "primaryFixed": "#7efba0",
-          "onPrimaryFixed": "#00210b",
-          "primaryFixedDim": "#61de87",
-          "onPrimaryFixedVariant": "#005226",
-          "secondary": "#506352",
-          "onSecondary": "#ffffff",
-          "secondaryContainer": "#d3e8d2",
-          "onSecondaryContainer": "#0e1f12",
-          "secondaryFixed": "#d3e8d2",
-          "onSecondaryFixed": "#0e1f12",
-          "secondaryFixedDim": "#b7ccb7",
-          "onSecondaryFixedVariant": "#394b3b",
-          "tertiary": "#3a656e",
-          "onTertiary": "#ffffff",
-          "tertiaryContainer": "#bdeaf5",
-          "onTertiaryContainer": "#001f25",
-          "tertiaryFixed": "#bdeaf5",
-          "onTertiaryFixed": "#001f25",
-          "tertiaryFixedDim": "#a2ced8",
-          "onTertiaryFixedVariant": "#204d55",
-          "error": "#ba1a1a",
-          "errorContainer": "#ffdad6",
-          "onError": "#ffffff",
-          "onErrorContainer": "#410002",
-          "background": "#fcfdf7",
-          "onBackground": "#191c19",
-          "outline": "#717970",
-          "inverseOnSurface": "#f0f1ec",
-          "inverseSurface": "#2e312e",
-          "inversePrimary": "#61de87",
-          "shadow": "#000000",
-          "surfaceTint": "#006d34",
-          "outlineVariant": "#c1c9be",
-          "scrim": "#000000",
-          "surface": "#f9faf4",
-          "onSurface": "#191c19",
-          "surfaceVariant": "#dde5da",
-          "onSurfaceVariant": "#414941",
-          "surfaceContainerHighest": "#e2e3de",
-          "surfaceContainerHigh": "#e7e9e3",
-          "surfaceContainer": "#edeee9",
-          "surfaceContainerLow": "#f3f4ef",
-          "surfaceContainerLowest": "#ffffff",
-          "surfaceDim": "#d9dbd5",
-          "surfaceBright": "#f9faf4",
-          "surfaceContainer-active-hover": "#C4D8C4",
-          "surfaceContainer-inactive-hover": "#EAECE6"
+        "unitto": {
+          "light": {
+            "primary": "#196c32",
+            "onPrimary": "#ffffff",
+            "primaryContainer": "#a3f6ab",
+            "onPrimaryContainer": "#002109",
+            "primaryFixed": "#a3f6ab",
+            "onPrimaryFixed": "#002109",
+            "primaryFixedDim": "#87d991",
+            "onPrimaryFixedVariant": "#005320",
+            "secondary": "#516351",
+            "onSecondary": "#ffffff",
+            "secondaryContainer": "#d4e8d1",
+            "onSecondaryContainer": "#0f1f11",
+            "secondaryFixed": "#d4e8d1",
+            "onSecondaryFixed": "#0f1f11",
+            "secondaryFixedDim": "#b8ccb6",
+            "onSecondaryFixedVariant": "#3a4b3a",
+            "tertiary": "#39656c",
+            "onTertiary": "#ffffff",
+            "tertiaryContainer": "#bdeaf3",
+            "onTertiaryContainer": "#001f24",
+            "tertiaryFixed": "#bdeaf3",
+            "onTertiaryFixed": "#001f24",
+            "tertiaryFixedDim": "#a1ced7",
+            "onTertiaryFixedVariant": "#1f4d54",
+            "error": "#ba1a1a",
+            "errorContainer": "#ffdad6",
+            "onError": "#ffffff",
+            "onErrorContainer": "#410002",
+            "background": "#fcfdf7",
+            "onBackground": "#1a1c19",
+            "outline": "#727970",
+            "inverseOnSurface": "#f0f1eb",
+            "inverseSurface": "#2e312d",
+            "inversePrimary": "#87d991",
+            "shadow": "#000000",
+            "surfaceTint": "#196c32",
+            "outlineVariant": "#c1c9be",
+            "scrim": "#000000",
+            "surface": "#f9faf4",
+            "onSurface": "#1a1c19",
+            "surfaceVariant": "#dde5d9",
+            "onSurfaceVariant": "#424940",
+            "surfaceContainerHighest": "#e2e3dd",
+            "surfaceContainerHigh": "#e7e9e3",
+            "surfaceContainer": "#edeee9",
+            "surfaceContainerLow": "#f3f4ee",
+            "surfaceContainerLowest": "#ffffff",
+            "surfaceDim": "#d9dbd5",
+            "surfaceBright": "#f9faf4",
+            "surfaceContainer-active-hover": "#C4D8C4",
+            "surfaceContainer-inactive-hover": "#EAECE6"
+          },
+          "dark": {
+            "primary": "#87d991",
+            "onPrimary": "#003914",
+            "primaryContainer": "#005320",
+            "onPrimaryContainer": "#a3f6ab",
+            "primaryFixed": "#a3f6ab",
+            "onPrimaryFixed": "#002109",
+            "primaryFixedDim": "#87d991",
+            "onPrimaryFixedVariant": "#005320",
+            "secondary": "#b8ccb6",
+            "onSecondary": "#243425",
+            "secondaryContainer": "#3a4b3a",
+            "onSecondaryContainer": "#d4e8d1",
+            "secondaryFixed": "#d4e8d1",
+            "onSecondaryFixed": "#0f1f11",
+            "secondaryFixedDim": "#b8ccb6",
+            "onSecondaryFixedVariant": "#3a4b3a",
+            "tertiary": "#a1ced7",
+            "onTertiary": "#00363d",
+            "tertiaryContainer": "#1f4d54",
+            "onTertiaryContainer": "#bdeaf3",
+            "tertiaryFixed": "#bdeaf3",
+            "onTertiaryFixed": "#001f24",
+            "tertiaryFixedDim": "#a1ced7",
+            "onTertiaryFixedVariant": "#1f4d54",
+            "error": "#ffb4ab",
+            "errorContainer": "#93000a",
+            "onError": "#690005",
+            "onErrorContainer": "#ffdad6",
+            "background": "#1a1c19",
+            "onBackground": "#e2e3dd",
+            "outline": "#8b9389",
+            "inverseOnSurface": "#1a1c19",
+            "inverseSurface": "#e2e3dd",
+            "inversePrimary": "#196c32",
+            "shadow": "#000000",
+            "surfaceTint": "#87d991",
+            "outlineVariant": "#424940",
+            "scrim": "#000000",
+            "surface": "#111411",
+            "onSurface": "#c6c7c2",
+            "surfaceVariant": "#424940",
+            "onSurfaceVariant": "#c1c9be",
+            "surfaceContainerHighest": "#333532",
+            "surfaceContainerHigh": "#282b27",
+            "surfaceContainer": "#1e201d",
+            "surfaceContainerLow": "#1a1c19",
+            "surfaceContainerLowest": "#0c0f0c",
+            "surfaceDim": "#111411",
+            "surfaceBright": "#373a36",
+            "surfaceContainer-active-hover": "#455A47",
+            "surfaceContainer-inactive-hover": "#364036"
+          },
         }
       }
     },