harukin/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
Jeroen 2014-07-16 18:09:46 +00:00
parent 3a31ddea2b
commit 010d4071ad
2 changed files with 128 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
view/css/redable.css Normal file
View File

@ -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;
}

23
view/php/redable.php Normal file
View File

@ -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>