From 655f16b903de33bc6251fd4c879f9c951daad79c Mon Sep 17 00:00:00 2001
From: Stefan Majewsky <majewsky@gmx.net>
Date: Wed, 26 Jun 2019 16:56:37 +0200
Subject: [PATCH] setup principal layout (either one or two columns) for <main>

---
 Makefile                          |  2 +-
 draft/index.html                  | 12 ++++++---
 draft/res/content/structure.scss  | 41 +++++++++++++++++++++++++++++++
 draft/res/content/typography.scss |  6 +++++
 draft/res/footer.scss             |  3 +++
 draft/res/lib.scss                | 32 ++++++++++++++++++++++++
 draft/res/main.scss               | 13 +++-------
 7 files changed, 96 insertions(+), 13 deletions(-)
 create mode 100644 draft/res/content/structure.scss
 create mode 100644 draft/res/content/typography.scss
 create mode 100644 draft/res/footer.scss
 create mode 100644 draft/res/lib.scss

diff --git a/Makefile b/Makefile
index 4b0fe43..8b9b115 100644
--- a/Makefile
+++ b/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 $< $@
diff --git a/draft/index.html b/draft/index.html
index 8ab9d39..4e5fa84 100644
--- a/draft/index.html
+++ b/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>
diff --git a/draft/res/content/structure.scss b/draft/res/content/structure.scss
new file mode 100644
index 0000000..6b46b42
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/draft/res/content/typography.scss b/draft/res/content/typography.scss
new file mode 100644
index 0000000..88a8fff
--- /dev/null
+++ b/draft/res/content/typography.scss
@@ -0,0 +1,6 @@
+main {
+  p {
+    border: 0;
+    line-height: 1.3;
+  }
+}
diff --git a/draft/res/footer.scss b/draft/res/footer.scss
new file mode 100644
index 0000000..6c5a8a5
--- /dev/null
+++ b/draft/res/footer.scss
@@ -0,0 +1,3 @@
+footer p {
+  margin: 1rem;
+}
diff --git a/draft/res/lib.scss b/draft/res/lib.scss
new file mode 100644
index 0000000..1936e83
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/draft/res/main.scss b/draft/res/main.scss
index ec87865..7d35e40 100644
--- a/draft/res/main.scss
+++ b/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';