small styles

bryanmoon1991 · Apr 10, 2024 · dcb9701 · dcb9701
1 parent be37755
commit dcb9701
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/src/components/About.tsx b/src/components/About.tsx
@@ -90,9 +90,7 @@ const About: Component = () => {
           Moving Brands
         </p>
       </div>
-      <p class="xs:text-2 pl fixed bottom-0 w-full">
-        ©2024 All Rights Reserved
-      </p>
+      <p class="xs:text-2 left-8 fixed bottom-4">©2024 All Rights Reserved</p>
     </section>
   );
 };

diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx
@@ -166,7 +166,7 @@ const Carousel: Component<CarouselProps> = (props) => {
       </Show>
 
       <Show when={!isShortScreen() && imageUrls().length > 1}>
-        <div class="xs:bottom-35 absolute flex w-full justify-center gap-4 md:bottom-3">
+        <div class="xs:bottom-35 absolute flex w-full justify-center gap-4 md:bottom-4">
           <For each={imageUrls()}>
             {(url, index) => (
               <span

diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
@@ -1,4 +1,4 @@
-import { createSignal, createEffect, onCleanup } from "solid-js";
+import { createSignal, createEffect, onCleanup, onMount } from "solid-js";
 import type { Component } from "solid-js";
 import { Show } from "solid-js";
 import { Transition } from "solid-transition-group";
@@ -29,7 +29,7 @@ const Nav: Component = () => {
   });
 
   createEffect(() => {
-    const mediaQuery = window.matchMedia("(max-height: 480px)");
+    const mediaQuery = window.matchMedia("(max-height: 700px)");
     const updateScreenSize = () => setIsShortScreen(mediaQuery.matches);
 
     updateScreenSize();
@@ -38,6 +38,14 @@ const Nav: Component = () => {
     onCleanup(() => mediaQuery.removeEventListener("change", updateScreenSize));
   });
 
+  const isSafari = () => {
+    const userAgent = window.navigator.userAgent;
+    const safari = userAgent.indexOf("Safari") !== -1;
+    const chrome = userAgent.indexOf("Chrome") !== -1;
+    console.log("safari", safari && !chrome);
+    return safari && !chrome;
+  };
+
   return (
     <>
       <header class="z-3 fixed left-0 top-0 mt-4 flex w-full justify-between">
@@ -48,7 +56,11 @@ const Nav: Component = () => {
               : "Brian You, Art Direction and Design, NY")}
         </span>
         <a
-          class="lg:text-4 xs:text-3 m-0 cursor-pointer pr-4 mix-blend-screen"
+          class={
+            isSafari()
+              ? "lg:text-4 xs:text-3 m-0 cursor-pointer pr-8 mix-blend-screen"
+              : "lg:text-4 xs:text-3 m-0 cursor-pointer pr-4 mix-blend-screen"
+          }
           onClick={handleAboutClick}
           id="untouchable"
         >