Profile tweaks

frontend/static/style.css

@@ -946,6 +946,21 @@ button:disabled {
   box-shadow: var(--shadow);
 }
 
+.profile-summary summary {
+  color: var(--subtext);
+  cursor: pointer;
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+
+.profile-summary[open] summary {
+  margin-bottom: 8px;
+}
+
+.profile-summary-content {
+  font-size: 0.95rem;
+}
+
 .about-content {
   display: grid;
   gap: 14px;
@@ -1012,6 +1027,7 @@ button:disabled {
 .profile-summary p {
   margin: 12px 0 0;
   color: var(--subtext);
+  font-size: 0.95rem;
   line-height: 1.65;
 }
 

frontend/templates/feed.html

@@ -73,19 +73,22 @@
 
     <main class="container">
       {% if profile %}
-      <section class="link-item profile-summary">
-        <div class="link-header">
-          <div class="avatar">
-            {% if profile.avatar_url %}
-            <img src="{{ profile.avatar_url }}" alt="{{ profile.username }} avatar" />
-            {% else %}
-            {{ profile.username[:1].upper() }}
-            {% endif %}
+      <details class="link-item profile-summary">
+        <summary>Profile</summary>
+        <div class="profile-summary-content">
+          <div class="link-header">
+            <div class="avatar">
+              {% if profile.avatar_url %}
+              <img src="{{ profile.avatar_url }}" alt="{{ profile.username }} avatar" />
+              {% else %}
+              {{ profile.username[:1].upper() }}
+              {% endif %}
+            </div>
+            <div class="user-name">{{ profile.username }}</div>
           </div>
-          <div class="user-name">{{ profile.username }}</div>
+          <p>{{ profile.bio or 'No profile information provided.' }}</p>
         </div>
-        <p>{{ profile.bio or 'No profile information provided.' }}</p>
-      </section>
+      </details>
       {% endif %}
       <section id="feed" class="feed" aria-live="polite"></section>
       <nav id="pagination" class="pagination" aria-label="Feed pages"></nav>