diff --git a/.gitmodules b/.gitmodules index 0464326..3cf9b07 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,3 +1,6 @@ [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 681ecf7..007792f 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 -website uses [panr's Terminal theme](https://github.com/panr/hugo-theme-terminal). +live website is currently built off of the `terminal` branch. ## Style @@ -9,6 +9,17 @@ 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 deleted file mode 100644 index 4367b25..0000000 --- a/assets/css/prism.css +++ /dev/null @@ -1,210 +0,0 @@ -/** - * 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 deleted file mode 100644 index f10338f..0000000 --- a/assets/css/syntax.css +++ /dev/null @@ -1,5 +0,0 @@ -pre[class*=language-] { - margin: 0; - overflow: auto; -} - diff --git a/hugo.toml b/hugo.toml index a65398f..6c69525 100644 --- a/hugo.toml +++ b/hugo.toml @@ -2,7 +2,7 @@ baseURL = 'https://revsuine.xyz/' languageCode = 'en-gb' title = 'revsuine' -theme = 'terminal' +theme = 'boxgruv' [taxonomies] # allow you to set tags with tags = [ 'tags', 'here' ] in post front matter @@ -22,102 +22,94 @@ theme = 'terminal' ### 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 = true - enableGitInfo = 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 - # 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 page's word count - showWordCount = true +# # 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 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 +# # 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 = "/" - 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 +# [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" diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 367ddbb..a4ec266 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,24 +1,12 @@ - - - - -{{ $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 deleted file mode 100644 index 9943b50..0000000 Binary files a/static/favicon.png and /dev/null differ diff --git a/static/gruvbox-material.css b/static/gruvbox-material.css deleted file mode 100644 index 07fcebb..0000000 --- a/static/gruvbox-material.css +++ /dev/null @@ -1,37 +0,0 @@ -: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 deleted file mode 100644 index 9948355..0000000 Binary files a/static/og-image.png and /dev/null differ diff --git a/static/style.css b/static/style.css index 68719f4..f27374d 100644 --- a/static/style.css +++ b/static/style.css @@ -1,57 +1,10 @@ -@import url("gruvbox-material.css"); +/* make footer image display correctly */ -: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; +#cc-badge-div { + width: 88px; + height: 31px; + padding-top: 20px; + padding-right: 10px; + float: left !important; } diff --git a/static/terminal.css b/static/terminal.css deleted file mode 100644 index 810ced8..0000000 --- a/static/terminal.css +++ /dev/null @@ -1,370 +0,0 @@ -@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 new file mode 160000 index 0000000..3225b22 --- /dev/null +++ b/themes/boxgruv @@ -0,0 +1 @@ +Subproject commit 3225b22c0403b217257193211e65f3eded4be70e