Add mockup file containing a some introductory text user for testing the website layout for readability, update cssastoecke_rewrite

5 files changed, 247 insertions, 168 deletions

diff --git a/style/footer.less b/style/footer.less
index 51ee7bb..63a3a9a 100644
--- a/style/footer.less
+++ b/style/footer.less
@@ -10,9 +10,9 @@
 footer {
 	overflow: hidden;
 	font-size: 10pt;
-	color: white;
+	color: @color-text-footer;
 	padding: 0;
-	background-color: @color-footer;
+	/* background-color: @color-footer; */
 	padding: 1em 0;
 	line-height: 1.75;
 
diff --git a/style/preamble.less b/style/preamble.less
index d777aed..ea252ba 100644
--- a/style/preamble.less
+++ b/style/preamble.less
@@ -7,9 +7,50 @@
  * International License. <http://creativecommons.org/licenses/by-sa/4.0/>
  */
 
-@color-bg: #fcfcfc;
+/* Import fonts */
+
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: normal;
+	font-weight: 400;
+	src: local('Noto Sans'), local('NotoSans'), url('../fonts/NotoSans.ttf') format('truetype');
+}
+
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: normal;
+	font-weight: 700;
+	src: local('Noto Sans Bold'), local('NotoSans-Bold'), url('../fonts/NotoSansBold.ttf') format('truetype');
+}
+
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: italic;
+	font-weight: 400;
+	src: local('Noto Sans Italic'), local('NotoSans-Italic'), url('../fonts/NotoSansItalic.ttf') format('truetype');
+}
+
+/* Layout */
+
+@layout-width: 40em;
+
+/* Color constants */
+
+@color-light: #999;
+@color-bg: #fcfcfd;
+@color-bg-box: #f3f3f3;
 @color-text: #333;
-@color-main: #dc143c; /* "crimson" */
+@color-text-footer: #f5f5f8;
+@color-main: crimson;
 @color-footer: #333;
-@color-light: #999;
+
+@color-link: #5c3566;
+@color-link-hover: #ad7fa8;
+@color-link-visited: #75507b;
+
+/* Font constants */
+
+@font-main: 'DejaVu Sans', sans-serif;
+@font-monospace: monospace;
+@font-serif: Palatino, serif;
 
diff --git a/style/reset.less b/style/reset.less
index 9ed8bb9..bfb1a75 100644
--- a/style/reset.less
+++ b/style/reset.less
@@ -24,16 +24,6 @@ time, mark, audio, video {
 	vertical-align: baseline;
 }
 
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
-	display: block;
-}
-
-body {
-	line-height: 1;
-}
-
 ol, ul {
 	list-style: none;
 }
diff --git a/style/style.less b/style/style.less
index 7ee3edb..f333d72 100644
--- a/style/style.less
+++ b/style/style.less
@@ -7,29 +7,71 @@
  * International License. <http://creativecommons.org/licenses/by-sa/4.0/>
  */
 
-@import "constants.less";
+@import "preamble.less";
 @import "reset.less";
 @import "typography.less";
-@import "footer.less";
-@import "header.less";
+/*@import "footer.less";
+@import "header.less";*/
 
 /* Import the prism code highlighter stylesheet */
 @import (less) "lib/prism.css";
+@import (less) "lib/prism_osml.css";
 
-span.ipa {
-	color: gray;
+body {
+	background-color: @color-bg;
 }
 
-ol.footnotes {
-	color: @color-light;
-	font-size: 10pt;
+main > section {
+	max-width: @layout-width;
+	margin: 0 auto;
+	padding: 1rem 3rem;
+	vertical-align: top;
 }
 
+/* Responsively move "asides" to the side */
+@media (min-width: (@layout-width + 18em)) {
+
+aside {
+	position: absolute;
+	left: -14rem;
+	max-width: 12rem;
+	text-align: right;
+}
+
+main > section {
+	padding-left: 16rem;
+}
+
+}
+
+/* Responsively increase font size to screen size */
+@media (min-width: 300px) {
+	html {
+		font-size: 10pt;
+	}
+}
+@media (min-width: 500px) {
+	html {
+		font-size: 11pt;
+	}
+}
+@media (min-width: 1400px) {
+	html {
+		font-size: 13pt;
+	}
+}
+@media (min-width: 1900px) {
+	html {
+		font-size: 14pt;
+	}
+}
+
+
 
 /**
  * Source code
  */
-pre {
+/*pre {
 	text-align: left;
 	margin: 1em 0;
 	padding: 1em;
@@ -55,85 +97,14 @@ pre mark {
 	background-color: #ad7fa8;
 	color: white;
 	text-shadow: none;
-}
-
-/**
- * Main text
- */
-
-main section#masthead ul#downloads li a {
-}
+}*/
 
-main section {
-	text-align: justify;
-	-moz-hyphens: auto;
-	hyphens: auto;
-}
-
-.footnoteRef {
-	position: relative;
-	font-size: 85%;
-	top: -0.25em;
-	color: crimson;
-}
-
-.footnote {
-	font-size: 85%;
-	color: gray;
-}
-
-ol.footnotes {
-	clear: both;
-}
-
-/**
- * Masthead
- */
-section.masthead {
-
-	h1 {
-		font-size: 30pt;
-	}
-
-	h2 {
-		font-size: 20pt;
-	}
-
-	.pitch {
-		font-size: 14pt;
-		-moz-hyphens: none;
-		hyphens: none;
-		text-align: left;
-	}
-}
-
-.nav a.button:first-child {
-	background-color: @color-main;
-	font-weight: bold;
-	color: white;
-	width: 14em;
-}
-
-main a.button {
-	text-align: center;
-	display: inline-block;
-	width: 4em;
-	padding: 0.5em 2em;
-	margin: 1em;
-	border-radius: 2px;
-	border: 1px solid @color-main;
-}
-
-main a.button:hover {
-	background-color: @color-main;
-	color: white;
-}
 
 /*
  * Addresses
  */
 
-span.address, span.mail, span.phone {
+/*span.address, span.mail, span.phone {
 	display: block;
 }
 
@@ -152,4 +123,6 @@ img[name=license] {
 
 .column.nav {
 	text-align: center;
-}
+}*/
+
+
diff --git a/style/typography.less b/style/typography.less
index a5c83f9..e875abe 100644
--- a/style/typography.less
+++ b/style/typography.less
@@ -7,72 +7,106 @@
  * International License. <http://creativecommons.org/licenses/by-sa/4.0/>
  */
 
-@font-face {
-	font-family: 'Noto Sans';
-	font-style: normal;
-	font-weight: 400;
-	src: local('Noto Sans'), local('NotoSans'), url('../fonts/NotoSans.ttf') format('truetype');
+/* Main font */
+
+html {
+	font: 12pt / 1.75 @font-main;
+	color: @color-text;
 }
 
-@font-face {
-	font-family: 'Noto Sans';
-	font-style: normal;
-	font-weight: 700;
-	src: local('Noto Sans Bold'), local('NotoSans-Bold'), url('../fonts/NotoSansBold.ttf') format('truetype');
+/* Headers */
+
+h1, h2 {
+	color: @color-main;
 }
 
-@font-face {
-	font-family: 'Noto Sans';
-	font-style: italic;
-	font-weight: 400;
-	src: local('Noto Sans Italic'), local('NotoSans-Italic'), url('../fonts/NotoSansItalic.ttf') format('truetype');
+h1 {
+	font-size: 2.25em;
+	margin: 1.34em 0 0.67em 0;
 }
 
-html {
-	font-family: 'Noto Sans', 'DejaVu Sans', sans-serif;
-	font-size: 12pt;
-	color: @color-text;
-	background-color: @color-footer;
+h2 {
+	font-size: 1.75em;
+	margin: 1.5em 0 .75em 0;
 }
 
-/* Paragraphs and headers */
+h3 {
+	font-weight: bold;
+	font-size: 1.25em;
+	margin: 1.66em 0 .83em 0;
+}
+
+/* Block elements with justification */
 
-main {
-	p { margin: 1.12em 0 }
-	h1 { font-size: 2em; margin: .67em 0 }
-	h2 { font-size: 1.5em; margin: .75em 0 }
-	h3 { font-size: 1.17em; margin: .83em 0 }
+p, blockquote, figcaption {
+	text-align: justify;
+	hyphens: auto;
+	-moz-hyphens: auto;
+	-webkit-hyphens: auto;
 }
 
-h1 {
-	color: @color-main;
+/* Paragraphs */
+
+p {
+	margin: 1.12em 0;
 }
 
-a, a:link, a:visited, a:hover, a:active {
-	color: crimson;
+/* Abbreviations */
+
+abbr {
+	cursor: help;
+	border-bottom: 1px dotted @color-light;
+}
+
+/* Links */
+
+a:link {
+	color: @color-link;
 	text-decoration: none;
-	transition: all 0.25s ease-in;
+}
+
+a:visited {
+	color: @color-link-visited;
 }
 
 a:hover {
-	color: #900000;
+	color: @color-link-hover;
 	text-decoration: underline;
 }
 
-main a:visited, footer a:visited {
-	color: #a40000;
+a[rel=external]:before {
+	content: "↬ ";
 }
 
+/* Display sections relative to use them as an anchor for asides */
+
 section {
-	max-width: 975px;
-	max-width: 60rem;
-	margin: 0 auto;
-	padding: 1rem 3rem;
-	vertical-align: top;
+	position: relative;
+}
+
+/* Annotations: Emphasis and strong */
+
+em {
+	font-style: italic;
+}
+
+strong {
+	font-weight: bold;
+}
+
+/*a, a:link, a:visited, a:hover, a:active {
+	color: crimson;
+	text-decoration: none;
+	transition: all 0.25s ease-in;
+}
+
+a:hover {
+	color: #900000;
+	text-decoration: underline;
 }
 
-header, main {
-	background-color: @color-bg;
+a:visited, a:visited {
+	color: #a40000;
 }
 
 dl {
@@ -102,50 +136,91 @@ dd {
 	width: 65%;
 }
 
-
-
-/**
- * Footnotes
- */
-
 sup {
 	position: relative;
 	font-size: 80%;
 	top: -0.5em;
+}*/
+
+/* Quotes */
+
+blockquote:before {
+	content: "«";
 }
 
-/**
- * Main text
- */
+blockquote:after {
+	content: "»";
+}
+
+blockquote {
+	padding: 0.5em 2em 0.5em 2em;
+	font-style: italic;
+}
+
+q:before {
+	content: "“";
+}
+
+q:after {
+	content: "”";
+}
+
+q {
+	font-style: italic;
+}
+
+/* Preformated text and code */
 
-main, footer {
-	line-height: 1.75;
+pre, code {
+	font-family: @font-monospace;
+	font-size: 97.5%;
 }
 
-main {
+pre {
+	max-height: 30em;
+	overflow-y: auto;
+}
 
-	h1, h2, h3, h4, h5, h6 {
-		color: @color-main;
-		margin-top: 0.25em;
-		margin-bottom: 0.25em;
-	}
+/* Asides */
 
-	h1 {
-		font-size: 200%;
-	}
+aside:before {
+	content: "«";
+}
 
-	h2 {
-		font-size: 150%;
-	}
+aside:after {
+	content: "»";
+}
 
-	h3 {
-		font-size: 125%;
-	}
+aside {
+	text-align: center;
+	color: @color-light;
+	font-family: @font-serif;
+	font-size: 150%;
+	font-style: italic;
+}
 
-	h4, h5, h6 {
-		font-weight: bold;
-	}
+/* Figures */
 
+figure {
+	margin: 1.12em 0;
+}
+
+figure img {
+	width: 100%;
 }
 
+figure figcaption {
+	font-style: italic;
+	color: @color-light;
+}
+
+/* Special constructions */
+
+span.source {
+	font-size: 80%;
+	font-style: normal;
+	display: block;
+}
+
+