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).

2 files changed, 6 insertions, 2 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;
 }