diff options
| author | Feuerfuchs <git@feuerfuchs.dev> | 2019-06-04 22:28:02 +0200 |
|---|---|---|
| committer | Feuerfuchs <git@feuerfuchs.dev> | 2019-06-04 22:28:02 +0200 |
| commit | ce19e19efce3139d2c7b4024274b6ed2683e015e (patch) | |
| tree | a6a06ff79bceec34fcf47c0721f03bd5e0f943fb /css | |
| parent | Add custom styles (diff) | |
| download | gopherproxy-ce19e19efce3139d2c7b4024274b6ed2683e015e.tar.gz gopherproxy-ce19e19efce3139d2c7b4024274b6ed2683e015e.tar.bz2 gopherproxy-ce19e19efce3139d2c7b4024274b6ed2683e015e.zip | |
Style improvements
Diffstat (limited to 'css')
| -rw-r--r-- | css/main.scss | 29 |
1 files changed, 13 insertions, 16 deletions
diff --git a/css/main.scss b/css/main.scss index dfda503..8ae988e 100644 --- a/css/main.scss +++ b/css/main.scss | |||
| @@ -1,20 +1,17 @@ | |||
| 1 | $accent: scale-color(#e8ad58, $lightness: 30%); | ||
| 1 | $background: hsl(210, 14%, 9%); | 2 | $background: hsl(210, 14%, 9%); |
| 2 | $text: mix(hsl(210, 60%, 95%), $background, 85%); | 3 | $text: mix(hsl(210, 60%, 95%), $background, 85%); |
| 3 | $text-minus: mix(hsl(210, 100%, 95%), $background, 60%); | 4 | $text-minus: mix(hsl(210, 100%, 95%), $background, 60%); |
| 4 | $text-faint: mix(hsl(210, 100%, 95%), $background, 40%); | 5 | $text-faint: mix(hsl(210, 100%, 95%), $background, 40%); |
| 5 | $text-plus: #fff; | 6 | $text-plus: #fff; |
| 6 | $sel-background: $text; | 7 | $link-idle: $text-plus; |
| 8 | $link-visited: $text; | ||
| 9 | $sel-background: $accent; | ||
| 7 | $sel-text: #000; | 10 | $sel-text: #000; |
| 8 | 11 | ||
| 9 | @font-face { | ||
| 10 | font-family: 'IBM Plex Mono'; | ||
| 11 | font-style: normal; | ||
| 12 | font-weight: normal; | ||
| 13 | src: url('/assets/IBMPlexMono-Regular.woff2') format('woff2'), | ||
| 14 | url('/assets/IBMPlexMono-Regular.woff') format('woff'); | ||
| 15 | } | ||
| 16 | |||
| 17 | body { | 12 | body { |
| 13 | margin: 0; | ||
| 14 | padding: 0; | ||
| 18 | background-color: $background; | 15 | background-color: $background; |
| 19 | color: $text; | 16 | color: $text; |
| 20 | } | 17 | } |
| @@ -40,18 +37,18 @@ body { | |||
| 40 | } | 37 | } |
| 41 | 38 | ||
| 42 | :link { | 39 | :link { |
| 43 | color: $text-plus; | 40 | color: $link-idle; |
| 44 | } | 41 | } |
| 45 | 42 | ||
| 46 | :visited { | 43 | :visited { |
| 47 | color: $text; | 44 | color: $link-visited; |
| 48 | } | 45 | } |
| 49 | 46 | ||
| 50 | :link, :visited { | 47 | // :link, :visited { |
| 51 | &:hover { | 48 | // &:hover { |
| 52 | color: $text-plus; | 49 | // color: $text-plus; |
| 53 | } | 50 | // } |
| 54 | } | 51 | // } |
| 55 | 52 | ||
| 56 | .link-type { | 53 | .link-type { |
| 57 | color: $text-minus; | 54 | color: $text-minus; |
