ic
/
magnum
mirror of https://github.com/mosra/magnum.git
6
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Platform: add some more sizes and a 16:10 ratio to WebApplication.css.

pull/651/merge
Vladimír Vondruš 1 year ago
parent
66a2ce87cd
commit
d40ef7ae55
2 changed files with 19 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      doc/platforms-html5.dox
  2. 15
      src/Magnum/Platform/WebApplication.css

4
doc/platforms-html5.dox
Unescape View File

@ -358,6 +358,7 @@ Aspect ratio | CSS class (landscape/portrait)
1:1 | @cb{.css} .mn-aspect-1-1 @ce <b></b> 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 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 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 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 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> 600px | @cb{.css} .mn-width-600 @ce <b></b>
640px | @cb{.css} .mn-width-640 @ce (default) 640px | @cb{.css} .mn-width-640 @ce (default)
800px | @cb{.css} .mn-width-800 @ce <b></b> 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 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 @cb{.html} <div class="mn-container mn-width-480 mn-aspect-3-4"> @ce. Besides

15
src/Magnum/Platform/WebApplication.css
Unescape View File

@ -118,6 +118,15 @@ body {
.mn-container.mn-width-800 .mn-sizer, #container.width-800 #sizer { .mn-container.mn-width-800 .mn-sizer, #container.width-800 #sizer {
width: 800px; 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 { .mn-container.mn-aspect-1-1 .mn-expander, #container.aspect-1-1 #expander {
padding-bottom: 100%; padding-bottom: 100%;
@ -136,9 +145,15 @@ body {
.mn-container.mn-aspect-2-3 .mn-expander, #container.aspect-2-3 #expander { .mn-container.mn-aspect-2-3 .mn-expander, #container.aspect-2-3 #expander {
padding-bottom: 150%; 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 { .mn-container.mn-aspect-16-9 .mn-expander, #container.aspect-16-9 #expander {
padding-bottom: 56.25% 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 { .mn-container.mn-aspect-9-16 .mn-expander, #container.aspect-9-16 #expander {
padding-bottom: 177.7778% padding-bottom: 177.7778%
} }

Write Preview
Loading…
Cancel
Save