Updated hero whats new.

assets/css/style.css

@@ -2608,6 +2608,15 @@ video {
   max-width: none;
 }
 
+.max-w-sm {
+  max-width: 24rem;
+}
+
+.max-w-fit {
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -3644,11 +3653,6 @@ EmojiSymbols;
   color: rgb(165 180 252 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-gray-100 {
-  --tw-text-opacity: 1;
-  color: rgb(243 244 246 / var(--tw-text-opacity));
-}
-
 .dark .dark\:text-zinc-200 {
   --tw-text-opacity: 1;
   color: rgb(228 228 231 / var(--tw-text-opacity));
@@ -3772,6 +3776,10 @@ EmojiSymbols;
     display: flex;
   }
 
+  .sm\:inline-flex {
+    display: inline-flex;
+  }
+
   .sm\:h-2\/3 {
     height: 66.666667%;
   }
@@ -3852,6 +3860,12 @@ EmojiSymbols;
 }
 
 @media (min-width: 768px) {
+  @media (min-width: 640px) {
+    .md\:sm\:inline-flex {
+      display: inline-flex;
+    }
+  }
+
   .md\:sticky {
     position: sticky;
   }
@@ -3892,6 +3906,10 @@ EmojiSymbols;
     display: flex;
   }
 
+  .md\:inline-flex {
+    display: inline-flex;
+  }
+
   .md\:hidden {
     display: none;
   }
@@ -3916,6 +3934,16 @@ EmojiSymbols;
     width: 1.5rem;
   }
 
+  .md\:min-w-min {
+    min-width: -moz-min-content;
+    min-width: min-content;
+  }
+
+  .md\:min-w-fit {
+    min-width: -moz-fit-content;
+    min-width: fit-content;
+  }
+
   .md\:max-w-3xl {
     max-width: 48rem;
   }

layouts/index.html

@@ -11,12 +11,13 @@
                         Super Fast, and Flexible
                     </h2>
                     <a href="https://github.com/nusserstudios/tailbliss"
-                       class="inline-flex py-4 mx-auto space-x-4 sm:text-center">
+                       class="block py-4 mx-auto space-x-4 sm:inline-flex md:inline-flex sm:text-center sm:block">
-                        <span class="rounded bg-gray-50 px-2.5 py-1 text-sm font-bold text-gray-900">
+                        <span
+                              class="rounded bg-gray-50 px-2.5 py-1 text-sm font-bold text-gray-900 block max-w-fit mx-auto md:min-w-fit mb-2">
                             What's new
                         </span>
                         <span
-                              class="inline-flex items-center space-x-1 text-sm font-medium text-gray-800 dark:text-white">
+                              class="inline-flex items-center mb-2 space-x-1 text-sm font-medium text-gray-800 dark:text-white md:min-w-fit">
                             <span>Just shipped version 0.1.0</span>
                             <!-- Heroicon name: mini/chevron-right -->
                             <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "TailBliss",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Hugo + Alpine.js + TailwindCSS",
   "main": "index.js",
   "devDependencies": {

resources/_gen/assets/css/css/style.css_ad9a12809e06de71aca16e9138fbecf4.content

@@ -2608,6 +2608,15 @@ video {
   max-width: none;
 }
 
+.max-w-sm {
+  max-width: 24rem;
+}
+
+.max-w-fit {
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -2873,11 +2882,6 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-gray-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
-}
-
 .bg-gradient-to-t {
   background-image: linear-gradient(to top, var(--tw-gradient-stops));
 }
@@ -3601,15 +3605,6 @@ EmojiSymbols;
   background-color: rgb(79 70 229 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-gray-900\/40 {
-  background-color: rgb(17 24 39 / 0.4);
-}
-
-.dark .dark\:bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
 .dark .dark\:prose-invert {
   --tw-prose-body: var(--tw-prose-invert-body);
   --tw-prose-headings: var(--tw-prose-invert-headings);
@@ -3653,6 +3648,11 @@ EmojiSymbols;
   color: rgb(17 24 39 / 0.6);
 }
 
+.dark .dark\:text-indigo-300 {
+  --tw-text-opacity: 1;
+  color: rgb(165 180 252 / var(--tw-text-opacity));
+}
+
 .dark .dark\:text-zinc-200 {
   --tw-text-opacity: 1;
   color: rgb(228 228 231 / var(--tw-text-opacity));
@@ -3668,36 +3668,6 @@ EmojiSymbols;
   color: rgb(129 140 248 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-gray-100 {
-  --tw-text-opacity: 1;
-  color: rgb(243 244 246 / var(--tw-text-opacity));
-}
-
-.dark .dark\:text-zinc-50 {
-  --tw-text-opacity: 1;
-  color: rgb(250 250 250 / var(--tw-text-opacity));
-}
-
-.dark .dark\:text-zinc-100 {
-  --tw-text-opacity: 1;
-  color: rgb(244 244 245 / var(--tw-text-opacity));
-}
-
-.dark .dark\:text-indigo-500 {
-  --tw-text-opacity: 1;
-  color: rgb(99 102 241 / var(--tw-text-opacity));
-}
-
-.dark .dark\:text-indigo-200 {
-  --tw-text-opacity: 1;
-  color: rgb(199 210 254 / var(--tw-text-opacity));
-}
-
-.dark .dark\:text-indigo-300 {
-  --tw-text-opacity: 1;
-  color: rgb(165 180 252 / var(--tw-text-opacity));
-}
-
 .dark .dark\:placeholder-gray-400::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(156 163 175 / var(--tw-placeholder-opacity));
@@ -3806,6 +3776,10 @@ EmojiSymbols;
     display: flex;
   }
 
+  .sm\:inline-flex {
+    display: inline-flex;
+  }
+
   .sm\:h-2\/3 {
     height: 66.666667%;
   }
@@ -3886,6 +3860,12 @@ EmojiSymbols;
 }
 
 @media (min-width: 768px) {
+  @media (min-width: 640px) {
+    .md\:sm\:inline-flex {
+      display: inline-flex;
+    }
+  }
+
   .md\:sticky {
     position: sticky;
   }
@@ -3926,6 +3906,10 @@ EmojiSymbols;
     display: flex;
   }
 
+  .md\:inline-flex {
+    display: inline-flex;
+  }
+
   .md\:hidden {
     display: none;
   }
@@ -3950,6 +3934,16 @@ EmojiSymbols;
     width: 1.5rem;
   }
 
+  .md\:min-w-min {
+    min-width: -moz-min-content;
+    min-width: min-content;
+  }
+
+  .md\:min-w-fit {
+    min-width: -moz-fit-content;
+    min-width: fit-content;
+  }
+
   .md\:max-w-3xl {
     max-width: 48rem;
   }