Make single-reply-flattening responsive

Previously, the flattening was starting at a very low threshold (above
depth 4) on all screen sizes. This changes it to be responsive, where
larger screens (generally) won't flatten until higher depth levels. On
desktop-size resolutions, it will probably be extremely rare to ever see
any flattened threads, since it will only happen at depth 20+.

These thresholds were picked pretty arbitrarily, but seemed decent from
some testing. I also kept the indentation size smaller until a larger
screen size, since the sidebar's appearance actually reduces the comment
tree space by a lot, and the indents are excessive until the screen is
quite large.

tildes/scss/_spectre_variables.scss

@@ -12,5 +12,5 @@ $size-xs: 480px;
 $size-sm: 600px;
 $size-md: $show-sidebar-width;
 $size-lg: 960px;
-$size-xl: 1080px;
-$size-2x: 1200px;
+$size-xl: 1200px;
+$size-2x: 1500px;

tildes/scss/_variables.scss

@@ -7,7 +7,10 @@ $show-sidebar-width: 840px;
 $min-touch-size: 26px;
 
 // Maximum width of the <main> element
-$main-max-width: 70rem;
+$main-max-width: 1400px;
 
 // Maximum width to allow on "paragraph-like" text
 $paragraph-max-width: 40rem;
+
+// The approximate size where the site's width "maxes out" (larger just adds margins)
+$size-max: $main-max-width + $sidebar-width;

tildes/scss/modules/_comment.scss

@@ -96,7 +96,7 @@
 .comment-tree-replies {
   margin-left: 0.4rem;
 
-  @media (min-width: $size-md) {
+  @media (min-width: $size-xl) {
     margin-left: 1rem;
   }
 }
@@ -276,4 +276,29 @@
   }
 }
 
-@include flatten-single-replies-above-depth(4);
+@media (max-width: $size-xs) {
+  @include flatten-single-replies-above-depth(4);
+}
+@media (min-width: $size-xs) and (max-width: $size-sm) {
+  @include flatten-single-replies-above-depth(7);
+}
+@media (min-width: $size-sm) and (max-width: $size-md) {
+  @include flatten-single-replies-above-depth(10);
+}
+@media (min-width: $size-md) and (max-width: $size-lg) {
+  // drop back down because sidebar shows up, which actually gives less space
+  @include flatten-single-replies-above-depth(7);
+}
+@media (min-width: $size-lg) and (max-width: $size-xl) {
+  @include flatten-single-replies-above-depth(9);
+}
+@media (min-width: $size-xl) and (max-width: $size-2x) {
+  // don't increase much yet since left indent increases, so space is reduced again
+  @include flatten-single-replies-above-depth(12);
+}
+@media (min-width: $size-2x) and (max-width: $size-max) {
+  @include flatten-single-replies-above-depth(20);
+}
+@media (min-width: $size-max) {
+  @include flatten-single-replies-above-depth(30);
+}