diff options
| -rw-r--r-- | Makefile | 41 | ||||
| -rw-r--r-- | index.html | 10 | ||||
| -rw-r--r-- | index.osml | 42 | ||||
| -rw-r--r-- | ontology/webpage.osml | 71 | ||||
| -rw-r--r-- | script/ousia.js | 22 | ||||
| -rw-r--r-- | style/constants.less | 15 | ||||
| -rw-r--r-- | style/footer.less | 41 | ||||
| -rw-r--r-- | style/reset.less | 55 | ||||
| -rw-r--r-- | style/style.less | 185 | ||||
| -rw-r--r-- | style/typography.less | 78 | ||||
| -rw-r--r-- | xsl/webpage.xsl | 173 |
11 files changed, 723 insertions, 10 deletions
diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..8e21c8e --- /dev/null +++ b/Makefile @@ -0,0 +1,41 @@ +# Makefile for compiling the Ousía Homepage +# +# (c) Andreas Stöckel, 2015 +# +# This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 +# International License. <http://creativecommons.org/licenses/by-sa/4.0/> + +SOURCE_OSML=$(wildcard *.osml) +TARGET_XML=$(SOURCE_OSML:.osml=.xml) +TARGET_HTML=$(SOURCE_OSML:.osml=.html) + +.PHONY: all +all: style/style.css $(TARGET_XML) $(TARGET_HTML) + +# Build the stylesheet using lessc +# On Fedora you can install lessc using the following commands (as root): +# yum install nodejs npm +# npm install -g less +style/style.css: style/*.less + lessc style/style.less style/style.css #--clean-css="--s1" + +# Compile all osml files to xml +%.xml: %.osml + ousia -F xml -o $@ $< + +# Compile the xml files to html +%.html: %.xml xsl/*.xsl + xsltproc xsl/webpage.xsl $< > $@ + +# Clean script +.PHONY: clean webclean +clean: + rm -f style/*.css + rm -f $(TARGET_HTML) + rm -f $(TARGET_XML) + +webclean: + rm -f style/*.less + rm -f $(TARGET_XML) + rm -f $(SOURCE_OSML) + rm -rf ontology diff --git a/index.html b/index.html deleted file mode 100644 index 6385850..0000000 --- a/index.html +++ /dev/null @@ -1,10 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"/> - <title>Ousía Framework</title> - </head> - <body> - </body> -</html> - diff --git a/index.osml b/index.osml new file mode 100644 index 0000000..2fe66c4 --- /dev/null +++ b/index.osml @@ -0,0 +1,42 @@ +%{ + Ousía Homepage + + (c) Andreas Stöckel, Benjamin Paaßen 2015 + + This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 + International License. <http://creativecommons.org/licenses/by-sa/4.0/> +}% + +\import[ontology]{ontology/webpage} + +\begin{webpage}{Ousía Framework - About} + +\begin{masthead} + \title{Ousía} + \subtitle{Extensible Semantic Markup Framework} + + \begin{pitch} + \paragraph + \ipa{ˈuːziə}{Ousía} represents documents in purely semantic markup with + user definable structure. + + \paragraph + Documents are parsed into an universal intermediate representation, + ready to be converted any format using XSLT + \footnote{Sticking to XML and XSLT is not our plan. We intend to provide + a scriptable output pipeline. But we're not quiet there yet.}. + \end{pitch} + + \begin{nav} + \button#btn_download{Get the source} + \button#btn_faq{FAQ} + \button#btn_docu{Tutorial} + \end{nav} +\end{masthead} + +\begin{section} + \title{Overview} +\end{section} + +\end{webpage} + diff --git a/ontology/webpage.osml b/ontology/webpage.osml new file mode 100644 index 0000000..d92d652 --- /dev/null +++ b/ontology/webpage.osml @@ -0,0 +1,71 @@ +%{ + Ousía Homepage + + (c) Andreas Stöckel, Benjamin Paaßen 2015 + + This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 + International License. <http://creativecommons.org/licenses/by-sa/4.0/> +}% + +\begin{ontology#webpage} + +% Main structure +\struct#webpage[root=true] + \field#title[subtree=true,optional=true] + \childRef[ref=primitive] + \field + \childRef[ref=section] + +% Primitve text +\struct#primitive +\struct#text[isa=primitive,transparent=true] + \primitive[type=string] + +% Section +\struct#section + \field#title[subtree=true,optional=false] + \childRef[ref=primitive] + \field#subtitle[subtree=true,optional=true] + \childRef[ref=primitive] + \field + \childRef[ref=paragraph] + \childRef[ref=subsection] + +% Paragraph +\struct#paragraph[transparent=true] + \field + \childRef[ref=primitive] + +% Subsection +\struct#subsection + \field + \childRef[ref=paragraph] + +% Masthead, Pitch +\struct#masthead[isa=section] +\struct#pitch[isa=subsection] + +% IPA +\struct#ipa[isa=primitive] + \field#pronunciation[subtree=true,optional=false] + \childRef[ref=text] + \field + \childRef[ref=primitive] + +% Footnote +\struct#footnote[isa=primitive] + \field + \childRef[ref=primitive] + +% Nav and buttons +\struct#nav[isa=subsection] + \field + \childRef[ref=button] +\struct#button + \attributes + \attribute#href[type=string,default=#] + \field + \childRef[ref=primitive] + +\end{ontology} + diff --git a/script/ousia.js b/script/ousia.js new file mode 100644 index 0000000..0ef203a --- /dev/null +++ b/script/ousia.js @@ -0,0 +1,22 @@ +// @license magnet:?xt=urn:btih:5305d91886084f776adcf57509a648432709a7c7&dn=x11.txt +/* + * Ousía Website JS + * + * (c) Andreas Stöckel, 2015 + * + * This work is licensed under the X11 (MIT) license. + * http://www.opensource.org/licenses/mit-license.php + */ +(function () { + "use strict"; + var header = document.querySelector("header"); + window.addEventListener("scroll", function () { + if (window.pageYOffset > 40) { + header.className = "scrolled"; + } else { + header.className = ""; + } + }); +})(); +// @license-end + diff --git a/style/constants.less b/style/constants.less new file mode 100644 index 0000000..d777aed --- /dev/null +++ b/style/constants.less @@ -0,0 +1,15 @@ +/* + * Ousía Website CSS + * + * (c) Andreas Stöckel, 2015 + * + * This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 + * International License. <http://creativecommons.org/licenses/by-sa/4.0/> + */ + +@color-bg: #fcfcfc; +@color-text: #333; +@color-main: #dc143c; /* "crimson" */ +@color-footer: #333; +@color-light: #999; + diff --git a/style/footer.less b/style/footer.less new file mode 100644 index 0000000..1a86b18 --- /dev/null +++ b/style/footer.less @@ -0,0 +1,41 @@ +/* + * Ousía Website CSS + * + * (c) Andreas Stöckel, 2015 + * + * This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 + * International License. <http://creativecommons.org/licenses/by-sa/4.0/> + */ + +footer { + overflow: hidden; + font-size: 10pt; + color: white; + padding: 0; + background-color: @color-footer; + padding: 1em 0; + line-height: 1.75; + + a, a:link { + color: white; + } + + a:visited { + color: #CCC; + } + + nav ul h3 { + color: @color-main; + text-transform: uppercase; + font-weight: bold; + } +} + +@media (min-width: 50rem) { + footer nav ul > li { + vertical-align: top; + display: inline-block; + width: 8rem; + margin: 0; + } +} diff --git a/style/reset.less b/style/reset.less new file mode 100644 index 0000000..9ed8bb9 --- /dev/null +++ b/style/reset.less @@ -0,0 +1,55 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + 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; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + diff --git a/style/style.less b/style/style.less new file mode 100644 index 0000000..5b5d2de --- /dev/null +++ b/style/style.less @@ -0,0 +1,185 @@ +/*! + * Ousía Website CSS + * + * (c) Andreas Stöckel, 2015 + * + * This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 + * International License. <http://creativecommons.org/licenses/by-sa/4.0/> + */ + +@import "constants.less"; +@import "reset.less"; +@import "typography.less"; +@import "footer.less"; + +span.ipa { + color: gray; +} + +ol.footnotes { + color: @color-light; + font-size: 10pt; +} + + +/** + * Source code + */ +pre { + text-align: left; + padding: 1em; +} + +pre, code { + font-family: "Source Code Pro"; + background-color: #f3f3f3; + font-size: 11pt; +} + +pre em { + font-style: normal; + font-weight: bold; + color: #204a87; +} + +pre var { + color: #4e9a06; +} + +pre mark { + background-color: #ad7fa8; + color: white; + text-shadow: none; +} + +/** + * Header navigation + */ +header nav ul, header nav ul li { + display: inline-block; +} + +header nav a { + padding: 0.5em 1em; +} + +header nav a:hover { + color: white; + background-color: crimson; + text-decoration: none; +} + +header h1 { + font-weight: normal; + font-size: 12pt; + text-transform: uppercase; + color: gray; + margin: 0; +} + +/** + * 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; +} + + +/* + * For screen + */ + +@media (min-width: 50rem) { + +/** + * Responsive columns + */ +main { + section { + clear: both; + } + + .subsection { + display: block; + float: left; + width: 48.75%; + margin: 0.5em 0 0.5em 2.5%; + } + + .first { + margin-left: 0; + } + + .masthead .subsection.nav { + text-align: center; + } +} + +} + + diff --git a/style/typography.less b/style/typography.less new file mode 100644 index 0000000..336cd9b --- /dev/null +++ b/style/typography.less @@ -0,0 +1,78 @@ + +@import url(http://fonts.googleapis.com/css?family=Noto+Sans:400,400italic,700); +html { + font-family: 'Noto Sans', 'DejaVu Sans', sans-serif; + font-size: 12pt; + color: @color-text; + background-color: @color-footer; +} + +p { + line-height: 1.75; + margin-bottom: 0.5rem; +} + +h1, h2, h3 { + font-weight: normal; + margin-bottom: 1em; +} + +h1 { + color: @color-main; +} + +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; +} + +main a:visited, footer a:visited { + color: #a40000; +} + +section { + max-width: 975px; + max-width: 60rem; + margin: 0 auto; + padding: 1rem 3rem; + vertical-align: top; +} + +header, main { + background-color: @color-bg; +} + +/** + * Footnotes + */ + +sup { + position: relative; + font-size: 80%; + top: -0.5em; +} + +/** + * Main text + */ + +main { + + h1, h2, h3, h4, h5, h6 { + margin-top: 0.25em; + margin-bottom: 0.25em; + } + + h1 { + font-size: 200%; + } + +} + + diff --git a/xsl/webpage.xsl b/xsl/webpage.xsl new file mode 100644 index 0000000..c6310e2 --- /dev/null +++ b/xsl/webpage.xsl @@ -0,0 +1,173 @@ +<?xml version="1.0" encoding="UTF-8"?> + +<xsl:stylesheet + version="1.0" + xmlns:xsl="http://www.w3.org/1999/XSL/Transform" + xmlns:webpage="webpage" + exclude-result-prefixes="webpage"> + <xsl:output method="html" encoding="utf-8" indent="yes" /> + <xsl:strip-space elements="*"/> + <xsl:preserve-space elements="webpage:text"/> + + <xsl:template match="/"> + <xsl:apply-templates select="/document/webpage:webpage"/> + </xsl:template> + + <xsl:template match="/document/webpage:webpage"> + <xsl:text disable-output-escaping='yes'><!DOCTYPE html></xsl:text> + <html> + <head> + <meta charset="utf-8"/> + <link rel="stylesheet" type="text/css" href="style/style.css"/> + <title><xsl:apply-templates select="title/webpage:text"/></title> + </head> + <body lang="en"> + <header> + <section> + <h1>Ousía Framework</h1> + <nav> + <ul> + <li><a href="#">About</a></li> + <li><a href="#">Documentation</a></li> + <li><a href="#">Download</a></li> + </ul> + </nav> + </section> + </header> + <main> + <xsl:apply-templates select="webpage:*"/> + </main> + <footer> + <section> + <nav> + <ul> + <li><h3>Learn</h3> + <ul> + <li><a href="index.html">About</a></li> + <!--<li><a href="#">Tutorial</a></li> + <li><a href="#">FAQ</a></li> + <li><a href="#">Examples</a></li>--> + </ul> + </li> + <li><h3>Get Ousía</h3> + <ul> + <li><a href="download.html">Download</a></li> + <!--<li><a href="#">Repository</a></li>--> + </ul> + </li> + <!--<li><h3>Develop</h3> + <ul> + <li><a href="#">Documentation</a></li> + <li><a href="#">Browse source</a></li> + <li><a href="#">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 at TODO. + </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 type="text/javascript" src="script/ousia.js"/> + </body> + </html> + </xsl:template> + + <!-- Transform masthead and section into a section --> + <xsl:template match="webpage:masthead|webpage:section"> + <section> + <xsl:if test="self::webpage:masthead"> + <xsl:attribute name="class">masthead</xsl:attribute> + </xsl:if> + <xsl:apply-templates select="title"/> + <xsl:apply-templates select="subtitle"/> + <xsl:apply-templates select="webpage:*"/> + + <!-- Gather all footnotes --> + <xsl:if test="descendant::webpage:footnote"> + <ol class="footnotes"> + <xsl:apply-templates select="descendant::webpage:footnote" mode="footnote"/> + </ol> + </xsl:if> + </section> + </xsl:template> + + <!-- Subsections --> + <xsl:template match="webpage:pitch|webpage:nav|webpage:subsection"> + <div> + <xsl:variable name="seqNo"><xsl:number level="any" count="webpage:pitch|webpage:nav|webpage:subsection" format="1"/></xsl:variable> + <xsl:variable name="class">subsection<xsl:if test="self::webpage:pitch"> pitch</xsl:if><xsl:if test="self::webpage:nav"> nav</xsl:if> <xsl:if test="$seqNo = 1"> first</xsl:if></xsl:variable> + <xsl:attribute name="class"> + <xsl:value-of select="$class"/> + </xsl:attribute> + <xsl:apply-templates select="webpage:*"/> + </div> + </xsl:template> + + <!-- Titles and subtitles --> + <xsl:template match="title"> + <xsl:if test="webpage:text"> + <h1><xsl:apply-templates select="webpage:text"/></h1> + </xsl:if> + </xsl:template> + <xsl:template match="subtitle"> + <xsl:if test="webpage:text"> + <h2><xsl:apply-templates select="webpage:text"/></h2> + </xsl:if> + </xsl:template> + + <!-- Paragraphs --> + <xsl:template match="webpage:paragraph"> + <p> + <xsl:apply-templates select="child::*"/> + </p> + </xsl:template> + + <!-- Buttons --> + <xsl:template match="webpage:button"> + <a class="button"> + <xsl:copy-of select="@*" /> + <xsl:apply-templates select="webpage:text"/> + </a> + </xsl:template> + + <!-- IPA --> + <xsl:template match="webpage:ipa"> + <xsl:value-of select="webpage:text"/> + <span class="ipa"> [<xsl:value-of select="pronunciation"/>] </span> + </xsl:template> + + <!-- Footnotes --> + <!-- Adapted from: http://www.microhowto.info/howto/create_a_list_of_numbered_footnotes_using_xslt.html --> + <xsl:template match="webpage:footnote"> + <a> + <xsl:attribute name="name">footnoteref<xsl:number level="any" count="webpage:footnote" format="1"/></xsl:attribute> + <xsl:attribute name="href">#footnote<xsl:number level="any" count="webpage:footnote" format="1"/></xsl:attribute> + <sup><xsl:number level="any" count="webpage:footnote" format="[1]"/></sup> + </a> + </xsl:template> + <xsl:template match="webpage:footnote" mode="footnote"> + <li> + <a> + <xsl:attribute name="name">footnote<xsl:number level="any" count="webpage:footnote" format="1"/></xsl:attribute> + <xsl:attribute name="href">#footnoteref<xsl:number level="any" count="webpage:footnote" format="1"/></xsl:attribute> + <xsl:number level="any" count="webpage:footnote" format="[1]"/> + </a> + <xsl:text> </xsl:text> + <xsl:apply-templates select="webpage:*"/> + </li> + </xsl:template> +</xsl:stylesheet> + |