More removal of IE-specific code

See #336

Author: philwareham

package.json

@@ -41,7 +41,7 @@
   "browserslist": [
     "> 0.5%",
     "Firefox ESR",
-    "IE 11"
+    "not IE 11"
   ],
   "scripts": {
     "test": "grunt travis --verbose"

src/assets/sass/modules/_accessibility.scss

@@ -30,9 +30,4 @@
         animation: none;
         background-image: none;
     }
-
-    progress::-ms-fill {
-        animation: none;
-        background-image: none;
-    }
 }

src/assets/sass/modules/_base.scss

@@ -335,14 +335,6 @@ select[size="1"] {
     height: 2em; // 32px / 16px
 }
 
-/**
- * Remove browser-specific `select` UI in IE 11.
- */
-
-select::-ms-expand {
-    opacity: 0;
-}
-
 /**
  * Normalize styling of `optgroup`.
  */
@@ -353,18 +345,16 @@ optgroup {
 }
 
 /**
- * 1. Remove the default vertical scrollbar in IE 11.
- * 2. Remove unwanted space below `textarea` in Safari, Chrome, Opera.
- * 3. Restrict to vertical resizing to prevent layout breakage.
+ * 1. Remove unwanted space below `textarea` in Safari, Chrome, Opera.
+ * 2. Restrict to vertical resizing to prevent layout breakage.
  */
 
 textarea {
     width: 100%;
     height: auto;
     min-height: 3em;
-    overflow: auto; /* 1 */
-    vertical-align: top; /* 2 */
-    resize: vertical; /* 3 */
+    vertical-align: top; /* 1 */
+    resize: vertical; /* 2 */
 }
 
 /**

src/assets/sass/modules/_forms.scss

@@ -23,18 +23,9 @@
      */
 
     .layout-container {
-        display: flex; // Flexbox fallback for browsers without CSS Grid support.
         display: grid;
         gap: 0 2em;
         grid-template-columns: repeat(12, 1fr);
-        flex-wrap: wrap; // Flexbox fallback for browsers without CSS Grid support.
-        margin: 0 -1em; // Flexbox fallback for browsers without CSS Grid support.
-
-        > * {
-            box-sizing: border-box; // Flexbox fallback.
-            min-width: 0; // Fix Firefox `pre` overflow issues.
-            padding: 0 1em; // Flexbox fallback.
-        }
     }
 
     /**
@@ -62,7 +53,6 @@
     .layout-4col-2span,
     .layout-4col-3span {
         grid-column: span 12;
-        width: 100%; // Flexbox fallback.
     }
 
     /**
@@ -71,26 +61,6 @@
 
     .layout-4col:not(.sidebar) {
         grid-column: span 6;
-        width: 50%; // Flexbox fallback.
-    }
-
-    // Override Flexbox fallback for browsers with CSS Grid support.
-    @supports (display: grid) {
-        .layout-container {
-            margin: 0;
-        }
-
-        .layout-1col,
-        .layout-2col,
-        .layout-3col,
-        .layout-3col-2span,
-        .layout-4col,
-        .layout-4col-2span,
-        .layout-4col-3span,
-        .layout-4col:not(.sidebar) {
-            width: auto;
-            padding: 0;
-        }
     }
 
     /**
@@ -237,26 +207,14 @@
 
     .layout-2col {
         grid-column: span 6;
-        width: 50%; // Flexbox fallback.
     }
 
     .layout-3col {
         grid-column: span 4;
-        width: 33.333%; // Flexbox fallback.
     }
 
     .layout-3col-2span {
         grid-column: span 8;
-        width: 66.666%; // Flexbox fallback.
-    }
-
-    // Override Flexbox fallback for browsers with CSS Grid support.
-    @supports (display: grid) {
-        .layout-2col,
-        .layout-3col,
-        .layout-3col-2span {
-            width: auto;
-        }
     }
 
     /**
@@ -497,31 +455,14 @@
     .layout-4col,
     .layout-4col:not(.sidebar) {
         grid-column: span 3;
-        width: 25%; // Flexbox fallback.
     }
 
     .layout-4col-2span {
         grid-column: span 6;
-        width: 50%; // Flexbox fallback.
     }
 
     .layout-4col-3span {
         grid-column: span 9;
-        width: 73%; // Flexbox fallback.
-    }
-
-    // Override Flexbox fallback for browsers with CSS Grid support.
-    @supports (display: grid) {
-        .layout-4col,
-        .layout-4col-2span,
-        .layout-4col-3span,
-        .layout-4col:not(.sidebar) {
-            width: auto;
-        }
-
-        main .layout-4col-3span {
-            margin-right: 1.5em;
-        }
     }
 
     /**

src/assets/sass/modules/_responsive.scss

@@ -6,8 +6,7 @@
 /**
  * Establish baseline.
  *
- * 1. Prevent adjustments of font size after orientation changes in
- *    IE on Windows Phone and in iOS.
+ * 1. Prevent adjustments of font size after orientation changes in iOS.
  */
 
 html {
@@ -239,7 +238,7 @@ ul.example {
 
 /**
  * 1. Remove the bottom border in Chrome 57+.
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
  */
 
 abbr[title] {

src/assets/sass/modules/_typography.scss

@@ -125,20 +125,8 @@
     }
 }
 
-
-/* ==========================================================================
-   Styling and layout for all media
-   ========================================================================== */
-
-@import "modules/fonts";
-@import "modules/base";
-
-
-/* ==========================================================================
-   Styling and layout for screen media (mobile first)
-   ========================================================================== */
-
 @media screen {
+    @import "modules/fonts";
     @import "modules/layout";
     @import "modules/navigation";
     @import "modules/links";
@@ -167,11 +155,6 @@
 @import "modules/accessibility";
 @import "modules/animation-keyframes";
 
-
-/* ==========================================================================
-   Styling and layout for print media
-   ========================================================================== */
-
 @media print {
     @import "modules/print";
 }

src/assets/sass/style.scss

@@ -46,7 +46,7 @@
             <div class="docs-menu">
                 <h1>Design patterns</h1>
                 <div class="article-description">
-                    <p>Examples of inline/block elements that should be considered and styled within the <a href="https://textpattern.com/">Textpattern website</a>. Supported browsers: Chrome, Edge, Firefox, Safari, Opera the last 2 stable releases, IE11.</p>
+                    <p>Examples of inline/block elements that should be considered and styled within the <a href="https://textpattern.com/">Textpattern website</a>. Supported browsers: Chrome, Edge, Firefox, Safari, Opera the last 2 stable releases.</p>
                 </div>
                 <nav>
                     <h3>Contents</h3>