assets/css/prism.css

@@ -1,57 +1,16 @@
 /**
+ * Gruvbox dark theme
  *
- * Gruvbox-material medium dark
+ * Adapted from a theme based on:
+ * Vim Gruvbox dark Theme (https://github.com/morhetz/gruvbox)
  *
- * Adapted from a prismjs theme by Azat S. <to@azat.io>
+ * @author Azat S. <to@azat.io>
- * With an attempt to match colours from https://github.com/sainnhe/gruvbox-material/blob/master/colors/gruvbox-material.vim
- * by sainnhe <i@sainnhe.dev>, with creative liberties according to my taste
- *
- * @author revsuine < pid1 at revsuine dot xyz >
  * @version 1.0
- *
  */
 
-/* COLOURS */
-pre[class*="language-"] {
-    /* gruvbox material medium dark https://github.com/sainnhe/gruvbox-material */
-    --bg_dim: #1b1b1b;
-    --bg0: #282828;
-    --bg1: #32302f;
-    --bg2: #32302f;
-    --bg3: #45403d;
-    --bg4: #45403d;
-    --bg5: #5a524c;
-    --bg_statusline1: #32302f;
-    --bg_statusline2: #313735;
-    --bg_statusline3: #504945;
-    --bg_diff_green: #34381b;
-    --bg_visual_green: #3b4439;
-    --bg_diff_red: #402120;
-    --bg_visual_red: #4c3432;
-    --bg_diff_blue: #0e363e;
-    --bg_visual_blue: #373131;
-    --bg_visual_yellow: #4f422e;
-    --bg_current_word: #3c3836;
-    --fg0: #d4be98;
-    --fg1: #ddc7a1;
-    --red: #ea6962;
-    --orange: #e78a4e;
-    --yellow: #d8a657;
-    --green: #a9b665;
-    --aqua: #89b482;
-    --blue: #7daea3;
-    --purple: #d3869b;
-    --bg_red: #ea6962;
-    --bg_green: #a9b665;
-    --bg_yellow: #d8a657;
-    --grey0: #7c6f64;
-    --grey1: #928374;
-    --grey2: #a89984;
-}
-
 code[class*="language-"],
 pre[class*="language-"] {
-	color: var(--fg0);
+	color: #ebdbb2; /* fg1 / fg */
 	font-family: "Fira Code", "Ubuntu Mono", Consolas, Monaco, "Andale Mono", monospace;
 	direction: ltr;
 	text-align: left;
@@ -74,16 +33,16 @@ pre[class*="language-"]::-moz-selection,
 pre[class*="language-"] ::-moz-selection,
 code[class*="language-"]::-moz-selection,
 code[class*="language-"] ::-moz-selection {
-	color: var(--fg0);
+	color: #fbf1c7; /* fg0 */
-	background: var(--bg3);
+	background: #7c6f64; /* bg4 */
 }
 
 pre[class*="language-"]::selection,
 pre[class*="language-"] ::selection,
 code[class*="language-"]::selection,
 code[class*="language-"] ::selection {
-	color: var(--fg0);
+	color: #fbf1c7; /* fg0 */
-	background: var(--bg3);
+	background: #7c6f64; /* bg4 */
 }
 
 /* Code blocks */
@@ -95,18 +54,19 @@ pre[class*="language-"] {
 
 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
-	background: var(--bg_dim);
+	background: #1d2021; /* bg0_h */
 }
 
 /* Inline code */
 :not(pre) > code[class*="language-"] {
 	padding: 0.1em;
+	border-radius: 0.3em;
 }
 
 .token.comment,
 .token.prolog,
 .token.cdata {
-	color: var(--grey0);
+	color: #a89984; /* fg4 / gray1 */
 }
 
 .token.delimiter,
@@ -115,52 +75,55 @@ pre[class*="language-"] {
 .token.selector,
 .token.important,
 .token.atrule {
-	color: var(--red);
+	color: #fb4934; /* red2 */
 }
 
 .token.operator,
 .token.punctuation,
 .token.attr-name {
-	color: var(--grey2);
+	color: #a89984; /* fg4 / gray1 */
 }
 
 .token.tag,
 .token.tag .punctuation,
 .token.doctype,
 .token.builtin {
-	color: var(--yellow);
+	color: #fabd2f; /* yellow2 */
 }
 
 .token.entity,
 .token.number,
 .token.symbol {
-	color: var(--aqua);
+	color: #d3869b; /* purple2 */
 }
 
 .token.property,
 .token.constant,
 .token.variable {
-	color: var(--blue);
+	color: #fb4934; /* red2 */
 }
 
 .token.string,
-.token.char,
+.token.char {
+	color: #b8bb26; /* green2 */
+}
+
 .token.attr-value,
 .token.attr-value .punctuation {
-	color: var(--green);
+	color: #a89984; /* fg4 / gray1 */
 }
 
 .token.url {
-	color: var(--green);
+	color: #b8bb26; /* green2 */
 	text-decoration: underline;
 }
 
 .token.function {
-	color: var(--yellow);
+	color: #fabd2f; /* yellow2 */
 }
 
 .token.regex {
-	background: var(--green);
+	background: #b8bb26; /* green2 */
 }
 
 .token.bold {
@@ -172,11 +135,11 @@ pre[class*="language-"] {
 }
 
 .token.inserted {
-	background: var(--bg_diff_green);
+	background: #a89984; /* fg4 / gray1 */
 }
 
 .token.deleted {
-	background: var(--bg_diff_red);
+	background: #fb4934; /* red2 */
 }
 
 /* css for hover button from https://github.com/panr/hugo-theme-terminal/blob/master/assets/css/prism.css */

static/style.css

@@ -41,10 +41,6 @@ code {
     color: var(--faint_foreground);
 }
 
-.footnotes hr {
-    background: var(--faint_foreground);
-}
-
 /* note: grey0 is actually fg0 with 0.5 opacity over bg0, so the below footer css has no effect. however, i've decided
  * to write it this way because i prefer to not use opacity to create colours when possible, instead setting
  * full-opacity explicit/unmodified colours. opacity is still used to create the dimmer hr in the footer.