diff options
| author | Jeroen <jeroen@jeroenpraat.nl> | 2014-07-16 18:09:46 +0000 |
|---|---|---|
| committer | Jeroen <jeroen@jeroenpraat.nl> | 2014-07-16 18:09:46 +0000 |
| commit | 010d4071ada9cf1bd1b709b6f8c83b9006c66d37 (patch) | |
| tree | 1d942d640cfe72cf5e0e329841441a60de7ee4ac | |
| parent | 3a31ddea2b516cebe60c6ac096516db8df101fd0 (diff) | |
| download | volse-hubzilla-010d4071ada9cf1bd1b709b6f8c83b9006c66d37.tar.gz volse-hubzilla-010d4071ada9cf1bd1b709b6f8c83b9006c66d37.tar.bz2 volse-hubzilla-010d4071ada9cf1bd1b709b6f8c83b9006c66d37.zip | |
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.
| -rw-r--r-- | view/css/redable.css | 105 | ||||
| -rw-r--r-- | view/php/redable.php | 23 |
2 files changed, 128 insertions, 0 deletions
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 @@ +<!DOCTYPE html > +<html> +<head> + <title><?php if(x($page,'title')) echo $page['title'] ?></title> + <script>var baseurl="<?php echo $a->get_baseurl() ?>";</script> + <?php if(x($page,'htmlhead')) echo $page['htmlhead'] ?> +</head> +<body> + <header><?php if(x($page,'header')) echo $page['header']; ?></header> + <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"><?php if(x($page,'nav')) echo $page['nav']; ?></nav> + <main> + <aside id="region_1"><?php if(x($page,'aside')) echo $page['aside']; ?></aside> + <section id="region_2wrap"> + <section id="region_2"><?php if(x($page,'content')) echo $page['content']; ?> + <div id="page-footer"></div> + <div id="pause"></div> + </section> + </section> + <aside id="region_3"><?php if(x($page,'right_aside')) echo $page['right_aside']; ?></aside> + </main> + <footer><?php if(x($page,'footer')) echo $page['footer']; ?></footer> +</body> +</html> |