shippable responsize styles

formkit · Feb 13, 2024 · ad7dba6 · ad7dba6
1 parent 6acd2f8
commit ad7dba6
Show file tree

Hide file tree

Showing 12 changed files with 57 additions and 28 deletions.
diff --git a/docs/app.vue b/docs/app.vue
@@ -28,10 +28,12 @@ onMounted(async () => {
     <TheSearch />
   </ContainerSection>
   <div
-    class="docs-layout flex w-full mt-20 border-t border-t-slate-300 dark:border-t-purple-950"
+    class="docs-layout flex w-full max-w-full mt-20 border-t border-t-slate-300 dark:border-t-purple-950"
   >
     <TheSidebar />
-    <NuxtPage class="mr-auto pt-20 ml-6 min-[1400px]:ml-10" />
+    <NuxtPage
+      class="min-w-0 pr-4 mr-auto pt-20 w-full max-w-[1000px] ml-6 min-[1400px]:ml-10"
+    />
   </div>
   <TheFooter />
 </template>
diff --git a/docs/components/CalloutInfo.vue b/docs/components/CalloutInfo.vue
@@ -1,6 +1,6 @@
 <template>
   <aside
-    class="bg-sky-200 p-4 rounded-lg text-slate-800 leading-8 mb-8 dark:bg-sky-800 dark:text-sky-50 dark:[&_code]:!border-0 dark:[&_code]:!text-sky-400"
+    class="bg-sky-200 p-4 rounded-lg text-slate-800 leading-normal lg:leading-8 mb-8 dark:bg-sky-800 dark:text-sky-50 dark:[&_code]:!border-0 dark:[&_code]:!text-sky-400"
   >
     <svg
       xmlns="http://www.w3.org/2000/svg"

diff --git a/docs/components/CalloutWarning.vue b/docs/components/CalloutWarning.vue
@@ -5,7 +5,8 @@
     p-4
     rounded-lg
     text-slate-800
-    leading-8 
+    leading-normal 
+    lg:leading-8
     mb-8
 
     dark:bg-pink-900

diff --git a/docs/components/CodeExample.client.vue b/docs/components/CodeExample.client.vue
@@ -117,9 +117,14 @@ const stopWatch = watch(el, () => {
       rounded-lg
       my-8
       md:my-12
-      mdl:-mr-8
-      lg:-mr-28
-      xl:-mr-48
+      md:-mr-2
+      min-[850px]:-mr-10
+      min-[900px]:-mr-20
+      min-[1000px]:-mr-40
+      lg:-mr-4
+      min-[1100px]:-mr-[10vw]
+      min-[1200px]:-mr-[16vw]
+      min-[1600px]:-mr-64
       shadow-sm
       bg-[#f9f9f9] ${'' /* --vs-editor-background */}
       after:-z-10
@@ -133,15 +138,18 @@ const stopWatch = watch(el, () => {
       dark:after:bg-purple-900
     `"
   >
-    <div class="md:w-1/2" ref="el"></div>
+    <div class="md:w-2/3 min-[1200px]:w-1/2" ref="el"></div>
     <div
       :class="`
-        md:w-1/2
+        md:w-1/3
+        min-[1200px]:w-1/2
         bg-slate-200
         border
         border-l-slate-300
         font-mono
-        text-sm
+        text-xs
+        md:text-sm
+        lg:text-base
         p-4
         overflow-auto
         rounded-bl-lg

diff --git a/docs/components/FunctionReference.vue b/docs/components/FunctionReference.vue
@@ -14,7 +14,8 @@ const props = withDefaults(defineProps<FunctionRef>(), {
       rounded-lg
       p-3
       font-mono
-      text-sm
+      text-xs
+      md:text-sm
       mb-8
       border
       border-slate-300

diff --git a/docs/components/GitHubStars.vue b/docs/components/GitHubStars.vue
@@ -9,7 +9,7 @@ const { data, pending, error } = useLazyFetch<{ stargazers_count: number }>(
     <div role="status" class="absolute top-[2.5px]" v-if="pending">
       <svg
         aria-hidden="true"
-        class="block w-4 h-4 text-gray-200 animate-spin fill-black opacity-20"
+        class="block w-3 h-3 sm:w-4 sm:h-4 text-gray-200 animate-spin fill-black opacity-20"
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"

diff --git a/docs/components/ObjectReference.vue b/docs/components/ObjectReference.vue
@@ -12,7 +12,8 @@ defineProps<{
       rounded-lg
       p-3
       font-mono
-      text-base
+      text-xs
+      md:text-sm
       mb-8
       border
       border-slate-300

diff --git a/docs/components/PageSection.vue b/docs/components/PageSection.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page-section max-w-3xl mx-auto my-16">
+  <div class="page-section max-w-3xl mr-auto my-16">
     <slot />
   </div>
 </template>
diff --git a/docs/components/SuperHeader.vue b/docs/components/SuperHeader.vue
@@ -20,7 +20,8 @@
       :class="`
         group/logo
         head-message
-        text-sm
+        text-xs
+        md:text-sm
         flex
         transition-all
         text-slate-600
@@ -37,7 +38,9 @@
       <LogoMark
         class="w-3 mr-2 fill-[#FCAB5E] grayscale group-hover/logo:grayscale-0"
       />
-      Made with <span class="text-pink-400 mx-1">♥</span> by the FormKit team.
+      Made with ♥ by
+      <span class="hidden sm:inline sm:mx-[0.5ch]">the</span> FormKit
+      <span class="hidden sm:inline sm:ml-[0.5ch]">team</span>
     </NuxtLink>
     <ul class="flex gap-4">
       <li>
@@ -47,7 +50,7 @@
         >
           <GitHubStars />
           <GitHubLogo
-            class="text-slate-500 opacity-60 group-hover/github:opacity-100 w-5 h-5 dark:text-purple-500"
+            class="text-slate-500 opacity-60 group-hover/github:opacity-100 w-4 h-4 sm:w-5 sm:h-5 dark:text-purple-500"
           />
         </NuxtLink>
       </li>

diff --git a/docs/components/TheFooter.vue b/docs/components/TheFooter.vue
@@ -17,8 +17,9 @@
             to="https://formkit.com"
             class="head-message text-sm flex text-slate-500 hover:text-slate-800 transition-all dark:text-purple-200/75 dark:hover:text-slate-200"
           >
-            <LogoMark class="w-3 mr-2 fill-[#FCAB5E]" /> Made with ♥ by the
-            FormKit team.
+            <LogoMark class="w-3 mr-2 fill-[#FCAB5E]" /> Made with ♥ by
+            <span class="hidden sm:inline sm:mx-[0.5ch]">the</span> FormKit
+            <span class="hidden sm:inline sm:ml-[0.5ch]">team</span>
           </NuxtLink>
         </div>
         <div>

diff --git a/docs/components/TheHeader.vue b/docs/components/TheHeader.vue
@@ -10,19 +10,22 @@ onMounted(() => {
 
 <template>
   <ContainerSection>
-    <header class="flex flex-col mb-24">
+    <header class="flex flex-col mb-14 md:mb-20 lg:mb-24">
       <SuperHeader />
       <ClockFont
         chars="tempo"
-        class="text-[10vw] justify-center mb-4 max-w-3xl m-auto text-sky-500 !px-20 !py-16 !rounded-2xl"
+        class="text-[15vw] md:text-[10vw] justify-center mb-4 max-w-2xl m-auto text-sky-500 !px-0 !py-[10%] lg:px-20 lg:py-16 !rounded-2xl"
         :delay="500"
       />
       <h1
         :class="`
           tagline
           text-center
-          text-[6vw]
+          text-[10vw]
+          sm:text-[8vw]
+          md:text-[6vw]
           font-bold
+          leading-none
           max-w-2xl
           m-auto
           opacity-0
@@ -32,8 +35,7 @@ onMounted(() => {
           data-[show]:opacity-100
           data-[show]:translate-y-0
           text-slate-700
-          mb-10
-          md:mb-14
+          mb-14
           lg:leading-none
           lg:text-6xl
           lg:mb-20

diff --git a/docs/components/TheSidebar.vue b/docs/components/TheSidebar.vue
@@ -55,21 +55,31 @@ function openDocSearch() {
   <aside
     :class="`
       docs-sidebar
-      flex
+      hidden
+      lg:flex
       flex-col
       border-r
       pt-16
       border-r-slate-300
-      ml-[2%]
       min-[1400px]:ml-[5%]
       min-[1600px]:ml-auto
       dark:border-r-purple-950
       w-full
-      max-w-[250px]
+      max-w-[200px]
+      min-[1400px]:max-w-[250px]
     `"
   >
     <nav
-      class="docs-sidebar-nav sticky pr-5 min-[1400px]:pr-10 pl-5 pt-0 top-2 max-h-[calc(100dvh-0.5rem)] overflow-auto"
+      :class="`
+        docs-sidebar-nav
+        sticky
+        min-[1400px]:pr-10
+        px-2
+        pt-0
+        top-2
+        max-h-[calc(100dvh-0.5rem)]
+        overflow-auto
+      `"
     >
       <div
         :class="`