From db9090f75fc2696b31dfdf8eb5e2a5f8eaad6e7e Mon Sep 17 00:00:00 2001 From: Patrick Spek Date: Thu, 16 Aug 2018 01:04:34 +0200 Subject: Update CSS --- css/custom/blockquotes.less | 18 +++++++++ css/custom/helpers.less | 5 +++ css/custom/navigation.less | 30 ++++++++++++++ css/formats/asciidoc.less | 45 +++++++++++++++++++++ css/main.less | 99 +++++---------------------------------------- css/variables.less | 11 +++++ 6 files changed, 119 insertions(+), 89 deletions(-) create mode 100644 css/custom/blockquotes.less create mode 100644 css/custom/helpers.less create mode 100644 css/custom/navigation.less create mode 100644 css/formats/asciidoc.less create mode 100644 css/variables.less (limited to 'css') diff --git a/css/custom/blockquotes.less b/css/custom/blockquotes.less new file mode 100644 index 0000000..3984472 --- /dev/null +++ b/css/custom/blockquotes.less @@ -0,0 +1,18 @@ +@import "../variables.less"; + +.quoteblock { + width: 90%; + margin: 0 auto; + border-left: double black; + padding: 0.5em; + background-color: @blockBackgroundColor; + + blockquote { + font-style: italic; + } + + div.attribution { + text-align: right; + margin-right: 1em; + } +} diff --git a/css/custom/helpers.less b/css/custom/helpers.less new file mode 100644 index 0000000..2c4d80b --- /dev/null +++ b/css/custom/helpers.less @@ -0,0 +1,5 @@ +@import "../variables.less"; + +.center { + text-align: center; +} diff --git a/css/custom/navigation.less b/css/custom/navigation.less new file mode 100644 index 0000000..9c9ef4e --- /dev/null +++ b/css/custom/navigation.less @@ -0,0 +1,30 @@ +@import "../variables.less"; + +// Navigation bar +nav { + padding-bottom: 8px; + border-bottom: double @bodyTextColor; + text-align: center; + font-family: Sans; + + a, a:visited { + margin: 0 0.5em; + font-size: 24px; + text-decoration: none; + color: @bodyTextColor; + } + + .brand-name { + text-align: center; + display: block; + font-weight: bold; + font-size: 32px; + color: @bodyTextColor; + margin-bottom: 8px; + } +} + +// Generic links +a, a:visited { + color: @linkColor; +} diff --git a/css/formats/asciidoc.less b/css/formats/asciidoc.less new file mode 100644 index 0000000..89dfcb2 --- /dev/null +++ b/css/formats/asciidoc.less @@ -0,0 +1,45 @@ +@import "../variables.less"; + +.toc { + font-weight: bold; + + ul { + font-weight: normal; + list-style-type: decimal; + } +} + +.admonitionblock { + background-color: @blockBackgroundColor; + border: 1px solid @blockBorderColor; + margin: 0.5em auto 1.75em auto; + width: 90%; + padding: 0.5em; + + table { + td.icon { + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); + font-size: 1.5em; + + div.title { + margin: 0 1em; + } + } + + td.content { + padding: 0 1.125em; + border-left: 1px solid #ddd; + } + } +} + +div#footnotes { + font-size: smaller; + + hr { + margin-top: 2em; + width: 80%; + text-align: left; + color: @blockBorderColor; + } +} diff --git a/css/main.less b/css/main.less index 199ef30..21f7a8e 100644 --- a/css/main.less +++ b/css/main.less @@ -1,21 +1,13 @@ -@bodybgColor: #fefefe; -@bodyTextColor: #454545; - -// Link Colors -@linkColor: #07a; -@linkVisitedColor: #07a; -@linkVisitedInvertedColor: #ac5a82; -// =============== - -@wrongColor: #c0392b; -@shittyBlue: #0000EE; -@shittyViolet: #551A8B; -@motherfuckingColor: #16a085; -@blockQuoteColor: #456; -@openQuoteColor: #666; +@import "./variables.less"; + +@import "./custom/blockquotes.less"; +@import "./custom/helpers.less"; +@import "./custom/navigation.less"; + +@import "./formats/asciidoc.less"; html { - background-color: @bodybgColor; + background-color: @bodyBackgroundColor; } body { @@ -32,33 +24,6 @@ small { font-size: 0.7em; } -nav { - padding-bottom: 8px; - border-bottom: double @bodyTextColor; - text-align: center; - font-family: Sans; - - a, a:visited { - margin: 0 0.5em; - font-size: 24px; - text-decoration: none; - color: @bodyTextColor; - } - - .brand-name { - text-align: center; - display: block; - font-weight: bold; - font-size: 32px; - color: @bodyTextColor; - margin-bottom: 8px; - } -} - -a, a:visited { - color: @linkColor; -} - li p { margin: 0; } @@ -67,57 +32,13 @@ table { width: 100%; } -blockquote{ - color: @blockQuoteColor; - margin-left: 0; - margin-top: 2em; - margin-bottom: 2em; - - span{ - float: left; - margin-left: 1rem; - padding-top: 1rem; - } - - author{ - display: block; - clear: both; - font-size: 0.6em; - margin-left: 2.4rem; - font-style: oblique; - - &:before{ - content: "- "; - margin-right: 1em; - } - } - - &::before{ - font-family: "Times New Roman", Times, Arial; - color: @openQuoteColor; - content: open-quote; - font-size: 2.2em; - font-weight: 600; - float: left; - margin-top: 0em; - margin-right: 0.2rem; - width: 1.2rem; - } - - &::after{ - content: ""; - display: block; - clear: both; - } -} - pre.pygments { - border: double @openQuoteColor; + border: 2px solid @blockBorderColor; padding: 8px; } code { - background-color: #eee; + background-color: @blockBackgroundColor; padding: 2px; } diff --git a/css/variables.less b/css/variables.less new file mode 100644 index 0000000..88347cf --- /dev/null +++ b/css/variables.less @@ -0,0 +1,11 @@ +// Main site colors +@bodyBackgroundColor: #fefefe; +@bodyTextColor: #454545; + +// Link Colors +@linkColor: #07a; +@linkVisitedInvertedColor: #ac5a82; + +// Special blocks +@blockBackgroundColor: #f6f6f6; +@blockBorderColor: #d7d7d7; -- cgit v1.1