Fix: (posts, shortcuts) Adjust width, padding for narrower screens (#402)

* Tidy: Consolidate .content-container rules

* Comment: Add FIXME

* Fix: (_base.scss) PRE wrapping and breaking

This solves a very non-obvious problem in that a single PRE element
that happens to have a long line or long words, even when the OVERFLOW
property is set to constrain the element, can cause the whole page
layout to break, even when using FLEX, because the browser seems to
use the ideal width of the element (as if there were enough screen
width to display it without any overflow or wrapping) to calculate
minimum width of the parent elements rather than the constrained width
of the element.

* Fix: .content-container and #shortcuts-container flexing

After solving the issue with the PRE wrapping and breaking, which was
obscuring the problem, these remaining fixes are straightforward.

* Simplify shortcuts layout using flex and breakpoints

* Allow code cells overflowing into parent

Remove media selector that flows shortcuts to bottom, since we hide
shortcuts at the same time.

* Undo changes to pst

* Fix blog responsive layout

---------

Co-authored-by: Stefan van der Walt <stefanv@berkeley.edu>

Author: alphapapa

assets/theme-css/content.css

@@ -1,21 +1,16 @@
 .content-padding {
   display: flex;
+  flex-wrap: nowrap;
   justify-content: center;
   margin: 1em;
 }
 
 .content-container {
-  max-width: 850px;
+  flex-basis: 70em;
+  flex-shrink: 1;
+  flex-direction: column;
   margin: 0 30px;
-  overflow: hidden;
-}
 
-.content-container .divider {
-  height: 3px;
-  border-radius: 50px;
-  background: var(--pst-color-text-base);
-  width: 60px;
-  &.is-centered {
-    margin: 0 auto;
-  }
+  /* Handle code cells overflowing */
+  overflow: auto;
 }

assets/theme-css/posts.css

@@ -1,5 +1,13 @@
-div.post-list {
-  clear: left;
+.post-list {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 2rem;
+}
+
+.post-list article {
+  flex-grow: 2;
+  flex-basis: 48%;
+  padding-top: 1.5rem;
 }
 
 .post-title a {
@@ -11,10 +19,6 @@ div.post-list {
   color: var(--pst-color-text-muted);
 }
 
-.post-list article {
-  padding-top: 1.5rem;
-}
-
 .post-list .post-title {
   font-size: 1.25rem;
   font-weight: bold;
@@ -79,10 +83,11 @@ div.MathJax_Display {
 
 .post-featuredImage img {
   /* FIXME: Use color variable. */
-  border: 0.15em #bbb solid;
-  border-radius: 25px;
+  border: 1px #bbb solid;
   max-width: 20rem;
   margin: 0.5em;
+  float: left;
+  margin-right: 1.25rem;
 }
 
 .read-more {
@@ -103,30 +108,3 @@ div.MathJax_Display {
   margin-top: 60px;
   padding-bottom: 10px;
 }
-
-.content-container .post-list {
-  display: flex;
-  flex-wrap: wrap;
-  column-gap: 2rem;
-}
-
-/* Default: single column layout for mobile */
-.content-container {
-  max-width: 70em;
-  margin: 0 30px;
-  flex-direction: column;
-}
-
-/* Full screen two-column layout for desktop etc. */
-@media only screen and (min-width: 75em) {
-  .content-container {
-    min-width: 70rem;
-    flex-direction: row;
-  }
-
-  article {
-    flex-grow: 1;
-    flex-shrink: 0;
-    flex-basis: calc(50% - 1rem);
-  }
-}

assets/theme-css/shortcuts.css

@@ -2,8 +2,11 @@
   position: sticky;
   align-self: flex-start;
   top: 5rem;
-  width: 100%;
-  max-width: 150px;
+  flex-basis: 15em;
+  /* We disable shrinking for this container, otherwise the single-line
+   items start wrapping to two lines, especially when active and
+   bolded, which causes distracting layout changes. */
+  flex-shrink: 0;
 }
 
 #shortcuts {
@@ -46,7 +49,8 @@
   cursor: pointer;
 }
 
-@media only screen and (max-width: 1090px) {
+/* Same breakpoint as burger menu */
+@media screen and (max-width: 1023px) {
   #shortcuts-container {
     display: none;
   }

layouts/_default/section.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-<section class="section content-padding flex-row">
+<section class="section content-padding">
   <div class="content-container">
     {{ partial "breadcrumbs.html" . }}
     <h1>{{ .Title }}</h1>

layouts/_default/single.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-<section class="article content-padding flex-row">
+<section class="article content-padding">
   <div class="content-container">
     {{ partial "breadcrumbs.html" . }}
     <h1>{{ .Title }}</h1>

layouts/partials/posts/list.html

@@ -1,4 +1,4 @@
-<section class="section content-padding flex-row">
+<section class="section content-padding">
   <div class="tag-cloud is-hidden-mobile">
     <h2 class="tag-cloud-title">{{ i18n "tags" }}</h2>
     {{ if not (eq (len $.Site.Taxonomies.tags) 0) }}

layouts/partials/posts/post.html

@@ -1,5 +1,5 @@
 {{- $featuredImage := .Resources.GetMatch "featuredImage" -}}
-<section class="post content-padding flex-row">
+<section class="post content-padding">
   <div class="content-container">
     {{ partial "breadcrumbs.html" . }}
     <h1>{{ .Title }}</h1>
@@ -9,7 +9,9 @@ <h5 class="subtitle">{{ .Params.Subtitle }}</h5>
     <div class="post-meta">{{ partial "posts/meta.html" . }}</div>
     <div class="post-content">
       {{ with $featuredImage }}
-      <img src="{{ .RelPermalink }}" {{ if .Params.description }}alt="{{ .Params.description }}"{{ end }}/>
+      <div class="post-featuredImage">
+        <img src="{{ .RelPermalink }}" {{ if .Params.description }}alt="{{ .Params.description }}"{{ end }}/>
+      </div>
       {{ end }}
       {{ .Content }}
     </div>

layouts/partials/section/section.html

@@ -1,4 +1,4 @@
-<section class="content-padding flex-row">
+<section class="content-padding">
 <div class="content-container">
   {{ partial "breadcrumbs.html" . }}
   <h1>{{ .Title }}</h1>