Commit b11df5af2a5f37490c79adb7b59892579870e3a8
Change colours
Express the colours using HSL and HSLA, because it's easier to understand and manipulate. Exclude the logo colours because they don't need manipulating, and they just look nicer in hex. Tint the background colour green, so it feels warmer. Make the background slightly lighter, mainly so its lightness value is a pleasingly round number. Produce the dim colours using transparency. They match the parent colour exactly, and harmonise with the background colour. The dim text colour is slightly higher contrast (using opacity); the separator colour is now slightly lower contrast. Other than the background colour, most colours look broadly the same.Greg K Nicholson committed on 2/24/2018, 7:23:54 PM
Parent: 3f2b4a099adb08762b60eabb9c55a07ace77c3a6
Files changed
themes/ran/static/style/ran.css | changed |
themes/ran/static/style/ran.css | |||
---|---|---|---|
@@ -6,14 +6,14 @@ | |||
6 | 6 … | ||
7 | 7 … | :root { | |
8 | 8 … | --primary-color: #60c030; | |
9 | 9 … | --secondary-color: #ffffff; | |
10 | - --background-color: #111; | ||
11 | - --foreground-color: #ccc; | ||
12 | - --foreground-dim-color: #888; | ||
10 … | + --background-color: hsl(100, 10%, 10%); | ||
11 … | + --foreground-color: hsl(100, 10%, 80%); | ||
12 … | + --foreground-dim-color: hsla(100, 10%, 80%, 70%); | ||
13 | 13 … | --link-color: hsl(100, 100%, 70%); | |
14 | - --link-dim-color: hsl(100, 50%, 35%); | ||
15 | - --separator-color: #888; | ||
14 … | + --link-dim-color: hsla(100, 100%, 70%, 50%); | ||
15 … | + --separator-color: hsla(100, 10%, 80%, 50%); | ||
16 | 16 … | --box-shadow-style: inset 0 -1px 0; | |
17 | 17 … | --fast: 0.2s; | |
18 | 18 … | --slow: 0.4s; | |
19 | 19 … | } | |
@@ -115,9 +115,9 @@ | |||
115 | 115 … | .bottomnav .logo { | |
116 | 116 … | margin-top: 2rem; | |
117 | 117 … | } | |
118 | 118 … | .bottomnav .logo circle { | |
119 | - fill: var(--background-color); | ||
119 … | + fill: transparent; | ||
120 | 120 … | stroke: var(--foreground-dim-color); | |
121 | 121 … | stroke-width: 12px; | |
122 | 122 … | } | |
123 | 123 … | ||
Built with git-ssb-web