From d40ef7ae55cd09b25912b49aa5dae5c157cd28ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vladim=C3=ADr=20Vondru=C5=A1?= <mosra@centrum.cz>
Date: Sun, 12 Jan 2025 18:20:22 +0100
Subject: [PATCH] Platform: add some more sizes and a 16:10 ratio to
 WebApplication.css.

---
 doc/platforms-html5.dox                |  4 ++++
 src/Magnum/Platform/WebApplication.css | 15 +++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/doc/platforms-html5.dox b/doc/platforms-html5.dox
index aac485804..61b41360f 100644
--- a/doc/platforms-html5.dox
+++ b/doc/platforms-html5.dox
@@ -358,6 +358,7 @@ Aspect ratio    | CSS class (landscape/portrait)
 1:1             | @cb{.css} .mn-aspect-1-1 @ce <b></b>
 4:3 (1.33:1)    | @cb{.css} .mn-aspect-4-3 @ce (default) / @cb{.css} .mn-aspect-3-4 @ce
 3:2 (1.5:1)     | @cb{.css} .mn-aspect-3-2 @ce / @cb{.css} .mn-aspect-2-3 @ce
+16:10 (1.6:1)   | @cb{.css} .mn-aspect-16-10 @ce / @cb{.css} .mn-aspect-10-16 @ce
 16:9 (1.78:1)   | @cb{.css} .mn-aspect-16-9 @ce / @cb{.css} .mn-aspect-9-16 @ce
 2:1             | @cb{.css} .mn-aspect-2-1 @ce / @cb{.css} .mn-aspect-1-2 @ce
 
@@ -381,6 +382,9 @@ Width           | CSS class
 600px           | @cb{.css} .mn-width-600 @ce <b></b>
 640px           | @cb{.css} .mn-width-640 @ce (default)
 800px           | @cb{.css} .mn-width-800 @ce <b></b>
+960px           | @cb{.css} .mn-width-960 @ce <b></b>
+1024px          | @cb{.css} .mn-width-1024 @ce <b></b>
+1280px          | @cb{.css} .mn-width-1280 @ce <b></b>
 
 For example, for a 480x640 canvas (3:4, portrait) you would use
 @cb{.html} <div class="mn-container mn-width-480 mn-aspect-3-4"> @ce. Besides
diff --git a/src/Magnum/Platform/WebApplication.css b/src/Magnum/Platform/WebApplication.css
index 50ef9b2f9..12bec0e8b 100644
--- a/src/Magnum/Platform/WebApplication.css
+++ b/src/Magnum/Platform/WebApplication.css
@@ -118,6 +118,15 @@ body {
 .mn-container.mn-width-800 .mn-sizer, #container.width-800 #sizer {
   width: 800px;
 }
+.mn-container.mn-width-960 .mn-sizer, #container.width-960 #sizer {
+  width: 960px;
+}
+.mn-container.mn-width-1024 .mn-sizer, #container.width-1024 #sizer {
+  width: 1024px;
+}
+.mn-container.mn-width-1280 .mn-sizer, #container.width-1280 #sizer {
+  width: 1280px;
+}
 
 .mn-container.mn-aspect-1-1 .mn-expander, #container.aspect-1-1 #expander {
   padding-bottom: 100%;
@@ -136,9 +145,15 @@ body {
 .mn-container.mn-aspect-2-3 .mn-expander, #container.aspect-2-3 #expander {
   padding-bottom: 150%;
 }
+.mn-container.mn-aspect-16-10 .mn-expander, #container.aspect-16-10 #expander {
+  padding-bottom: 62.5%
+}
 .mn-container.mn-aspect-16-9 .mn-expander, #container.aspect-16-9 #expander {
   padding-bottom: 56.25%
 }
+.mn-container.mn-aspect-10-16 .mn-expander, #container.aspect-10-16 #expander {
+  padding-bottom: 160%
+}
 .mn-container.mn-aspect-9-16 .mn-expander, #container.aspect-9-16 #expander {
   padding-bottom: 177.7778%
 }