responsive column styling

compiler/src/mdast/index.ts

@@ -38,13 +38,13 @@ export async function mdastPhase(file: VFile, ctx: Context) {
       linkProperties: { className: 'link' },
     })
     // custom plugins:
-    .use(embedAssetUrl)
     .use(youtubeVideos)
     .use(aliasDirectiveToSvg, ctx)
     .use(removeEmptyParagraphs)
     // .use(aliasDirectiveToTex, ctx)
     .use(codeBlocks, ctx)
     .use(columns)
+    .use(embedAssetUrl)
     .use(images, ctx)
     .use(pagebreaks);
 

template/src/styles/columns.scss

@@ -0,0 +1,20 @@
+.columns {
+  display: flex;
+
+  .column {
+    flex: 1;
+
+    &:nth-child(2n+1) {
+      padding-right: 0.5rem;
+    }
+    &:nth-child(2n) {
+      padding-left: 0.5rem;
+    }
+  }
+}
+
+@media (max-width: 800px) {
+  .columns {
+    flex-direction: column;
+  }
+}

template/src/styles/images.scss

@@ -6,16 +6,13 @@ img {
 
 figure {
   text-align: center;
+  margin: 3rem auto;
   .img-bg {
     display: inline-block;
     background: white;
     width: 75%;
     max-width: 100%;
     height: auto;
-    margin-top: 3rem;
-    margin-right: auto;
-    margin-bottom: 3rem;
-    margin-left: auto;
   }
   svg.pdftex, svg.knitr-svg {
     margin-bottom: 0;

template/src/styles/index.scss

@@ -35,5 +35,6 @@
 @import './tex.scss';
 @import './code.scss';
 @import './boxouts.scss';
+@import './columns.scss';
 @import './view-options.scss';
 @import './pdf.scss';