Fix responsive

sailboatui · Dec 31, 2022 · 19d52c5 · 19d52c5
1 parent 740ebb8
commit 19d52c5
Show file tree

Hide file tree

Showing 9 changed files with 166 additions and 78 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -1,12 +1,18 @@
+// Check if the user is on a mobile device
+function isMobile() {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+}
 // Get the header element on the page
 var header = document.querySelector("header");
 function scrollTop() {
-  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
-  if (scrollTop > 0) {
-    header.classList.add("backdrop-blur", "bg-white/60", "shadow-sm");
-  } else {
-    // Otherwise, remove the background color
-    header.classList.remove("backdrop-blur", "bg-white/60", "shadow-sm");
+  if (!isMobile()) {
+    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+    if (scrollTop > 0) {
+      header.classList.add("backdrop-blur", "bg-white/60", "shadow-sm");
+    } else {
+      // Otherwise, remove the background color
+      header.classList.remove("backdrop-blur", "bg-white/60", "shadow-sm");
+    }
   }
 }
 scrollTop();
@@ -19,19 +25,37 @@ window.addEventListener("scroll", function () {
 const aside = document.getElementById("aside");
 //Determine whether the element element exists
 if (aside) {
-  // 监听元素的 scroll 事件
   aside.addEventListener("scroll", function () {
     //Store it in local storage
     localStorage.setItem("scrollTop", aside.scrollTop);
   });
-
   //When the page reloads, get the scrolltop value stored locally and assign it to the aside element
   window.onload = function () {
     const scrollTop = localStorage.getItem("scrollTop");
     aside.scrollTop = scrollTop;
   };
 }
 
+// toggle menu
+
+document.querySelector("#toggleMenu").addEventListener("click", toggleMenu);
+
+function toggleMenu(e) {
+  document.querySelector("#toggleMenu").firstElementChild.classList.toggle("hidden");
+  document.querySelector("#toggleMenu").lastElementChild.classList.toggle("hidden");
+  document.querySelector("#mobile-menu").classList.toggle("hidden");
+  document.querySelector("#header").classList.toggle("bg-white");
+  document.querySelector("body").classList.toggle("overflow-hidden");
+}
+
+// toggle TOC
+document.querySelector("#toggleTOC").addEventListener("click", toggleTOC);
+
+function toggleTOC(e) {
+  document.querySelector("#TOC").classList.toggle("hidden");
+  document.querySelector("#aside").classList.toggle("h-80");
+}
+
 // Select all iframe elements
 const iframes = document.querySelectorAll("iframe");
 

diff --git a/content/docs/forms/tooltip.html → content/docs/components/tooltip.html b/content/docs/forms/tooltip.html → content/docs/components/tooltip.html
@@ -3,7 +3,7 @@
 components: 6
 menu:
   docs:
-    parent: "forms"
+    parent: "components"
 ---
 
 {{< code ctitle="Default" >}}
@@ -18,7 +18,7 @@
       viewBox="0 0 24 24"
       stroke-width="1.5"
       stroke="currentColor"
-      class="h-6 w-6 cursor-pointer text-secondary-500"
+      class="w-6 h-6 cursor-pointer text-secondary-500"
       x-tooltip="tooltip"
     >
       <path
@@ -44,7 +44,7 @@
     <button
       type="button"
       x-tooltip="tooltip"
-      class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400"
+      class="px-4 py-2 text-sm font-medium text-center text-gray-700 transition-all bg-white border border-gray-300 rounded-lg shadow-sm hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400"
     >
       Dark
     </button>
@@ -53,7 +53,7 @@
     <button
       type="button"
       x-tooltip.theme.light="tooltip"
-      class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400"
+      class="px-4 py-2 text-sm font-medium text-center text-gray-700 transition-all bg-white border border-gray-300 rounded-lg shadow-sm hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400"
     >
       Light
     </button>
@@ -70,7 +70,7 @@
     <button
       type="button"
       x-tooltip="tooltip"
-      class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400"
+      class="px-4 py-2 text-sm font-medium text-center text-gray-700 transition-all bg-white border border-gray-300 rounded-lg shadow-sm hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400"
     >
       Tooltip on top
     </button>
@@ -79,7 +79,7 @@
     <button
       type="button"
       x-tooltip.placement.right="tooltip"
-      class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400"
+      class="px-4 py-2 text-sm font-medium text-center text-gray-700 transition-all bg-white border border-gray-300 rounded-lg shadow-sm hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400"
     >
       Tooltip on right
     </button>
@@ -88,7 +88,7 @@
     <button
       type="button"
       x-tooltip.placement.bottom="tooltip"
-      class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400"
+      class="px-4 py-2 text-sm font-medium text-center text-gray-700 transition-all bg-white border border-gray-300 rounded-lg shadow-sm hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400"
     >
       Tooltip on bottom
     </button>
@@ -97,7 +97,7 @@
     <button
       type="button"
       x-tooltip.placement.left="tooltip"
-      class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400"
+      class="px-4 py-2 text-sm font-medium text-center text-gray-700 transition-all bg-white border border-gray-300 rounded-lg shadow-sm hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400"
     >
       Tooltip on left
     </button>
@@ -114,7 +114,7 @@
     <button
       type="button"
       x-tooltip="tooltip"
-      class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400"
+      class="px-4 py-2 text-sm font-medium text-center text-gray-700 transition-all bg-white border border-gray-300 rounded-lg shadow-sm hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400"
     >
       Tooltip hover
     </button>
@@ -123,7 +123,7 @@
     <button
       type="button"
       x-tooltip.on.click="tooltip"
-      class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400"
+      class="px-4 py-2 text-sm font-medium text-center text-gray-700 transition-all bg-white border border-gray-300 rounded-lg shadow-sm hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400"
     >
       Tooltip click
     </button>
@@ -143,7 +143,7 @@
     <button
       type="button"
       x-tooltip="tooltip"
-      class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400"
+      class="px-4 py-2 text-sm font-medium text-center text-gray-700 transition-all bg-white border border-gray-300 rounded-lg shadow-sm hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400"
     >
       fade
     </button>
@@ -152,7 +152,7 @@
     <button
       type="button"
       x-tooltip.animation.shift-away="tooltip"
-      class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400"
+      class="px-4 py-2 text-sm font-medium text-center text-gray-700 transition-all bg-white border border-gray-300 rounded-lg shadow-sm hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400"
     >
       Shift away
     </button>
@@ -161,7 +161,7 @@
     <button
       type="button"
       x-tooltip.animation.scale="tooltip"
-      class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400"
+      class="px-4 py-2 text-sm font-medium text-center text-gray-700 transition-all bg-white border border-gray-300 rounded-lg shadow-sm hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400"
     >
       Scale
     </button>
@@ -170,7 +170,7 @@
     <button
       type="button"
       x-tooltip.animation.perspective="tooltip"
-      class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400"
+      class="px-4 py-2 text-sm font-medium text-center text-gray-700 transition-all bg-white border border-gray-300 rounded-lg shadow-sm hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400"
     >
       Perspective
     </button>
@@ -187,7 +187,7 @@
     <button
       type="button"
       x-tooltip.arrowless="tooltip"
-      class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400"
+      class="px-4 py-2 text-sm font-medium text-center text-gray-700 transition-all bg-white border border-gray-300 rounded-lg shadow-sm hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400"
     >
       Button
     </button>

diff --git a/layouts/_default/list.html b/layouts/_default/list.html
@@ -1,6 +1,6 @@
 {{ define "main" }}
   <section class="py-24">
-    <div class="container mx-auto px-6 2xl:px-40">1</div>
+    <div class="container mx-auto px-6 2xl:px-32">1</div>
   </section>
   {{ .Content }}
 {{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -1,9 +1,9 @@
 {{ define "main" }}
-  <section class="pt-24">
-    <div class="container px-6 mx-auto 2xl:px-40">
-      <div class="relative flex w-full">
+  <section class="pt-14 md:pt-24">
+    <div class="container px-6 mx-auto 2xl:px-32">
+      <div class="relative w-full md:flex">
         {{ partial "sidebar" . }}
-        <div class="w-full max-w-full min-w-0 lg:pl-72">
+        <div class="w-full max-w-full min-w-0 mt-4 md:mt-0 lg:pl-72">
           <p class="text-sm font-medium capitalize text-primary-500">{{ .Params.menu.docs.parent }}</p>
           <h1 class="mt-1 text-3xl font-bold capitalize text-secondary-900">{{ .Title }}</h1>
           <p class="mt-2">{{ .Params.description }}</p>

diff --git a/layouts/index.html b/layouts/index.html
@@ -1,28 +1,30 @@
 {{ define "main" }}
-  {{ .Content }}
   {{ $heroBg := resources.Get "/images/hero-bg.png" }}
-  <section class="bg-secondary-50 bg-cover py-32" style="background-image: url('  {{ $heroBg.RelPermalink }}')">
-    <div class="container mx-auto px-6 2xl:px-40">
+  <section
+    class="py-20 bg-cover bg-secondary-50 md:py-32"
+    style="background-image: url('  {{ $heroBg.RelPermalink }}')"
+  >
+    <div class="container px-6 mx-auto 2xl:px-32">
       <div class="text-center">
         <div>
-          <h1 class="text-6xl font-extrabold leading-tight text-secondary-900">
-            Build your website <br />
-            quickly with <span>SailboatUI</span>
+          <h1 class="text-4xl font-extrabold leading-tight text-secondary-900 md:text-6xl">
+            Build your website <br class="hidden md:block" />
+            quickly with SailboatUI
           </h1>
-          <p class="mx-auto mt-4 w-2/5">
+          <p class="mx-auto mt-4 md:w-2/5">
             SailboatUI is a modern UI framework for Tailwind CSS. We can save you a lot of time and provide many
             components.
           </p>
-          <div class="mt-10 inline-flex gap-4">
+          <div class="inline-flex flex-wrap gap-4 mt-10 md:flex-nowrap">
             <a
               href="/docs/getting-started/quick-start/"
-              class="rounded-lg border border-primary-500 bg-primary-500 px-5 py-2.5 text-center text-sm font-medium text-white shadow-sm transition-all hover:border-primary-700 hover:bg-primary-700 focus:ring focus:ring-primary-200"
+              class="w-full rounded-lg border border-primary-500 bg-primary-500 px-5 py-2.5 text-center text-sm font-medium text-white shadow-sm transition-all hover:border-primary-700 hover:bg-primary-700 focus:ring focus:ring-primary-200 md:w-auto md:flex-auto"
             >
               Get Started →
             </a>
             <a
               href="/docs/components/accordion/"
-              class="rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed"
+              class="w-full rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed md:w-auto md:flex-auto"
             >
               Explore Components
             </a>
@@ -33,33 +35,33 @@ <h1 class="text-6xl font-extrabold leading-tight text-secondary-900">
   </section>
 
   <section class="py-20">
-    <div class="container mx-auto px-6 2xl:px-40">
+    <div class="container px-6 mx-auto 2xl:px-32">
       <div class="text-center">
         <h2 class="text-4xl font-bold text-secondary-900">150+ Components</h2>
-        <h3 class="mt-4 text-lg">We will provide everything you can think of.</h3>
+        <h3 class="mt-4 md:text-lg">We will provide everything you can think of.</h3>
       </div>
-      <div class="mt-14 grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4">
+      <div class="grid grid-cols-1 gap-6 mt-14 sm:grid-cols-2 md:grid-cols-4">
         {{ range first 12 ( where .Site.Pages "Params.tag" "hot" ) }}
           <a
-            class="overflow-hidden rounded-lg border border-secondary-200 bg-white transition-all"
+            class="overflow-hidden transition-all duration-300 bg-white border rounded-lg group border-secondary-200 hover:-translate-y-1 hover:shadow-sm"
             href="{{ .RelPermalink }}"
           >
             {{- $image := resources.Get .Params.featured_image -}}
             <div class="bg-secondary-100/50">
               <img
                 src="{{ $image.RelPermalink }}"
-                class="w-full object-cover"
+                class="object-cover w-full"
                 alt="Tailwind CSS {{ .Title }} component"
               />
             </div>
             <div class="p-4">
-              <h4 class="font-medium text-slate-900">{{ .Title }}</h4>
+              <h4 class="font-medium transition-colors text-slate-900 group-hover:text-primary-500">{{ .Title }}</h4>
               <p class="text-sm">{{ .Params.components }} components</p>
             </div>
           </a>
         {{ end }}
       </div>
-      <div class="text-centet flex justify-center py-10">
+      <div class="flex justify-center py-10 text-centet">
         <a
           href="/docs/components/accordion/"
           class="rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed"

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -1,5 +1,5 @@
 <footer>
-  <div class="container mx-auto  px-6  2xl:px-40">
+  <div class="container mx-auto  px-6  2xl:px-32">
     <div class="border-t py-10 text-center">Copyright © 2022 Sailboat UI</div>
   </div>
 </footer>