[STYLE] Add colored classes

layouts/shortcodes/details.html

@@ -1,4 +1,3 @@
 <details><summary>{{ .Get "title" }}</summary>
-
 {{ .Inner }}
 </details>

static/css/style.css

@@ -6,8 +6,10 @@
 	--background-color-light: #252525;
 	--background-color-dark: #121212;
 	--avatar-background: #B6B6B6;
-	--gray-colored01: #799479;
-	--gray-colored02: #8f8071;
+	--color01: #799479;
+	--color01_bright: #58af58;
+	--color02: #8f8071;
+	--color02_bright: #b88a5b;
 }
 
 /******************* Page *******************/
@@ -590,7 +592,7 @@ pre {
 	margin-top: 0.5rem;
 	background: repeating-linear-gradient(28deg, #1C1C1C, #1C1C1C 20px, #121212 20px, #121212 40px);
 }
-:not(pre)>code {
+:not(pre, details)>code {
 	font-size: 1rem;
 	color: var(--font-color-em);
 }
@@ -646,7 +648,7 @@ details[open] summary:hover {
 	outline-offset: .3rem;
 }
 
-/******************* Article Details *******************/
+/******************* Article Superscript *******************/
 .article-body sup {
 	vertical-align: top;
 	position: relative;
@@ -677,3 +679,17 @@ details[open] summary:hover {
 	right: 1rem;
 	font-family: Arial;
 }
+
+/******************* Generic colors *******************/
+.color01 {
+	color: var(--color01);
+}
+.color01.bright {
+	color: var(--color01_bright);
+}
+.color02 {
+	color: var(--color02);
+}
+.color02.bright {
+	color: var(--color02_bright);
+}