css: Work around a WebKit bug by using flexboxes instead of grids

Webkit doesn't support nesting grids directly inside flexes, so the poster didn't render correctly in Safari and other WebKit-based browsers. Grids were mostly used to get consistent spacing; this commit uses auto margins in a vertical flexbox instead (https://stackoverflow.com/questions/42975705/).
FRI-Energy-Analytics · Dec 17, 2020 · bc50c95 · bc50c95
1 parent d17a2ab
commit bc50c95
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 36 deletions.
diff --git a/docs/koika.jinja2 b/docs/koika.jinja2
@@ -205,7 +205,7 @@ rule dyn_abort =
   <article>
     <header><h3>One-rule-at-a-time abstraction</h3></header>
 
-    <pre class="justify-center" data-lang="coq">
+    <pre class="center-self" data-lang="coq">
 Theorem OneRuleAtATime init schedule:
   exists rules ⊂ schedule,
     interp_s init schedule =
@@ -248,7 +248,7 @@ Theorem OneRuleAtATime init schedule:
   <article>
     <header><h3>Compiler correctness</h3></header>
 
-    <pre class="justify-center" data-lang="coq">
+    <pre class="center-self" data-lang="coq">
 Theorem CompilerCorrectness init schedule:
   interp_s   init schedule =
   interp_rtl init (compile schedule).

diff --git a/docs/koika/poster.html b/docs/koika/poster.html
@@ -203,7 +203,7 @@ <h2 property="alternativeHeadline">A Core Language for Rule-Based Hardware Desig
   <article>
     <header><h3>One-rule-at-a-time abstraction</h3></header>
 
-    <pre class="justify-center" data-lang="coq">
+    <pre class="center-self" data-lang="coq">
 Theorem OneRuleAtATime init schedule:
   exists rules ⊂ schedule,
     interp_s init schedule =
@@ -246,7 +246,7 @@ <h2 property="alternativeHeadline">A Core Language for Rule-Based Hardware Desig
   <article>
     <header><h3>Compiler correctness</h3></header>
 
-    <pre class="justify-center" data-lang="coq">
+    <pre class="center-self" data-lang="coq">
 Theorem CompilerCorrectness init schedule:
   interp_s   init schedule =
   interp_rtl init (compile schedule).

diff --git a/docs/poster.css b/docs/poster.css
@@ -135,10 +135,12 @@ main > * {
 }
 main > figure {
   align-content: center;
-  display: grid;
+  display: flex;
+  justify-content: center;
 }
 main img,
 main object {
+  align-self: center;
   justify-self: center;
   max-width: 100%;
   vertical-align: middle;
@@ -159,25 +161,13 @@ main figure figcaption {
   margin-top: 0.5rem;
 }
 article {
-  align-content: stretch;
-  align-items: center;
   background: #eeeeec;
-  display: grid;
-  grid-gap: 0.5rem;
-  grid-template-rows: min-content;
+  display: flex;
+  flex-direction: column;
   hyphens: auto;
   line-height: 1.35;
   padding: 0 0.5rem 0.5rem 0.5rem;
 }
-article > header {
-  background: #2e3436;
-  color: #fcaf3e;
-  margin: 0 -0.5rem 0 -0.5rem;
-  padding: 0.25rem 0.5rem;
-}
-article > header > h3 {
-  font-weight: 500;
-}
 article p,
 article ul,
 article ol,
@@ -187,6 +177,38 @@ article figure,
 article hr {
   margin: 0;
 }
+article > *,
+article > p,
+article > ul,
+article > ol,
+article > pre,
+article > div,
+article > figure,
+article > hr {
+  margin: 0.5rem 0 auto 0;
+}
+article > mjx-container,
+article > .MJXc-display,
+article > .MJXp-display,
+article > .MathJax_Display,
+article > .MathJax_Preview,
+article > .MathJax_SVG_Display,
+article > .MathJax_SVG_Preview,
+article > .MathJax_PHTML_Display,
+article > .MathJax_PHTML_Preview,
+article > .MathJax_MathML {
+  /* override MathJaX */
+  margin: 0.5rem 0 auto 0 !important;
+}
+article > header {
+  background: #2e3436;
+  color: #fcaf3e;
+  margin: 0 -0.5rem auto -0.5rem;
+  padding: 0.25rem 0.5rem;
+}
+article > header > h3 {
+  font-weight: 500;
+}
 article pre {
   overflow-x: auto;
   overflow-y: hidden;
@@ -253,6 +275,10 @@ article ul.inline li::before {
 .center {
   text-align: center;
 }
+.center-self {
+  justify-self: center;
+  align-self: center;
+}
 .justify-center {
   justify-self: center;
 }

diff --git a/docs/tutorial.jinja2 b/docs/tutorial.jinja2
@@ -225,7 +225,7 @@
 
     <p>Use the following code to include an image:</p>
 
-    <pre class="justify-center">&lt;<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img">img</a> src="<var>source url</var>"
+    <pre class="center-self">&lt;<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img">img</a> src="<var>source url</var>"
      alt="<var>image description</var>"&gt;</pre>
 
     <p>Prefer scalable images (SVG) for technical drawings and figures.</p>

diff --git a/docs/tutorial/poster.html b/docs/tutorial/poster.html
@@ -207,7 +207,7 @@ <h2 property="alternativeHeadline">A tutorial on using this template to make you
 
     <p>Use the following code to include an image:</p>
 
-    <pre class="justify-center">&lt;<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img">img</a> src="<var>source url</var>"
+    <pre class="center-self">&lt;<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img">img</a> src="<var>source url</var>"
      alt="<var>image description</var>"&gt;</pre>
 
     <p>Prefer scalable images (SVG) for technical drawings and figures.</p>

diff --git a/poster.less b/poster.less
@@ -228,10 +228,12 @@ main {
 
     > figure {
         align-content: center;
-        display: grid;
+        display: flex;
+        justify-content: center;
     }
 
     img, object {
+        align-self: center;
         justify-self: center;
         max-width: 100%;
         vertical-align: middle;
@@ -258,32 +260,37 @@ main {
 }
 
 article {
-    align-content: stretch;
-    align-items: center;
     background: @color-bg-light;
-    display: grid;
-    grid-gap: @mid-space;
-    grid-template-rows: min-content;
+    display: flex;
+    flex-direction: column;
     hyphens: auto;
     line-height: 1.35;
     padding: 0 @mid-space @mid-space @mid-space;
     // text-align: justify;
 
+    p, ul, ol, pre, div, figure, hr {
+        margin: 0;
+    }
+
+    > *, > p, > ul, > ol, > pre, > div, > figure, > hr {
+        margin: @mid-space 0 auto 0;
+    }
+
+    > mjx-container { /* override MathJaX */
+        margin: @mid-space 0 auto 0 !important;
+    }
+
     > header {
         background: @color-bg-dark;
         color: @color-title;
-        margin: 0 -@mid-space 0 -@mid-space;
+        margin: 0 -@mid-space auto -@mid-space;
         padding: @thin-space @mid-space;
 
         > h3 {
             font-weight: 500;
         }
     }
 
-    p, ul, ol, pre, div, figure, hr {
-        margin: 0;
-    }
-
     pre {
         overflow-x: auto;
         overflow-y: hidden;
@@ -366,6 +373,11 @@ article {
     text-align: center;
 }
 
+.center-self {
+    justify-self: center;
+    align-self: center;
+}
+
 .justify-center {
     justify-self: center;
 }
@@ -410,7 +422,12 @@ br.qquad {
 // Mathjax config //
 ////////////////////
 
-mjx-container,
+mjx-container {
+    margin: 0 !important;
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
 .MJXc-display,
 .MJXp-display,
 .MathJax_Display,
@@ -420,9 +437,7 @@ mjx-container,
 .MathJax_PHTML_Display,
 .MathJax_PHTML_Preview,
 .MathJax_MathML {
-    margin: 0 !important;
-    overflow-x: auto;
-    overflow-y: hidden;
+    &:extend(mjx-container all);
 }
 
 .MathJax_Preview:empty {