diff options
| author | Zhiming Wang <zmwangx@gmail.com> | 2015-07-17 16:28:52 -0700 |
|---|---|---|
| committer | Zhiming Wang <zmwangx@gmail.com> | 2015-07-17 16:28:52 -0700 |
| commit | 3e7de572d153d91a691c9792c8d3611e0bb8b00f (patch) | |
| tree | 5407033597f214f41da9ddb44ffeae6fb012c358 | |
| parent | effd834bd74c3b6a25ebaf59adcab6bd6d29cbdc (diff) | |
| download | my_new_personal_website-3e7de572d153d91a691c9792c8d3611e0bb8b00f.tar.xz my_new_personal_website-3e7de572d153d91a691c9792c8d3611e0bb8b00f.zip | |
design mobile and narrow window friendly theme
Tested on iPhone 6 Plus (both portrait and landscape).
| -rw-r--r-- | source/css/theme-enlarge.css | 8 | ||||
| -rw-r--r-- | source/css/theme-narrow.css | 31 | ||||
| -rw-r--r-- | source/css/theme.css | 53 | ||||
| -rw-r--r-- | templates/template.html | 12 |
4 files changed, 80 insertions, 24 deletions
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 { diff --git a/templates/template.html b/templates/template.html index 6bf2d9de..9df99064 100644 --- a/templates/template.html +++ b/templates/template.html @@ -30,7 +30,9 @@ $for(header-includes)$ $header-includes$ $endfor$ <link href='/css/normalize.css' media="all" rel="stylesheet" type="text/css"/> -<link href='/css/theme.css' media="all" rel="stylesheet" type="text/css"/> +<link href='/css/theme.css' media="only screen" rel="stylesheet" type="text/css"/> +<link href='/css/theme-narrow.css' media="only screen and (max-width: 980px)" rel="stylesheet" type="text/css"/> +<link href='/css/theme-enlarge.css' media="only screen and (max-width: 980px) and (orientation: portrait)" rel="stylesheet" type="text/css"/> <link href="//fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css"/> <link href="//fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet" type="text/css"/> <script> @@ -45,11 +47,9 @@ ga('send', 'pageview'); </head> <body> <nav> -<div style="height:150px; width:100px; text-align:center;"> -<a href="/"><img src="/img/icon-100.png" alt="blog icon" height="100" width="100" style="padding: 2px 0;"></a> -<div style="padding: 1px 0;"><a href="/"><strong>dl? cmplnts?</strong></a></div> -<div style="font-size: 9pt;">by <a href="https://github.com/zmwangx" target="_blank">Zhiming Wang</a></div> -</div> +<div class="logo"><a href="/"><img src="/img/icon-400.png" alt="blog icon"></a></div> +<div class="title"><a href="/">dl? cmplnts?</a></div> +<div class="author">by <a href="https://github.com/zmwangx" target="_blank">Zhiming Wang</a></div> </nav> <article> $if(title)$ |