summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorBoris Kolpackov <boris@codesynthesis.com>2016-01-26 16:48:35 +0200
committerBoris Kolpackov <boris@codesynthesis.com>2016-01-26 16:48:35 +0200
commitafa169cd0d5e7c5663bde829376b6248b9eba576 (patch)
tree4eba78150972e166207a9271414758d8999b646c
Initial common and intro styles
-rw-r--r--common.css39
-rw-r--r--css-notes.txt34
-rw-r--r--intro.css92
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;
+}