From e0b593c90599009a903d1856555eacf33245005d Mon Sep 17 00:00:00 2001 From: Paweł Redman Date: Thu, 11 Apr 2019 13:32:04 +0200 Subject: Initial commit --- styles/VollkornBold.ttf | Bin 0 -> 125072 bytes styles/VollkornBoldItalic.ttf | Bin 0 -> 105756 bytes styles/VollkornItalic.ttf | Bin 0 -> 101384 bytes styles/VollkornMedium.ttf | Bin 0 -> 125784 bytes styles/VollkornMediumItalic.ttf | Bin 0 -> 109052 bytes styles/VollkornRegular.ttf | Bin 0 -> 117320 bytes styles/VollkornSemibold.ttf | Bin 0 -> 126188 bytes styles/VollkornSemiboldItalic.ttf | Bin 0 -> 109784 bytes styles/optiks.css | 533 ++++++++++++++++++++++++++++++++++++++ styles/vollkorn.css | 55 ++++ 10 files changed, 588 insertions(+) create mode 100644 styles/VollkornBold.ttf create mode 100644 styles/VollkornBoldItalic.ttf create mode 100644 styles/VollkornItalic.ttf create mode 100644 styles/VollkornMedium.ttf create mode 100644 styles/VollkornMediumItalic.ttf create mode 100644 styles/VollkornRegular.ttf create mode 100644 styles/VollkornSemibold.ttf create mode 100644 styles/VollkornSemiboldItalic.ttf create mode 100644 styles/optiks.css create mode 100644 styles/vollkorn.css (limited to 'styles') diff --git a/styles/VollkornBold.ttf b/styles/VollkornBold.ttf new file mode 100644 index 0000000..04109c8 Binary files /dev/null and b/styles/VollkornBold.ttf differ diff --git a/styles/VollkornBoldItalic.ttf b/styles/VollkornBoldItalic.ttf new file mode 100644 index 0000000..472b5de Binary files /dev/null and b/styles/VollkornBoldItalic.ttf differ diff --git a/styles/VollkornItalic.ttf b/styles/VollkornItalic.ttf new file mode 100644 index 0000000..17e98fe Binary files /dev/null and b/styles/VollkornItalic.ttf differ diff --git a/styles/VollkornMedium.ttf b/styles/VollkornMedium.ttf new file mode 100644 index 0000000..0236c13 Binary files /dev/null and b/styles/VollkornMedium.ttf differ diff --git a/styles/VollkornMediumItalic.ttf b/styles/VollkornMediumItalic.ttf new file mode 100644 index 0000000..5f5dd3e Binary files /dev/null and b/styles/VollkornMediumItalic.ttf differ diff --git a/styles/VollkornRegular.ttf b/styles/VollkornRegular.ttf new file mode 100644 index 0000000..b663cfd Binary files /dev/null and b/styles/VollkornRegular.ttf differ diff --git a/styles/VollkornSemibold.ttf b/styles/VollkornSemibold.ttf new file mode 100644 index 0000000..b44373c Binary files /dev/null and b/styles/VollkornSemibold.ttf differ diff --git a/styles/VollkornSemiboldItalic.ttf b/styles/VollkornSemiboldItalic.ttf new file mode 100644 index 0000000..4e7d4ab Binary files /dev/null and b/styles/VollkornSemiboldItalic.ttf differ 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; +} -- cgit