diff --git a/share/sass/colours/cyberlore.sass b/share/sass/colours/cyberlore.sass index d458431..8dbf740 100644 --- a/share/sass/colours/cyberlore.sass +++ b/share/sass/colours/cyberlore.sass @@ -1,41 +1,53 @@ -// SASS style sheet */ -// Palette color codes */ -// Palette URL: http://paletton.com/#uid=23n0Q0kmQllem0Qkwa+pgwPr8Zy */ - -// Feel free to copy&paste color codes to your application */ - - -// As hex codes */ - -$color-primary-0: #205B69; // Main Primary color */ -$color-primary-1: #020404; -$color-primary-2: #143036; -$color-primary-3: #2589A0; -$color-primary-4: #2CD3FB; - -$color-complement-0: #AA6D31; // Main Complement color */ -$color-complement-1: #070504; -$color-complement-2: #583B1F; -$color-complement-3: #FF9A36; -$color-complement-4: #FF9227; - - - -// As RGBa codes */ - -$rgba-primary-0: rgba( 32, 91,105,1); // Main Primary color */ -$rgba-primary-1: rgba( 2, 4, 4,1); -$rgba-primary-2: rgba( 20, 48, 54,1); -$rgba-primary-3: rgba( 37,137,160,1); -$rgba-primary-4: rgba( 44,211,251,1); - -$rgba-complement-0: rgba(170,109, 49,1); // Main Complement color */ -$rgba-complement-1: rgba( 7, 5, 4,1); -$rgba-complement-2: rgba( 88, 59, 31,1); -$rgba-complement-3: rgba(255,154, 54,1); -$rgba-complement-4: rgba(255,146, 39,1); - - - -// Generated by Paletton.com © 2002-2014 */ -// http://paletton.com */ +// 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/main.sass b/share/sass/main.sass index df857b2..653bd73 100644 --- a/share/sass/main.sass +++ b/share/sass/main.sass @@ -6,14 +6,14 @@ $font-url: "/static/fonts" @import fonts/orbitron.sass @import colours/cyberlore.sass -$colour-fg: $color-primary-4 -$colour-fg-high: $color-primary-4 -$colour-bg: $color-primary-1 -$colour-bg-high: $color-primary-2 -$colour-action: $color-complement-4 +$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 body - font-family: "Orbitron Light", $font-face + font-family: $font-face font-weight: 100 background-color: $colour-bg color: $colour-fg @@ -22,7 +22,7 @@ body body, details margin: auto -p +p, pre margin: 1em auto text-align: justify text-justify: inter-word @@ -33,7 +33,6 @@ p, img, h1, h2, h3, h4, h5 pre display: block max-width: $max-text-width - padding: 1ch ul, ol max-width: $max-text-width @@ -51,6 +50,7 @@ details, header > h1 margin-bottom: 1em header > h1 + font-family: "Orbitron Light" font-size: 2em details, details > * diff --git a/share/static/main.css b/share/static/main.css index 497f087..4cd19d3 100644 --- a/share/static/main.css +++ b/share/static/main.css @@ -31,16 +31,16 @@ src: url("/static/fonts/orbitron/orbitron-black.otf"); } body { - font-family: "Orbitron Light", sans-serif; + font-family: sans-serif; font-weight: 100; - background-color: #020404; - color: #2CD3FB; + background-color: #00141E; + color: #99C2D8; max-width: 210mm; } body, details { margin: auto; } -p { +p, pre { margin: 1em auto; text-align: justify; text-justify: inter-word; } @@ -50,8 +50,7 @@ p, img, h1, h2, h3, h4, h5 { pre { display: block; - max-width: 80ch; - padding: 1ch; } + max-width: 80ch; } ul, ol { max-width: 80ch; } @@ -69,6 +68,7 @@ details, header > h1 { margin-bottom: 1em; } header > h1 { + font-family: "Orbitron Light"; font-size: 2em; } details, details > * { @@ -78,18 +78,18 @@ header, footer, details, details > * { text-align: center; } a { - color: #FF9227; + color: #D6F6AA; text-decoration: none; } a:visited { - color: #ff9227; } + color: #d6f6aa; } header a { text-decoration: none; - color: #2CD3FB; } + color: #99C2D8; } header a:visited { - color: #2CD3FB; } + color: #99C2D8; } h1, h2, h3, h4, h5 { font-face: "Orbitron Medium"; @@ -103,7 +103,7 @@ footer { padding: 1em 0; } fieldset { - border: 0.5mm dashed #143036; } + border: 0.5mm dashed #034060; } fieldset > p { margin: .5em auto; @@ -116,14 +116,14 @@ label { input, textarea { display: block; - color: #2CD3FB; - background-color: #020404; + color: #99C2D8; + background-color: #00141E; border: none; - border-bottom: 0.5mm solid #143036; + border-bottom: 0.5mm solid #034060; min-width: 100%; } textarea { - border: 0.5mm solid #143036; + border: 0.5mm solid #034060; width: 80ch; height: 40ch; display: block-inline; @@ -133,6 +133,6 @@ button { clear: both; display: block; margin: 1em auto; - color: #2CD3FB; - background-color: #143036; - border: 0.5mm solid #143036; } + color: #99C2D8; + background-color: #034060; + border: 0.5mm solid #034060; }