feat: responsive now-wrapper

src/layouts/variables.css

@@ -26,8 +26,4 @@
   --bg-dark: #343a40;
   --bg-darker: #212529;
   --bg-darkest: #000;
-
-  --pill-border-color: rgba(255, 255, 255, 0.2);
-  --pill-border-radius: 40px;
-  --pill-padding: 8px 4px;
 }

src/pages/index.astro

@@ -36,16 +36,15 @@ const avatarSize = 150
         <h1 title="Ayo Ayco | Software Engineer + Web Developer">
           Hi, I'm <span class="heavy-text">Ayo</span>!
         </h1>
-        <!--a href="https://forms.ayo.run/form/tnz7FybY" class="now-wrapper"-->
 
-        <a href="/now" class="now-wrapper pill">
+        <a href="/now" class="now-wrapper action primary">
           <span class="now-label">now</span>
           <span class="status">{now.title}</span>
         </a>
 
         <a
           href="https://chat.ayo.run/join/7IKG-h3nW-pD1H"
-          class="chat-link pill"
+          class="chat-link action"
         >
           <status-indicator id="chat-link" pulse status="positive">
             Chat
@@ -96,13 +95,30 @@ const avatarSize = 150
     color: white;
   }
 
-  .pill {
+  .action {
     margin-right: 0.5rem;
-    padding: var(--pill-padding);
+    padding: 8px 4px;
     color: white;
     font-size: var(--font-size-sm);
     text-decoration: none;
     font-weight: normal;
+
+    &.primary {
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      border-radius: 40px;
+    }
+  }
+
+  .now-wrapper {
+    display: inline-block;
+    max-width: 390px;
+    white-space: nowrap;
+    overflow: clip;
+    text-overflow: ellipsis;
+
+    .status {
+      max-width: 300px;
+    }
   }
 
   .now-label {
@@ -202,7 +218,7 @@ const avatarSize = 150
   }
 
   @media only screen and (max-device-width: 360px) {
-    .pill {
+    .action.primary {
       border: 0px;
       border-radius: 0;
       font-size: var(--font-size-sm);
@@ -233,6 +249,12 @@ const avatarSize = 150
   }
 
   @media only screen and (min-device-width: 280px) and (max-device-width: 653px) {
+    .action {
+      display: block;
+    }
+    .now-wrapper {
+      max-width: 600px;
+    }
     .highlighted-section__content {
       padding: 1rem;
     }