ui tweaks

ServiceStack · Mar 15, 2024 · bae32b6 · bae32b6
1 parent 3d6844d
commit bae32b6
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 66 deletions.
diff --git a/MyApp/Components/Pages/Questions/Index.razor b/MyApp/Components/Pages/Questions/Index.razor
@@ -6,7 +6,7 @@
     <div>
         @if (posts != null)
         {
-            <div class="mt-8 mb-20 mx-auto sm:max-w-4xl xl:max-w-5xl">
+            <div class="mt-8 mb-20 mx-auto sm:max-w-4xl sm:w-[56rem] xl:max-w-5xl xl:w-[64rem]">
                 <div class="mb-4">
                     <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100 sm:text-5xl">
                         <span class="block xl:inline">@Title</span>

diff --git a/MyApp/Components/Shared/Header.razor b/MyApp/Components/Shared/Header.razor
@@ -7,7 +7,7 @@
         <div class="absolute z-10 top-2 left-2 sm:static flex-shrink flex-grow-0">
             <div class="cursor-pointer">
                 <NavLink class="navbar-brand flex items-center text-gray-800 dark:text-gray-100" href="/">
-                    <img class="w-8 h-8 ml-4 sm:w-10 sm:h-10 align-middle" src="/img/logo.svg" alt="MyApp logo">
+                    <img class="w-8 h-8 sm:ml-4 sm:w-10 sm:h-10 align-middle" src="/img/logo.svg" alt="MyApp logo">
                     <span class="hidden ml-2 sm:block text-2xl font-semibold">pvq.app</span>
                 </NavLink>
             </div>
@@ -16,7 +16,7 @@
             <nav class="relative flex flex-grow leading-6 font-semibold text-slate-700 dark:text-slate-200">
                 <ul class="flex flex-wrap items-center justify-end w-full m-0">
 
-                    <li class="relative flex flex-wrap just-fu-start m-0 w-96 pr-4">
+                    <li class="relative flex flex-wrap just-fu-start m-0 w-52 sm:w-96 pr-4">
                         <form class="w-full" method="get" action="questions">
                             <input type="text" name="q" class="@TextInput.InputClasses" placeholder="Search..." value=@Q />
                             <input type="submit" class="hidden" />

diff --git a/MyApp/Components/Shared/HomeTab.razor b/MyApp/Components/Shared/HomeTab.razor
@@ -1,6 +1,6 @@
 @if (Posts != null)
 {
-    <div class="mt-8 mb-20 mx-auto sm:max-w-4xl xl:max-w-5xl">
+    <div class="mt-8 mb-20 mx-auto sm:max-w-4xl sm:w-[56rem] xl:max-w-5xl xl:w-[64rem]">
         <div class="mb-4 flex justify-between">
             <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100 sm:text-5xl">
                 <span class="block xl:inline"><span class="md:inline hidden">Top </span>Questions</span>

diff --git a/MyApp/Components/Shared/QuestionPost.razor b/MyApp/Components/Shared/QuestionPost.razor
@@ -4,7 +4,7 @@
 
 <template id="Post">@BlazorHtml.RawJson(Question.Post)</template>
 
-<div data-title="@Question.Post.Title" class="mt-8 mb-20 mx-auto max-w-5xl px-4">
+<div class="mt-8 mb-20 mx-auto sm:max-w-4xl sm:w-[56rem] xl:max-w-5xl xl:w-[64rem]">
     <article>
         <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100 sm:text-5xl">
             <span class="block xl:inline">@Question.Post.Title</span>

diff --git a/MyApp/wwwroot/css/app.css b/MyApp/wwwroot/css/app.css
@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.3.6 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -32,9 +32,11 @@
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
 */
 
-html {
+html,
+:host {
   line-height: 1.5;
   /* 1 */
   -webkit-text-size-adjust: 100%;
@@ -44,12 +46,14 @@ html {
   -o-tab-size: 4;
      tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
   font-variation-settings: normal;
   /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
 }
 
 /*
@@ -1413,6 +1417,10 @@ select{
   width: 15rem;
 }
 
+.w-72 {
+  width: 18rem;
+}
+
 .w-8 {
   width: 2rem;
 }
@@ -1437,16 +1445,12 @@ select{
   width: 100vw;
 }
 
-.w-44 {
-  width: 11rem;
+.w-40 {
+  width: 10rem;
 }
 
-.w-48 {
-  width: 12rem;
-}
-
-.w-72 {
-  width: 18rem;
+.w-52 {
+  width: 13rem;
 }
 
 .min-w-0 {
@@ -1457,6 +1461,10 @@ select{
   min-width: 100%;
 }
 
+.max-w-24 {
+  max-width: 6rem;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -1465,10 +1473,6 @@ select{
   max-width: 48rem;
 }
 
-.max-w-4xl {
-  max-width: 56rem;
-}
-
 .max-w-5xl {
   max-width: 64rem;
 }
@@ -1818,12 +1822,6 @@ select{
   margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.space-x-6 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
-  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
 .space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1836,24 +1834,6 @@ select{
   margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
 }
 
-.space-y-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
-}
-
-.space-y-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-}
-
-.-space-x-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(-1rem * var(--tw-space-x-reverse));
-  margin-left: calc(-1rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
 .divide-x > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-x-reverse: 0;
   border-right-width: calc(1px * var(--tw-divide-x-reverse));
@@ -2512,6 +2492,10 @@ select{
   padding-top: 0.375rem;
 }
 
+.pt-12 {
+  padding-top: 3rem;
+}
+
 .pt-16 {
   padding-top: 4rem;
 }
@@ -2536,10 +2520,6 @@ select{
   padding-top: 2rem;
 }
 
-.pt-12 {
-  padding-top: 3rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -4428,6 +4408,10 @@ select{
     margin-top: 1rem;
   }
 
+  .sm\:ml-4 {
+    margin-left: 1rem;
+  }
+
   .sm\:block {
     display: block;
   }
@@ -4476,10 +4460,30 @@ select{
     width: 100%;
   }
 
+  .sm\:w-96 {
+    width: 24rem;
+  }
+
+  .sm\:w-\[64em\] {
+    width: 64em;
+  }
+
+  .sm\:w-\[64rem\] {
+    width: 64rem;
+  }
+
+  .sm\:w-\[56rem\] {
+    width: 56rem;
+  }
+
   .sm\:max-w-3xl {
     max-width: 48rem;
   }
 
+  .sm\:max-w-4xl {
+    max-width: 56rem;
+  }
+
   .sm\:max-w-md {
     max-width: 28rem;
   }
@@ -4488,10 +4492,6 @@ select{
     max-width: 65ch;
   }
 
-  .sm\:max-w-4xl {
-    max-width: 56rem;
-  }
-
   .sm\:flex-1 {
     flex: 1 1 0%;
   }
@@ -4580,16 +4580,16 @@ select{
     padding-right: 2.5rem;
   }
 
-  .sm\:px-6 {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-  }
-
   .sm\:px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
   }
 
+  .sm\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
   .sm\:pb-0 {
     padding-bottom: 0px;
   }
@@ -4834,16 +4834,16 @@ select{
     padding: 0.5rem;
   }
 
-  .lg\:px-8 {
-    padding-left: 2rem;
-    padding-right: 2rem;
-  }
-
   .lg\:px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
   }
 
+  .lg\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
   .lg\:pb-28 {
     padding-bottom: 7rem;
   }
@@ -4894,17 +4894,21 @@ select{
     display: table-cell;
   }
 
-  .xl\:max-w-3xl {
-    max-width: 48rem;
+  .xl\:w-\[64rem\] {
+    width: 64rem;
   }
 
-  .xl\:max-w-screen-lg {
-    max-width: 1024px;
+  .xl\:max-w-3xl {
+    max-width: 48rem;
   }
 
   .xl\:max-w-5xl {
     max-width: 64rem;
   }
+
+  .xl\:max-w-screen-lg {
+    max-width: 1024px;
+  }
 }
 
 @media (min-width: 1536px) {