Initial commit

10 files changed, 588 insertions, 0 deletions

diff --git a/styles/VollkornBold.ttf b/styles/VollkornBold.ttf
new file mode 100644
index 0000000..04109c8
--- /dev/null
+++ b/styles/VollkornBold.ttf
diff --git a/styles/VollkornBoldItalic.ttf b/styles/VollkornBoldItalic.ttf
new file mode 100644
index 0000000..472b5de
--- /dev/null
+++ b/styles/VollkornBoldItalic.ttf
diff --git a/styles/VollkornItalic.ttf b/styles/VollkornItalic.ttf
new file mode 100644
index 0000000..17e98fe
--- /dev/null
+++ b/styles/VollkornItalic.ttf
diff --git a/styles/VollkornMedium.ttf b/styles/VollkornMedium.ttf
new file mode 100644
index 0000000..0236c13
--- /dev/null
+++ b/styles/VollkornMedium.ttf
diff --git a/styles/VollkornMediumItalic.ttf b/styles/VollkornMediumItalic.ttf
new file mode 100644
index 0000000..5f5dd3e
--- /dev/null
+++ b/styles/VollkornMediumItalic.ttf
diff --git a/styles/VollkornRegular.ttf b/styles/VollkornRegular.ttf
new file mode 100644
index 0000000..b663cfd
--- /dev/null
+++ b/styles/VollkornRegular.ttf
diff --git a/styles/VollkornSemibold.ttf b/styles/VollkornSemibold.ttf
new file mode 100644
index 0000000..b44373c
--- /dev/null
+++ b/styles/VollkornSemibold.ttf
diff --git a/styles/VollkornSemiboldItalic.ttf b/styles/VollkornSemiboldItalic.ttf
new file mode 100644
index 0000000..4e7d4ab
--- /dev/null
+++ b/styles/VollkornSemiboldItalic.ttf
diff --git a/styles/optiks.css b/styles/optiks.css
new file mode 100644
index 0000000..10365e5
--- /dev/null
+++ b/styles/optiks.css
@@ -0,0 +1,533 @@
+/* This file is loaded indirectly[1] by DokuWiki (as specified in styles.ini)
+   and is parsed as LESS. This means it's possible to use LESS directives and
+   that all comments are removed and the file minified.
+
+   NOTE: LESS will fail completely if the syntax isn't right and you'll end up
+         with an unstyled page. Check DokuWiki docs for where to find the
+         errors.
+
+   [1] Automagically included with tpl_metaheaders();
+*/
+
+/* Make sure the page is at least as big as the screen so the background
+   works as expected and doesn't wrap too soon */
+html {
+	height: 100%;
+}
+
+/* The page */
+body {
+	width: 80%;
+	margin-left: auto;
+	margin-right: auto;
+	margin-top: 2em;
+
+	border: 0.1em solid rgb(50, 50, 50);
+	box-shadow: 0 0 1em black;
+
+	/* This, along with the html block, sets the background of
+	   the entire window, not just the contents. Use #page to style
+	   the contents. */
+	background-color: #272727;
+	background-image: url("/lib/tpl/optiks/images/optiks.jpg");
+	background-size: cover;
+	background-position: center;
+}
+
+/* Compact layout for small screens */
+@media (max-width: 45em) {
+	body {
+		margin: 0;
+		width: 100%;
+		background: none;
+	}
+}
+
+/* Hide the search bar on mobile */
+@media (max-width: 30em) {
+	#header-search {
+		display: none;
+	}
+}
+
+/*
+  GENERAL STYLES
+  paragraphs, lists, tables, etc.
+*/
+
+/* Reset stupid margins and paddings, set the font */
+* {
+	margin: 0;
+	padding: 0;
+	font-family: 'Vollkorn', serif;
+}
+
+/* The area between the header and the footer */
+#content {
+	padding-bottom: 0.6em;
+	overflow: auto;
+	padding: 1em;
+	min-height: 10em;
+
+	background-color: white;
+}
+
+/* Considerably less shit typography in regular text */
+p, ul, ol {
+	-webkit-hyphens: auto;
+	-ms-hyphens: auto;
+	hyphens: auto;
+	text-align: justify;
+	text-justify: auto;
+}
+
+/* Spacing between paragraphs */
+p {
+	margin-bottom: 1em;
+}
+
+/* Headers */
+h1, h2, h3, h4, h5, h6 {
+	margin-top: 0.5em;
+	margin-bottom: 0.5em;
+
+	border-bottom: 0.05em solid rgb(128, 128, 128);
+	font-variant: small-caps;
+}
+
+/* #content already has a large padding */
+h1 {
+	margin-top: 0;
+}
+
+/* Lists */
+ul, ol {
+	margin: 1em;
+	margin-left: 1.5em;
+
+	list-style-position: outside;
+}
+
+/* Links */
+a:link {
+	color: #812222;
+	text-decoration: underline;
+}
+
+a:visited {
+	color: #541414;
+	text-decoration: underline;
+}
+
+a:hover {
+	color: #a83939;
+	text-decoration: underline;
+}
+
+a:active {
+	color: #c64949;
+	text-decoration: underline;
+}
+
+/* Uniform links (reset all the stupid variants to a single color) */
+/* FIXME: don't export this to the final CSS, it's only used in preprocessing */
+.uniform-links(@color) {
+	color: @color;
+	text-decoration: none;
+
+	&:link {
+		color: @color;
+		text-decoration: none;
+	}
+
+	&:visited {
+		color: @color;
+		text-decoration: none;
+	}
+
+	&:hover {
+		color: @color;
+		text-decoration: none;
+	}
+
+	&:active {
+		color: @color;
+		text-decoration: none;
+	}
+}
+
+/* Tables */
+table {
+	border-collapse: collapse;
+}
+
+td, th {
+	padding: 0.2em;
+
+	border: 0.1em solid #b2b2b2;
+}
+
+th {
+	background-color: #f0f0f0;
+	font-weight: bold;
+}
+
+dl {
+	margin: 1em;
+}
+
+dt {
+	font-weight: bold;
+}
+
+dd {
+	margin-left: 1em;
+}
+
+/* Text fields */
+input[type="text"], input[type="password"], input[type="email"] {
+	padding: 0.15em;
+	padding-left: 0.25em;
+	padding-right: 0.25em;
+	width: 12em; /* default width */
+
+	border: 0.1em solid rgb(220, 220, 220);
+	border-radius: 0.15em;
+	background: rgb(237,237,237); /* Old browsers */
+	background: -moz-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
+	background: -webkit-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
+	background: linear-gradient(to bottom, rgba(237,237,237,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
+	box-shadow: 0 0 0.2em black;
+}
+
+input::placeholder {
+	font-variant: small-caps;
+	color: rgb(128, 128, 128);
+}
+
+input[type="text"]:hover, input[type="text"]:active,
+input[type="password"]:hover, input[type="password"]:active {
+	background: white;
+}
+
+/* Buttons */
+.optiks-button {
+	padding: 0.1em;
+	padding-left: 0.7em;
+	padding-right: 0.7em;
+	color: white;
+	font-variant: small-caps;
+	text-align: center;
+	text-shadow: 0 0 0.1em black;
+	border: 0.1em solid rgb(95, 95, 95);
+	border-radius: 0.15em;
+	background: rgb(71,71,71); /* Old browsers */
+	background: -moz-linear-gradient(top, rgba(71,71,71,1) 0%, rgba(14,14,14,1) 100%); /* FF3.6-15 */
+	background: -webkit-linear-gradient(top, rgba(71,71,71,1) 0%,rgba(14,14,14,1) 100%); /* Chrome10-25,Safari5.1-6 */
+	background: linear-gradient(to bottom, rgba(71,71,71,1) 0%,rgba(14,14,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#474747', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
+	box-shadow: 0 0 0.2em black;
+
+	&:hover {
+		background: rgb(114,114,114); /* Old browsers */
+		background: -moz-linear-gradient(top, rgba(114,114,114,1) 1%, rgba(79,79,79,1) 100%); /* FF3.6-15 */
+		background: -webkit-linear-gradient(top, rgba(114,114,114,1) 1%,rgba(79,79,79,1) 100%); /* Chrome10-25,Safari5.1-6 */
+		background: linear-gradient(to bottom, rgba(114,114,114,1) 1%,rgba(79,79,79,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#727272', endColorstr='#4f4f4f',GradientType=0 ); /* IE6-9 */
+	}
+
+	&:active {
+		background: rgb(79,79,79); /* Old browsers */
+		background: -moz-linear-gradient(top, rgba(79,79,79,1) 0%, rgba(114,114,114,1) 100%); /* FF3.6-15 */
+		background: -webkit-linear-gradient(top, rgba(79,79,79,1) 0%,rgba(114,114,114,1) 100%); /* Chrome10-25,Safari5.1-6 */
+		background: linear-gradient(to bottom, rgba(79,79,79,1) 0%,rgba(114,114,114,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#727272',GradientType=0 ); /* IE6-9 */
+	}
+}
+
+button {
+	.optiks-button();
+}
+
+/* Used for metadata in image details and some other shit */
+fieldset {
+	padding: 1em;
+}
+
+/*
+  THE HEADER
+*/
+
+/* The header box */
+#header {
+	background-image: url('/lib/tpl/optiks/images/header.jpg');
+	background-size: 100% auto;
+	background-repeat: repeat-y;
+	background-position: left;
+	background-color: #1b1b1a;
+}
+
+/* The box containing the logo image */
+#header-logo {
+	float: left;
+	display: inline-block;
+
+	height: 2em;
+}
+
+/* Fix the image's height to the box's */
+#header-logo > a > img {
+	height: 2em;
+}
+
+/* Search box */
+#dw__search {
+	float: right;
+}
+
+/* Search text field */
+#dw__search > div > input {
+	margin-top: 0.25em;
+	font-size: initial;
+	width: 9em;
+	height: 1.5em;
+
+	color: initial; /* Reset the dark font. */
+}
+
+/* Search button */
+#dw__search > div > button {
+	font-size: initial;
+	height: 1.5em;
+	padding-top: 0;
+	padding-bottom: 0;
+	margin-left: 0.2em;
+}
+
+/* Dropdown menu */
+#header-dropdown {
+	float: right;
+	position: relative;
+	width: 2em;
+	height: 2em;
+	margin-left: 1em;
+
+	/* The icon goes here so it can be changed with CSS for :hover */
+	background-image: url("/lib/tpl/optiks/images/menu.png");
+	background-size: cover;
+
+	&:hover {
+		background-image: url("/lib/tpl/optiks/images/menu-hover.png");
+
+		& > #header-dropdown-content {
+			display: block;
+		}
+	}
+}
+
+/* Dropdown menu's contents, with a dark theme */
+#header-dropdown-content {
+	display: none;
+	position: absolute;
+	top: 1em;
+	right: 0;
+	padding: 0.3em;
+
+	color: white;
+	font-variant: small-caps;
+	border: 0.1em solid #b2b2b2;
+	box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
+	background: rgb(0,0,0); /* Old browsers */
+	background: -moz-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(84,84,84,1) 57%, rgba(0,0,0,1) 58%); /* FF3.6-15 */
+	background: -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 0%,rgba(84,84,84,1) 57%,rgba(0,0,0,1) 58%); /* Chrome10-25,Safari5.1-6 */
+	background: linear-gradient(135deg, rgba(0,0,0,1) 0%,rgba(84,84,84,1) 57%,rgba(0,0,0,1) 58%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+}
+
+/* Show the contents when the button is hovered. */
+#header-dropdown:hover > #header-dropdown-content {
+	display: block;
+}
+
+/* The name and username in "Logged in as..." */
+#header-dropdown-content > bdi {
+	font-weight: bold;
+}
+
+/* Links in the dropdown menu */
+li.action {
+	margin: 0.5em;
+	list-style: none; /* Fuck the bullet point */
+
+	/* The actual link */
+	& > a {
+		display: block;
+		.optiks-button();
+		.uniform-links(#ffffff);
+	}
+}
+
+/* Hide the stupid icons (FIXME: don't put them there in the first place) */
+.action > a > svg {
+	display: none;
+}
+
+/* Force the dropdown to be big enough to fit the search button to the right
+   (rather than below) the text field */
+#header-dropdown-search {
+	white-space: nowrap;
+}
+
+/*
+  THE FOOTER
+*/
+#footer {
+	padding-top: 0.4em;
+	padding-bottom: 0.6em;
+	text-align: center;
+
+	background-color: white;
+	border-top: 0.1em solid rgb(128, 128, 128);
+}
+
+/* Links in the footer (back to top, recent changes, etc.) */
+#footer-buttons > span {
+	padding: 0.2em;
+
+	font-variant: small-caps;
+	font-size: 80%;
+}
+
+/* Text below the links */
+#footer-text {
+	margin-top: 0.5em;
+
+	color: rgb(60, 60, 60);
+	font-size: 70%;
+}
+
+/* Wrap the license in a div and make it smaller so it looks better*/
+#footer-text > div {
+	margin: auto;
+	width: 66%;
+}
+
+/* The license's name */
+.license > bdi {
+	font-weight: bold;
+}
+
+/*
+  DOKUWIKI ELEMENTS in pages
+*/
+
+/* Some list items are wrapped in this shit */
+div.li {
+	display: inline-block;
+}
+
+/* Icons in lists, make sure they're actually fucking aligned with the text */
+.icon {
+	vertical-align: middle;
+}
+
+/* Table of contents */
+#dw__toc {
+	display: inline-block; /* Fit the width to contents */
+	margin: 0.5em;
+	padding: 0.5em;
+
+	border: 0.1em solid rgb(150, 150, 150);
+	border-radius: 0.3em;
+	background: rgb(255,255,255); /* Old browsers */
+	background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(239,239,239,1) 100%); /* FF3.6-15 */
+	background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* Chrome10-25,Safari5.1-6 */
+	background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+	box-shadow: 0 0 0.2em rgb(0, 0, 0, 0.2);
+
+	& > h3 {
+		margin: 0;
+		margin-bottom: 0.5em;
+		text-align: center;
+
+		/* The stupid dash before "Table of contents" */
+		& > strong {
+			display: none;
+		}
+	}
+}
+
+/* Lists inside tables of contents */
+ul.toc {
+	margin-top: 0;
+	margin-bottom: 0;
+
+	font-variant: small-caps;
+}
+
+/* The box around "Create this page," "edit this page," or "show page," defined
+   in this template */
+#content-edit {
+	float: right;
+	margin: 0.5em;
+	margin-right: 0;
+	padding: 0.2em;
+
+	/* Make the link inside look like a button */
+	& > .action {
+		.optiks-button();
+		.uniform-links(#ffffff);
+	}
+}
+
+/* Section edit buttons (or rather their containers) */
+div.secedit {
+	display: inline-block;
+	float: right;
+}
+
+/* Containers for floating images in articles */
+.thumb2 {
+	margin: 1em;
+}
+
+/* Alerts */
+.alert {
+	display: block;
+	clear: both;
+	margin: 0.5em;
+	padding: 0.5em;
+
+	border: 0.1em solid rgb(200, 200, 200);
+	border-radius: 0.2em;
+}
+
+.alert-warning {
+	background-color: rgb(255, 240, 210);
+}
+
+/*
+  THE IMAGE DETAILS PAGE
+*/
+
+/* The image itself */
+.img_detail {
+	width: 100%;
+	height: auto;
+}
+
+/*
+  MISC. DOKUWIKI ELEMENTS
+*/
+
+/* Override Doku's ugly ass random backgrounds in the admin panel */
+fieldset, div.input, div.selection, div.other {
+	background: white !important;
+}
+
+/* Quick fix for unreadable buttons in the page editor */
+.toolbutton {
+	background: white;
+}
diff --git a/styles/vollkorn.css b/styles/vollkorn.css
new file mode 100644
index 0000000..79144cf
--- /dev/null
+++ b/styles/vollkorn.css
@@ -0,0 +1,55 @@
+@font-face {
+	font-family: 'Vollkorn';
+	src: url('VollkornRegular.ttf') format('truetype');
+	font-weight: 400;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Vollkorn';
+	src: url('VollkornItalic.ttf') format('truetype');
+	font-weight: 400;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: 'Vollkorn';
+	src: url('VollkornMedium.ttf') format('truetype');
+	font-weight: 500;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Vollkorn';
+	src: url('VollkornMediumItalic.ttf') format('truetype');
+	font-weight: 500;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: 'Vollkorn';
+	src: url('VollkornSemibold.ttf') format('truetype');
+	font-weight: 700;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Vollkorn';
+	src: url('VollkornSemiboldItalic.ttf') format('truetype');
+	font-weight: 700;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: 'Vollkorn';
+	src: url('VollkornBold.ttf') format('truetype');
+	font-weight: 900;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Vollkorn';
+	src: url('VollkornBoldItalic.ttf') format('truetype');
+	font-weight: 900;
+	font-style: italic;
+}