diff options
-rw-r--r-- | common.css | 39 | ||||
-rw-r--r-- | css-notes.txt | 34 | ||||
-rw-r--r-- | intro.css | 92 |
3 files changed, 165 insertions, 0 deletions
diff --git a/common.css b/common.css new file mode 100644 index 0000000..0cb1e32 --- /dev/null +++ b/common.css @@ -0,0 +1,39 @@ +/* file : common.css + * copyright : Copyright (c) 2014-2016 Code Synthesis Ltd + * license : MIT; see accompanying LICENSE file + */ + +html +{ + font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; + font-weight: normal; + font-size: 18px; + line-height: 1.4em; +} + +body {margin: 0;} /* There is non-0 default margin for body. */ + +/* See notes on what's going on here. */ +body {min-width: 17em;} +@media only screen and (min-width: 360px) +{ + body {min-width: 19em;} +} + +#content +{ + max-width: 40em; + margin: 0 auto 0 auto; + padding: 0 .4em 0 .4em; /* Space between text and browser frame. */ +} + +code, pre +{ + font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; + font-size: 0.92em; +} + +pre +{ + white-space: pre-wrap; +} diff --git a/css-notes.txt b/css-notes.txt new file mode 100644 index 0000000..7680587 --- /dev/null +++ b/css-notes.txt @@ -0,0 +1,34 @@ +Some mobile device dimentions: + +Nexus 5 360 598 +Nexus 6 412 690 +iPhone 5 320 568 +iPhone 6 375 667 +iPhone 6+ 414 736 +Galaxy 5 360 640 +Galaxy 6 360 640 + +iPad 768 1024 +Galaxy 2,3 10" 800 1280 +Galaxy 2 7" 600 1024 + +Based on this, we define the following size brackets: + +320-359 small phone portrait +360-567 big phone portrate +568-1023 phone landscape, tablets portrate +1024- tablets landscape, monitor + +Body min-width: + +320px ~ 20em @ 16px font-size. This is factored in when doing font boosting. +Specifying 320px directly seems to mess it up. + +Font boosting results for font-size:1.1em (~18px), min-width:18em on Nexus 5: + + - about 40 characters in portrait + - about 70 characters in landscape + - landscape font appears slightly smaller + +18em on smaller phones (e.g., iPhone 4) appears to trigger scrolling. 17em +works well, however. diff --git a/intro.css b/intro.css new file mode 100644 index 0000000..2fb8d67 --- /dev/null +++ b/intro.css @@ -0,0 +1,92 @@ +/* file : intro.css + * copyright : Copyright (c) 2014-2016 Code Synthesis Ltd + * license : MIT; see accompanying LICENSE file + */ + +html +{ + color: #333; + text-align: justify; +} + +#content +{ + padding-left: 3em; /* Reserve for headings. */ +} + +h1 +{ + font-weight: normal; + font-size: 1.58em; + line-height: 1.4em; + + margin: 1.6em 0 .6em -1.89em; +} + +code +{ + background-color: rgba(0, 0, 0, 0.04); + border-radius: 0.2em; + padding: .2em 0 .2em 0; +} + +code::before +{ + letter-spacing: -0.2em; + content: "\00a0"; +} + +code::after +{ + letter-spacing: -0.2em; + content: "\00a0"; +} + +pre +{ + background-color: #f7f7f7; + border-radius: 0.2em; + + padding: .8em .4em .8em .4em; + margin: 1.5em -.4em 1.5em -.4em; /* Use margins of #content. */ + +/* + padding: .8em 0 .8em .8em; + margin: .2em 0 .2em 0; + */ +} + +dl { + margin: 1em 0 1em 0; +} + +dl dt { + margin: 0 0 0 0; +} + +dl dd { + margin: 0 0 0 1.8em; +} + +/* Title page */ + +#titlepage { + margin: 3em 0 1.8em 0; + padding-bottom: .8em; + border-bottom: 1px solid black; +} + +#titlepage .title { + font-weight: bold; + font-size: 200%; + text-align: center; + padding: 1em 0 2em 0; +} + +#titlepage p { + padding-bottom: 1em; +} + +#titlepage #revision { + padding-bottom: 0em; +} |