From d7a1d405b36f4773c44b1063bad6a7fa4065049a Mon Sep 17 00:00:00 2001
From: Linus Horvath <linus.horvath@gmail.com>
Date: Fri, 11 Mar 2022 18:18:36 +0100
Subject: [PATCH] Add xxl (1920px) media query

---
 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 cad0dae0e..b3a82322e 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 d554a13c7..28be48a3e 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 1edaad6df..b0a92708d 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 5b2f5b045..5dd2da440 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();