Use CSS Grid, plus some other minor amends

Fixes #170

Author: philwareham

README.md

@@ -3,12 +3,13 @@
 [![Greenkeeper badge](https://badges.greenkeeper.io/textpattern/textpattern-com-website.svg)](https://greenkeeper.io/)
 [![Build Status](https://img.shields.io/travis/textpattern/textpattern-com-website.svg)](https://travis-ci.org/textpattern/textpattern-com-website)
 
-Official 2017+ website of the [Textpattern](https://textpattern.com/) project. **Requires Textpattern 4.7dev.**
+Official 2017+ website of the [Textpattern](https://textpattern.com/) project. **Requires Textpattern 4.7.2 or later.**
 
 ## Supported web browsers
 
 * Internet Explorer 11.
 * Chrome, Edge, Firefox, Safari and Opera the last two recent stable releases.
+* Firefox ESR latest major point release.
 
 Older versions of the above and other browsers may work, but these are the ones we verify.
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "textpattern-com",
   "description": "Official website of the Textpattern project.",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/textpattern/textpattern-com-website"

public/.gitignore

@@ -1,5 +1,6 @@
 /.htaccess
 /assets/*/
+/component.php
 /css.php
 /design-patterns.html
 /files

src/assets/sass/modules/_grid.scss

@@ -3,44 +3,21 @@
    ========================================================================== */
 
 /**
- * Flexbox container.
- *
- * TODO: remove this when we drop IE11 and browser CSS Grid support is widespread.
+ * Grid container.
  */
 
 .layout-container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    margin: 0 -1em;
-
-    > * {
-        min-width: 0;
-        padding: 0 1em;
-        box-sizing: border-box;
-    }
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    grid-gap: 2em;
 }
 
-/**
- * Grid container.
- *
- * TODO: use this when we drop IE11 and browser CSS Grid support is widespread.
- */
-
-//.layout-container {
-//    display: grid;
-//    grid-template-columns: repeat(12, 1fr);
-//    grid-gap: 2em;
-//}
-
 /**
  * Generate sizes all for grid column cells.
  *
  * Because this is mobile first, cells are all initially a 1 column span
  * (full width, 12 cell span). We will then adjust them at various breakpoints.
  *
- * TODO: remove `width` and use `grid-column` for `.layout-x` when we move to CSS Grid.
- *
  * Example HTML:
  *
  * <div class="layout-1col"></div>
@@ -59,6 +36,5 @@
 .layout-4col,
 .layout-4col-2span,
 .layout-4col-3span {
-    //grid-column: span 12;
-    width: 100%;
+    grid-column: span 12;
 }

src/assets/sass/modules/_responsive.scss

@@ -4,6 +4,10 @@
 
 @media screen and (min-width: $breakpoint-1) {
 
+    /**
+     * Screen size-specific elements.
+     */
+
     .screen-small {
         display: none;
     }
@@ -17,8 +21,7 @@
      */
 
     .layout-4col:not(.sidebar) {
-        //grid-column: span 6;
-        width: 50%;
+        grid-column: span 6;
     }
 
     /**
@@ -155,18 +158,15 @@
      */
 
     .layout-2col {
-        //grid-column: span 6;
-        width: 50%;
+        grid-column: span 6;
     }
 
     .layout-3col {
-        //grid-column: span 4;
-        width: 33.333%;
+        grid-column: span 4;
     }
 
     .layout-3col-2span {
-        //grid-column: span 8;
-        width: 66.666%;
+        grid-column: span 8;
     }
 
     /**
@@ -372,18 +372,15 @@
 
     .layout-4col,
     .layout-4col:not(.sidebar) {
-        //grid-column: span 3;
-        width: 25%;
+        grid-column: span 3;
     }
 
     .layout-4col-2span {
-        //grid-column: span 6;
-        width: 50%;
+        grid-column: span 6;
     }
 
     .layout-4col-3span {
-        //grid-column: span 9;
-        width: 73%;
+        grid-column: span 9;
     }
 
     /**

src/mockups/blog-article.html

@@ -443,7 +443,7 @@ <h4 class="accessibility">Host details</h4>
 <!-- Footer -->
         <footer class="site-footer">
             <p class="legal">
-                Copyright 2004–2017 The Textpattern Development Team.
+                Copyright 2004–2018 The Textpattern Development Team.
                 <a href="contact.html">Contact us</a>.
                 <a href="https://textpattern.com/privacy">Privacy</a>.
                 <a href="https://textpattern.com/humans.txt">Colophon</a>.

src/mockups/blog-landing.html

@@ -424,7 +424,7 @@ <h4 class="accessibility">Host details</h4>
 <!-- Footer -->
         <footer class="site-footer">
             <p class="legal">
-                Copyright 2004–2017 The Textpattern Development Team.
+                Copyright 2004–2018 The Textpattern Development Team.
                 <a href="contact.html">Contact us</a>.
                 <a href="https://textpattern.com/privacy">Privacy</a>.
                 <a href="https://textpattern.com/humans.txt">Colophon</a>.

src/mockups/contact.html

@@ -261,7 +261,7 @@ <h4 class="accessibility">Host details</h4>
 <!-- Footer -->
         <footer class="site-footer">
             <p class="legal">
-                Copyright 2004–2017 The Textpattern Development Team.
+                Copyright 2004–2018 The Textpattern Development Team.
                 <a href="contact.html">Contact us</a>.
                 <a href="https://textpattern.com/privacy">Privacy</a>.
                 <a href="https://textpattern.com/humans.txt">Colophon</a>.

src/mockups/documentation-example.html

@@ -383,7 +383,7 @@ <h4 class="accessibility">Host details</h4>
 <!-- Footer -->
         <footer class="site-footer">
             <p class="legal">
-                Copyright 2004–2017 The Textpattern Development Team.
+                Copyright 2004–2018 The Textpattern Development Team.
                 <a href="contact.html">Contact us</a>.
                 <a href="https://textpattern.com/privacy">Privacy</a>.
                 <a href="https://textpattern.com/humans.txt">Colophon</a>.

src/mockups/error.html

@@ -136,7 +136,7 @@ <h4 class="accessibility">Host details</h4>
 <!-- Footer -->
         <footer class="site-footer">
             <p class="legal">
-                Copyright 2004–2017 The Textpattern Development Team.
+                Copyright 2004–2018 The Textpattern Development Team.
                 <a href="contact.html">Contact us</a>.
                 <a href="https://textpattern.com/privacy">Privacy</a>.
                 <a href="https://textpattern.com/humans.txt">Colophon</a>.