From 5101944c5716ceebcc1afd917c323c94cf29a69c Mon Sep 17 00:00:00 2001
From: adam <56338480+adastx@users.noreply.github.com>
Date: Sun, 28 Aug 2022 07:16:20 +0200
Subject: css: colour variables
---
src/_header.html | 24 +++++++++++++-----------
src/styles/style.css | 36 ++++++++++++++++++++++++------------
2 files changed, 37 insertions(+), 23 deletions(-)
(limited to 'src')
diff --git a/src/_header.html b/src/_header.html
index d0dc361..8247608 100644
--- a/src/_header.html
+++ b/src/_header.html
@@ -1,14 +1,16 @@
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/style.css b/src/styles/style.css
index b20fd70..c5f9a89 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -1,6 +1,18 @@
+:root {
+ --bg: #181a1b;
+ --bg-light: #222;
+ --fg: #ddd;
+ --gray: #888;
+ --gray-light: #555;
+ --yellow: #fda;
+ --yellow-dark: #ca8;
+ --yellow-warm: #e6c79a;
+ --wine: #c65a5a
+}
+
body {
- background-color: #181a1b;
- color: #ddd;
+ background-color: var(--bg);
+ color: var(--fg);
font: 1em/1.8 'Open Sans', sans-serif;
margin: 0 auto;
max-width: 50em;
@@ -10,7 +22,7 @@ body {
header {
margin-top: 1em;
font-size: 2em;
- color: #888;
+ color: var(--gray);
}
footer {
@@ -18,17 +30,17 @@ footer {
margin-bottom: 1.5em;
text-align: center;
font-size: 0.95em;
- color: #888;
+ color: var(--gray);
}
a {
- color: #fda;
+ color: var(--yellow);
text-decoration: none;
}
a:hover {
text-decoration: underline;
- text-decoration-color: #ca8;
+ text-decoration-color: var(--yellow-dark);
}
pre > code {
@@ -41,8 +53,8 @@ pre > code {
pre, code {
font-family: 'Fira Code', monospace;
font-size: 0.98em;
- color: #ddd;
- background-color: #222;
+ color: var(--fg);
+ background-color: var(--bg-light);
border-radius: 5px;
}
@@ -62,14 +74,14 @@ img {
}
blockquote {
- background-color: #222;
- border-left: 5px solid #e6c79a;
+ background-color: var(--bg-light);
+ border-left: 5px solid var(--yellow-warm);
border-radius: 5px;
margin: 0em 1em;
padding-left: 1em;
}
.homepage-link {
- color: rgb(198, 90, 90);
- text-decoration-color: #555;
+ color: var(--wine);
+ text-decoration-color: var(--gray-light);
}
--
cgit v1.2.3-70-g09d2