diff options
| author | Zhiming Wang <zmwangx@gmail.com> | 2015-07-26 18:55:25 -0700 |
|---|---|---|
| committer | Zhiming Wang <zmwangx@gmail.com> | 2015-07-26 18:55:25 -0700 |
| commit | b89ff82dad44b4a6a87e62dff3c71bcb7ea3cca3 (patch) | |
| tree | bb28ba261c8004b5842fb1cf94cb25028fdc1223 | |
| parent | 1058dcab20b3a4ab5bd48097978c2a2931fff722 (diff) | |
| download | my_new_personal_website-b89ff82dad44b4a6a87e62dff3c71bcb7ea3cca3.tar.xz my_new_personal_website-b89ff82dad44b4a6a87e62dff3c71bcb7ea3cca3.zip | |
adjust content width for different window widths
New:
* Greater than 1440px: load theme-wide.css, content width: 50%;
* Between 1024 and 1440px: standard theme.css, content width: 60%;
* Lower than 1024px: load theme-narrow.css, content width: 90% (and
floating nav element moves up to page top to make space).
| -rw-r--r-- | source/css/theme-wide.css | 4 | ||||
| -rw-r--r-- | source/css/theme.css | 4 | ||||
| -rw-r--r-- | templates/template.html | 3 |
3 files changed, 8 insertions, 3 deletions
diff --git a/source/css/theme-wide.css b/source/css/theme-wide.css new file mode 100644 index 00000000..e981c014 --- /dev/null +++ b/source/css/theme-wide.css @@ -0,0 +1,4 @@ +article { + width: 50%; + left: 25%; +} diff --git a/source/css/theme.css b/source/css/theme.css index c93f2877..6b81de32 100644 --- a/source/css/theme.css +++ b/source/css/theme.css @@ -46,9 +46,9 @@ nav a { article { position: absolute; - width: 50%; + width: 60%; padding: 5% 0; - left: 25%; + left: 20%; font-size: 1em; text-align: justify; } diff --git a/templates/template.html b/templates/template.html index 69b5ba97..6d28a581 100644 --- a/templates/template.html +++ b/templates/template.html @@ -32,7 +32,8 @@ $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-narrow.css' media="only screen and (max-width: 980px)" rel="stylesheet" type="text/css"/> +<link href='/css/theme-wide.css' media="only screen and (min-width: 1441px)" rel="stylesheet" type="text/css"/> +<link href='/css/theme-narrow.css' media="only screen and (max-width: 1023px)" rel="stylesheet" type="text/css"/> <link href='/css/print.css' media="print" 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"/> |