Rework CSS for lists (<ol> and <ul>)

Previously, there were a number of issues coming up repeatedly related
to unexpected behavior of nested lists and similar cases. This is
because we're trying to use lists for their semantic value occasionally
(such as for lists of topics inside a particular group), but the default
styles (including the ones from Spectre.css) have set them up
specifically for text-based lists.

This commit addresses this by changing the base ol/ul styles back to
something very neutral (no margins or marker for list items), and then
adding a specific "placeholder class" that can be extended in places
that will have text-based lists, like inside comment or topic text.

tildes/scss/_base.scss

@@ -156,17 +156,15 @@ menu {
   list-style-type: none;
 }
 
-ol {
-  list-style-position: outside;
-  margin: 0 0 1rem 2rem;
-
-  li {
-    margin-top: 0.2rem;
-    max-width: $paragraph-max-width - 2rem;
-  }
-
-  &:last-child {
-    margin-bottom: 0.2rem;
+// We'll use lists for their semantic value sometimes, so we don't want them to
+// have the normal list numbering/etc. by default. We'll specifically add that
+// back in for text-based lists in places where it's needed.
+ol, ul {
+  list-style: none;
+  margin: 0;
+
+  ol, ul {
+    list-style: none;
   }
 }
 
@@ -210,13 +208,3 @@ td, th {
 th {
   border-bottom-width: $border-width-lg;
 }
-
-ul {
-  list-style-position: outside;
-  margin: 0.4rem 0 0.4rem 1rem;
-
-  li {
-    margin-top: 0.2rem;
-    max-width: $paragraph-max-width - 1rem;
-  }
-}

tildes/scss/_placeholders.scss

@@ -0,0 +1,27 @@
+// Copyright (c) 2018 Tildes contributors <code@tildes.net>
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+// sets up (nested) lists specifically for text content
+%lists-text {
+  ol, ul {
+    list-style-position: inside;
+    margin: 0 0 0.4rem 1rem;
+
+    li {
+      margin-top: 0.2rem;
+      max-width: $paragraph-max-width - 1rem;
+    }
+
+    &:last-child {
+      margin-bottom: 0.2rem;
+    }
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+}

tildes/scss/modules/_comment.scss

@@ -126,6 +126,8 @@
 }
 
 .comment-text {
+  @extend %lists-text;
+
   padding: 0.2rem;
   padding-left: 0.4rem;
   overflow: auto;

tildes/scss/modules/_empty.scss

@@ -5,11 +5,3 @@
   background: inherit;
   color: inherit;
 }
-
-.empty-list {
-  list-style-type: none;
-
-  li {
-    max-width: unset;
-  }
-}

tildes/scss/modules/_nav.scss

@@ -3,6 +3,7 @@
 
 .nav {
   li {
+    margin-bottom: 0;
     font-size: 0.6rem;
     font-weight: bold;
   }

tildes/scss/modules/_post-buttons.scss

@@ -14,6 +14,10 @@
     justify-content: left;
   }
 
+  li {
+    margin-top: 0;
+  }
+
   // Combined with flex-wrap: wrap, this should put any form on its own line
   form {
     min-width: 100%;

tildes/scss/modules/_post.scss

@@ -2,26 +2,12 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 .post-listing {
-  list-style-type: none;
-  margin-left: 0;
-
   h2 {
     font-size: 0.6rem;
   }
 
-  // override the normal nested list behaviors
-  .comment-text ol, .topic-text-excerpt ol {
-    list-style-type: decimal;
-    margin: 0 0 1rem 2rem;
-  }
-
-  .comment-text ul, .topic-text-excerpt ul {
-    margin: 0.4rem 0 0.4rem 1rem;
-  }
-
   & > li {
     margin-bottom: 1rem;
-    max-width: none;
   }
 
   .is-topic-mine, .is-topic-official {

tildes/scss/modules/_settings.scss

@@ -2,8 +2,6 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 .settings-list {
-  list-style-type: none;
-
   li {
     margin-bottom: 1rem;
   }

tildes/scss/modules/_topic.scss

@@ -1,15 +1,8 @@
 // Copyright (c) 2018 Tildes contributors <code@tildes.net>
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-.topic-listing {
-  list-style-type: none;
-  margin: 0;
-
-  & > li {
-    margin: 0;
-    margin-bottom: 0.2rem;
-    max-width: none;
-  }
+.topic-listing > li {
+  margin: 0 0 0.2rem 0;
 }
 
 .topic-listing-filter {
@@ -159,6 +152,8 @@
 }
 
 .topic-text-excerpt {
+  @extend %lists-text;
+
   display: none;
   @media (min-width: $size-md) {
     display: block;
@@ -172,10 +167,6 @@
     margin: 0 0 0.4rem 0;
   }
 
-  ol {
-    list-style-type: decimal;
-  }
-
   summary {
     line-height: 0.8rem;
   }
@@ -247,6 +238,8 @@
 }
 
 .topic-full-text {
+  @extend %lists-text;
+
   overflow: auto;
 }
 

tildes/scss/styles.scss

@@ -2,6 +2,7 @@
 @import 'spectre-0.5.1/_variables.scss';
 
 @import 'mixins';
+@import 'placeholders';
 
 @import 'base';
 @import 'layout';

tildes/tildes/templates/error_group_not_found.jinja2

@@ -15,7 +15,7 @@ Group not found
   <h2 class="empty-title">No group named '{{ supplied_name }}'</h2>
   {% if group_suggestions %}
     <p class="empty-subtitle">Did you mean one of these groups instead?</p>
-    <ul class="empty-list">
+    <ul>
     {% for group in group_suggestions %}
       <li>{{ group_linked(group) }}</li>
     {% endfor %}