logo

blog

My little blog can’t be this cute!
commit: 849590bccedcb9bfd19201f7fd3d445b581c4b6e
parent: d9691cc6b1773c15d0d528ee554475463c2e5090
Author: Haelwenn (lanodan) Monnier <contact@hacktivis.me>
Date:   Wed, 24 Oct 2018 11:12:39 +0200

css: Move to gruvbox colorscheme

Diffstat:

Acss/colorscheme.css41+++++++++++++++++++++++++++++++++++++++++
Mcss/index.css45+++++++++++++++++++++++----------------------
2 files changed, 64 insertions(+), 22 deletions(-)

diff --git a/css/colorscheme.css b/css/colorscheme.css @@ -0,0 +1,41 @@ +:root { + /* gruvbox dark */ + --dark-ansi00: #282828; + --dark-ansi00-hard: #1d2021; + --dark-ansi00-soft: #32302f; + --dark-ansi01: #cc241d; + --dark-ansi02: #98971a; + --dark-ansi03: #d79921; + --dark-ansi04: #458588; + --dark-ansi05: #b16286; + --dark-ansi06: #689d6a; + --dark-ansi07: #a89984; + --dark-ansi08: #928374; + --dark-ansi09: #fb4934; + --dark-ansi10: #b8bb26; + --dark-ansi11: #fabd2f; + --dark-ansi12: #83a598; + --dark-ansi13: #d3869b; + --dark-ansi14: #8ec07c; + --dark-ansi15: #ebdbb2; + + /* gruvbox light */ + --light-ansi-00: #fbf1c7; + --light-ansi-00-hard: #f9f5d7; + --light-ansi-00-soft: #f2e5bc; + --light-ansi-01: #cc241d; + --light-ansi-02: #98971a; + --light-ansi-03: #d79921; + --light-ansi-04: #458588; + --light-ansi-05: #b16286; + --light-ansi-06: #689d6a; + --light-ansi-07: #7c6f64; + --light-ansi-08: #928374; + --light-ansi-09: #9d0006; + --light-ansi-10: #79740e; + --light-ansi-11: #b57614; + --light-ansi-12: #076678; + --light-ansi-13: #8f3f71; + --light-ansi-14: #427b58; + --light-ansi-15: #3c3836; +} diff --git a/css/index.css b/css/index.css @@ -1,3 +1,5 @@ +@import url('colorscheme.css') + #bio { clear: both; } #avatar { float: left; @@ -13,21 +15,22 @@ height: auto; } .warn { - background-color: rgba(255, 60, 0, 0.2); - border-bottom: 0.125em solid #dc322f; + background-color: var(--dark-ansi09); + border-bottom: 0.125em solid var(--dark-ansi01); + color: var(--dark-ansi00); /* reverse */ } figure { text-align: center; } html, body { - background-color: #002b36; - color: #839496; + background-color: var(--dark-ansi00-hard); + color: var(--dark-ansi15); margin: 0; padding: 0; font-family: sans; } a { - color: #268bd2; + color: var(--dark-ansi04); } h1, h2, h3, h4, h5, h6 { font-family: serif; } pre { white-space: pre-wrap; } @@ -39,15 +42,15 @@ article, section { article, section, main { margin: 1.5rem; padding: 0.5rem; - background-color: #073642; - border: 1pt solid #657b83; + background-color: var(--dark-ansi00-soft); + border: 1pt solid; } #art { border: none;} code { display: inline-table; padding: 0 0.25em; - background-color: #222; - color: #C4C4C4; + background-color: var(--dark-ansi00); + color: var(--dark-ansi15); font-family: monospace; } table { @@ -72,9 +75,8 @@ quote + cite::before { content: " — "; } nav, footer { - background-color: #073642; - /* background-image: linear-gradient(0deg, #db3038, #dc3025); */ - color: #586e75; + background-color: var(--dark-ansi00); + color: var(--dark-ansi07); } /* navbar */ nav { @@ -101,18 +103,17 @@ nav ul li { transition: 0.5s; } nav li:hover { - background-color: #dc322f; - background-image: linear-gradient(0deg, #db3038, #dc3025); + background-color: var(--dark-ansi01); } nav ul li:hover > ul {display: block;} nav ul ul { - background: #900; + background: var(--dark-ansi01); display: none; position: absolute; } -nav ul ul li {display: block;} -nav ul ul li:hover {background: #B00;} -nav ul ul li:hover:active {background: #E00;} +nav ul ul li { display: block; } +nav ul ul li:hover { background: var(--dark-ansi09); } +nav ul ul li:hover:active { font-weight: normal; } nav ul ul ul { left: 100%; position: absolute; @@ -126,7 +127,7 @@ footer { text-align: center; } footer a { color: inherit; } -.l-ok { color: #859900; } -.l-wip { color: #cb4b16; } -.l-stalled { color: #002b36; color: #839496;} -.l-bad { color: #dc322f; } +.l-ok { color: var(--dark-ansi02); } +.l-wip { color: var(--dark-ansi03); } +.l-stalled { color: var(--dark-ansi07); } +.l-bad { color: var(--dark-ansi01); }