fix: button styles

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "The source for my personal site, blog and portfolio. Built using 11ty and hosted on Netlify.",
   "main": "index.html",
   "scripts": {

src/_includes/partials/post-tags.liquid

@@ -3,7 +3,7 @@
     {% if tag != "posts" %}
       <a href="/tags/{{ tag }}">
         <div
-          class="tag--button tag--button__small"
+          class="pill--button pill--button__small"
           data-pagefind-filter="tags">{{ tag }}</div>
       </a>
     {% endif %}

src/contact.md

@@ -39,5 +39,5 @@ Fill out the form below to get in touch (or ping me on [Mastodon](https://social
     <input type="email" name="email" placeholder="Email" class="w-full outline-none p-2 mb-6 rounded-sm border border-blue-600 focus:border-blue-800 dark:border-blue-400 dark:focus:border-blue-200 transition-colors ease-in-out duration-300" />
   </label>
   <textarea name="message" placeholder="Message"  class="w-full md:w-3/4 h-40 resize-none outline-none p-2 mb-6 rounded-sm border border-blue-600 focus:border-blue-800 dark:border-blue-400 dark:focus:border-blue-200 transition-colors ease-in-out duration-300"></textarea>
-  <button class="w-1/2 md:w-1/3" type="submit">Send message</button>
+  <button class="pill--button w-1/2 md:w-1/3" type="submit">Send message</button>
 </form>

src/tags.md

@@ -20,7 +20,7 @@ meta:
 {% for tag in collections.tagList %}
 <span>
   <a href="/tags/{{ tag }}" class="!no-underline">
-    <button class="tag--button">
+    <button class="pill--button">
       {{ tag }}
     </button>
   </a>

tailwind.css

@@ -102,12 +102,8 @@ pre {
   @apply scrollbar-track-blue-100;
 }
 
-button {
+.pill--button {
   @apply !appearance-none;
-}
-
-button,
-.tag--button {
   @apply font-semibold;
   @apply py-2;
   @apply px-4;
@@ -121,8 +117,7 @@ button,
   background-color: theme(colors.blue.600) !important;
 }
 
-button.button__small,
-.tag--button.tag--button__small {
+.pill--button.pill--button__small {
   @apply py-1;
   @apply px-2;
   @apply mr-2;
@@ -131,12 +126,9 @@ button.button__small,
   @apply inline-block;
 }
 
-button:hover,
-button:active,
-button:focus,
-.tag--button:hover,
-.tag--button:active,
-.tag--button:focus {
+.pill--button:hover,
+.pill--button:active,
+.pill--button:focus {
   background-color: theme(colors.blue.800) !important;
 }
 
@@ -228,14 +220,14 @@ button:focus,
     @apply scrollbar-thumb-blue-400;
   }
 
-  .tag--button {
+  .pill--button {
     color: theme(colors.gray.900);
     background: theme(colors.blue.400);
   }
 
-  .tag--button:hover,
-  .tag--button:active,
-  .tag--button:focus {
+  .pill--button:hover,
+  .pill--button:active,
+  .pill--button:focus {
     background: theme(colors.blue.200);
   }
 }