From 93e25e4b6c6d26a7d0127422fdb91bc50b3eea63 Mon Sep 17 00:00:00 2001 From: Andreas Stöckel Date: Sat, 18 Apr 2015 18:07:48 +0200 Subject: Add mockup file containing a some introductory text user for testing the website layout for readability, update css --- media/Kizil_Hauzen_Bridge_2013.jpg | Bin 0 -> 89811 bytes media/Raffael_058.jpg | Bin 0 -> 66739 bytes mockup/typography_test.html | 261 +++++++++++++++++++++++++++++++++++++ style/footer.less | 4 +- style/preamble.less | 47 ++++++- style/reset.less | 10 -- style/style.less | 139 ++++++++------------ style/typography.less | 215 ++++++++++++++++++++---------- 8 files changed, 508 insertions(+), 168 deletions(-) create mode 100644 media/Kizil_Hauzen_Bridge_2013.jpg create mode 100644 media/Raffael_058.jpg create mode 100644 mockup/typography_test.html diff --git a/media/Kizil_Hauzen_Bridge_2013.jpg b/media/Kizil_Hauzen_Bridge_2013.jpg new file mode 100644 index 0000000..9188f94 Binary files /dev/null and b/media/Kizil_Hauzen_Bridge_2013.jpg differ diff --git a/media/Raffael_058.jpg b/media/Raffael_058.jpg new file mode 100644 index 0000000..82913a3 Binary files /dev/null and b/media/Raffael_058.jpg differ 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 @@ + + + + + + + + Ousía Framework - About + + +
+ +
+

What is the Ousía Framework?

+ +
+ +
+ The School of Athens by Raphael, 1509-1510 (Wikimedia Commons) + Ousía (οὐσία) is a term used by ancient greek philosophers to + describe The entirety of constant features, based on which + objects can be defined.
+
+ +

Let's start with the mandatory one-sentence sales-pitch answer to + the above question:

+ +
Ousía is a framework for representing documents in a + user extensible markup language, allowing transformation to a + a variety of output formats.
+ +

There you go!

+ +

Still confused and unsure what Ousía is and what you can do with + it? So are we. Read on to be enlightened!

+ +

What Ousía is not

+ +

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.

+ +

To avoid any misconceptions, let's start answering the easier + question: What Ousia is not. If you don't know the + technologies we refer to here, you can safely skip these sections. +

+ +
+

Ousía is not LaTeX

+ + + +

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.

+ +

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 + done manually for + centuries. And LaTeX is a bunch of macros for authoring TeX + documents in a less awkward way.

+ +

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.

+
+ +
+

Ousía is not an editor

+ +

Ousía is not an editor application. Ousía documents are written + in one of two markup languages (OSML or OSXML) which + basically are plain text files. These files are then handed to an + application called ousia that + will parse them, check for errors and transform them to another + format.

+ +

There may be special editors that help you writing Ousía + documents or that use the underlying program library + libousia to provide a more convenient editing + experience, but this doesn't change the bigger picture.

+
+ +
+

Ousía does not replace Semantic Web technologies

+
+ +
+ Kizil Hauzen Bridge, Iran, 2013 (Wikimedia Commons) + 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.
+
+ + + +

It is possible (though unlikely, they are a rare species) + that you are a Semantic Web expert: You know all three dialects of + OWL, write your + love-letters in RDF + and transform vegetables into supper using XSLT, just to devour it with your + SPARQL powers.

+ +

In that case you'll very likely say: I have everything I need! + Leave my standards alone! They are mine, all mine! My precious!

+ +

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.

+
+ +
+

Semantic Markup unleashed

+ +

In this section we will skim over a few examples of how Ousía can + be used, giving you a quick impression.

+ +
+

Express what you mean

+

One aspect of Ousía is its document markup language. + It allows you to write the text of your document while attaching + additonal information to the text using special commands. +

+ +

Let's assume you wanted to write a book (e.g. The Adventures of Tom Sawyer by Samuel Langhorne Clemens alias Mark Twain). You could start writing it down like this:

+

+                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.
+
+ +

+\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}
+
+
+
+
+
+ + + + 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. */ -@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. */ -@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. */ -@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; +} + + -- cgit v1.2.3