From 4e44ba0b4588ecc4f09cb9e2d96bb0810c9deb4f Mon Sep 17 00:00:00 2001
From: Ben Visness <ben@bvisness.me>
Date: Wed, 26 Oct 2022 13:26:01 -0500
Subject: [PATCH] Make articles responsive

---
 public/parsing.wasm                      | Bin 15960733 -> 15960733 bytes
 public/style.css                         |  19 ++++++++-----------
 src/rawdata/scss/_content.scss           |   7 +++----
 src/templates/src/education_article.html |   6 ++++--
 4 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/public/parsing.wasm b/public/parsing.wasm
index 40906827b936ed5052a39489faf950529384418d..556c6716dca74ab055b505bc1af0c479b1f75148 100755
GIT binary patch
delta 966
zcmWO2_g~Zn9KhjM)3m+!o>s`+_YN7Q6%{Be4U*9?xH}L5ArMM?S6aQZoekTxceFFh
z_TIMl9=4bD5A^xr`3IiSWvj-GhNTl5M~3FM^%muFE!qCT>2*y5!*g0@7B_a)lq7AX
zl`S*+vsJ0~>dZiMWpR7!P*uZ7z9%)@I*`oEX6kFoT8sPp7gm=g%?*Qfvy%nWy87yS
z^0O8rYsuQOj;t%|$@(%*Hjwc$K{k|)WMkPxHkHj}bJ;?+l&xfI*+#aN?PPn|L3Wg#
zWM|n$c9q>^ciBVsl)Yqc*+=%3{bZu-F9*nhQY4e4SW=RfL^6_<5}7QeQYPh6AqUC9
zGDW7!A#$i3CY5ry93e+al~l_#nJzU_D|J#Y4RVyskePC{G)j{kBeSGgTBKFl<XAaQ
zj+YZ;wwx&K(jhs?OF=rNOXf(o%#|MLl|Gp#{W2gY$)F6$d>NJzIayAT1+q|1l{i05
zPM0%ekt~)o<t#Z{lyhW>oGa(a`Er3=C>P1aa)~UJOXV`TT&|F1a;01)SIaeWtz0M9
z%c$HSH_A<Nv)m%L%58GH+#z?$U2?bFBlpUf+$Z<T1M;9eBoE6Y@~AAA$7F>(E>A3H
z<?5Q+vO=Lyl1=AwxpY2X$aj=vI#cDHrG@sgj#NoHn@P%(lFp9uWJ1SqcW-|DNN#A-
z{O-QOlq8iTMd?&gGPx;TT9HXAGUZFgYFCCQ!&Bku@Jx6%JQto1FN7DvOX214N_aKA
z7G4i;gg3)m;q9<0yc6CH?}hin2jRo;QTRA~5<U%|h0ntm;mhz<_&R(Oz75}n@52w_
m$FMs56n+lBgkQsN;rH-I_%r+!{to|yHR0bCW3~USnfgDd5Wi#q

delta 966
zcmWO2^?%d_9Khk1iC}kkqK@5tIc|4TFc=eeZZbBMVcu~!HpbX=A>dmD^)0p-*t6T&
zB8uIO-5uD4{sVq~c>aNBXz9ukLt)A2mh$Y0<(_n=y}5r{uC+Lrt1ERU)l<7lRh5=W
z%}x2FdHRCJDP4`dldFquef3R)<*w8~TW>NqGq$lI*H&HM(=?;Kv2$L>tU^skf4;82
zl%Br`Swq&8wPbBsN7j`QvYw2TQL?^lAREd?vaxI;o62Ugxoja@%2u+qY$MyscCx+f
zAUn!Vva{?WyUK2|yX+x*%3iX!>?5OPU)fLgmns<})sm95Br;YqGETBmBRR=StsEc+
z%6OR|2g$*5h#V>trA{VEy&NW!<#1_`f*c`@(j-U96ls>J(ju)gO^%YIWxBM<3^_)Q
zmE+`iIYCa8qLgH&l%*o=GD|w7Q)Ww-%#m)HD?QRHC&|guC;c)YgK~<@llihhPL()6
zO-`3HWT7mQGvzEfTa<HTv79UC$@y}DTqqaG#d3)(kxS(=xm>Q0rE;ZQC0ENea;;n^
z*UOOHAUDcQa<kkbx5{mDyWAmn%3X4|+#~nOu-qs2%LDSDJR}dxBl4&$lgDJaJT6Zx
zW5ue5Lb*Mi&y>rlOgdf37L#&Kv69XvxpF2`$t1aaF_X>KWJ{%*QKf;-IpvXqGyBH$
zcXn6CC#fW<N~fxlRBJk2n@ZIt;}#DWR)i<RQ{n0GOn5dt7oHC<gcrk0;pOm3cs0Bh
zUJq}CH^W=u?XWVu6W$H)h4;e;;luDz_&9tLJ`JCR&%+nt%kWkBI(!qp4c~?D!w=!d
luqyl%eh$BcU&C+V_wYyfGyE0)4*!JJ;os%Mh5uGh_#eP$zL@|3

diff --git a/public/style.css b/public/style.css
index a486da1..704651b 100644
--- a/public/style.css
+++ b/public/style.css
@@ -4599,7 +4599,7 @@ code, .code {
 .pa1 {
   padding: 0.25rem; }
 
-.pa2, .tab, header .root-item > a, header .submenu > a {
+.pa2, .tab, figure, header .root-item > a, header .submenu > a {
   padding: 0.5rem; }
 
 .pa3, header #login-popup {
@@ -4721,7 +4721,7 @@ code, .code {
 .optionbar .options button,
 .optionbar .options .button,
 .optionbar .options input[type=button],
-.optionbar .options input[type=submit], .post-content th, .post-content td,
+.optionbar .options input[type=submit], .post-content th, .post-content td, figure figcaption,
 button.button-small,
 .button.button-small,
 input.button-small[type=button],
@@ -4929,7 +4929,7 @@ input[type=submit]:not(.button-small), .notice {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem; }
 
-.mv2, .post-content table {
+.mv2, .post-content table, figure {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem; }
 
@@ -4953,7 +4953,7 @@ input[type=submit]:not(.button-small), .notice {
   margin-top: 16rem;
   margin-bottom: 16rem; }
 
-.mh0 {
+.mh0, figure {
   margin-left: 0;
   margin-right: 0; }
 
@@ -4992,7 +4992,7 @@ input[type=submit]:not(.button-small), .notice {
     padding: 0.25rem; }
   .pa2-ns {
     padding: 0.5rem; }
-  .pa3-ns {
+  .pa3-ns, figure {
     padding: 1rem; }
   .pa4-ns {
     padding: 2rem; }
@@ -5076,7 +5076,7 @@ input[type=submit]:not(.button-small), .notice {
   .optionbar .options button,
   .optionbar .options .button,
   .optionbar .options input[type=button],
-  .optionbar .options input[type=submit] {
+  .optionbar .options input[type=submit], figure figcaption {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem; }
   .pv3-ns {
@@ -5207,7 +5207,7 @@ input[type=submit]:not(.button-small), .notice {
   .mv2-ns {
     margin-top: 0.5rem;
     margin-bottom: 0.5rem; }
-  .mv3-ns {
+  .mv3-ns, figure {
     margin-top: 1rem;
     margin-bottom: 1rem; }
   .mv4-ns {
@@ -8029,10 +8029,7 @@ pre {
 figure {
   display: flex;
   flex-direction: column;
-  margin: 1rem 0;
-  padding: 1rem 1rem 0; }
-  figure figcaption {
-    padding: 0.5rem 0; }
+  padding-bottom: 0; }
 
 .toolbar {
   background-color: #fff;
diff --git a/src/rawdata/scss/_content.scss b/src/rawdata/scss/_content.scss
index 61cbdd0..270cf2f 100644
--- a/src/rawdata/scss/_content.scss
+++ b/src/rawdata/scss/_content.scss
@@ -175,13 +175,12 @@ pre {
 }
 
 figure {
-  @extend .bg--dim, .br3;
+  @extend .mh0, .mv2, .mv3-ns, .pa2, .pa3-ns, .bg--dim, .br3;
   display: flex;
   flex-direction: column;
-  margin: $spacing-medium 0;
-  padding: $spacing-medium $spacing-medium 0;
+  padding-bottom: 0;
 
   figcaption {
-    padding: $spacing-small 0;
+    @extend .pv1, .pv2-ns;
   }
 }
diff --git a/src/templates/src/education_article.html b/src/templates/src/education_article.html
index 1d22c7f..df1b929 100644
--- a/src/templates/src/education_article.html
+++ b/src/templates/src/education_article.html
@@ -41,6 +41,7 @@
 {{ end }}
 
 {{ define "content" }}
+<div class="ph2 ph0-ns">
     <h1>{{ .Title }}</h1>
     {{ if and .User .User.IsEduAuthor }}
         <div class="mb3">
@@ -51,10 +52,10 @@
         </div>
     {{ end }}
     <div class="flex">
-        <div class="edu-article flex-grow-1 post-content">
+        <div class="edu-article flex-grow-1 post-content mw-100 overflow-hidden">
             {{ .Article.Content }}
         </div>
-        <div class="sidebar ml3 flex-shrink-0 w-30">
+        <div class="sidebar ml3 flex-shrink-0 w-30 dn db-ns">
             <div class="toc-container flex flex-column">
                 {{ range .TOC }}
                     <a href="#{{ .ID }}" class="db ph2 pv1 br2 toc toc-{{ .Level }}">{{ .Text }}</a>
@@ -112,4 +113,5 @@
         });
         toggleNotes();
     </script>
+</div>
 {{ end }}