setup principal layout (either one or two columns) for <main>

Makefile

@@ -1,4 +1,4 @@
 all: draft/res/c3d2.css
 
-draft/res/c3d2.css: draft/res/main.scss draft/res/*.scss
+draft/res/c3d2.css: draft/res/main.scss draft/res/*.scss draft/res/*/*.scss
 	sassc -t compressed -I draft/res $< $@

draft/index.html

@@ -47,9 +47,15 @@
             </ul></li>
         </ul>
     </nav>
-    <main>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
-        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    <main class="two-columns">
+        <section>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+            <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        </section>
+        <section>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+            <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        </section>
     </main>
     <footer>
         <p>Footer</p>

draft/res/content/structure.scss

@@ -0,0 +1,41 @@
+main {
+  @include mark-unstyled-children;
+  padding: 1rem;
+
+  // most pages use a one-column layout
+  &:not(.two-columns) {
+    @include stack(1rem);
+  }
+
+  // front page uses a one-column layout as well on narrow screens
+  @media(max-width: 119.99999ch) {
+    &.two-columns {
+      @include stack(1rem);
+    }
+  }
+
+  // two-column layout for the front page
+  @media(min-width: 120ch) {
+    &.two-columns {
+      @include is-styled;
+      border: 0;
+      display: flex;
+      flex-flow: row wrap;
+
+      & > * {
+        @include is-styled;
+        border: 0;
+        flex: 1;
+        max-width: 60ch;
+      }
+
+      & > * + * {
+        margin-left: 1rem;
+      }
+    }
+  }
+
+  & > section {
+    @include stack(1rem);
+  }
+}

draft/res/content/typography.scss

@@ -0,0 +1,6 @@
+main {
+  p {
+    border: 0;
+    line-height: 1.3;
+  }
+}

draft/res/footer.scss

@@ -0,0 +1,3 @@
+footer p {
+  margin: 1rem;
+}

draft/res/lib.scss

@@ -0,0 +1,32 @@
+////////////////////////////////////////////////////////////////////////////////
+// unstyled markers
+//
+// TODO add an option for disabling all these rules in the production build
+
+@mixin mark-unstyled-children {
+  * {
+    border: 1px dashed red;
+  }
+}
+
+@mixin is-styled {
+  border: 0;
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// layout strategies
+
+@mixin stack($gap) {
+  // Arranges for all children to be separated by the same distance, `$gap`, in
+  // such a way that children can also use the same layout (with a different
+  // gap) inside them.
+  //
+  // Source: <https://every-layout.dev/layouts/stack/>
+  @include is-styled;
+  & > * {
+    margin: 0;
+  }
+  & > * + * {
+    margin-top: $gap;
+  }
+}

draft/res/main.scss

@@ -1,4 +1,5 @@
 @import 'reset.scss';
+@import 'lib.scss';
 
 @media (min-width: 60ch) {
   @import 'highlevel-desktop.scss';
@@ -8,12 +9,6 @@
 }
 
 @import 'navbar.scss';
-// TODO @import 'content.scss';
-// TODO @import 'footer.scss';
-
-// stub, TODO remove
-main, footer {
-  p {
-    margin: 1rem;
-  }
-}
+@import 'content/structure.scss';
+@import 'content/typography.scss';
+@import 'footer.scss';