Use CSS Grid, plus some other minor amends

Fixes #170
textpattern · Oct 16, 2018 · 541ee33 · 541ee33
1 parent 7efdf3f
commit 541ee33
Show file tree

Hide file tree

Showing 15 changed files with 30 additions and 55 deletions.
diff --git a/README.md b/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.
 

diff --git a/package.json b/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"

diff --git a/public/.gitignore b/public/.gitignore
@@ -1,5 +1,6 @@
 /.htaccess
 /assets/*/
+/component.php
 /css.php
 /design-patterns.html
 /files

diff --git a/src/assets/sass/modules/_grid.scss b/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;
 }
diff --git a/src/assets/sass/modules/_responsive.scss b/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;
     }
 
     /**

diff --git a/src/mockups/blog-article.html b/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>.

diff --git a/src/mockups/blog-landing.html b/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>.

diff --git a/src/mockups/contact.html b/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>.

diff --git a/src/mockups/documentation-example.html b/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>.

diff --git a/src/mockups/error.html b/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>.

diff --git a/src/mockups/get-started.html b/src/mockups/get-started.html
@@ -357,7 +357,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>.

diff --git a/src/mockups/index.html b/src/mockups/index.html
@@ -475,7 +475,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>.

diff --git a/src/mockups/showcase-article.html b/src/mockups/showcase-article.html
@@ -286,7 +286,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>.

diff --git a/src/mockups/showcase-landing.html b/src/mockups/showcase-landing.html
@@ -224,7 +224,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>.

diff --git a/src/templates/manifest.json b/src/templates/manifest.json
@@ -1,7 +1,7 @@
 {
   "title": "Textpattern.com",
   "txp-type": "textpattern-theme",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Textpattern.com site theme.",
   "author": "Phil Wareham",
   "author_uri": "https://github.com/textpattern/textpattern-com-website"