From 010d4071ada9cf1bd1b709b6f8c83b9006c66d37 Mon Sep 17 00:00:00 2001 From: Jeroen Date: Wed, 16 Jul 2014 18:09:46 +0000 Subject: Introducing page template Redable (sic). A template for making it easier to read long texts on a wide range of devices. Using rem and em for font sizes and region widths. Regions: aside, content, right_aside and footer. Advised to only use the middle content region as much as possible (but left and right can be used for indexes if you like). Based on the default template. Maybe later I will add some alternative css's. --- view/css/redable.css | 105 +++++++++++++++++++++++++++++++++++++++++++++++++++ view/php/redable.php | 23 +++++++++++ 2 files changed, 128 insertions(+) create mode 100644 view/css/redable.css create mode 100644 view/php/redable.php diff --git a/view/css/redable.css b/view/css/redable.css new file mode 100644 index 000000000..c0f253d55 --- /dev/null +++ b/view/css/redable.css @@ -0,0 +1,105 @@ +header #banner { + position: fixed; + top: 0; + width: 250px; + margin-left: auto; + margin-right: auto; +} + +main { + display: table; + table-layout: fixed; + position: relative; + width: 100%; + height: 100%; +} + +@media screen and (max-width: 767px) { + main { + left: -14rem !important; + right: -14rem !important; + width: calc(100% + 14rem + 14rem) !important; +} + +#profile-photo-wrapper { +display:none; +} +} + +aside#region_1 { + width: 14rem; + min-width: 14rem; + max-width: 14rem; + display: table-cell; + vertical-align: top; + padding: 65px 7px 0px 7px; + } + +aside#region_1 * { + font-size: 0.8rem; + line-height: 1.45; +} + +aside input[type='text'] { + width: 100%; +} + +section#region_2wrap { + width: 100%; + display: table-cell; + vertical-align: top; + padding: 65px 10px 200px 10px; +} + +section#region_2 { + max-width: 36rem; + margin-left: auto; + margin-right: auto; + vertical-align: top; +} + +section#region_2 * { + text-align: justify; + font-size: 1.15rem; + line-height: 1.55; +} + +section#region_2 p + p { + margin-top: 1.5em; +} + +aside#region_3 { + width: 14rem; + min-width: 14rem; + max-width: 14rem; + display: table-cell; + vertical-align: top; + padding: 65px 7px 0px 7px; +} + +aside#region_3 * { + font-size: 0.8rem; + line-height: 1.45; +} + +h1 { + font-size: 1.39em !important; + text-align: left !important; +} + +h2 { + font-size: 1.18em !important; + text-align: left !important; +} + +h1 *, h2 * { + font-size: 1em !important; +} + +li { + text-align: left !important; +} + +.widget, .pmenu { +border-bottom: none !important; +} diff --git a/view/php/redable.php b/view/php/redable.php new file mode 100644 index 000000000..dfa99ccb3 --- /dev/null +++ b/view/php/redable.php @@ -0,0 +1,23 @@ + + + + <?php if(x($page,'title')) echo $page['title'] ?> + + + + +
+ +
+ +
+
+
+
+
+
+ +
+ + + -- cgit v1.2.3