page: add a basic grid

3e27961c · Pietro Albini · 36d3d97a · 3e27961c · 3e27961c
Commit 3e27961c authored Apr 22, 2018 by Pietro Albini
Expand all Hide whitespace changes
Inline Side-by-side

Showing with 176 additions and 74 deletions

demo.html demo.html +155 -67

scss/_page.scss scss/_page.scss +21 -7

No files found.
--- a/demo.html
+++ b/demo.html
--- a/scss/_page.scss
+++ b/scss/_page.scss
@@ -22,18 +22,24 @@ div.page {

    div.row {
        border-top: 1px dotted mix(#fff, $color_warm_gray, 40%);
-        padding: 2em;
+        padding: 2em 1em;
+        display: flex;

        &:first-child {
            border-top: 0;
        }

-        & > *:first-child {
-            margin-top: 0 !important;
-        }
+        div.col {
+            flex: 1;
+            margin: 0 1em;
+
+            & > *:first-child {
+                margin-top: 0 !important;
+            }

-        & > *:last-child {
-            margin-bottom: 0 !important;
+            & > *:last-child {
+                margin-bottom: 0 !important;
+            }
        }
    }

@@ -41,7 +47,15 @@ div.page {
        border-radius: 0;

        div.row {
-            padding: 2em 1em;
+            display: block;
+
+            div.col {
+                margin: 2em 0 0 0;
+
+                &:first-child {
+                    margin-top: 0;
+                }
+            }
        }
    }
 }