First commit of the ousia based website architecture

5 files changed, 374 insertions, 0 deletions

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