Move user bio to a collapsable <details> in main

Probably still needs some tweaking, but this seems a lot better than
having it in the cramped space in the sidebar.

tildes/scss/modules/_user.scss

@@ -0,0 +1,33 @@
+// Copyright (c) 2019 Tildes contributors <code@tildes.net>
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+.user-bio {
+  @extend %links-text;
+  @extend %lists-text;
+
+  border: 1px solid;
+  padding: 0.4rem;
+  margin-bottom: 1rem;
+  font-size: 0.6rem;
+
+  summary::after {
+    font-size: 0.6rem;
+    font-style: italic;
+    content: "Hide bio";
+    display: none;
+  }
+
+  &[open] {
+    font-size: 0.8rem;
+
+    summary {
+      &::after {
+        display: inline;
+      }
+
+      span {
+        display: none;
+      }
+    }
+  }
+}

tildes/scss/styles.scss

@@ -33,6 +33,7 @@
 @import 'modules/time';
 @import 'modules/toast';
 @import 'modules/topic';
+@import 'modules/user';
 
 // Note: if you add a new theme, you may also want to add a new theme-color
 // meta tag inside the base.jinja2 template, so mobile browsers can match

tildes/scss/themes/_theme_base.scss

@@ -470,6 +470,15 @@
     }
   }
 
+  .user-bio {
+    border-color: map-get($theme, "border");
+    background-color: map-get($theme, "background-secondary");
+
+    &[open] {
+      color: map-get($theme, "foreground-highlight");
+    }
+  }
+
   .is-comment-deleted, .is-comment-removed {
     color: map-get($theme, "foreground-secondary");
   }

tildes/tildes/templates/user.jinja2

@@ -48,6 +48,13 @@
     </div>
   {% endif %}
 
+  {% if user.bio_rendered_html %}
+    <details class="user-bio">
+      <summary><span>View {{ user.username }}'s bio</span></summary>
+      {{ user.bio_rendered_html|safe }}
+    </details>
+  {% endif %}
+
   {% if posts %}
     {% if request.has_permission("view_history", user) and posts.has_prev_page %}
       <div class="pagination">
@@ -120,13 +127,6 @@
 <dl>
   <dt>Registered</dt>
   <dd>{{ user.created_time.strftime('%B %-d, %Y') }}</dd>
-
-  {% if user.bio_rendered_html %}
-    <div class="user-bio">
-      <dt>Bio</dt>
-      <dd>{{ user.bio_rendered_html|safe }}</dd>
-    </div>
-  {% endif %}
 </dl>
 
 {% if request.has_permission('message', user) %}