feat: add xxl (1920px) media query (#965)

pure-css · Mar 14, 2022 · 7debb37 · 7debb37
1 parent 72da9c0
commit 7debb37
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 3 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -202,7 +202,8 @@ module.exports = function (grunt) {
                         sm: 'screen and (min-width: 35.5em)',   // 568px
                         md: 'screen and (min-width: 48em)',     // 768px
                         lg: 'screen and (min-width: 64em)',     // 1024px
-                        xl: 'screen and (min-width: 80em)'      // 1280px
+                        xl: 'screen and (min-width: 80em)',     // 1280px
+                        xxl: 'screen and (min-width: 120em)'    // 1920px
                     }
                 }
             }

diff --git a/site/src/pages/grids/index.js b/site/src/pages/grids/index.js
@@ -561,6 +561,12 @@ function Grids() {
                                 <td>≥ <b>1280px</b></td>
                                 <td><code>.pure-u-<b>xl</b>-*</code></td>
                             </tr>
+                            <tr>
+                                <td className="highlight"><b><code>xxl</code></b></td>
+                                <td className="mq-table-mq highlight"><code>@media screen and (min-width: 120em)</code></td>
+                                <td>≥ <b>1920px</b></td>
+                                <td><code>.pure-u-<b>xxl</b>-*</code></td>
+                            </tr>
                         </tbody>
                     </table>
                 </div>

diff --git a/site/src/pages/start/index.js b/site/src/pages/start/index.js
@@ -148,6 +148,12 @@ function Start() {
                                 <td>≥ <b>1280px</b></td>
                                 <td><code>.pure-u-<b>xl</b>-*</code></td>
                             </tr>
+                            <tr>
+                                <td className="highlight"><b><code>xxl</code></b></td>
+                                <td className="mq-table-mq highlight"><code>@media screen and (min-width: 120em)</code></td>
+                                <td>≥ <b>1920px</b></td>
+                                <td><code>.pure-u-<b>xxl</b>-*</code></td>
+                            </tr>
                         </tbody>
                     </table>
                 </div>

diff --git a/site/src/pages/tools/index.js b/site/src/pages/tools/index.js
@@ -94,7 +94,8 @@ function Tools() {
                                     sm: 'screen and (min-width: 35.5em)', // 568px
                                     md: 'screen and (min-width: 48em)',   // 768px
                                     lg: 'screen and (min-width: 64em)',   // 1024px
-                                    xl: 'screen and (min-width: 80em)'    // 1280px
+                                    xl: 'screen and (min-width: 80em)',   // 1280px
+                                    xxl: 'screen and (min-width: 120em)'  // 1920px
                                 }
                             }
                         }
@@ -128,7 +129,8 @@ function Tools() {
                             sm: 'screen and (min-width: 35.5em)', // 568px
                             md: 'screen and (min-width: 48em)',   // 768px
                             lg: 'screen and (min-width: 64em)',   // 1024px
-                            xl: 'screen and (min-width: 80em)'    // 1280px
+                            xl: 'screen and (min-width: 80em)',   // 1280px
+                            xxl: 'screen and (min-width: 120em)'  // 1920px
                         }
                     })).toString();