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

author: Andreas Stöckel <astoecke@techfak.uni-bielefeld.de> 2015-04-18 18:07:48 +0200
committer: Andreas Stöckel <astoecke@techfak.uni-bielefeld.de> 2015-04-18 18:07:48 +0200
commit: 93e25e4b6c6d26a7d0127422fdb91bc50b3eea63 (patch)
tree: 707dc35fb81c562e893461b226247fb56b2b81ee
parent: 9f571b930734aed9af6cea97e5ca0327a8549020 (diff)
8 files changed, 508 insertions, 168 deletions
diff --git a/media/Kizil_Hauzen_Bridge_2013.jpg b/media/Kizil_Hauzen_Bridge_2013.jpg
new file mode 100644
index 0000000..9188f94
--- /dev/null
+++ b/media/Kizil_Hauzen_Bridge_2013.jpg
diff --git a/media/Raffael_058.jpg b/media/Raffael_058.jpg
new file mode 100644
index 0000000..82913a3
--- /dev/null
+++ b/media/Raffael_058.jpg
diff --git a/mockup/typography_test.html b/mockup/typography_test.html
new file mode 100644
index 0000000..832057f
--- /dev/null
+++ b/mockup/typography_test.html
@@ -0,0 +1,261 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<link rel="stylesheet" type="text/css" href="../style/style.css">
+		<title>Ousía Framework - About</title>
+	</head>
+	<body lang="en">
+		<main>
+			<!--<header>
+				<section>
+					<h1>Ousía Framework</h1>
+					<nav>
+						<ul>
+							<li><a href="index.html">About</a></li>
+							<li><a href="download.html">Download</a></li>
+						</ul>
+					</nav>
+				</section>
+			</header>-->
+			<section class="chapter">
+			<h1>What is the Ousía Framework?</h1>
+
+			<figure>
+				<img src="../media/Raffael_058.jpg"/>
+				<figcaption>
+				<span class="source">The School of Athens by Raphael, 1509-1510 <a href="http://commons.wikimedia.org/wiki/File:Raffael_058.jpg" rel="external">(Wikimedia Commons)</a></span>
+				Ousía (οὐσία) is a term used by ancient greek philosophers to 
+				describe <q>The entirety of constant features, based on which 
+				objects can be defined</q>.</figcaption>
+			</figure>
+
+			<p>Let's start with the mandatory one-sentence sales-pitch answer to
+			the above question:</p>
+
+			<blockquote>Ousía is a framework for representing documents in a
+			user extensible markup language, allowing transformation to a
+			a variety of output formats.</blockquote>
+
+			<p>There you go!</p>
+
+			<p>Still confused and unsure what Ousía is and what you can do with
+			it? So are we. Read on to be enlightened!</p>
+
+			<h2>What Ousía is <em>not</em></h2>
+
+			<p>Whenever we're asked what Ousía is, we have a hard time
+			giving a short and precise answer. This is not because Ousía is
+			overly complicated – the answer just very much depends on the
+			direction from which you look at Ousía.</p>
+
+			<p>To avoid any misconceptions, let's start answering the easier
+			question: What Ousia is <em>not</em>. If you don't know the
+			technologies we refer to here, you can safely skip these sections.
+			</p>
+
+			<section class="subsection">
+			<h3>Ousía is not LaTeX</h3>
+
+			<aside>Ousía is not a typesetter. It lets you define the meaning of
+			your document, and not what it looks like.</aside>
+
+			<p>You may have seen examples of documents written in the Ousía
+			Markup Language and thought “Well, that's just LaTeX!”. Rest
+			assured, Ousía is nothing like that. Yes, one of our formats looks a 
+			little bit like TeX, but, you know, any resemblance to real persons, 
+			living or dead, is purely coincidential.</p>
+
+			<p>TeX is a typesetter. It is a programming language aimed at 
+			controlling how text is fitted onto a printed page, merely
+			automating a job that has been
+			<a rel="external" href="http://en.wikipedia.org/wiki/Typesetting">done manually for 
+			centuries</a>. And LaTeX is a bunch of macros for authoring TeX
+			documents in a less awkward way.</p>
+
+			<p>Ousía knows nothing about typesetting. It doesn't even know what
+			medium your document will end up on. Ousía is for describing the
+			content of your document. Nothing more.</p>
+			</section>
+
+			<section class="subsection">
+			<h3>Ousía is not an editor</h3>
+
+			<p>Ousía is not an editor application. Ousía documents are written
+			in one of two markup languages (<abbr title="Ousía Semantic Markup Language">OSML</abbr> or <abbr title="Ousía Semantic XML">OSXML</abbr>) which
+			basically are plain text files. These files are then handed to an
+			application called <code class="language-bash">ousia</code> that
+			will parse them, check for errors and transform them to another
+			format.</p>
+
+			<p>There may be special editors that help you writing Ousía
+			documents or that use the underlying program library 
+			<code>libousia</code> to provide a more convenient editing
+			experience, but this doesn't change the bigger picture.</p>
+			</section>
+
+			<section class="subsection">
+			<h3>Ousía does not replace Semantic Web technologies</h3>
+			<figure>
+				<img src="../media/Kizil_Hauzen_Bridge_2013.jpg"/>
+				<figcaption>
+				<span class="source">Kizil Hauzen Bridge, Iran, 2013 <a href="http://commons.wikimedia.org/wiki/File:Kizil_Hauzen_Bridge_2013.jpg" rel="external">(Wikimedia Commons)</a></span>
+				We aim at building a bridge to end the seperation of the 
+				ordinary user from the the power of the Semantic Web, there,
+				awaiting them on the other side.</figcaption>
+			</figure>
+
+			<aside>Ousía makes the Semantic Web approachable for muggles.</aside>
+
+			<p>It is possible (though unlikely, they are a rare species)
+			that you are a Semantic Web expert: You know all three dialects of
+			<abbr title="Web Ontology Language">OWL</abbr>, write your
+			love-letters in <abbr title="Resource Description Framework">RDF</abbr> 
+			and transform vegetables into supper using <abbr title="Extensible Stylesheet Language Transformations">XSLT</abbr>, just to devour it with your
+			SPARQL powers.</p>
+
+			<p>In that case you'll very likely say: <q>I have everything I need! 
+			Leave my standards alone! They are mine, all mine! My precious!</q></p>
+
+			<p>Well, fear not! We're there to help. We too believe the Semantic
+			Web is great, but we want to allow everyone to write documents
+			with semantic markup. We've designed Ousía to be as simple as
+			possible for the end-user. It will be possible to export Ousía 
+			ontologies and documents to all those shiny, complex,
+			incomprehensibly powerful W3C standards. Promised.</p>
+			</section>
+
+			<section class="section">
+			<h2>Semantic Markup unleashed</h2>
+
+			<p>In this section we will skim over a few examples of how Ousía can
+			be used, giving you a quick impression.</p>
+
+			<section class="subsection">
+			<h3>Express what you mean</h3>
+			<p>One aspect of Ousía is its <dfn>document markup language</dfn>.
+			It allows you to write the text of your document while attaching
+			additonal information to the text using special <dfn>commands</dfn>.
+			</p>
+
+			<p>Let's assume you wanted to write a book (e.g. <a rel="external" href="https://www.gutenberg.org/ebooks/74">The Adventures of Tom Sawyer</a> by Samuel Langhorne Clemens alias Mark Twain). You could start writing it down like this:</p>
+						<pre><code class="language-osml">
+                THE ADVENTURES OF TOM SAWYER
+                             by
+                         Mark Twain
+                 (Samuel Langhorne Clemens)
+
+PREFACE
+
+Most of the adventures recorded in this book really occurred;
+one or two were experiences of my own, the rest those of boys
+who were schoolmates of mine. Huck Finn is drawn from life;
+Tom Sawyer also, but not from an individual—he is a
+combination of the characteristics of three boys whom I knew,
+and therefore belongs to the composite order of architecture.
+</code></pre>
+
+			<pre><code class="language-osml">
+\import[ontology]{book} % We want to write a book
+\import[ontology]{novel} % We want to do some novel writing
+
+\begin{book}[lang=en]{The Adventures of Tom Sawyer}
+	% Add some meta-information about the book at hand
+	\begin{meta}
+		\author[realname]{
+			\name{
+				\first{Samuel}
+				\middle{Langhorne}
+				\last{Clemens}
+			}
+			\name[alias]{
+				\first{Mark}
+				\last{Twain}
+			}
+		}
+		\published{1876}
+	\end{meta}
+
+	% Define the characters that occur in the book -- we can
+	% later reference them by their name ("hashtag")
+	\begin{characters}
+		\def#hf{
+			\name{
+				\first{Huckleberry}
+				\first[short]{Huck}
+				\last{Finn}
+			}
+		}
+		\def#ts{
+			\name{
+				\first{Thomas}
+				\first[short]{Tom}
+				\last{Sawyer}
+			}
+		}
+	\end{characters}
+
+	% Start of the actual content -- we can annotate certain
+	% parts of the document to reference one of the characters
+	% defined above
+	\begin{preface}
+		Most of the adventures recorded in this book really
+		occurred; one or two were experiences of my own, the
+		rest those of boys who were schoolmates of mine.
+		::{hf}Huck Finn:: is drawn from life; ::{ts}Tom
+		Sawyer:: also, but not from an individual—he is a
+		combination of the characteristics of three boys whom
+		I knew, and therefore belongs to the composite order
+		of architecture.
+	\end{preface}
+\end{book}
+</code></pre>
+			</section>
+			</section>
+			</section>
+		</main>
+		<!--<footer>
+			<section>
+			<nav>
+				<ul>
+					<li>
+						<h3>Learn</h3>
+						<ul>
+							<li><a href="index.html">About</a></li>
+						</ul>
+					</li>
+					<li>
+						<h3>Get Ousía</h3>
+						<ul>
+							<li><a href="download.html">Download</a></li>
+						</ul>
+					</li>
+					<li>
+						<h3>Develop</h3>
+						<ul>
+							<li><a href="https://gitlab.com/ousia-framework/ousia">GitLab</a></li>
+							<li><a href="https://gitlab.com/ousia-framework/ousia/tree/master">Browse source</a></li>
+							<li><a href="https://gitlab.com/ousia-framework/ousia/issues">Bug tracker</a></li>
+						</ul>
+					</li>
+					<li>
+						<h3>Legal</h3>
+						<ul>
+							<li><a href="impressum.html">Impressum</a></li>
+							<li><a href="license.html">License</a></li>
+						</ul>
+					</li>
+				</ul>
+			</nav>
+			</section>
+			<section id="copyright">
+				<p>Ousía – Extensible Semantic Markup Framework (c) 2015 Andreas Stöckel, Benjamin Paaßen</p>
+				<p>Unless noted otherwise the content of this website (including, but not limited to text, images, markup and stylesheets) is licensed under the <a href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>. The uncompiled source code of the website is available <a href="download.html">here</a>.</p>
+				<p>This website was made using <a href="http://git-scm.com/">git</a>, <a href="http://lesscss.org/">Less</a>, <a href="http://ousia-framework.org/">Ousía</a> and <a href="http://xmlsoft.org/libxslt/">xsltproc</a>.</p>
+			</section>
+		</footer>-->
+		<script src="../script/ousia.js"></script>
+	</body>
+</html>
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;
+}
+
+
author	Andreas Stöckel <astoecke@techfak.uni-bielefeld.de>	2015-04-18 18:07:48 +0200
committer	Andreas Stöckel <astoecke@techfak.uni-bielefeld.de>	2015-04-18 18:07:48 +0200
commit	93e25e4b6c6d26a7d0127422fdb91bc50b3eea63 (patch)
tree	707dc35fb81c562e893461b226247fb56b2b81ee
parent	9f571b930734aed9af6cea97e5ca0327a8549020 (diff)