diff --git a/tildes/scss/_spectre_variables.scss b/tildes/scss/_spectre_variables.scss index d0ba4ec..dfe129b 100644 --- a/tildes/scss/_spectre_variables.scss +++ b/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; diff --git a/tildes/scss/_variables.scss b/tildes/scss/_variables.scss index 3dbd13e..20e984e 100644 --- a/tildes/scss/_variables.scss +++ b/tildes/scss/_variables.scss @@ -7,7 +7,10 @@ $show-sidebar-width: 840px; $min-touch-size: 26px; // Maximum width of the
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; diff --git a/tildes/scss/modules/_comment.scss b/tildes/scss/modules/_comment.scss index 0ebd03f..4ad0359 100644 --- a/tildes/scss/modules/_comment.scss +++ b/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); +}