blog

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:
A
css/colorscheme.css
41
+++++++++++++++++++++++++++++++++++++++++
M
css/index.css
45
+++++++++++++++++++++++----------------------

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); }