Improve mobile layout, add dl lists, add npub to profile

assets/css/layout.css

@@ -25,7 +25,7 @@ img.avatar {
 }
 
 h1 {
-  margin: 2em 0 0 0;
+  margin: 4rem 0 0 0;
 }
 
 h2, h3, h4 {
@@ -34,7 +34,7 @@ h2, h3, h4 {
   line-height: 1.6em;
 }
 
-p, pre, ul, ol, blockquote {
+p, pre, ul, ol, dl, blockquote {
   line-height: 1.6em;
   margin-bottom: 1.6em;
 }
@@ -53,10 +53,20 @@ pre code {
   padding: 0.6rem 1rem;
 }
 
+dl dt {
+  font-weight: bold;
+  margin: 0 0 0.5rem 0;
+}
+
+dl dd {
+  margin: 0 0 1.6rem 0;
+}
+
 main {
   display: block;
   max-width: 44rem;
   margin: 12rem auto 24rem auto;
+  overflow-wrap: break-word;
 }
 
 main header {
@@ -96,6 +106,10 @@ main article footer {
   margin-top: 5rem;
 }
 
+.profile-page .about {
+  margin-bottom: 3rem;
+}
+
 /* Dropdown menu */
 
 .dropdown {
@@ -144,11 +158,31 @@ main article footer {
     font-size: 14px;
   }
 
+  h1 {
+    font-size: 1.8rem;
+  }
+
+  h2 {
+    font-size: 1.5rem;
+  }
+
+  h3 {
+    font-size: 1.3rem;
+  }
+
+  h4 {
+    font-size: 1rem;
+  }
+
   main {
     max-width: 100%;
     margin: 4rem 1rem 8rem 1rem;
   }
 
+  .profile-page h1 {
+    margin-top: 2rem;
+  }
+
   .dropdown-content {
     bottom: 100%;
   }

assets/css/themes/default-light.css

@@ -25,6 +25,10 @@ pre code {
   color: #ccc;
 }
 
+dl dt {
+  color: #888;
+}
+
 main header .meta .date {
   color: #888;
 }
@@ -33,6 +37,10 @@ main header .meta .name a {
   color: #3b3a38;
 }
 
+.profile-page .pubkey {
+  color: #888;
+}
+
 /* Dropdown menu */
 
 .dropdown-button {

html.ts

@@ -88,9 +88,18 @@ export function profilePageHtml(profile: Profile, articles: Article[]): string {
           <p class="about">
             ${profile.about}
           </p>
+          </p>
         </div>
       </header>
-      ${articleListHtml(articles)}
+      <section>
+        <dl>
+          <dt>Public key</dt>
+          <dd>${profile.npub}</dd>
+        </dl>
+      </section>
+      <section>
+        ${articleListHtml(articles)}
+      </section>
     </main>
   `;