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.

1 files changed, 105 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;
+}