From a42d226c4b63fe12adccb2a841cbf5102a853eca Mon Sep 17 00:00:00 2001
From: ahron1 <85363537+ahron1@users.noreply.github.com>
Date: Wed, 19 Oct 2022 23:58:59 +0530
Subject: [PATCH] feat: added media queries for 2.5K and 4K screens (#1065)

---
 Gruntfile.js                  |  4 +++-
 site/src/pages/grids/index.js | 13 +++++++++++++
 site/src/pages/start/index.js | 12 ++++++++++++
 site/src/pages/tools/index.js |  8 ++++++--
 4 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/Gruntfile.js b/Gruntfile.js
index b9bbb5f..3ad3951 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -203,7 +203,9 @@ module.exports = function (grunt) {
                         md: 'screen and (min-width: 48em)',     // 768px
                         lg: 'screen and (min-width: 64em)',     // 1024px
                         xl: 'screen and (min-width: 80em)',     // 1280px
-                        xxl: 'screen and (min-width: 120em)'    // 1920px
+                        xxl: 'screen and (min-width: 120em)',    // 1920px
+                        xxxl: 'screen and (min-width: 160em)',    // 2560px
+                        x4k: 'screen and (min-width: 240em)'    // 3840px
                     }
                 }
             }
diff --git a/site/src/pages/grids/index.js b/site/src/pages/grids/index.js
index 002a4f0..1466aa3 100644
--- a/site/src/pages/grids/index.js
+++ b/site/src/pages/grids/index.js
@@ -567,6 +567,19 @@ function Grids() {
                                 <td>≥ <b>1920px</b></td>
                                 <td><code>.pure-u-<b>xxl</b>-*</code></td>
                             </tr>
+                            <tr>
+                                <td className="highlight"><b><code>xxxl</code></b></td>
+                                <td className="mq-table-mq highlight"><code>@media screen and (min-width: 160em)</code></td>
+                                <td>≥ <b>2560px</b></td>
+                                <td><code>.pure-u-<b>xxxl</b>-*</code></td>
+                            </tr>
+                            <tr>
+                                <td className="highlight"><b><code>x4k</code></b></td>
+                                <td className="mq-table-mq highlight"><code>@media screen and (min-width: 240em)</code></td>
+                                <td>≥ <b>3840px</b></td>
+                                <td><code>.pure-u-<b>x4k</b>-*</code></td>
+                            </tr>
+
                         </tbody>
                     </table>
                 </div>
diff --git a/site/src/pages/start/index.js b/site/src/pages/start/index.js
index 1312fd7..7aabeed 100644
--- a/site/src/pages/start/index.js
+++ b/site/src/pages/start/index.js
@@ -154,6 +154,18 @@ function Start() {
                                 <td>≥ <b>1920px</b></td>
                                 <td><code>.pure-u-<b>xxl</b>-*</code></td>
                             </tr>
+                            <tr>
+                                <td className="highlight"><b><code>xxxl</code></b></td>
+                                <td className="mq-table-mq highlight"><code>@media screen and (min-width: 160em)</code></td>
+                                <td>≥ <b>2560px</b></td>
+                                <td><code>.pure-u-<b>xxxl</b>-*</code></td>
+                            </tr>
+                            <tr>
+                                <td className="highlight"><b><code>x4k</code></b></td>
+                                <td className="mq-table-mq highlight"><code>@media screen and (min-width: 240em)</code></td>
+                                <td>≥ <b>3840px</b></td>
+                                <td><code>.pure-u-<b>x4k</b>-*</code></td>
+                            </tr>
                         </tbody>
                     </table>
                 </div>
diff --git a/site/src/pages/tools/index.js b/site/src/pages/tools/index.js
index 5dd2da4..bc2a972 100644
--- a/site/src/pages/tools/index.js
+++ b/site/src/pages/tools/index.js
@@ -95,7 +95,9 @@ function Tools() {
                                     md: 'screen and (min-width: 48em)',   // 768px
                                     lg: 'screen and (min-width: 64em)',   // 1024px
                                     xl: 'screen and (min-width: 80em)',   // 1280px
-                                    xxl: 'screen and (min-width: 120em)'  // 1920px
+                                    xxl: 'screen and (min-width: 120em)',  // 1920px
+                                    xxxl: 'screen and (min-width: 160em)',  // 2560px                                    
+                                    x4k: 'screen and (min-width: 240em)'  // 3840px                                    
                                 }
                             }
                         }
@@ -130,7 +132,9 @@ function Tools() {
                             md: 'screen and (min-width: 48em)',   // 768px
                             lg: 'screen and (min-width: 64em)',   // 1024px
                             xl: 'screen and (min-width: 80em)',   // 1280px
-                            xxl: 'screen and (min-width: 120em)'  // 1920px
+                            xxl: 'screen and (min-width: 120em)',  // 1920px
+                            xxxl: 'screen and (min-width: 160em)'  // 2560px
+                            x4k: 'screen and (min-width: 240em)'  // 3840px
                         }
                     })).toString();