diff --git a/assets/css/prism.css b/assets/css/prism.css new file mode 100644 index 0000000..9e98e00 --- /dev/null +++ b/assets/css/prism.css @@ -0,0 +1,247 @@ +/** + * + * Gruvbox-material medium dark + * + * Adapted from a prismjs theme by Azat S. + * With an attempt to match colours from https://github.com/sainnhe/gruvbox-material/blob/master/colors/gruvbox-material.vim + * by sainnhe , 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); + font-family: "Fira Code", "Ubuntu Mono", Consolas, Monaco, "Andale Mono", monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + color: var(--fg0); + background: var(--bg3); +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + color: var(--fg0); + background: var(--bg3); +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: 0.5em 0; + overflow: auto; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: var(--bg_dim); +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: 0.1em; +} + +.token.comment, +.token.prolog, +.token.cdata { + color: var(--grey0); +} + +.token.delimiter, +.token.boolean, +.token.keyword, +.token.selector, +.token.important, +.token.atrule { + color: var(--red); +} + +.token.operator, +.token.punctuation, +.token.attr-name { + color: var(--grey2); +} + +.token.tag, +.token.tag .punctuation, +.token.doctype, +.token.builtin { + color: var(--yellow); +} + +.token.entity, +.token.number, +.token.symbol { + color: var(--aqua); +} + +.token.property, +.token.constant, +.token.variable { + color: var(--blue); +} + +.token.string, +.token.char, +.token.attr-value, +.token.attr-value .punctuation { + color: var(--green); +} + +.token.url { + color: var(--green); + text-decoration: underline; +} + +.token.function { + color: var(--yellow); +} + +.token.regex { + background: var(--green); +} + +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.inserted { + background: var(--bg_diff_green); +} + +.token.deleted { + background: var(--bg_diff_red); +} + +/* css for hover button from https://github.com/panr/hugo-theme-terminal/blob/master/assets/css/prism.css */ + +div.code-toolbar { + position: relative; +} + +div.code-toolbar > .toolbar { + position: absolute; + top: 0.3em; + right: 0.2em; + transition: opacity 0.3s ease-in-out; + opacity: 0; +} + +div.code-toolbar:hover > .toolbar { + opacity: 1; +} + +/* Separate line b/c rules are thrown out if selector is invalid. + IE11 and old Edge versions don't support :focus-within. */ +div.code-toolbar:focus-within > .toolbar { + opacity: 1; +} + +div.code-toolbar > .toolbar > .toolbar-item { + display: inline-block; +} + +div.code-toolbar > .toolbar > .toolbar-item > a { + cursor: pointer; +} + +div.code-toolbar > .toolbar > .toolbar-item > button { + background: none; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + padding: 0; + + /* for button */ + user-select: none; +} + +div.code-toolbar > .toolbar > .toolbar-item > a, +div.code-toolbar > .toolbar > .toolbar-item > button, +div.code-toolbar > .toolbar > .toolbar-item > span { + color: #bbb; + font-size: 0.8em; + padding: 0 0.5em; + background: #f5f2f0; + background: rgba(224, 224, 224, 20%); + box-shadow: 0 2px 0 0 rgba(0, 0, 0, 20%); + border-radius: 0.5em; +} + +div.code-toolbar > .toolbar > .toolbar-item > a:hover, +div.code-toolbar > .toolbar > .toolbar-item > a:focus, +div.code-toolbar > .toolbar > .toolbar-item > button:hover, +div.code-toolbar > .toolbar > .toolbar-item > button:focus, +div.code-toolbar > .toolbar > .toolbar-item > span:hover, +div.code-toolbar > .toolbar > .toolbar-item > span:focus { + color: inherit; + text-decoration: none; +} diff --git a/hugo.toml b/hugo.toml index c477318..5eddc9d 100644 --- a/hugo.toml +++ b/hugo.toml @@ -18,11 +18,7 @@ theme = 'terminal' # start by listing h1s startLevel = 1 [markup.highlight] - # noClasses needed for syntax highlighted blocks to display correctly: https://github.com/panr/hugo-theme-terminal/issues/537 - noClasses = false style = 'gruvbox' - lineNos = false - lineNumbersInTable = true [markup.goldmark] [markup.goldmark.extensions] [markup.goldmark.extensions.extras] diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 7a9ee95..87e1024 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -30,9 +30,9 @@ licensed under the diff --git a/static/terminal.css b/static/terminal.css index 8c22a05..810ced8 100644 --- a/static/terminal.css +++ b/static/terminal.css @@ -4,7 +4,6 @@ --background: var(--bg0); --foreground: var(--fg0); --accent: var(--green); - --code_background: var(--bg_dim); --font-size: 1rem; --line-height: 1.54rem; --radius: 0px; @@ -255,13 +254,21 @@ kbd { Ubuntu Mono, monospace !important; font-feature-settings: normal; - background: var(--code_background); + background: color-mix(in srgb, var(--foreground) 5%, transparent); color: var(--accent); padding: 1px 6px; margin: 0 2px; font-size: 0.95rem; } +kbd { + border-top: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); + border-left: 1px solid var(--accent); + border-right: 1px solid var(--accent); + border-bottom: 4px solid var(--accent); + border-radius: 4px; +} + code code { background: transparent; padding: 0; diff --git a/themes/terminal b/themes/terminal index 649db7e..2be0540 160000 --- a/themes/terminal +++ b/themes/terminal @@ -1 +1 @@ -Subproject commit 649db7e5e905b21281dac8111e098556f07de6cc +Subproject commit 2be05406b93bb97f24057eabae1607cf8e240a05