From 099d45907997446fcbab8672478ef73123becaa3 Mon Sep 17 00:00:00 2001
From: Michael Wallner <mike@php.net>
Date: Thu, 24 Sep 2015 16:48:42 +0200
Subject: [PATCH] better look on wide displays

---
 public/index.css    | 44 +++++++++++++++++++++++++++++++++++---------
 views/layout.phtml  |  2 ++
 views/sidebar.phtml | 10 +++++-----
 3 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/public/index.css b/public/index.css
index e305c7a..9de9a07 100644
--- a/public/index.css
+++ b/public/index.css
@@ -2,6 +2,10 @@
 	font-size: 99.9%;
 }
 
+html, body{
+	height: 100%;
+	min-height: 100%;
+}
 body, code {
 	font-family: Inconsolata, Monospace, 'Courier New', Courier, monospace;
 }
@@ -10,14 +14,21 @@ body {
 	font-size: 1.1em;
 	margin: 0;
 	padding: 0;
-	padding-bottom: 5em;
 	color: #3f3f3f;
 }
 
-body>* {
+div.page {
+	margin: auto;
+	max-width: 1200px;
+	min-height: 100%;
+	padding-bottom: 5em;
+	box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.5);
+}
+
+div.page>* {
 	margin-left: 1em;
 }
-body>ul, body>div>ul {
+div.page>ul, div.page>div>ul {
 	margin-left: 2em;
 }
 
@@ -41,14 +52,15 @@ body>ul, body>div>ul {
 
 .sidebar .edit {
 	display: block;
-	position: absolute;
+	position: relative;
 	top: 2em;
-	right: 0.5em;
+	right: 0;
 	-webkit-transform: rotate(45deg);
 	transform: rotate(45deg);
 	text-decoration: none;
 	font-weight: bold;
 	text-shadow: 0 0 5px red;
+	float: right;
 }
 
 .sidebar .edit a {
@@ -122,6 +134,7 @@ a[href^="http:"]:after, a[href^="https:"]:after {
 
 h1 {
 	line-height: 1.5;
+	margin-left: 0 !important;
 }
 h1 code {
 	font-weight: normal;
@@ -136,6 +149,7 @@ footer, h1, li h3, th {
 
 footer, h1 {
 	margin: 0;
+	max-width: 1200px;
 	padding: 1em;
 }
 
@@ -147,16 +161,16 @@ li h3 {
 	margin: .5em 0 0 0;
 }
 
-body>h3, body>div>h3 {
+div.page>h3, div.page>div>h3 {
 	margin-left: 1.25em;
 }
-body>h4, body>div>h4 {
+div.page>h4, div.page>div>h4 {
 	margin-left: 1.5em;
 }
-body>h5, body>div>h5 {
+div.page>h5, div.page>div>h5 {
 	margin-left: 1.75em;
 }
-body>h6, body>div>h6 {
+div.page>h6, div.page>div>h6 {
 	margin-left: 2em;
 }
 
@@ -192,6 +206,7 @@ footer {
 	bottom: 0;
 	width: 100%;
 	padding: 0;
+	margin: 0 !important;
 }
 
 footer ul {
@@ -230,3 +245,14 @@ dd {
 h1, footer, table, .sidebar, pre>code, li h3 {
 	box-shadow: 0 0 4px #708090;
 }
+
+.gradient {
+background: rgba(254,254,254,1);
+background: -moz-linear-gradient(left, rgba(254,254,254,1) 0%, rgba(254,254,254,1) 20%, rgba(209,209,209,1) 25%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 75%, rgba(209,209,209,1) 75%, rgba(255,255,255,1) 80%, rgba(255,255,255,1) 100%);
+background: -webkit-gradient(left top, right top, color-stop(0%, rgba(254,254,254,1)), color-stop(20%, rgba(254,254,254,1)), color-stop(25%, rgba(209,209,209,1)), color-stop(25%, rgba(255,255,255,1)), color-stop(75%, rgba(255,255,255,1)), color-stop(75%, rgba(209,209,209,1)), color-stop(80%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
+background: -webkit-linear-gradient(left, rgba(254,254,254,1) 0%, rgba(254,254,254,1) 20%, rgba(209,209,209,1) 25%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 75%, rgba(209,209,209,1) 75%, rgba(255,255,255,1) 80%, rgba(255,255,255,1) 100%);
+background: -o-linear-gradient(left, rgba(254,254,254,1) 0%, rgba(254,254,254,1) 20%, rgba(209,209,209,1) 25%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 75%, rgba(209,209,209,1) 75%, rgba(255,255,255,1) 80%, rgba(255,255,255,1) 100%);
+background: -ms-linear-gradient(left, rgba(254,254,254,1) 0%, rgba(254,254,254,1) 20%, rgba(209,209,209,1) 25%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 75%, rgba(209,209,209,1) 75%, rgba(255,255,255,1) 80%, rgba(255,255,255,1) 100%);
+background: linear-gradient(to right, rgba(254,254,254,1) 0%, rgba(254,254,254,1) 20%, rgba(209,209,209,1) 25%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 75%, rgba(209,209,209,1) 75%, rgba(255,255,255,1) 80%, rgba(255,255,255,1) 100%);
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#ffffff', GradientType=1 );
+}
\ No newline at end of file
diff --git a/views/layout.phtml b/views/layout.phtml
index 6cc571b..a967dc5 100644
--- a/views/layout.phtml
+++ b/views/layout.phtml
@@ -19,6 +19,7 @@
 		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 	</head>
 	<body>
+		<div class="page">
 		<?php include __DIR__."/sidebar.phtml" ?>
 		<?php if (isset($exception)) : ?>
 			<?= \mdref\ExceptionHandler::htmlException($exception) ?>
@@ -47,5 +48,6 @@
 		<?php if (isset($baseUrl)) : ?>
 			<script src="index.js"></script>
 		<?php endif; ?>
+		</div>
 	</body>
 </html>
diff --git a/views/sidebar.phtml b/views/sidebar.phtml
index 35647b8..8a3956d 100644
--- a/views/sidebar.phtml
+++ b/views/sidebar.phtml
@@ -1,4 +1,9 @@
 <div class="sidebar">
+	<?php if (isset($entry)) : ?>
+	<div class="edit">
+		<a href="<?= $entry->getEditUrl() ?>">Edit</a>
+	</div>
+	<?php endif; ?>
 	<?php 
 		if (isset($baseUrl) || !isset($entry)) {
 			$up = "./";
@@ -49,10 +54,5 @@
 			<?php endif; ?>
 		</li>
 	</ul>
-	<?php if (isset($entry)) : ?>
-	<div class="edit">
-		<a href="<?= $entry->getEditUrl() ?>">Edit</a>
-	</div>
-	<?php endif; ?>
 </div>
 
-- 
2.30.2