Merge branch 'main' into dev

README.md

@@ -43,10 +43,6 @@
   </p>
 </p>
 
-![build](https://github.com/buttons/github-buttons/workflows/build/badge.svg)
-[![npm](https://img.shields.io/npm/v/github-buttons)](https://www.npmjs.com/github-buttons)
-[![Build Status](https://img.shields.io/github/workflow/status/mdo/github-buttons/CI/master?label=CI&logo=github)](https://github.com/mdo/github-buttons/actions?query=workflow%3ACI+branch%3Amaster)
-
 **Install to VS Code with:**  
 `git clone git@github.com:nusserstudios/hugo-twcss-alpine.git your-name`
 

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%;
 }
@@ -3782,6 +3791,10 @@ EmojiSymbols;
     display: flex;
   }
 
+  .sm\:inline-flex {
+    display: inline-flex;
+  }
+
   .sm\:h-2\/3 {
     height: 66.666667%;
   }
@@ -3862,6 +3875,12 @@ EmojiSymbols;
 }
 
 @media (min-width: 768px) {
+  @media (min-width: 640px) {
+    .md\:sm\:inline-flex {
+      display: inline-flex;
+    }
+  }
+
   .md\:sticky {
     position: sticky;
   }
@@ -3902,6 +3921,10 @@ EmojiSymbols;
     display: flex;
   }
 
+  .md\:inline-flex {
+    display: inline-flex;
+  }
+
   .md\:hidden {
     display: none;
   }
@@ -3926,6 +3949,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%;
 }
@@ -3782,6 +3791,10 @@ EmojiSymbols;
     display: flex;
   }
 
+  .sm\:inline-flex {
+    display: inline-flex;
+  }
+
   .sm\:h-2\/3 {
     height: 66.666667%;
   }
@@ -3862,6 +3875,12 @@ EmojiSymbols;
 }
 
 @media (min-width: 768px) {
+  @media (min-width: 640px) {
+    .md\:sm\:inline-flex {
+      display: inline-flex;
+    }
+  }
+
   .md\:sticky {
     position: sticky;
   }
@@ -3902,6 +3921,10 @@ EmojiSymbols;
     display: flex;
   }
 
+  .md\:inline-flex {
+    display: inline-flex;
+  }
+
   .md\:hidden {
     display: none;
   }
@@ -3926,6 +3949,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;
   }