diff options
| -rw-r--r-- | media/Kizil_Hauzen_Bridge_2013.jpg | bin | 0 -> 89811 bytes | |||
| -rw-r--r-- | media/Raffael_058.jpg | bin | 0 -> 66739 bytes | |||
| -rw-r--r-- | mockup/typography_test.html | 261 | ||||
| -rw-r--r-- | style/footer.less | 4 | ||||
| -rw-r--r-- | style/preamble.less | 47 | ||||
| -rw-r--r-- | style/reset.less | 10 | ||||
| -rw-r--r-- | style/style.less | 139 | ||||
| -rw-r--r-- | style/typography.less | 215 |
8 files changed, 508 insertions, 168 deletions
diff --git a/media/Kizil_Hauzen_Bridge_2013.jpg b/media/Kizil_Hauzen_Bridge_2013.jpg Binary files differnew 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 Binary files differnew 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; +} + + |
