From 7debb3751c6fc91a50327af62de73bf6f6a47e12 Mon Sep 17 00:00:00 2001
From: Linus Horvath <linus.horvath@gmail.com>
Date: Tue, 15 Mar 2022 00:54:01 +0100
Subject: [PATCH] feat: add xxl (1920px) media query (#965)

---
 Gruntfile.js                  | 3 ++-
 site/src/pages/grids/index.js | 6 ++++++
 site/src/pages/start/index.js | 6 ++++++
 site/src/pages/tools/index.js | 6 ++++--
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/Gruntfile.js b/Gruntfile.js
index 274fd8d..8afab36 100644
--- 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
index d554a13..28be48a 100644
--- 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
index 1edaad6..b0a9270 100644
--- 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
index 5b2f5b0..5dd2da4 100644
--- 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();