Style/logos (#75)

Co-authored-by: Anton Lilleby <[email protected]> Co-authored-by: Anton Lilleby <[email protected]>
capraconsulting · Jun 25, 2024 · 103a4c1 · 103a4c1
1 parent 433508b
commit 103a4c1
Show file tree

Hide file tree

Showing 13 changed files with 36 additions and 17 deletions.
diff --git a/app/src/app.html b/app/src/app.html
@@ -7,7 +7,10 @@
     <meta name="viewport" content="width=device-width" />
     %sveltekit.head%
   </head>
-  <body data-sveltekit-preload-data="hover" class="text-black dark:bg-black dark:text-white">
+  <body
+    data-sveltekit-preload-data="hover"
+    class="bg-white text-black dark:bg-zinc-950 dark:text-white"
+  >
     <div style="display: contents">%sveltekit.body%</div>
   </body>
 </html>
diff --git a/app/src/components/shared/Footer.svelte b/app/src/components/shared/Footer.svelte
@@ -1,32 +1,50 @@
 <script>
   import capraLogoWhite from "$lib/assets/capra-white-vertical.webp";
+  import capraLogoBlack from "$lib/assets/capra-black-vertical.webp";
   import frydeLogoWhite from "$lib/assets/fryde-white-vertical.webp";
+  import frydeLogoBlack from "$lib/assets/fryde-black-vertical.webp";
   import lifligLogoWhite from "$lib/assets/liflig-white-vertical.webp";
-  import miljo from "$lib/assets/miljofyrtarn.webp";
-  import dnv from "$lib/assets/dnv.webp";
+  import lifligLogoBlack from "$lib/assets/liflig-black-vertical.webp";
+  import miljofyrtarnDark from "$lib/assets/miljofyrtarn-dark.webp";
+  import miljofyrtarnLight from "$lib/assets/miljofyrtarn-light.webp";
+  import dnvDark from "$lib/assets/dnv-dark.webp";
+  import dnvLight from "$lib/assets/dnv-light.webp";
 </script>
 
 <footer
-  class="gap-8py-16 flex h-[470px] w-full flex-col items-center justify-center bg-black text-lg font-light text-white sm:gap-12"
+  class="gap-8py-16 flex h-[470px] w-full flex-col items-center justify-center text-lg font-light sm:gap-12"
 >
   <p class="pb-2 pt-6">Vi er en del av Capra-gruppen</p>
   <div class="flex w-full flex-col items-center justify-evenly gap-6 sm:flex-row sm:gap-0">
     <div class="flex flex-col items-center justify-center gap-4 font-normal">
       <div class="pt-6 text-base sm:p-0 sm:text-lg">Sertifiseringer</div>
       <div class="flex gap-2">
-        <img class="h-16 sm:h-20" alt="Miljøfyrtårn-sertifisering" src={miljo} />
-        <img class="h-16 sm:h-20" alt="DNV-sertifisering" src={dnv} />
+        <img
+          class="block h-16 sm:h-20 dark:hidden"
+          alt="Miljøfyrtårn-sertifisering"
+          src={miljofyrtarnDark}
+        />
+        <img
+          class="hidden h-16 sm:h-20 dark:block"
+          alt="Miljøfyrtårn-sertifisering"
+          src={miljofyrtarnLight}
+        />
+        <img class="block h-16 sm:h-20 dark:hidden" alt="DNV-sertifisering" src={dnvDark} />
+        <img class="hidden h-16 sm:h-20 dark:block" alt="DNV-sertifisering" src={dnvLight} />
       </div>
     </div>
     <div class="flex gap-11">
       <a href="https://www.capraconsulting.no/">
-        <img class="h-20 sm:h-28" alt="Capra-logo" src={capraLogoWhite} />
+        <img class="block h-20 sm:h-28 dark:hidden" alt="Capra-logo" src={capraLogoBlack} />
+        <img class="hidden h-20 sm:h-28 dark:block" alt="Capra-logo" src={capraLogoWhite} />
       </a>
       <a href="https://www.liflig.no/">
-        <img class="h-20 sm:h-28" alt="Liflig-logo" src={lifligLogoWhite} />
+        <img class="block h-20 sm:h-28 dark:hidden" alt="Liflig-logo" src={lifligLogoBlack} />
+        <img class="hidden h-20 sm:h-28 dark:block" alt="Liflig-logo" src={lifligLogoWhite} />
       </a>
       <a href="https://www.fryde.no/">
-        <img class="h-20 sm:h-28" alt="Fryde-logo" src={frydeLogoWhite} />
+        <img class="block h-20 sm:h-28 dark:hidden" alt="Fryde-logo" src={frydeLogoBlack} />
+        <img class="hidden h-20 sm:h-28 dark:block" alt="Fryde-logo" src={frydeLogoWhite} />
       </a>
     </div>
     <div>

diff --git a/app/src/components/shared/Header.svelte b/app/src/components/shared/Header.svelte
@@ -1,8 +1,8 @@
 <script>
-  import logo from "$lib/assets/logo.webp";
+  import logoLight from "$lib/assets/logo-light.webp";
   import logoDark from "$lib/assets/logo-dark.webp";
-  import logoSm from "$lib/assets/logo-sm.webp";
-  import logoSmDark from "$lib/assets/logo-dark-sm.webp";
+  import logoDarkSm from "$lib/assets/logo-dark-sm.webp";
+  import logoLightSm from "$lib/assets/logo-light-sm.webp";
   import SignInOrOut from "$components/shared/SignInOrOut.svelte";
   import { page } from "$app/stores";
   import { DarkMode } from "flowbite-svelte";
@@ -17,22 +17,20 @@
 
 <header class="flex h-[100px] w-full items-center justify-between px-4 pt-2 lg:px-20">
   <a
-    class={isRoot
-      ? "pointer-events-none flex items-center"
-      : "pointer-events-auto flex items-center"}
+    class="{`flex items-center ${isRoot ? 'pointer-events-none' : 'pointer-events-auto'}`}}"
     href="/"
   >
     <img
       fetchpriority="high"
       class="absolute h-12 select-none opacity-100 sm:h-14 dark:opacity-5"
       alt="Animert Capra, Fryde og Liflig-logo"
-      src={hasPerformanceIssue ? logoSm : logo}
+      src={hasPerformanceIssue ? logoDarkSm : logoDark}
     />
     <img
       fetchpriority="high"
       class="absolute h-12 select-none opacity-5 sm:h-14 dark:opacity-100"
       alt="Animert Capra, Fryde og Liflig-logo"
-      src={hasPerformanceIssue ? logoSmDark : logoDark}
+      src={hasPerformanceIssue ? logoLightSm : logoLight}
     />
   </a>
 

diff --git a/app/src/lib/assets/dnv-dark.webp b/app/src/lib/assets/dnv-dark.webp
diff --git a/app/src/lib/assets/dnv.webp → app/src/lib/assets/dnv-light.webp b/app/src/lib/assets/dnv.webp → app/src/lib/assets/dnv-light.webp
diff --git a/app/src/lib/assets/logo-dark-sm.webp b/app/src/lib/assets/logo-dark-sm.webp
diff --git a/app/src/lib/assets/logo-dark.webp b/app/src/lib/assets/logo-dark.webp
diff --git a/app/src/lib/assets/logo-light-sm.webp b/app/src/lib/assets/logo-light-sm.webp
diff --git a/app/src/lib/assets/logo-light.webp b/app/src/lib/assets/logo-light.webp
diff --git a/app/src/lib/assets/logo-sm.webp b/app/src/lib/assets/logo-sm.webp
diff --git a/app/src/lib/assets/logo.webp b/app/src/lib/assets/logo.webp
diff --git a/app/src/lib/assets/miljofyrtarn-dark.webp b/app/src/lib/assets/miljofyrtarn-dark.webp
diff --git a/app/src/lib/assets/miljofyrtarn.webp → app/src/lib/assets/miljofyrtarn-light.webp b/app/src/lib/assets/miljofyrtarn.webp → app/src/lib/assets/miljofyrtarn-light.webp