Improve open-with dropdown

assets/css/layout.css

@@ -1,7 +1,11 @@
 @import url("/assets/css/fonts/merriweather.css");
 
+html {
+  font-size: 16px;
+}
+
 body {
-  font-size: 18px;
+  font-size: 1.125rem;
   font-family: "Merriweather", serif;
 }
 
@@ -10,14 +14,14 @@ img {
 }
 
 img.avatar {
-  height: 48px;
-  width: 48px;
+  height: 3rem;
+  width: 3rem;
   border-radius: 50%;
 }
 
 .profile-page img.avatar {
-  height: 128px;
-  width: 128px;
+  height: 8rem;
+  width: 8rem;
 }
 
 h1 {
@@ -51,7 +55,7 @@ pre code {
 
 main {
   display: block;
-  max-width: 728px;
+  max-width: 44rem;
   margin: 12rem auto 24rem auto;
 }
 
@@ -111,10 +115,11 @@ main article footer {
 .dropdown-content {
   display: none;
   position: absolute;
-  min-width: 160px;
+  min-width: 12rem;
   border-radius: 5px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 1;
+  font-size: 1rem;
 }
 
 .dropdown-content a {
@@ -123,6 +128,36 @@ main article footer {
   display: block;
 }
 
+.dropdown-content h4.title {
+  font-size: 0.875rem;
+  margin: 0;
+  padding: 0.6rem 1rem;
+  border-top: 1px solid;
+}
+
 .dropdown:hover .dropdown-content {
   display: block;
 }
+
+@media (max-width: 768px) {
+  html {
+    font-size: 14px;
+  }
+
+  main {
+    max-width: 100%;
+    margin: 4rem 1rem 8rem 1rem;
+  }
+
+  .dropdown-content {
+    bottom: 100%;
+  }
+
+  .dropdown-content a {
+    padding: 0.8rem 1.2rem;
+  }
+
+  .dropdown-content h4.title {
+    padding: 0.8rem 1.2rem;
+  }
+}

assets/css/themes/default-light.css

@@ -53,6 +53,11 @@ main header .meta .name a {
   background-color: #f1f1f1;
 }
 
+.dropdown-content h4.title {
+  color: #888;
+  border-color: #f1f1f1;
+}
+
 .dropdown:hover .dropdown-button {
   background-color: #fff;
   border-color: #fff;

html.ts

@@ -98,26 +98,27 @@ export function profilePageHtml(profile: Profile, articles: Article[]): string {
 }
 
 function openWithNostrAppHtml(bech32Id): string {
-  let linksHtml = "";
-  const links = [
-    { title: "Nostr Link", href: `nostr:${bech32Id}` },
+  let appLinksHtml = "";
+  const appLinks = [
     { title: "Habla", href: `https://habla.news/a/${bech32Id}` },
     {
       title: "noStrudel",
       href: `https://nostrudel.ninja/#/articles/${bech32Id}`,
     },
-    { title: "Coracle", href: `https://coracle.social/${bech32Id}` }
+    { title: "Coracle", href: `https://coracle.social/${bech32Id}` },
   ];
 
-  for (const link of links) {
-    linksHtml += `<a href="${link.href}" target="_blank">${link.title}</a>`;
+  for (const link of appLinks) {
+    appLinksHtml += `<a href="${link.href}" target="_blank">${link.title}</a>`;
   }
 
   return `
     <div class="open-with dropdown">
       <button class="dropdown-button">Open with Nostr app</button>
       <div class="dropdown-content">
-        ${linksHtml}
+        <a href="nostr:${bech32Id}" target="_blank">🔗&nbsp; Nostr Link</a>
+        <h4 class="title">Apps</h4>
+        ${appLinksHtml}
       </div>
     </div>
   `;