From 6c87ceefb02b2c9a5e016669dbbf21c2cd774f17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christoph=20P=C3=A4per?= <bugzilla@crissov.de>
Date: Thu, 11 Oct 2018 12:02:09 +0200
Subject: [PATCH] display source and rendition side-by-side in large viewports

Fixes #10

This would be a lot simpler with CSS Grid Layout instead of (or perhaps in addition to the class-based grid provided by [Skeleton](http://getskeleton.com)).

```` html
<div class="row">
  <div class="four columns result-names">
    <p><a href="..." target="_blank">...</a> <code class="result-lang">...</code></p>+
  </div>
  <div class="eight columns">
    <pre class=" language-html line-numbers"><code class="language-html">...</code></pre>
    <div class="preview markdown-body">...</div>
  </div>
</div>
````
````
div.row
  div.four.columns.result-names
  div.eight.columns
    pre.language-html.line-numbers
    div.preview.markdown-body
````
## Relevant existing CSS rules
```` css
@media (min-width: 550px) {
	.four.columns {
		width: 30.6666666667%;
	}
	.six.columns {
		width: 48%;
	}
	.eight.columns {
		width: 65.3333333333%
	}
	.column:first-child, .columns:first-child {
		margin-left: 0;
	}
	.column, .columns {
		margin-left: 4%;
	}
}
pre[class*="language-"] {
	margin: .5em 0;
	border-left: 10px solid #358ccb;
}

.markdown-body:before {
	display: table;
	content: "";
}
.markdown-body:after {
	display: table;
	clear: both;
	content: "";
}
````
## New CSS rules
```` css
@media (min-width: 1000px) {
	pre.language-html.line-numbers,
	div.preview.markdown-body {
		margin: 0.5em 4% 1em 0; /* 4% like .columns */
		width: 48%; /* like .six.columns */
		float: left; /* like .columns */
		box-sizing: border-box; /* like .columns */
	}
	pre.language-html.line-numbers {
		max-width: 80ch; /* improve legibility */
	}
	div.preview.markdown-body {
		margin-left: 0; /* like .colums:first-child */
	}
	.markdown-body::before,
	.markdown-body::after {
		display: none;
	}
}
````
---
 css/main.scss | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/css/main.scss b/css/main.scss
index 65491ff..32f1139 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -150,4 +150,23 @@ code .result-lang
 @media (min-width: 550px) {
   .title { font-size: 7.0rem; } 
   .logo { width: 64px; }
-}
\ No newline at end of file
+}
+
+/* show source and rendition side-by-side */
+@media (min-width: 1000px) {
+  pre.language-html.line-numbers,
+  div.preview.markdown-body {
+    margin: 0.5em 4% 1em 0; /* 4% like .columns */
+    width: 48%; /* like .six.columns */
+    float: left; /* like .columns */    box-sizing: border-box; /* like .columns */
+  }
+  pre.language-html.line-numbers {
+    max-width: 80ch; /* improve legibility */
+  }
+  div.preview.markdown-body {
+    margin-left: 0; /* like .colums:first-child */
+  }
+  .markdown-body::before, .markdown-body::after {
+    display: none;
+  }
+}