From f02e3a19310bd3bb310fdd9946fedc04eee5d757 Mon Sep 17 00:00:00 2001 From: Stavros Polymenis Date: Sun, 17 Sep 2017 18:47:57 +0100 Subject: [PATCH] Create a light and a dark theme, with timelines Simplify themes. Deleted expansive colour sass file for now; don't see the point in that complexity at this stage. --- share/html_templates/item.mustache | 6 +- share/sass/colours/cyberlore.sass | 53 ------------- share/sass/layout.sass | 118 ++++++++++++++++++++++++++++ share/sass/main-dark.sass | 10 +++ share/sass/main-light.sass | 10 +++ share/sass/main.sass | 122 +++++++++++++---------------- share/static/main.css | 112 +++++++++++++------------- 7 files changed, 248 insertions(+), 183 deletions(-) delete mode 100644 share/sass/colours/cyberlore.sass create mode 100644 share/sass/layout.sass create mode 100644 share/sass/main-dark.sass create mode 100644 share/sass/main-light.sass diff --git a/share/html_templates/item.mustache b/share/html_templates/item.mustache index 84d5b47..7fbfcce 100644 --- a/share/html_templates/item.mustache +++ b/share/html_templates/item.mustache @@ -1,7 +1,7 @@ -
  • +
  • - {{title}} + {{title}}

    {{abstract}}

    -
    • \ No newline at end of file + \ No newline at end of file diff --git a/share/sass/colours/cyberlore.sass b/share/sass/colours/cyberlore.sass deleted file mode 100644 index 8dbf740..0000000 --- a/share/sass/colours/cyberlore.sass +++ /dev/null @@ -1,53 +0,0 @@ -// SASS style sheet */ -// Palette color codes */ -// Palette URL: http://paletton.com/#uid=53t100kxPrI9VNHnwxWGAiZWx60 */ - -// Feel free to copy&paste color codes to your application */ - - -// As hex codes */ - -$color-primary-0: #075E8C; // Main Primary color */ -$color-primary-1: #99C2D8; -$color-primary-2: #337FA8; -$color-primary-3: #034060; -$color-primary-4: #00141E; - -$color-secondary-1-0: #75CA00; // Main Secondary color (1) */ -$color-secondary-1-1: #D6F6AA; -$color-secondary-1-2: #A2EB3E; -$color-secondary-1-3: #508A00; -$color-secondary-1-4: #192C00; - -$color-secondary-2-0: #470C96; // Main Secondary color (2) */ -$color-secondary-2-1: #B99EDD; -$color-secondary-2-2: #6E3AB2; -$color-secondary-2-3: #2F0667; -$color-secondary-2-4: #0E0020; - - - -// As RGBa codes */ - -$rgba-primary-0: rgba( 7, 94,140,1); // Main Primary color */ -$rgba-primary-1: rgba(153,194,216,1); -$rgba-primary-2: rgba( 51,127,168,1); -$rgba-primary-3: rgba( 3, 64, 96,1); -$rgba-primary-4: rgba( 0, 20, 30,1); - -$rgba-secondary-1-0: rgba(117,202, 0,1); // Main Secondary color (1) */ -$rgba-secondary-1-1: rgba(214,246,170,1); -$rgba-secondary-1-2: rgba(162,235, 62,1); -$rgba-secondary-1-3: rgba( 80,138, 0,1); -$rgba-secondary-1-4: rgba( 25, 44, 0,1); - -$rgba-secondary-2-0: rgba( 71, 12,150,1); // Main Secondary color (2) */ -$rgba-secondary-2-1: rgba(185,158,221,1); -$rgba-secondary-2-2: rgba(110, 58,178,1); -$rgba-secondary-2-3: rgba( 47, 6,103,1); -$rgba-secondary-2-4: rgba( 14, 0, 32,1); - - - -// Generated by Paletton.com © 2002-2014 */ -// http://paletton.com */ diff --git a/share/sass/layout.sass b/share/sass/layout.sass new file mode 100644 index 0000000..73d6faa --- /dev/null +++ b/share/sass/layout.sass @@ -0,0 +1,118 @@ +$font-url: "/static/fonts" + +@import fonts/orbitron.sass + +$font-face: "sans-serif" + +body + font-family: $font-face + +body, body > *, article > * + margin: auto + +p, pre + text-align: justify + text-justify: inter-word + +p, img, h1, h2, h3, h4, h5, article + max-width: 80ch + +pre + display: block + overflow: auto + padding-left: 1ch + +details, header > h1, p, pre, ul, ol + margin: 1em auto + +header > h1 + font-family: "Orbitron Light" + font-size: 2em + +details, details > * + display: block + +header, footer, details, details > * + text-align: center + +a, header a, header a:hover + text-decoration: none + +a:visited + opacity: .8 + +a:hover + text-decoration: underline + +h1, h2, h3, h4, h5 + font-family: "Orbitron Medium" + text-align: center + font-weight: 100 + margin: 2em auto 1em + +footer + clear: both + margin-top: 2em + border-top: 1px dotted + padding: 1em 0 + +fieldset + border: .5mm dashed + +fieldset > p + margin: .5em auto + padding: .5em + float: left + +label + margin: .2em + display: block + +input, textarea + display: block + border: none + border-bottom: .5mm solid + min-width: 100% + +textarea + border: .5mm solid + width: 80ch + height: 40ch + display: block-inline + clear: both + +button + clear: both + display: block + margin: 1em auto + border: .5mm solid + +.timeline + width: 90ch + +.timeline > li + position: relative + overflow: hidden + +.timeline > li time + float: left + width: 14ch + text-align: center + +.timeline > li div + float: left + padding: 0 0 1em 2ch + width: 60% + +summary, .abstract + opacity: .5 + +.topics > li + display: inline + margin-right: 2ch + +.topics + overflow: visible + display: block + clear: both + text-align: center diff --git a/share/sass/main-dark.sass b/share/sass/main-dark.sass new file mode 100644 index 0000000..efbe555 --- /dev/null +++ b/share/sass/main-dark.sass @@ -0,0 +1,10 @@ +@import layout.sass + +body + background-color: #191B22 + +body, a, header a:visited + color: #f2f2f2 + +pre, .timeline > li div + border-left: 1mm solid #f2f2f233 diff --git a/share/sass/main-light.sass b/share/sass/main-light.sass new file mode 100644 index 0000000..4502ba9 --- /dev/null +++ b/share/sass/main-light.sass @@ -0,0 +1,10 @@ +@import layout.sass + +body + background-color: #f2f2f2 + +body, a, header a:visited + color: #191B22 + +pre, .timeline > li div + border-left: 1mm solid #191B22 diff --git a/share/sass/main.sass b/share/sass/main.sass index 854682f..2b677c8 100644 --- a/share/sass/main.sass +++ b/share/sass/main.sass @@ -1,73 +1,38 @@ -$max-text-width: 80ch $font-url: "/static/fonts" @import fonts/orbitron.sass -@import colours/cyberlore.sass -$colour-fg: $color-primary-1 -$colour-fg-high: $color-primary-2 -$colour-bg: $color-primary-4 -$colour-bg-high: $color-primary-3 -$colour-action: $color-secondary-1-1 - -$font-face: "Sans" +$font-face: "sans-serif" body font-family: $font-face - font-weight: 100 - background-color: $colour-bg - color: $colour-fg + +body + background-color: #191B22 + +body, a, header a:visited + color: #f2f2f2 + +pre, .timeline > li div + border-left: 1mm solid #f2f2f233; body, body > *, article > * margin: auto p, pre - margin: 1em auto text-align: justify text-justify: inter-word p, img, h1, h2, h3, h4, h5, article - max-width: $max-text-width + max-width: 80ch pre display: block - max-width: $max-text-width - overflow: scroll + overflow: auto + padding-left: 1ch -.timeline - max-width: 210mm - -.timeline > li - position: relative - overflow: hidden - -.timeline > li time - float: left - width: 12ch - text-align: center - vertical-align: middle - -.timeline > li div - float: left - padding: 0 0 1em 2ch - max-width: 60ch - border-left: 1mm solid; - -.abstract - opacity: .5 - -.topics > li - display: inline - margin-right: 2ch - -.topics - overflow: visible - display: block - clear: both - text-align: center - -details, header > h1 - margin-bottom: 1em $colour-bg-high +details, header > h1, p, pre, ul, ol + margin: 1em auto header > h1 font-family: "Orbitron Light" @@ -79,25 +44,20 @@ details, details > * header, footer, details, details > * text-align: center -a - color: $colour-action +a, header a, header a:hover text-decoration: none a:visited - color: opacify($colour-action, 0.2) + opacity: .8 -header a - text-decoration: none - color: $colour-fg - -header a:visited - color: $colour-fg +a:hover + text-decoration: underline h1, h2, h3, h4, h5 font-family: "Orbitron Medium" text-align: center font-weight: 100 - margin: 1em auto + margin: 2em auto 1em footer clear: both @@ -106,7 +66,7 @@ footer padding: 1em 0 fieldset - border: .5mm dashed $colour-bg-high + border: .5mm dashed fieldset > p margin: .5em auto @@ -119,14 +79,12 @@ label input, textarea display: block - color: $colour-fg - background-color: $colour-bg border: none - border-bottom: .5mm solid $colour-bg-high + border-bottom: .5mm solid min-width: 100% textarea - border: .5mm solid $colour-bg-high + border: .5mm solid width: 80ch height: 40ch display: block-inline @@ -136,6 +94,34 @@ button clear: both display: block margin: 1em auto - color: $colour-fg - background-color: $colour-bg-high - border: .5mm solid $colour-bg-high + border: .5mm solid + +.timeline + width: 90ch + +.timeline > li + position: relative + overflow: hidden + +.timeline > li time + float: left + width: 14ch + text-align: center + +.timeline > li div + float: left + padding: 0 0 1em 2ch + width: 60% + +summary, .abstract + opacity: .5 + +.topics > li + display: inline + margin-right: 2ch + +.topics + overflow: visible + display: block + clear: both + text-align: center diff --git a/share/static/main.css b/share/static/main.css index 90ea6c4..0a75ec6 100644 --- a/share/static/main.css +++ b/share/static/main.css @@ -15,16 +15,12 @@ src: url("/static/fonts/orbitron/orbitron-black.otf"); } body { - font-family: "Sans"; - font-weight: 100; - background-color: #00141E; - color: #99C2D8; } + font-family: "sans-serif"; } body, body > *, article > * { margin: auto; } p, pre { - margin: 1em auto; text-align: justify; text-justify: inter-word; } @@ -33,43 +29,11 @@ p, img, h1, h2, h3, h4, h5, article { pre { display: block; - max-width: 80ch; - overflow: scroll; } + overflow: auto; + padding-left: 1ch; } -.timeline { - max-width: 210mm; } - -.timeline > li { - position: relative; - overflow: hidden; } - -.timeline > li time { - float: left; - width: 12ch; - text-align: center; - vertical-align: middle; } - -.timeline > li div { - float: left; - padding: 0 0 1em 2ch; - max-width: 60ch; - border-left: 1mm solid; } - -.abstract { - opacity: .5; } - -.topics > li { - display: inline; - margin-right: 2ch; } - -.topics { - overflow: visible; - display: block; - clear: both; - text-align: center; } - -details, header > h1 { - margin-bottom: 1em #034060; } +details, header > h1, p, pre, ul, ol { + margin: 1em auto; } header > h1 { font-family: "Orbitron Light"; @@ -81,25 +45,20 @@ details, details > * { header, footer, details, details > * { text-align: center; } -a { - color: #D6F6AA; +a, header a, header a:hover { text-decoration: none; } a:visited { - color: #d6f6aa; } + opacity: .8; } -header a { - text-decoration: none; - color: #99C2D8; } - -header a:visited { - color: #99C2D8; } +a:hover { + text-decoration: underline; } h1, h2, h3, h4, h5 { font-family: "Orbitron Medium"; text-align: center; font-weight: 100; - margin: 1em auto; } + margin: 2em auto 1em; } footer { clear: both; @@ -108,7 +67,7 @@ footer { padding: 1em 0; } fieldset { - border: 0.5mm dashed #034060; } + border: .5mm dashed; } fieldset > p { margin: .5em auto; @@ -121,14 +80,12 @@ label { input, textarea { display: block; - color: #99C2D8; - background-color: #00141E; border: none; - border-bottom: 0.5mm solid #034060; + border-bottom: .5mm solid; min-width: 100%; } textarea { - border: 0.5mm solid #034060; + border: .5mm solid; width: 80ch; height: 40ch; display: block-inline; @@ -138,6 +95,43 @@ button { clear: both; display: block; margin: 1em auto; - color: #99C2D8; - background-color: #034060; - border: 0.5mm solid #034060; } + border: .5mm solid; } + +.timeline { + width: 90ch; } + +.timeline > li { + position: relative; + overflow: hidden; } + +.timeline > li time { + float: left; + width: 14ch; + text-align: center; } + +.timeline > li div { + float: left; + padding: 0 0 1em 2ch; + width: 60%; } + +summary, .abstract { + opacity: .5; } + +.topics > li { + display: inline; + margin-right: 2ch; } + +.topics { + overflow: visible; + display: block; + clear: both; + text-align: center; } + +body { + background-color: #191B22; } + +body, a, header a:visited { + color: #f2f2f2; } + +pre, .timeline > li div { + border-left: 1mm solid #f2f2f233; }