1 files changed, 145 insertions, 70 deletions

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