Merge pull request #1 from fewerandfaster/code-theme

Use github-dark code theme
fewerandfaster · Dec 19, 2023 · c49b0d0 · c49b0d0
2 parents a03d100 + 20f5a89
commit c49b0d0
Show file tree

Hide file tree

Showing 3 changed files with 174 additions and 90 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
diff --git a/src/sass/_highlight.scss b/src/sass/_highlight.scss
@@ -1,58 +1,188 @@
-/*
-Dark style from softwaremaniacs.org (c) Ivan Sagalaev <[email protected]>
+:root {
+    --color-background-code: #0d1117;
+    --color-content-code: #c9d1d9;
+}
+
+.post-content {
+	pre {
+		position: relative;
+		margin: 0 0 4rem;
+		padding: 1em;
+		overflow: hidden;
+		font-family: monospace, sans-serif;
+		white-space: pre;
+		background: var(--color-background-code);
+		box-sizing: border-box;
+        border-radius: 1.5rem;
+	}
+
+	pre .lines {
+	    position: absolute;
+	    width: 2.66667em;
+	    height: 100%;
+	    left: 0;
+	    top: 0;
+	    padding: 1.33334em 0;
+	    color: var(--color-content-code);
+	    font-size: 0.75em;
+	    line-height: 2em;
+	    text-align: right;
+	    box-sizing: border-box;
+	    background: var(--color-background-code);
+	    user-select: none;
+	    -webkit-user-select: none;
+			opacity: 0.5;
+	}
+
+	pre .lines .line {
+	    display: block;
+	    padding-right: 0.33334em;
+	}
+
+	pre code,
+	pre tt {
+	    display: block;
+	    position: static;
+	    top: auto;
+	    margin: -1.33334em -1.33334em -1.33334em 1.33334em;
+	    padding: 1.33334em;
+	    overflow-x: auto;
+	    font-size: 0.75em;
+	    line-height: 2em;
+	    white-space: pre;
+	    background: transparent;
+	    border: none;
+	    vertical-align: inherit;
+	}
+
+	pre code.language-text {
+	    margin-left: -1.33334em;
+	}
+}
+
+
+/*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
 */
 
 .hljs {
-    color: var(--color-content-main);
-    background: var(--color-background-main);
+    color: var(--color-content-code);
+    background: var(--color-background-code);
 }
 
+.hljs-doctag,
 .hljs-keyword,
-.hljs-selector-tag,
-.hljs-literal,
-.hljs-section,
-.hljs-link {
-    color: var(--color-content-lead);
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+    /* prettylights-syntax-keyword */
+    color: #ff7b72;
 }
 
-.hljs-subst {
-    /* default */
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+    /* prettylights-syntax-entity */
+    color: #d2a8ff;
 }
 
-.hljs-string,
-.hljs-title,
-.hljs-name,
-.hljs-type,
+.hljs-attr,
 .hljs-attribute,
-.hljs-symbol,
-.hljs-bullet,
-.hljs-built_in,
-.hljs-addition,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
 .hljs-variable,
-.hljs-template-tag,
-.hljs-template-variable {
-    color: var(--ghost-accent-color);
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+    /* prettylights-syntax-constant */
+    color: #79c0ff;
+}
+
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+    /* prettylights-syntax-string */
+    color: #a5d6ff;
+}
+
+.hljs-built_in,
+.hljs-symbol {
+    /* prettylights-syntax-variable */
+    color: #ffa657;
 }
 
 .hljs-comment,
-.hljs-quote,
-.hljs-deletion,
-.hljs-meta {
-    color: var(--color-content-secondary);
+.hljs-code,
+.hljs-formula {
+    /* prettylights-syntax-comment */
+    color: #8b949e;
 }
 
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-literal,
-.hljs-title,
-.hljs-section,
-.hljs-doctag,
-.hljs-type,
 .hljs-name,
-.hljs-strong {
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+    /* prettylights-syntax-entity-tag */
+    color: #7ee787;
+}
+
+.hljs-subst {
+    /* prettylights-syntax-storage-modifier-import */
+    color: #c9d1d9;
+}
+
+.hljs-section {
+    /* prettylights-syntax-markup-heading */
+    color: #1f6feb;
     font-weight: bold;
 }
 
+.hljs-bullet {
+    /* prettylights-syntax-markup-list */
+    color: #f2cc60;
+}
+
 .hljs-emphasis {
+    /* prettylights-syntax-markup-italic */
+    color: #c9d1d9;
     font-style: italic;
 }
+
+.hljs-strong {
+    /* prettylights-syntax-markup-bold */
+    color: #c9d1d9;
+    font-weight: bold;
+}
+
+.hljs-addition {
+    /* prettylights-syntax-markup-inserted */
+    color: #aff5b4;
+    background-color: #033a16;
+}
+
+.hljs-deletion {
+    /* prettylights-syntax-markup-deleted */
+    color: #ffdcd7;
+    background-color: #67060c;
+}
+
+.hljs-char.escape_,
+.hljs-link,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+    /* purposely ignored */
+}
diff --git a/src/sass/style.scss b/src/sass/style.scss
@@ -263,61 +263,6 @@ textarea {
 		white-space: pre-wrap;
 	}
 
-	pre {
-		position: relative;
-		margin: 0 0 4rem;
-		padding: 1em;
-		overflow: hidden;
-		font-family: monospace, sans-serif;
-		white-space: pre;
-		background: var(--color-background-secondary);
-		border: 1px solid var(--color-background-contrast);
-		box-sizing: border-box;
-	}
-
-	pre .lines {
-		position: absolute;
-		width: 2.66667em;
-		height: 100%;
-		left: 0;
-		top: 0;
-		padding: 1.33334em 0;
-		border-right: 1px solid var(--color-background-contrast);
-		color: var(--color-content-secondary);
-		font-size: 0.75em;
-		line-height: 2em;
-		text-align: right;
-		box-sizing: border-box;
-		background: var(--color-background-secondary);
-		user-select: none;
-		-webkit-user-select: none;
-	}
-
-	pre .lines .line {
-		display: block;
-		padding-right: 0.33334em;
-	}
-
-	pre code,
-	pre tt {
-		display: block;
-		position: static;
-		top: auto;
-		margin: -1.33334em -1.33334em -1.33334em 1.33334em;
-		padding: 1.33334em;
-		overflow-x: auto;
-		font-size: 0.75em;
-		line-height: 2em;
-		white-space: pre;
-		background: transparent;
-		border: none;
-		vertical-align: inherit;
-	}
-
-	pre code.language-text {
-		margin-left: -1.33334em;
-	}
-
 	kbd {
 		display: inline-block;
 		margin-bottom: 0.5em;