diff options
Diffstat (limited to 'style')
| -rw-r--r-- | style/footer.less | 4 | ||||
| -rw-r--r-- | style/preamble.less | 47 | ||||
| -rw-r--r-- | style/reset.less | 10 | ||||
| -rw-r--r-- | style/style.less | 139 | ||||
| -rw-r--r-- | style/typography.less | 215 |
5 files changed, 247 insertions, 168 deletions
diff --git a/style/footer.less b/style/footer.less index 51ee7bb..63a3a9a 100644 --- a/style/footer.less +++ b/style/footer.less @@ -10,9 +10,9 @@ footer { overflow: hidden; font-size: 10pt; - color: white; + color: @color-text-footer; padding: 0; - background-color: @color-footer; + /* background-color: @color-footer; */ padding: 1em 0; line-height: 1.75; diff --git a/style/preamble.less b/style/preamble.less index d777aed..ea252ba 100644 --- a/style/preamble.less +++ b/style/preamble.less @@ -7,9 +7,50 @@ * International License. <http://creativecommons.org/licenses/by-sa/4.0/> */ -@color-bg: #fcfcfc; +/* Import fonts */ + +@font-face { + font-family: 'Noto Sans'; + font-style: normal; + font-weight: 400; + src: local('Noto Sans'), local('NotoSans'), url('../fonts/NotoSans.ttf') format('truetype'); +} + +@font-face { + font-family: 'Noto Sans'; + font-style: normal; + font-weight: 700; + src: local('Noto Sans Bold'), local('NotoSans-Bold'), url('../fonts/NotoSansBold.ttf') format('truetype'); +} + +@font-face { + font-family: 'Noto Sans'; + font-style: italic; + font-weight: 400; + src: local('Noto Sans Italic'), local('NotoSans-Italic'), url('../fonts/NotoSansItalic.ttf') format('truetype'); +} + +/* Layout */ + +@layout-width: 40em; + +/* Color constants */ + +@color-light: #999; +@color-bg: #fcfcfd; +@color-bg-box: #f3f3f3; @color-text: #333; -@color-main: #dc143c; /* "crimson" */ +@color-text-footer: #f5f5f8; +@color-main: crimson; @color-footer: #333; -@color-light: #999; + +@color-link: #5c3566; +@color-link-hover: #ad7fa8; +@color-link-visited: #75507b; + +/* Font constants */ + +@font-main: 'DejaVu Sans', sans-serif; +@font-monospace: monospace; +@font-serif: Palatino, serif; diff --git a/style/reset.less b/style/reset.less index 9ed8bb9..bfb1a75 100644 --- a/style/reset.less +++ b/style/reset.less @@ -24,16 +24,6 @@ time, mark, audio, video { 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; } diff --git a/style/style.less b/style/style.less index 7ee3edb..f333d72 100644 --- a/style/style.less +++ b/style/style.less @@ -7,29 +7,71 @@ * International License. <http://creativecommons.org/licenses/by-sa/4.0/> */ -@import "constants.less"; +@import "preamble.less"; @import "reset.less"; @import "typography.less"; -@import "footer.less"; -@import "header.less"; +/*@import "footer.less"; +@import "header.less";*/ /* Import the prism code highlighter stylesheet */ @import (less) "lib/prism.css"; +@import (less) "lib/prism_osml.css"; -span.ipa { - color: gray; +body { + background-color: @color-bg; } -ol.footnotes { - color: @color-light; - font-size: 10pt; +main > section { + max-width: @layout-width; + margin: 0 auto; + padding: 1rem 3rem; + vertical-align: top; } +/* Responsively move "asides" to the side */ +@media (min-width: (@layout-width + 18em)) { + +aside { + position: absolute; + left: -14rem; + max-width: 12rem; + text-align: right; +} + +main > section { + padding-left: 16rem; +} + +} + +/* Responsively increase font size to screen size */ +@media (min-width: 300px) { + html { + font-size: 10pt; + } +} +@media (min-width: 500px) { + html { + font-size: 11pt; + } +} +@media (min-width: 1400px) { + html { + font-size: 13pt; + } +} +@media (min-width: 1900px) { + html { + font-size: 14pt; + } +} + + /** * Source code */ -pre { +/*pre { text-align: left; margin: 1em 0; padding: 1em; @@ -55,85 +97,14 @@ pre mark { background-color: #ad7fa8; color: white; text-shadow: none; -} - -/** - * 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; -} /* * Addresses */ -span.address, span.mail, span.phone { +/*span.address, span.mail, span.phone { display: block; } @@ -152,4 +123,6 @@ img[name=license] { .column.nav { text-align: center; -} +}*/ + + diff --git a/style/typography.less b/style/typography.less index a5c83f9..e875abe 100644 --- a/style/typography.less +++ b/style/typography.less @@ -7,72 +7,106 @@ * International License. <http://creativecommons.org/licenses/by-sa/4.0/> */ -@font-face { - font-family: 'Noto Sans'; - font-style: normal; - font-weight: 400; - src: local('Noto Sans'), local('NotoSans'), url('../fonts/NotoSans.ttf') format('truetype'); +/* Main font */ + +html { + font: 12pt / 1.75 @font-main; + color: @color-text; } -@font-face { - font-family: 'Noto Sans'; - font-style: normal; - font-weight: 700; - src: local('Noto Sans Bold'), local('NotoSans-Bold'), url('../fonts/NotoSansBold.ttf') format('truetype'); +/* Headers */ + +h1, h2 { + color: @color-main; } -@font-face { - font-family: 'Noto Sans'; - font-style: italic; - font-weight: 400; - src: local('Noto Sans Italic'), local('NotoSans-Italic'), url('../fonts/NotoSansItalic.ttf') format('truetype'); +h1 { + font-size: 2.25em; + margin: 1.34em 0 0.67em 0; } -html { - font-family: 'Noto Sans', 'DejaVu Sans', sans-serif; - font-size: 12pt; - color: @color-text; - background-color: @color-footer; +h2 { + font-size: 1.75em; + margin: 1.5em 0 .75em 0; } -/* Paragraphs and headers */ +h3 { + font-weight: bold; + font-size: 1.25em; + margin: 1.66em 0 .83em 0; +} + +/* Block elements with justification */ -main { - p { margin: 1.12em 0 } - h1 { font-size: 2em; margin: .67em 0 } - h2 { font-size: 1.5em; margin: .75em 0 } - h3 { font-size: 1.17em; margin: .83em 0 } +p, blockquote, figcaption { + text-align: justify; + hyphens: auto; + -moz-hyphens: auto; + -webkit-hyphens: auto; } -h1 { - color: @color-main; +/* Paragraphs */ + +p { + margin: 1.12em 0; } -a, a:link, a:visited, a:hover, a:active { - color: crimson; +/* Abbreviations */ + +abbr { + cursor: help; + border-bottom: 1px dotted @color-light; +} + +/* Links */ + +a:link { + color: @color-link; text-decoration: none; - transition: all 0.25s ease-in; +} + +a:visited { + color: @color-link-visited; } a:hover { - color: #900000; + color: @color-link-hover; text-decoration: underline; } -main a:visited, footer a:visited { - color: #a40000; +a[rel=external]:before { + content: "↬ "; } +/* Display sections relative to use them as an anchor for asides */ + section { - max-width: 975px; - max-width: 60rem; - margin: 0 auto; - padding: 1rem 3rem; - vertical-align: top; + position: relative; +} + +/* Annotations: Emphasis and strong */ + +em { + font-style: italic; +} + +strong { + font-weight: bold; +} + +/*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; } -header, main { - background-color: @color-bg; +a:visited, a:visited { + color: #a40000; } dl { @@ -102,50 +136,91 @@ dd { width: 65%; } - - -/** - * Footnotes - */ - sup { position: relative; font-size: 80%; top: -0.5em; +}*/ + +/* Quotes */ + +blockquote:before { + content: "«"; } -/** - * Main text - */ +blockquote:after { + content: "»"; +} + +blockquote { + padding: 0.5em 2em 0.5em 2em; + font-style: italic; +} + +q:before { + content: "“"; +} + +q:after { + content: "”"; +} + +q { + font-style: italic; +} + +/* Preformated text and code */ -main, footer { - line-height: 1.75; +pre, code { + font-family: @font-monospace; + font-size: 97.5%; } -main { +pre { + max-height: 30em; + overflow-y: auto; +} - h1, h2, h3, h4, h5, h6 { - color: @color-main; - margin-top: 0.25em; - margin-bottom: 0.25em; - } +/* Asides */ - h1 { - font-size: 200%; - } +aside:before { + content: "«"; +} - h2 { - font-size: 150%; - } +aside:after { + content: "»"; +} - h3 { - font-size: 125%; - } +aside { + text-align: center; + color: @color-light; + font-family: @font-serif; + font-size: 150%; + font-style: italic; +} - h4, h5, h6 { - font-weight: bold; - } +/* Figures */ +figure { + margin: 1.12em 0; +} + +figure img { + width: 100%; } +figure figcaption { + font-style: italic; + color: @color-light; +} + +/* Special constructions */ + +span.source { + font-size: 80%; + font-style: normal; + display: block; +} + + |