Make articles responsive

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-bottom: 0; }
-  padding: 1rem 1rem 0; }
-  figure figcaption {
-    padding: 0.5rem 0; }
 
 .toolbar {
   background-color: #fff;

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-bottom: 0;
-  padding: $spacing-medium $spacing-medium 0;
 
   figcaption {
-    padding: $spacing-small 0;
+    @extend .pv1, .pv2-ns;
   }
 }

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 }}