Browse Source

Platform: styling for <p> and <code> in Emscripten apps.

And docs linking to m.css. Just use that, if you need more.
pull/272/head
Vladimír Vondruš 8 years ago
parent
commit
384d1b0c83
  1. 5
      doc/platforms-html5.dox
  2. 22
      src/Magnum/Platform/WebApplication.css

5
doc/platforms-html5.dox

@ -322,6 +322,11 @@ element) from the page to avoid them affecting the canvas. Combining
@cb{.css} .fullsize @ce with the other @cb{.css} .aspect-* @ce or @cb{.css} .fullsize @ce with the other @cb{.css} .aspect-* @ce or
@cb{.css} .width-* @ce classes is not supported. @cb{.css} .width-* @ce classes is not supported.
Besides the canvas, there's minimal styling for @cb{.html} <h1> @ce,
@cb{.html} <p> @ce and @cb{.html} <code> @ce tags. Putting extra content inside
the @cb{.css} div#sizer @ce will center it, following the canvas width. If you
need more advanced styling, check out [m.css](http://mcss.mosra.cz).
@section platforms-html5-events Controlling event behavior @section platforms-html5-events Controlling event behavior
@subsection platforms-html5-events-keyboard Keyboard events @subsection platforms-html5-events-keyboard Keyboard events

22
src/Magnum/Platform/WebApplication.css

@ -35,11 +35,6 @@ body {
background-color: #2f363f; /*var(--background-color)*/ background-color: #2f363f; /*var(--background-color)*/
color: #dcdcdc; /*var(--color)*/ color: #dcdcdc; /*var(--color)*/
} }
h1 {
text-align: center;
font-size: 1.75rem;
font-weight: 600;
}
/* #container makes the canvas occupy the whole page width /* #container makes the canvas occupy the whole page width
#sizer centers it #sizer centers it
@ -152,4 +147,21 @@ pre#log {
font-size: 0.8rem; /* so 80 columns fits into 640 pixels */ font-size: 0.8rem; /* so 80 columns fits into 640 pixels */
} }
/* Styling for extra content */
h1 {
text-align: center;
font-size: 1.75rem;
font-weight: 600;
}
#sizer p {
text-align: center;
}
code {
font-family: monospace, monospace, monospace; /* https://en.wikipedia.org/wiki/User:Davidgothberg/Test59 */
font-size: 0.9em;
padding: 0.125rem;
color: #e6e6e6; /*var(--code-color)*/
background-color: #282e36; /*var(--code-background-color)*/
}
/* kate: indent-width 2; */ /* kate: indent-width 2; */

Loading…
Cancel
Save