aboutsummaryrefslogtreecommitdiffstats
path: root/view
diff options
context:
space:
mode:
authorJeroen <jeroen@jeroenpraat.nl>2014-07-16 18:09:46 +0000
committerJeroen <jeroen@jeroenpraat.nl>2014-07-16 18:09:46 +0000
commit010d4071ada9cf1bd1b709b6f8c83b9006c66d37 (patch)
tree1d942d640cfe72cf5e0e329841441a60de7ee4ac /view
parent3a31ddea2b516cebe60c6ac096516db8df101fd0 (diff)
downloadvolse-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.
Diffstat (limited to 'view')
-rw-r--r--view/css/redable.css105
-rw-r--r--view/php/redable.php23
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>