From 3e7de572d153d91a691c9792c8d3611e0bb8b00f Mon Sep 17 00:00:00 2001
From: Zhiming Wang <zmwangx@gmail.com>
Date: Fri, 17 Jul 2015 16:28:52 -0700
Subject: design mobile and narrow window friendly theme

Tested on iPhone 6 Plus (both portrait and landscape).
---
 source/css/theme-enlarge.css |  8 +++++++
 source/css/theme-narrow.css  | 31 ++++++++++++++++++++++++++
 source/css/theme.css         | 53 +++++++++++++++++++++++++++++---------------
 3 files changed, 74 insertions(+), 18 deletions(-)
 create mode 100644 source/css/theme-enlarge.css
 create mode 100644 source/css/theme-narrow.css

(limited to 'source')

diff --git a/source/css/theme-enlarge.css b/source/css/theme-enlarge.css
new file mode 100644
index 00000000..7fbfb203
--- /dev/null
+++ b/source/css/theme-enlarge.css
@@ -0,0 +1,8 @@
+body {
+    font-size: 20pt;
+}
+
+nav div.logo {
+    height: 300px;
+    width: 300px;
+}
diff --git a/source/css/theme-narrow.css b/source/css/theme-narrow.css
new file mode 100644
index 00000000..8f3e5ecf
--- /dev/null
+++ b/source/css/theme-narrow.css
@@ -0,0 +1,31 @@
+nav {
+    position: static;
+    padding: 5% 0 0 0;
+    text-align: center;
+    height: 100%;
+    width: 100%;
+}
+
+nav div {
+    text-align: center;
+    margin: auto;
+}
+
+nav div.logo {
+    height: 200px;
+    width: 200px;
+    padding: 2px 0;
+}
+
+nav div.title, div.author {
+    height: 0;
+    width: 0;
+    visibility: hidden;
+    pointer-events: none;
+}
+
+article {
+    position: static;
+    width: 80%;
+    padding: 0 10%;
+}
diff --git a/source/css/theme.css b/source/css/theme.css
index cbcb6750..bd34d434 100644
--- a/source/css/theme.css
+++ b/source/css/theme.css
@@ -1,12 +1,33 @@
 body {
     color: #333;
-    font-family: "PT Serif", serif
+    font-family: "PT Serif", serif;
+    font-size: 11pt;
 }
 
 nav {
     position: fixed;
     left: 5%;
     top: 10%;
+    height: 150px;
+    width: 100px;
+}
+
+nav div {
+    text-align: center;
+}
+
+nav div.logo {
+    padding: 2px 0;
+}
+
+nav div.title {
+    font-size: 16px;
+    font-weight: bold;
+    padding: 1px 0;
+}
+
+nav div.author {
+    font-size: 12px;
 }
 
 nav a {
@@ -16,32 +37,28 @@ nav a {
 article {
     position: absolute;
     width: 50%;
-    left: 20%;
-    padding: 5%;
-    font-size: 11pt;
+    padding: 5% 0;
+    left: 25%;
+    font-size: 1em;
     text-align: justify;
 }
 
 article code {
-    font-size: 10.5pt;
+    font-size: 0.95em;
 }
 
 h1.title {
     text-align: center;
-    font-size: 18pt;
-}
-
-h1.title code {
-    font-size: 18pt;
+    font-size: 1.65em;
 }
 
 h2 {
     text-align: center;
-    font-size: 14pt;
+    font-size: 1.27em;
 }
 
 h2.meta {
-    font-size: 11pt;
+    font-size: 1em;
     font-weight: normal;
     font-style: italic;
 }
@@ -51,7 +68,7 @@ h2.toc {
 }
 
 h3 {
-    font-size: 12pt;
+    font-size: 1.1em;
 }
 
 code {
@@ -72,7 +89,7 @@ pre[class*=sourceCode] {
 }
 
 pre code {
-    font-size: 10pt;
+    font-size: 0.91em;
 }
 
 .line-number {
@@ -102,7 +119,7 @@ blockquote {
 }
 
 div.footnotes {
-    font-size: 10pt;
+    font-size: 0.91em;
 }
 
 div.footnotes p {
@@ -110,7 +127,7 @@ div.footnotes p {
 }
 
 div.footnotes code {
-    font-size: 9.5pt;
+    font-size: 0.87em;
 }
 
 img {
@@ -123,11 +140,11 @@ img {
 
 .figure .caption {
     text-align: center;
-    font-size: 10pt;
+    font-size: 0.91em;
 }
 
 .figure .caption code {
-    font-size: 9.5pt;
+    font-size: 0.87em;
 }
 
 a {
-- 
cgit v1.2.1