Merge pull request 'refactor: update mobile view styles' (#20) from abhisheks/theme-elegance:main into main

Reviewed-on: brooksbingham/theme-elegance#20

modules/ps_mainmenu/ps_mainmenu.tpl

@@ -13,12 +13,13 @@
                 {$node.label}
               </a>
             </li>
+            <hr class=" last:hidden w-full md:rotate-90"/>
         {/foreach}
       </ul>
     {/if}
 {/function}
 
-<button class="toggle-main-menu absolute right-4 top-1/2 block -translate-y-1/2 p-3 ring-primary focus:ring-2 lg:hidden">
+<button class="toggle-main-menu absolute right-4 top-1/2 block -translate-y-1/2 ring-primary focus:ring-2 lg:hidden">
   <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2" width="24" height="24" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
     <path d="M4 6l16 0"></path>
@@ -26,6 +27,6 @@
     <path d="M4 18l16 0"></path>
   </svg>
 </button>
-<nav class="mobile-main-menu absolute z-10 right-4 top-full w-full max-w-[180px] md:max-w-[350px] border border-gray-100 justify-center rounded-lg bg-white py-5 px-6 drop-shadow-lg lg:static lg:border-none lg:flex lg:w-full lg:max-w-full lg:bg-transparent lg:py-0 lg:shadow-none hidden" id="_desktop_top_menu">
+<nav class="mobile-main-menu absolute z-10 right-4 top-full w-full max-w-[160px] md:max-w-[350px] border border-gray-100 justify-center rounded-lg bg-white p-4 md:p-2 drop-shadow-lg lg:static lg:border-none lg:flex lg:w-full lg:max-w-full lg:bg-transparent lg:py-0 lg:shadow-none hidden" id="_desktop_top_menu">
   {menu nodes=$menu.children}
 </nav>

templates/_partials/footer.tpl

@@ -40,10 +40,10 @@
       {/block}
       </div>
       <div class="flex justify-center items-center gap-4">
-          <a class="p-4">
+          <a class="p-4" href="https://www.facebook.com/BrooksBinghamClothing?mibextid=ZbWKwL" target="_blank">
             <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-facebook" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" /></svg>
           </a>
-          <a class="p-4">
+          <a class="p-4" href="https://instagram.com/brooksbingham?igshid=YTQwZjQ0NmI0OA==" target="_blank">
             <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-instagram" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
               <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
               <path d="M4 4m0 4a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z"></path>
@@ -58,7 +58,7 @@
         {hook h='displayFooterAfter'}
       {/block}
     </div>
-    <div class="flex py-8">
+    <div class="flex py-8 max-md:justify-center">
       <a href="{$urls.base_url}">
       <span class="text-sm">© 2023 Brooksbingham Clothing</span>
       </a>

templates/_partials/header.tpl

@@ -35,7 +35,7 @@
         <div class="w-full">
           {hook h='displayMainMenu'}
         </div>
-        <div class="relative right-16 items-center justify-end sm:flex lg:right-0">
+        <div class="relative right-12 items-center justify-end sm:flex lg:right-0">
           {hook h='displayTop'}
         </div>
       </div>