Responsive Fixes

nathangathright · Feb 8, 2023 · e02cbe7 · e02cbe7
1 parent 960ccb8
commit e02cbe7
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -12,7 +12,10 @@
         class="profile-img"
         src="https://cdn.masto.host/podcastindexsocial/accounts/avatars/000/000/269/original/4870b11c3ae92a44.jpg"
       />
-      <strong>Dave Jones</strong>
+      <div class="user">
+        <strong>Dave Jones</strong>
+        <span class="handle">@dave@podcastindex.social</span>
+      </div>
     </a>
     <span aria-hidden="true">·</span>
     <a href="https://podcastindex.social/@dave/109683341113064081" class="permalink">
@@ -30,7 +33,10 @@
           class="profile-img"
           src="https://cdn.masto.host/podcastindexsocial/accounts/avatars/000/025/730/original/534c3a57da218310.jpg"
         />
-        <strong>Mike Neumann :pci:</strong>
+        <div class="user">
+          <strong>Mike Neumann :pci:</strong>
+          <span class="handle">@mikeneumann@podcastindex.social</span>
+        </div>
       </a>
       <span aria-hidden="true">·</span>
       <a href="https://podcastindex.social/@mikeneumann/109683392658321928" class="permalink">
@@ -49,7 +55,10 @@
           class="profile-img"
           src="https://cdn.masto.host/podcastindexsocial/cache/accounts/avatars/000/010/188/original/cab93f435d3d77e2.png"
         />
-        <strong>Nathan Gathright</strong>
+        <div class="user">
+          <strong>Nathan Gathright</strong>
+          <span class="handle">@nathan@xoxo.zone</span>
+        </div>
       </a>
       <span aria-hidden="true">·</span>
       <a href="https://podcastindex.social/@nathan@xoxo.zone/109683418204293960" class="permalink">
@@ -68,7 +77,10 @@
     <summary>
       <a class="profile" href="https://podcastindex.social/@Drebscott">
         <img class="profile-img" src="https://cdn.masto.host/podcastindexsocial/accounts/avatars/000/003/911/original/946716e5a873702d.jpg" />
-        <strong>:pci: Dreb Scott :pci:</strong>
+        <div class="user">
+          <strong>:pci: Dreb Scott :pci:</strong>
+          <span class="handle">@Drebscott@podcastindex.social</span>
+        </div>
       </a>
       <span aria-hidden="true">·</span>
       <a href="https://podcastindex.social/@Drebscott/109684005862281746" class="permalink">
@@ -82,7 +94,10 @@
       <summary>
         <a class="profile" href="https://social.medusmedia.com/@medus">
           <img class="profile-img" src="https://cdn.masto.host/podcastindexsocial/cache/accounts/avatars/000/004/196/original/9a92be6882e8a611.png" />
-          <strong>Medus</strong>
+          <div class="user">
+            <strong>Medus</strong>
+            <span class="handle">@medus@social.medusmedia.com</span>
+          </div>
         </a>
         <span aria-hidden="true">·</span>
         <a href="https://social.medusmedia.com/@medus/109684086654638288" class="permalink">
@@ -96,7 +111,10 @@
         <summary>
           <a class="profile" href="https://podcastindex.social/@Drebscott">
             <img class="profile-img" src="https://cdn.masto.host/podcastindexsocial/accounts/avatars/000/003/911/original/946716e5a873702d.jpg" />
-            <strong>:pci: Dreb Scott :pci:</strong>
+            <div class="user">
+              <strong>:pci: Dreb Scott :pci:</strong>
+              <span class="handle">@Drebscott@podcastindex.social</span>
+            </div>
           </a>
           <span aria-hidden="true">·</span>
           <a href="#" class="permalink">
@@ -110,7 +128,10 @@
           <summary>
             <a class="profile" href="https://podcastindex.social/@adam">
               <img class="profile-img" src="https://cdn.masto.host/podcastindexsocial/accounts/avatars/000/000/001/original/432eaf9ef000c39a.jpeg" />
-              <strong>Adam Curry :pci:</strong>
+              <div class="user">
+                <strong>Adam Curry :pci:</strong>
+                <span class="handle">@adam@podcastindex.social</span>
+              </div>
             </a>
             <span aria-hidden="true">·</span>
             <a href="#" class="permalink">
@@ -130,7 +151,10 @@
       <summary>
         <a class="profile" href="https://podcastindex.social/@adam">
           <img class="profile-img" src="https://cdn.masto.host/podcastindexsocial/accounts/avatars/000/000/001/original/432eaf9ef000c39a.jpeg" />
-          <strong>Adam Curry :pci:</strong>
+          <div class="user">
+            <strong>Adam Curry :pci:</strong>
+            <span class="handle">@adam@podcastindex.social</span>
+          </div>
         </a>
         <span aria-hidden="true">·</span>
         <a href="#" class="permalink">

diff --git a/style.css b/style.css
@@ -22,6 +22,9 @@ summary {
   place-items: center;
   font-size: .75rem;
   line-height: 1rem;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 details > summary::-webkit-details-marker {
@@ -70,6 +73,15 @@ details[open]:not(.content-warning) > summary::before {
   object-fit: cover;
 }
 
+.user {
+  display: flex;
+  flex-direction: column;
+}
+
+.handle {
+  display: none;
+}
+
 .permalink {
   text-align: right;
   text-decoration: none;
@@ -81,6 +93,19 @@ details[open]:not(.content-warning) > summary::before {
   font-size: 0.875rem;
 }
 
+.ellipsis::after {
+  content: "…";
+}
+
+.invisible {
+  position: absolute;
+  font-size: 0;
+  line-height: 0;
+  display: inline-block;
+  width: 0;
+  height: 0;
+}
+
 details.content-warning > summary {
   font-size: 0.875rem;
 }
@@ -97,12 +122,27 @@ details.content-warning > summary::after {
   padding: .25rem .5rem;
   font-size: 0.75rem;
   cursor: pointer;
+  white-space: nowrap;
 }
 
 details.content-warning[open] > summary::after {
   content: "Show Less";
 }
 
+@media screen and (min-width: 25rem) {
+  .handle {
+    display: block;
+  }
+
+  .profile {
+    flex: 1;
+  }
+
+  .profile + span {
+    display: none;
+  }
+}
+
 * {
   box-sizing: border-box;
 }