diff --git a/.gitmodules b/.gitmodules index 3cf9b07..0464326 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,6 +1,3 @@ [submodule "themes/terminal"] path = themes/terminal url = https://git.revsuine.xyz/revsuine/hugo-theme-terminal.git -[submodule "themes/boxgruv"] - path = themes/boxgruv - url = https://git.revsuine.xyz/revsuine/hugo-theme-boxgruv.git diff --git a/README.md b/README.md index 007792f..681ecf7 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # revsuine.xyz Website These are the markdown files used to build [my website](https://revsuine.xyz/) with [Hugo](https://gohugo.io/). The -live website is currently built off of the `terminal` branch. +website uses [panr's Terminal theme](https://github.com/panr/hugo-theme-terminal). ## Style @@ -9,17 +9,6 @@ Lines have a character limit of 120 where possible. ## Theming -### Theme Branches - -I have branches for each theme for the website. Commits to `master` should be theme-independent commits, e.g. new -posts. Theme branches should pull from `master` whenever there are new `master` commits. Commits exclusive to theme -branches should *only* be for changes relevant to the theme. - -Theme branches are what should be used to build the website. `master` should not be used for building/deployment, only -to store common changes among all branches. - -### [Terminal](https://github.com/panr/hugo-theme-terminal) - Colours taken from [gruvbox-material medium](https://github.com/sainnhe/gruvbox-material). | Element | Colour | diff --git a/assets/css/prism.css b/assets/css/prism.css new file mode 100644 index 0000000..4367b25 --- /dev/null +++ b/assets/css/prism.css @@ -0,0 +1,210 @@ +/** + * Gruvbox dark theme + * + * Adapted from a theme based on: + * Vim Gruvbox dark Theme (https://github.com/morhetz/gruvbox) + * + * @author Azat S. + * @version 1.0 + */ + +code[class*="language-"], +pre[class*="language-"] { + color: #ebdbb2; /* fg1 / fg */ + 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: #fbf1c7; /* fg0 */ + background: #7c6f64; /* bg4 */ +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + color: #fbf1c7; /* fg0 */ + background: #7c6f64; /* bg4 */ +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: 0.5em 0; + overflow: auto; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + 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: #a89984; /* fg4 / gray1 */ +} + +.token.delimiter, +.token.boolean, +.token.keyword, +.token.selector, +.token.important, +.token.atrule { + color: #fb4934; /* red2 */ +} + +.token.operator, +.token.punctuation, +.token.attr-name { + color: #a89984; /* fg4 / gray1 */ +} + +.token.tag, +.token.tag .punctuation, +.token.doctype, +.token.builtin { + color: #fabd2f; /* yellow2 */ +} + +.token.entity, +.token.number, +.token.symbol { + color: #d3869b; /* purple2 */ +} + +.token.property, +.token.constant, +.token.variable { + color: #fb4934; /* red2 */ +} + +.token.string, +.token.char { + color: #b8bb26; /* green2 */ +} + +.token.attr-value, +.token.attr-value .punctuation { + color: #a89984; /* fg4 / gray1 */ +} + +.token.url { + color: #b8bb26; /* green2 */ + text-decoration: underline; +} + +.token.function { + color: #fabd2f; /* yellow2 */ +} + +.token.regex { + background: #b8bb26; /* green2 */ +} + +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.inserted { + background: #a89984; /* fg4 / gray1 */ +} + +.token.deleted { + background: #fb4934; /* red2 */ +} + +/* 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/assets/css/syntax.css b/assets/css/syntax.css new file mode 100644 index 0000000..f10338f --- /dev/null +++ b/assets/css/syntax.css @@ -0,0 +1,5 @@ +pre[class*=language-] { + margin: 0; + overflow: auto; +} + diff --git a/hugo.toml b/hugo.toml index 6c69525..a65398f 100644 --- a/hugo.toml +++ b/hugo.toml @@ -2,7 +2,7 @@ baseURL = 'https://revsuine.xyz/' languageCode = 'en-gb' title = 'revsuine' -theme = 'boxgruv' +theme = 'terminal' [taxonomies] # allow you to set tags with tags = [ 'tags', 'here' ] in post front matter @@ -22,94 +22,102 @@ theme = 'boxgruv' ### TERMINAL THEME CONFIG ### -# [params] -# # dir name of your main content (default is `content/posts`). -# # the list of set content will show up on your index page (baseurl). -# contentTypeName = "blog" +[params] + # dir name of your main content (default is `content/posts`). + # the list of set content will show up on your index page (baseurl). + contentTypeName = "blog" -# # if you set this to 0, only submenu trigger will be visible -# showMenuItems = 5 + # if you set this to 0, only submenu trigger will be visible + showMenuItems = 5 -# # show selector to switch language -# showLanguageSelector = false + # show selector to switch language + showLanguageSelector = false -# # set theme to full screen width -# fullWidthTheme = false + # set theme to full screen width + fullWidthTheme = false -# # center theme with default width -# centerTheme = true + # center theme with default width + centerTheme = true -# # if your resource directory contains an image called `cover.(jpg|png|webp)`, -# # then the file will be used as a cover automatically. -# # With this option you don't have to put the `cover` param in a front-matter. -# autoCover = true + # if your resource directory contains an image called `cover.(jpg|png|webp)`, + # then the file will be used as a cover automatically. + # With this option you don't have to put the `cover` param in a front-matter. + autoCover = true -# # set post to show the last updated -# # If you use git, you can set `enableGitInfo` to `true` and then post will automatically get the last updated -# showLastUpdated = false + # set post to show the last updated + # If you use git, you can set `enableGitInfo` to `true` and then post will automatically get the last updated + showLastUpdated = true + enableGitInfo = true -# # Provide a string as a prefix for the last update date. By default, it looks like this: 2020-xx-xx [Updated: 2020-xx-xx] :: Author -# # updatedDatePrefix = "Updated" + # Provide a string as a prefix for the last update date. By default, it looks like this: 2020-xx-xx [Updated: 2020-xx-xx] :: Author + # updatedDatePrefix = "Updated" -# # whether to show a page's estimated reading time -# # readingTime = false # default + # whether to show a page's estimated reading time + # readingTime = false # default -# # whether to show a table of contents -# # can be overridden in a page's front-matter -# # Toc = false # default -# Toc = true + # whether to show a page's word count + showWordCount = true -# # set title for the table of contents -# # can be overridden in a page's front-matter -# # TocTitle = "Table of Contents" # default + # whether to show a table of contents + # can be overridden in a page's front-matter + # Toc = false # default + Toc = true + + # set title for the table of contents + # can be overridden in a page's front-matter + # TocTitle = "Table of Contents" # default -# [params.twitter] -# # set Twitter handles for Twitter cards -# # see https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started#card-and-content-attribution -# # do not include @ -# # creator = "" -# site = "" +[params.twitter] + # set Twitter handles for Twitter cards + # see https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started#card-and-content-attribution + # do not include @ + creator = "" + site = "" -# [languages] -# [languages.en] -# languageName = "English" -# title = "revsuine" +[languages] + [languages.en] + languageName = "English" + title = "revsuine" -# [languages.en.params] -# subtitle = "" -# owner = "" -# keywords = "" -# copyright = "" -# menuMore = "Show more" -# readMore = "Read more" -# readOtherPosts = "Read other posts" -# newerPosts = "Newer posts" -# olderPosts = "Older posts" -# missingContentMessage = "Page not found..." -# missingBackButtonLabel = "Back to home page" -# minuteReadingTime = "min read" -# words = "words" + [languages.en.params] + subtitle = "" + owner = "" + keywords = "" + copyright = "" + menuMore = "Show more" + readMore = "Read more" + readOtherPosts = "Read other posts" + newerPosts = "Newer posts" + olderPosts = "Older posts" + missingContentMessage = "Page not found..." + missingBackButtonLabel = "Back to home page" + minuteReadingTime = "min read" + words = "words" -# [languages.en.params.logo] -# logoText = "revsuine" -# logoHomeLink = "/" + [languages.en.params.logo] + logoText = "revsuine" + logoHomeLink = "/" -# [languages.en.menu] -# [[languages.en.menu.main]] -# identifier = "home" -# name = "Home" -# url = "/" -# [[languages.en.menu.main]] -# identifier = "blog" -# name = "Blog" -# url = "/blog" -# [[languages.en.menu.main]] -# identifier = "about" -# name = "About" -# url = "/about" -# [[languages.en.menu.main]] -# identifier = "contact" -# name = "Contact" -# url = "/contact" + [languages.en.menu] + [[languages.en.menu.main]] + identifier = "home" + name = "Home" + url = "/" + weight = 1 + [[languages.en.menu.main]] + identifier = "about" + name = "About" + url = "/about" + weight = 10 + [[languages.en.menu.main]] + identifier = "blog" + name = "Blog" + url = "/blog" + weight = 20 + [[languages.en.menu.main]] + identifier = "contact" + name = "Contact" + url = "/contact" + weight = 30 diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index a4ec266..367ddbb 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,12 +1,24 @@ -
- - CC BY-SA button -
+ + + + +{{ $menu := resources.Get "js/menu.js" | js.Build }} +{{ $prism := resources.Get "js/prism.js" | js.Build }} + +{{ $bundle := slice $menu $prism | resources.Concat "bundle.js" | resources.Minify }} + + + + diff --git a/static/favicon.png b/static/favicon.png new file mode 100644 index 0000000..9943b50 Binary files /dev/null and b/static/favicon.png differ diff --git a/static/gruvbox-material.css b/static/gruvbox-material.css new file mode 100644 index 0000000..07fcebb --- /dev/null +++ b/static/gruvbox-material.css @@ -0,0 +1,37 @@ +:root { + /* 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; +} + diff --git a/static/og-image.png b/static/og-image.png new file mode 100644 index 0000000..9948355 Binary files /dev/null and b/static/og-image.png differ diff --git a/static/style.css b/static/style.css index f27374d..68719f4 100644 --- a/static/style.css +++ b/static/style.css @@ -1,10 +1,57 @@ -/* make footer image display correctly */ +@import url("gruvbox-material.css"); -#cc-badge-div { - width: 88px; - height: 31px; - padding-top: 20px; - padding-right: 10px; - float: left !important; +:root { + --background: var(--bg0); + --foreground: var(--fg0); + --accent: var(--green); + --faint_foreground: var(--grey0); + --code_background: var(--bg_dim); + --highlight_background: var(--bg3); +} + +::selection, ::-moz-selection { + background: var(--highlight_background); +} + +a { + color: var(--accent); + /* actually i don't like how transitions look */ + /* transition: 0.3s; */ +} + +a:hover { + color: var(--background) !important; + background-color: var(--accent) !important; + text-decoration-line: none; +} + +.code-toolbar { + border: 1px solid var(--bg3); +} + +code { + background: var(--code_background); +} + +.post-meta { + color: var(--faint_foreground); +} + +.footnotes { + color: 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. + * I would set the hr full opacity but there isn't really a "dim green" I can use. */ + +.footer { + opacity: 1 !important; + color: var(--faint_foreground); +} + +.footer hr { + opacity: 0.5; } diff --git a/static/terminal.css b/static/terminal.css new file mode 100644 index 0000000..810ced8 --- /dev/null +++ b/static/terminal.css @@ -0,0 +1,370 @@ +@import url("gruvbox-material.css"); + +:root { + --background: var(--bg0); + --foreground: var(--fg0); + --accent: var(--green); + --font-size: 1rem; + --line-height: 1.54rem; + --radius: 0px; +} + +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; + margin: 0; + padding: 0; +} + +body { + margin: 0; + padding: 0; + font-family: "Fira Code", Monaco, Consolas, "Ubuntu Mono", monospace; + font-size: 1rem; + font-weight: 400; + line-height: var(--line-height); + letter-spacing: -0.02em; + background-color: var(--background); + color: var(--foreground); + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -webkit-overflow-scrolling: touch; + -webkit-text-size-adjust: 100%; +} + +::placeholder { + color: color-mix(in srgb var(--foreground) 50%, black); +} + +h1, +h2 { + font-size: calc(var(--font-size) * 1.1); + text-transform: uppercase; + letter-spacing: 0.04em; +} + +h1 { + text-decoration: underline; + text-decoration-thickness: 2px; + text-underline-offset: calc(var(--font-size) * 0.2); +} + +h3, +h4, +h5, +h6 { + font-size: calc(var(--font-size) * 1.1); + letter-spacing: 0.04em; +} + +h1, +h2, +h3, +h4, +h5, +h6, +p, +ul, +ol, +img, +figure, +video, +table { + margin: calc(var(--line-height) * 1.2) 0; +} + +a { + color: var(--accent); +} + +button { + position: relative; + font: inherit; + font-weight: bold; + text-decoration: none; + text-align: center; + background: transparent; + color: var(--accent); + padding: 5px 18px; + border: 4px solid var(--accent); + border-radius: var(--radius); + transition: background 0.15s linear; + appearance: none; + cursor: pointer; + outline: none; +} + +button:hover { + background: color-mix(in srgb, var(--accent) 15%, transparent); +} + +button:focus-visible, +a:focus-visible { + outline: 1px solid var(--accent); + outline-offset: 2px; +} + +fieldset { + display: inline-block; + border: 2px solid var(--foreground); + border-radius: calc(var(--radius) * 1.6); + padding: 10px; +} + +fieldset *:first-child { + margin-top: 0; +} + +fieldset input, +fieldset select, +fieldset textarea, +fieldset label, +fieldset button { + margin-top: calc(var(--line-height) * 0.5); + width: 100%; +} + +label { + display: inline-block; +} + +label input { + margin-top: 0; +} + +input, +textarea, +select { + background: transparent; + color: var(--foreground); + border: 1px solid var(--foreground); + border-radius: var(--radius); + padding: 10px; + font: inherit; + appearance: none; +} + +input[type="checkbox"] { + width: auto; +} + +input:focus-visible, +input:active, +textarea:focus-visible, +textarea:active, +select:focus-visible, +select:active { + border-color: var(--accent); + outline: 1px solid var(--accent); + outline-offset: 2px; +} + +input:active, +textarea:active, +select:active { + box-shadow: none; +} + +select { + background-image: linear-gradient( + 45deg, + transparent 50%, + var(--foreground) 50% + ), + linear-gradient(135deg, var(--foreground) 50%, transparent 50%); + background-position: calc(100% - 20px), calc(100% - 1em); + background-size: + 5px 5px, + 5px 5px; + background-repeat: no-repeat; + padding-right: 40px; +} + +select option { + background: var(--background); +} + +input[type="checkbox"] { + vertical-align: middle; + padding: 10px; + box-shadow: inset 0 0 0 3px var(--background); +} + +input[type="checkbox"]:checked { + background: var(--accent); +} + +img { + display: block; + max-width: 100%; + border: 8px solid var(--accent); + border-radius: var(--radius); + padding: 8px; + overflow: hidden; +} + +figure img, +figure video { + margin-bottom: 0; +} + +figure figcaption { + background: var(--accent); + color: var(--background); + text-align: center; + font-size: 1rem; + font-weight: normal; + margin-top: -8px; + border-radius: 0 0 var(--radius) var(--radius); +} + +ul, +ol { + margin-left: 4ch; + padding: 0; +} + +ul ul, +ul ol, +ol ul, +ol ol { + margin-top: 0; +} + +li::marker { + color: var(--accent); +} + +ul li, +ol li { + position: relative; +} + +code, +kbd { + font-family: + "Fira Code", + Monaco, + Consolas, + Ubuntu Mono, + monospace !important; + font-feature-settings: normal; + 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; + margin: 0; +} + +pre { + tab-size: 4; + background: var(--bg_dim) !important; + color: var(--foreground); + padding: 20px 10px; + font-size: 0.95rem !important; + overflow: auto; + border-radius: var(--radius); + border: 1px solid var(--bg3); +} + +pre code { + background: none !important; + margin: 0; + padding: 0; + font-size: inherit; + border: none; +} + +sup { + line-height: 0; +} + +abbr { + position: relative; + text-decoration-style: wavy; + text-decoration-color: var(--accent); + cursor: help; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.25em; +} + +mark { + background: color-mix(in srgb, var(--accent) 45%, transparent); + color: var(--foreground); +} + +blockquote { + position: relative; + border-top: 1px solid var(--accent); + border-bottom: 1px solid var(--accent); + margin: 0; + padding: 25px; +} + +blockquote:before { + content: ">"; + display: block; + position: absolute; + left: 0; + color: var(--accent); +} + +blockquote p:first-child { + margin-top: 0; +} + +blockquote p:last-child { + margin-bottom: 0; +} + +table { + table-layout: auto; + border-collapse: collapse; +} + +table, +th, +td { + border: 2px solid var(--foreground); + padding: 10px; +} + +th { + border-style: solid; + color: var(--foreground); + text-align: left; + text-transform: uppercase; + letter-spacing: 0.04em; +} + +hr { + width: 100%; + border: none; + background: var(--accent); + height: 2px; +} diff --git a/themes/boxgruv b/themes/boxgruv deleted file mode 160000 index 3225b22..0000000 --- a/themes/boxgruv +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 3225b22c0403b217257193211e65f3eded4be70e