diff options
Diffstat (limited to 'style')
| -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 |
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%; + } + +} + + |