Skip to content

Commit

Permalink
feat: added media queries for 2.5K and 4K screens (#1065)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ahron1
ahron1 authored Oct 19, 2022
1 parent ae407d3 commit a42d226
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 3 deletions.
4 changes: 3 additions & 1 deletion Gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
}
Expand Down
13 changes: 13 additions & 0 deletions site/src/pages/grids/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
12 changes: 12 additions & 0 deletions site/src/pages/start/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 6 additions & 2 deletions site/src/pages/tools/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
}
Expand Down Expand Up @@ -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();
Expand Down

0 comments on commit a42d226

Please sign in to comment.