Merge pull request #18 from pengmaradi/feature/tailwind

chore: optimize for mobile
pengmaradi · Sep 5, 2024 · 7375b4a · 7375b4a
2 parents c0f0e2e + 13b24aa
commit 7375b4a
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 16 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,6 +1,6 @@
 {% include nav.html %}
 
-    <!--button class="test absolute right-0 top-12" @click="toggleDarkmode()">Toggle Dark Mode</button-->
+<!--button class="test absolute right-0 top-12" @click="toggleDarkmode()">Toggle Dark Mode</button-->
 
 <div x-data="{ darkmode: false }" x-init="
     if(localStorage.getItem('theme') === 'dark') {
@@ -17,7 +17,7 @@
             document.documentElement.classList.remove('dark');
         }
     });
-" class="absolute right-2 top-15" title="dark mode switch">
+" class="absolute right-2 top-16" title="dark mode switch">
     <div class="flex items-center m-auto max-w-5xl">
         <svg xmlns="http://www.w3.org/2000/svg"
             class="w-6 h-6 p-1 text-gray-700 transition rounded-full cursor-pointer bg-gray-50 hover:bg-gray-200"

diff --git a/_includes/nav.html b/_includes/nav.html
@@ -1,4 +1,4 @@
-<nav class="bg-gray-800">
+<nav class="bg-gray-800 fixed sm:relative top-0 z-40 w-full">
     <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
         <div class="relative flex h-16 items-center justify-between">
             <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
@@ -32,8 +32,8 @@
                         {% for item in site.data.navigation %}
                         <a href="{{ item.link }}" {% if page.url==item.link
                             %}class="active rounded-md bg-gray-900 px-3 py-2 text-sm font-medium text-white" {% else
-                            %}class="rounded-md px-3 py-2 text-sm font-medium text-white hover:text-gray-300" {% endif %}
-                            >{{ item.name }}</a>
+                            %}class="rounded-md px-3 py-2 text-sm font-medium text-white hover:text-gray-300" {% endif
+                            %}>{{ item.name }}</a>
                         {% endfor %}
                     </div>
                 </div>
@@ -46,8 +46,8 @@
                             id="user-menu-button" aria-expanded="false" aria-haspopup="true">
                             <span class="absolute -inset-1.5"></span>
                             <span class="sr-only">contact</span>
-                            <img class="h-8 w-8 rounded-full"
-                                src="https://avatars.githubusercontent.com/u/1831210?v=4" alt="pengmaradi">
+                            <img class="h-8 w-8 rounded-full" src="https://avatars.githubusercontent.com/u/1831210?v=4"
+                                alt="pengmaradi">
                         </button>
                     </div>
                 </div>
@@ -60,9 +60,33 @@
             {% for item in site.data.navigation %}
             <a href="{{ item.link }}" {% if page.url==item.link
                 %}class="active block rounded-md bg-gray-900 px-3 py-2 text-base font-medium text-white" {% else
-                %}class="block rounded-md px-3 py-2 text-base font-medium text-white" {% endif %}
-                >{{ item.name }}</a>
+                %}class="block rounded-md px-3 py-2 text-base font-medium text-white" {% endif %}>{{ item.name }}</a>
             {% endfor %}
+
+            <button class="px-3 py-2" @click="sendMail()">
+                <svg class="h-8 w-8 gmail" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <title>Mail</title>
+                    <path
+                        d="M28 4.7998H3.99998C2.29998 4.7998 0.849976 6.1998 0.849976 7.9498V24.1498C0.849976 25.8498 2.24998 27.2998 3.99998 27.2998H28C29.7 27.2998 31.15 25.8998 31.15 24.1498V7.8998C31.15 6.1998 29.7 4.7998 28 4.7998ZM28 7.0498C28.05 7.0498 28.1 7.0498 28.15 7.0498L16 14.8498L3.84998 7.0498C3.89998 7.0498 3.94998 7.0498 3.99998 7.0498H28ZM28 24.9498H3.99998C3.49998 24.9498 3.09998 24.5498 3.09998 24.0498V9.2498L14.8 16.7498C15.15 16.9998 15.55 17.0998 15.95 17.0998C16.35 17.0998 16.75 16.9998 17.1 16.7498L28.8 9.2498V24.0998C28.9 24.5998 28.5 24.9498 28 24.9498Z" />
+                </svg>
+            </button>
+            <a class="block px-3 py-2" href="tel:+41763363847" title="Call me :)">
+                <svg class="h-8 w-8 phone" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <g clip-path="url(#clip0_941_17577)">
+                        <path
+                            d="M24.3 31.1499C22.95 31.1499 21.4 30.7999 19.7 30.1499C16.3 28.7999 12.55 26.1999 9.19997 22.8499C5.84997 19.4999 3.24997 15.7499 1.89997 12.2999C0.39997 8.59994 0.54997 5.54994 2.29997 3.84994C2.34997 3.79994 2.44997 3.74994 2.49997 3.69994L6.69997 1.19994C7.74997 0.599942 9.09997 0.899942 9.79997 1.89994L12.75 6.29994C13.45 7.34994 13.15 8.74994 12.15 9.44994L10.35 10.6999C11.65 12.7999 15.35 17.9499 21.25 21.6499L22.35 20.0499C23.2 18.8499 24.55 18.4999 25.65 19.2499L30.05 22.1999C31.05 22.8999 31.35 24.2499 30.75 25.2999L28.25 29.4999C28.2 29.5999 28.15 29.6499 28.1 29.6999C27.2 30.6499 25.9 31.1499 24.3 31.1499ZM3.79997 5.54994C2.84997 6.59994 2.89997 8.74994 3.99997 11.4999C5.24997 14.6499 7.64997 18.0999 10.8 21.2499C13.9 24.3499 17.4 26.7499 20.5 27.9999C23.2 29.0999 25.35 29.1499 26.45 28.1999L28.85 24.0999C28.85 24.0499 28.85 24.0499 28.85 23.9999L24.45 21.0499C24.45 21.0499 24.35 21.0999 24.25 21.2499L23.15 22.8499C22.45 23.8499 21.1 24.1499 20.1 23.4999C13.8 19.5999 9.89997 14.1499 8.49997 11.9499C7.84997 10.8999 8.09997 9.54994 9.09997 8.84994L10.9 7.59994V7.54994L7.94997 3.14994C7.94997 3.09994 7.89997 3.09994 7.84997 3.14994L3.79997 5.54994Z" />
+                        <path
+                            d="M29.3 14.25C28.7 14.25 28.25 13.8 28.2 13.2C27.8 8.15003 23.65 4.10003 18.55 3.75003C17.95 3.70003 17.45 3.20003 17.5 2.55003C17.55 1.95003 18.05 1.45003 18.7 1.50003C24.9 1.90003 29.95 6.80003 30.45 13C30.5 13.6 30.05 14.15 29.4 14.2C29.4 14.25 29.35 14.25 29.3 14.25Z" />
+                        <path
+                            d="M24.35 14.7002C23.8 14.7002 23.3 14.3002 23.25 13.7002C22.95 11.0002 20.85 8.90018 18.15 8.55018C17.55 8.50018 17.1 7.90018 17.15 7.30018C17.2 6.70018 17.8 6.25018 18.4 6.30018C22.15 6.75018 25.05 9.65018 25.5 13.4002C25.55 14.0002 25.15 14.5502 24.5 14.6502C24.4 14.7002 24.35 14.7002 24.35 14.7002Z" />
+                    </g>
+                    <defs>
+                        <clipPath id="clip0_941_17577">
+                            <rect width="32" height="32" />
+                        </clipPath>
+                    </defs>
+                </svg>
+            </a>
         </div>
     </div>
 </nav>
diff --git a/_layouts/tailwind.html b/_layouts/tailwind.html
@@ -50,8 +50,8 @@
             class="scrollTop fixed overflow-hidden bottom-5 right-2 z-10 cursor-pointer animate-bounce">
             <span class="sr-only">Back to top</span>
 
-            <svg version="1.1" class="fill-current h-8 w-8"
-                viewBox="0 0 122.883 122.882" enable-background="new 0 0 122.883 122.882" xml:space="preserve">
+            <svg version="1.1" class="fill-current h-8 w-8" viewBox="0 0 122.883 122.882"
+                enable-background="new 0 0 122.883 122.882" xml:space="preserve">
                 <title>Back to top</title>
                 <g>
                     <path
@@ -64,7 +64,7 @@
         <header>
             {% include header.html %}
         </header>
-        <main class="container mx-auto mt-10 p-2 min-h-screen">
+        <main class="container mx-auto mt-20 sm:mt-10 p-2 min-h-screen">
             {{content}}
         </main>
         <footer class="relative bg-gray-900 text-white px-4 sm:px-8 lg:px-16 xl:px-40 2xl:px-64 py-24">

diff --git a/assets/main.css b/assets/main.css
diff --git a/getFilms.html b/getFilms.html
@@ -12,5 +12,5 @@ <h3 class="page-header">react get json https://api.sampleapis.com/movies data</h
 </section>
 
 <section clsss="duration-1000 transition-all transform" x-intersect="$el.classList.add('fadeInUp')">
-    <div id="film" class="relative"></div>
+    <div id="film"></div>
 </section>
diff --git a/src/index.pcss b/src/index.pcss
@@ -73,14 +73,14 @@ body {
 
   #film {
     .cat-group {
-      @apply fixed z-10 bottom-10 ty:bottom-0 grid sm:flex sm:bottom-1/2;
+      @apply sticky z-10 top-20 sm:top-0;
 
       .btn {
         @apply p-2 mb-2 mr-2 h-auto border rounded bg-gray-400 dark:bg-gray-500 hover:bg-gray-100 hover:text-gray-600;
       }
     }
     img {
-      @apply w-full h-full sm:w-60 sm:h-auto mb-2 hover:sepia;
+      @apply w-full h-auto mb-2 hover:sepia;
     }
   }
 }