diff --git a/.stylelintrc.json b/.stylelintrc.json index ca7b34e..300e374 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -4,7 +4,9 @@ "stylelint-config-prettier-scss" ], "rules": { - "max-empty-lines": 1 + "max-empty-lines": 1, + "color-function-notation": null, + "no-descending-specificity": null, + "selector-class-pattern": null } } - diff --git a/README.md b/README.md index 1c7ddd7..ad8e6bd 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,8 @@ # Terminal -## The theme is no longer maintained, but can still be used - -Even if the repository is archived you can still use the theme, fork it, download it, expand it, etc. Remember that each Hugo theme is a module that can be modified to match your needs. The theme is fully "open" and it depends only on the internal engines implemented in Hugo. - -The theme brings many useful features thanks to [all people that contributed to it](https://github.com/panr/hugo-theme-terminal/graphs/contributors) (I want to thank you all!). At the time of archiving the theme has reached 9th place on the [official Hugo Themes list](https://themes.gohugo.io/). This is huge! Thanks to you! - ---- -![Terminal](https://github.com/panr/hugo-theme-terminal/blob/master/images/screenshot.png?raw=true) - +![Terminal](https://github.com/panr/hugo-theme-terminal/blob/master/images/terminal-theme.png?raw=true) ### DEMO - https://hugo-terminal.now.sh/ @@ -33,7 +26,7 @@ The theme brings many useful features thanks to [all people that contributed to ## Features -- **5 duotone themes**, depending on your preferences (orange is default, red, blue, green, pink) +- fully customizable color schemes generated by [**terminal.css**](https://panr.github.io/terminal-css/). - [**Fira Code**](https://github.com/tonsky/FiraCode) as default monospaced font. It's gorgeous! - **really nice duotone**, custom syntax highlighting based on [**PrismJS**](https://prismjs.com) - fully responsive @@ -109,7 +102,7 @@ You can also choose **one of the 3 possibilities** to install the theme: # you fetch the theme module. # # hugo mod init [your website/module name] -hugo mod get github.com/panr/hugo-theme-terminal/v3 +hugo mod get github.com/panr/hugo-theme-terminal/v4 ``` and in your config file add: @@ -119,7 +112,7 @@ and in your config file add: # this is needed when you fetch the theme as a submodule to your repo. # replacements = "github.com/panr/hugo-theme-terminal -> themes/terminal" [[module.imports]] - path = 'github.com/panr/hugo-theme-terminal/v3' + path = 'github.com/panr/hugo-theme-terminal/v4' ``` Keep in mind that the theme by default won't show up in the `themes` directory. This means that you are using the theme as it was on the repository at the moment you fetched it. Your local `go.sum` file keeps all the references. Read more about Hugo Modules in the [official documentation](https://gohugo.io/hugo-modules/). @@ -173,9 +166,6 @@ paginate = 5 # the list of set content will show up on your index page (baseurl). contentTypeName = "posts" - # ["orange", "blue", "red", "green", "pink"] - themeColor = "orange" - # if you set this to 0, only submenu trigger will be visible showMenuItems = 2 @@ -197,15 +187,9 @@ paginate = 5 # If you use git, you can set `enableGitInfo` to `true` and then post will automatically get the last updated showLastUpdated = false - # set a custom favicon (default is a `themeColor` square) - # favicon = "favicon.ico" - # 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" - # set all headings to their default size (depending on browser settings) - # oneHeadingSize = true # default - # whether to show a page's estimated reading time # readingTime = false # default @@ -261,13 +245,11 @@ paginate = 5 # In case you would like to make changes to the theme and keep it locally in you repository, # uncomment the line below (and correct the local path if necessary). # -- - # replacements = "github.com/panr/hugo-theme-terminal -> themes/terminal" + # replacements = "github.com/panr/hugo-theme-terminal/v4 -> themes/terminal" [[module.imports]] - path = 'github.com/panr/hugo-theme-terminal' + path = 'github.com/panr/hugo-theme-terminal/v4' ``` -to `config.toml` file in your Hugo root directory and change params fields. In case you need, here's [a YAML version](https://gist.github.com/panr/9eeea6f595c257febdadc11763e3a6d1). - **NOTE:** Please keep in mind that currently `main menu` doesn't support nesting. ## Post archetype @@ -314,6 +296,6 @@ I'd be happy to know more about you and what you are doing. If you want to share ## License -Copyright © 2019-2022 Radosław Kozieł ([@panr](https://twitter.com/panr)) +Copyright © 2019-2024 Radosław Kozieł ([@panr](https://twitter.com/panr)) The theme is released under the MIT License. Check the [original theme license](https://github.com/panr/hugo-theme-terminal/blob/master/LICENSE.md) for additional licensing information. diff --git a/archetypes/posts.md b/archetypes/posts.md index af38c55..9cacca3 100644 --- a/archetypes/posts.md +++ b/archetypes/posts.md @@ -10,5 +10,4 @@ description = "" showFullContent = false readingTime = false hideComments = false -color = "" #color from the theme settings +++ diff --git a/assets/css/buttons.css b/assets/css/buttons.css new file mode 100644 index 0000000..4a9148f --- /dev/null +++ b/assets/css/buttons.css @@ -0,0 +1,124 @@ +.button-container { + display: table; + margin-left: auto; + margin-right: auto; +} + +button, +.button, +a.button { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 8px 18px; + margin: 5px 0; + text-decoration: none; + text-align: center; + border-radius: 8; + font: inherit; + font-weight: bold; + appearance: none; + cursor: pointer; + outline: none; +} + +button.outline, +.button.outline, +a.button.outline { + background: transparent; + box-shadow: none; + padding: 8px 18px; +} + +button.outline :hover, +.button.outline :hover, +a.button.outline :hover { + transform: none; + box-shadow: none; +} + +button.link, +.button.link, +a.button.link { + background: none; + font-size: 1rem; +} + +button.small, +.button.small, +a.button.small { + font-size: 0.8rem; +} + +button.wide, +.button.wide, +a.button.wide { + min-width: 200px; + padding: 14px 24px; +} + +a.button.inline { + background: none; + color: var(--accent); + padding: initial; + margin: initial; + border: initial; + font-weight: initial; + text-decoration: none; +} + +a.button.inline:active, +a.button.inline:hover { + background: none; +} + +a.button.inline:before { + content: "[" +} + +a.button.inline:after { + content: "]" +} + +a.button.inline.prev:before { + content: "← [" +} + +a.button.inline.next:after { + content: "] →" +} + +a.read-more, +a.read-more:hover, +a.read-more:active { + display: inline-flex; + border: none; + background: none; + box-shadow: none; + padding: 0; + max-width: 100%; + text-decoration: none; +} + +.code-toolbar { + margin-bottom: 20px; +} + +.code-toolbar .toolbar-item a { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 3px 8px; + margin-bottom: 5px; + text-decoration: none; + text-align: center; + font-size: 13px; + font-weight: 500; + border-radius: 8px; + border: 1px solid transparent; + appearance: none; + cursor: pointer; + outline: none; +} diff --git a/assets/css/buttons.scss b/assets/css/buttons.scss deleted file mode 100644 index d0b988d..0000000 --- a/assets/css/buttons.scss +++ /dev/null @@ -1,95 +0,0 @@ -.button-container { - display: table; - margin-left: auto; - margin-right: auto; -} - -button, -.button, -a.button { - position: relative; - display: flex; - align-items: center; - justify-content: center; - padding: 8px 18px; - margin: 5px 0; - text-decoration: none; - text-align: center; - border-radius: 8; - border: 1px solid $accent; - background: $accent; - color: $background; - font: inherit; - font-weight: bold; - appearance: none; - cursor: pointer; - outline: none; - - &:hover { - background: transparentize($accent, .1); - } - - /* variants */ - - &.outline { - background: transparent; - box-shadow: none; - padding: 8px 18px; - - :hover { - transform: none; - box-shadow: none; - } - } - - &.link { - background: none; - font-size: 1rem; - } - - /* sizes */ - - &.small { - font-size: .8rem; - } - - &.wide { - min-width: 200px; - padding: 14px 24px; - } -} - -a.read-more, -a.read-more:hover, -a.read-more:active { - display: inline-flex; - border: none; - color: $accent; - background: none; - box-shadow: none; - padding: 0; - margin: 20px 0; - max-width: 100%; -} - -.code-toolbar { - margin-bottom: 20px; - - .toolbar-item a { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 3px 8px; - margin-bottom: 5px; - text-decoration: none; - text-align: center; - font-size: 13px; - font-weight: 500; - border-radius: 8px; - border: 1px solid transparent; - appearance: none; - cursor: pointer; - outline: none; - } -} diff --git a/assets/css/code.css b/assets/css/code.css new file mode 100644 index 0000000..fb2fc2d --- /dev/null +++ b/assets/css/code.css @@ -0,0 +1,118 @@ +/* _code.scss */ +pre { + margin: 20px 0; +} + +.code-toolbar { + position: relative; + margin: 20px 0; + border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent); +} + +.code-toolbar + .code-toolbar, +.code-toolbar + .highlight, +.code-toolbar + .highlight .code-toolbar { + border-top: 0; + margin-top: -20px; +} + +.code-toolbar pre, .code-toolbar code { + border: none; +} + +.code-toolbar code { + display: block; + color: color-mix(in srgb, var(--accent) 50%, var(--foreground)); +} + +.code-toolbar > .toolbar button { + font-size: 0.8em !important; + font-weight: bold !important; + background: var(--accent) !important; + color: var(--background) !important; + border-radius: var(--radius) !important; + box-shadow: none !important; + border: 1px solid var(--background) !important; + margin: 6px !important; + padding: 10px !important; + user-select: none; +} + +.collapsable-code { + position: relative; + width: 100%; + margin: 40px 0; +} + +.collapsable-code input[type=checkbox] { + position: absolute; + visibility: hidden; +} + +.collapsable-code input[type=checkbox]:checked ~ pre, +.collapsable-code input[type=checkbox]:checked ~ .code-toolbar pre { + display: none; +} + +.collapsable-code input[type=checkbox]:checked ~ .code-toolbar { + padding: 0; + border-top: none; +} + +.collapsable-code input[type=checkbox]:checked ~ .code-toolbar .toolbar { + display: none; +} + +.collapsable-code input[type=checkbox]:checked ~ label .collapsable-code__toggle::after { + content: attr(data-label-expand); +} + +.collapsable-code label { + position: relative; + display: flex; + justify-content: space-between; + min-width: 30px; + min-height: 30px; + margin: 0; + border-bottom: 1px solid var(--accent); + cursor: pointer; +} + +.collapsable-code__title { + flex: 1; + color: var(--accent); + padding: 3px 10px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.collapsable-code__language { + color: var(--accent); + border: 1px solid var(--accent); + border-bottom: none; + text-transform: uppercase; + padding: 3px 10px; +} + +.collapsable-code__toggle { + color: var(--accent); + font-size: 16px; + padding: 3px 10px; +} + +.collapsable-code__toggle::after { + content: attr(data-label-collapse); +} + +.collapsable-code pre { + margin-top: 0; +} + +.collapsable-code pre::first-line { + line-height: 0; +} + +.collapsable-code .code-toolbar { + margin: 0; +} diff --git a/assets/css/code.scss b/assets/css/code.scss deleted file mode 100644 index 9ac2f6b..0000000 --- a/assets/css/code.scss +++ /dev/null @@ -1,84 +0,0 @@ -.collapsable-code { - $border-color: mix($accent, #999, 90%); - - position: relative; - width: 100%; - margin: 40px 0; - - input[type="checkbox"] { - position: absolute; - visibility: hidden; - } - - input[type="checkbox"]:checked { - ~ pre, - ~ .code-toolbar pre { - height: 0; - padding: 0; - border-top: none; - } - - ~ .code-toolbar { - padding: 0; - border-top: none; - - .toolbar { - display: none; - } - } - - ~ label .collapsable-code__toggle:after { - content: attr(data-label-expand); - } - } - - label { - position: relative; - display: flex; - justify-content: space-between; - min-width: 30px; - min-height: 30px; - margin: 0; - border-bottom: 1px solid $border-color; - cursor: pointer; - } - - &__title { - flex: 1; - color: $accent; - padding: 3px 10px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } - - &__language { - color: $accent; - border: 1px solid $border-color; - border-bottom: none; - text-transform: uppercase; - padding: 3px 10px; - } - - &__toggle { - color: $accent; - font-size: 16px; - padding: 3px 10px; - - &:after { - content: attr(data-label-collapse); - } - } - - pre { - margin-top: 0; - - &::first-line { - line-height: 0; - } - } - - .code-toolbar { - margin: 0; - } -} diff --git a/assets/css/color/blue.scss b/assets/css/color/blue.scss deleted file mode 100644 index 5a3b455..0000000 --- a/assets/css/color/blue.scss +++ /dev/null @@ -1 +0,0 @@ -$accent: #23B0FF; diff --git a/assets/css/color/green.scss b/assets/css/color/green.scss deleted file mode 100644 index efb853a..0000000 --- a/assets/css/color/green.scss +++ /dev/null @@ -1 +0,0 @@ -$accent: #78E2A0; diff --git a/assets/css/color/orange.scss b/assets/css/color/orange.scss deleted file mode 100644 index 5a6ab3c..0000000 --- a/assets/css/color/orange.scss +++ /dev/null @@ -1 +0,0 @@ -$accent: #FFA86A; diff --git a/assets/css/color/pink.scss b/assets/css/color/pink.scss deleted file mode 100644 index fce2e73..0000000 --- a/assets/css/color/pink.scss +++ /dev/null @@ -1 +0,0 @@ -$accent: #EE72F1; diff --git a/assets/css/color/red.scss b/assets/css/color/red.scss deleted file mode 100644 index 1f9bd6e..0000000 --- a/assets/css/color/red.scss +++ /dev/null @@ -1 +0,0 @@ -$accent: #FF6266; diff --git a/assets/css/font.scss b/assets/css/fonts.css similarity index 66% rename from assets/css/font.scss rename to assets/css/fonts.css index aab7249..9a920b0 100644 --- a/assets/css/font.scss +++ b/assets/css/fonts.css @@ -1,15 +1,15 @@ +/* _font.scss */ @font-face { font-display: swap; - font-family: 'Fira Code'; - font-style: normal; + font-family: "Fira Code"; + font-style: normal; font-weight: 400; src: url("../fonts/FiraCode-Regular.woff") format("woff"); } - @font-face { font-display: swap; - font-family: 'Fira Code'; - font-style: normal; + font-family: "Fira Code"; + font-style: normal; font-weight: 800; src: url("../fonts/FiraCode-Bold.woff") format("woff"); } diff --git a/assets/css/footer.css b/assets/css/footer.css new file mode 100644 index 0000000..ec64838 --- /dev/null +++ b/assets/css/footer.css @@ -0,0 +1,47 @@ +/* _footer.scss */ +.footer { + padding: 40px 0; + flex-grow: 0; + opacity: 0.5; +} + +.footer__inner { + display: flex; + align-items: center; + justify-content: space-between; + margin: 0; + width: 760px; + max-width: 100%; +} + +.footer a { + color: inherit; +} + +.footer .copyright { + display: flex; + flex-flow: row wrap; + flex: 1; + align-items: center; + font-size: 1rem; + justify-content: center; +} + +.footer .copyright--user { + margin: auto; + text-align: center; +} + +.footer .copyright > *:first-child:not(:only-child) { + margin-right: 10px; +} + +.footer .copyright span { + white-space: nowrap; +} + +@media (max-width: 900px) { + .footer__inner { + flex-direction: column; + } +} diff --git a/assets/css/footer.scss b/assets/css/footer.scss deleted file mode 100644 index d7297b6..0000000 --- a/assets/css/footer.scss +++ /dev/null @@ -1,44 +0,0 @@ -.footer { - padding: 40px 0; - flex-grow: 0; - opacity: .5; - - &__inner { - display: flex; - align-items: center; - justify-content: space-between; - margin: 0; - width: 760px; - max-width: 100%; - - @media ($tablet) { - flex-direction: column; - } - } - - a { - color: inherit; - } - - .copyright { - display: flex; - flex-flow: row wrap; - flex: 1; - align-items: center; - font-size: 1rem; - justify-content: center; - - &--user { - margin: auto; - text-align: center; - } - - & > *:first-child:not(:only-child) { - margin-right: 10px; - } - - span { - white-space: nowrap; - } - } -} diff --git a/assets/css/form.scss b/assets/css/form.scss deleted file mode 100644 index 78a1080..0000000 --- a/assets/css/form.scss +++ /dev/null @@ -1,43 +0,0 @@ -input, textarea, select { - background: transparent; - color: $accent; - border: 1px solid $accent; - border-radius: 0; - padding: 10px; - margin: 5px 0; - font: inherit; - appearance: none; - - &:focus, :active { - border-color: $color; - outline: 1px solid $color; - } - - &:active { - box-shadow: none; - } -} - -select { - background: $background; - - option { - background: $background; - } -} - -::placeholder { - color: transparentize($accent, .5); -} - -input { - &[type="checkbox"] { - vertical-align: middle; - padding: 10px; - box-shadow: inset 0 0 0 3px $background; - - &:checked { - background: $accent; - } - } -} diff --git a/assets/css/gist.css b/assets/css/gist.css new file mode 100644 index 0000000..8a05af5 --- /dev/null +++ b/assets/css/gist.css @@ -0,0 +1,5 @@ +/* _gist.scss */ +body .gist .blob-num, +body .gist .blob-code-inner { + border: none; +} diff --git a/assets/css/gist.scss b/assets/css/gist.scss deleted file mode 100644 index 3ed8145..0000000 --- a/assets/css/gist.scss +++ /dev/null @@ -1,6 +0,0 @@ -body .gist .blob-num /* line numbers */, -body .gist .blob-code-inner -{ - border: none; -} - diff --git a/assets/css/header.css b/assets/css/header.css new file mode 100644 index 0000000..aa017af --- /dev/null +++ b/assets/css/header.css @@ -0,0 +1,46 @@ +/* _header.scss */ +.header { + display: flex; + flex-direction: column; + position: relative; +} + +.header__inner { + display: flex; + align-items: center; + justify-content: space-between; +} + +.header__logo { + display: flex; + flex: 1; +} + +.header__logo::after { + content: ""; + background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 10px); + display: block; + width: 100%; + right: 10px; +} + +.header__logo a { + flex: 0 0 auto; + max-width: 100%; + text-decoration: none; +} + +.logo { + display: flex; + align-items: center; + text-decoration: none; + background: var(--accent); + color: var(--background); + padding: 5px 10px; +} + +@media print { + .header { + display: none; + } +} diff --git a/assets/css/header.scss b/assets/css/header.scss deleted file mode 100644 index 61c45a8..0000000 --- a/assets/css/header.scss +++ /dev/null @@ -1,34 +0,0 @@ -.header { - display: flex; - flex-direction: column; - position: relative; - - @media print { - display: none; - } - - &__inner { - display: flex; - align-items: center; - justify-content: space-between; - } - - &__logo { - display: flex; - flex: 1; - - &:after { - content: ''; - background: repeating-linear-gradient(90deg, $accent, $accent 2px, transparent 0, transparent 10px); - display: block; - width: 100%; - right: 10px; - } - - a { - flex: 0 0 auto; - max-width: 100%; - text-decoration: none; - } - } -} diff --git a/assets/css/logo.scss b/assets/css/logo.scss deleted file mode 100644 index 33c7fef..0000000 --- a/assets/css/logo.scss +++ /dev/null @@ -1,8 +0,0 @@ -.logo { - display: flex; - align-items: center; - text-decoration: none; - background: $accent; - color: black; - padding: 5px 10px; -} diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 0000000..3117a9f --- /dev/null +++ b/assets/css/main.css @@ -0,0 +1,170 @@ +/* _main.scss */ +html { + box-sizing: border-box; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +body { + margin: 0; + padding: 0; + font-family: "Fira Code", Monaco, Consolas, "Ubuntu Mono", monospace; + font-size: 1rem; + line-height: 1.54; + letter-spacing: -0.02em; + background-color: var(--background); + color: var(--foreground); + text-rendering: optimizelegibility; + -webkit-font-smoothing: antialiased; + font-feature-settings: "liga", "tnum", "zero", "ss01", "locl"; + font-variant-ligatures: contextual; + -webkit-overflow-scrolling: touch; + text-size-adjust: 100%; +} + +.headings--one-size h1, +.headings--one-size h2, +.headings--one-size h3, +.headings--one-size h4, +.headings--one-size h5, +.headings--one-size h6 { + font-size: 1.4rem; + line-height: 1.3; + margin: 20px 0; +} + +.headings--one-size ~ h1:first-child, +.headings--one-size ~ h2:first-child, +.headings--one-size ~ h3:first-child, +.headings--one-size ~ h4:first-child, +.headings--one-size ~ h5:first-child, +.headings--one-size ~ h6:first-child { + margin-top: 20px; +} + +img.left { + margin-right: auto; +} + +img.center { + margin-left: auto; + margin-right: auto; +} + +img.right { + margin-left: auto; +} + +figure.left { + margin-right: auto; +} + +figure.center { + margin-left: auto; + margin-right: auto; +} + +figure.right { + margin-left: auto; +} + +figure figcaption.left { + text-align: left; +} + +figure figcaption.center { + text-align: center; +} + +figure figcaption.right { + text-align: right; +} + +blockquote.twitter-tweet { + position: relative; + background: var(--background); + font: inherit; + color: inherit; + border: 1px solid var(--accent); + padding-top: 60px; +} + +blockquote.twitter-tweet a { + color: var(--accent); + text-decoration: underline; +} + +blockquote.twitter-tweet::before { + content: "> From X:"; + position: absolute; + top: 20px; + left: 20px; + color: var(--accent); + font-weight: bold; +} + +.container { + display: flex; + flex-direction: column; + padding: 40px; + max-width: 864px; + min-height: 100vh; + border-right: 1px solid color-mix(in srgb, var(--accent) 10%, transparent); +} + +.container.full, .container.center { + border: none; + margin: 0 auto; +} + +.container.full { + max-width: 100%; +} + +.content { + display: flex; + flex-direction: column; +} + +.hidden { + display: none; +} + +.__h_video { + padding-bottom: 58.23% !important; + overflow: visible !important; +} + +iframe[src*="youtube.com"] { + border: 8px solid var(--accent) !important; + padding: 8px !important; +} + +@media (max-width: 684px) { + body { + font-size: 1rem; + } + + .container { + padding: 20px; + } + + ul, + ol { + margin-left: 20px; + } +} + +@media print { + .container { + display: initial; + } + + .content { + display: initial; + } +} diff --git a/assets/css/main.scss b/assets/css/main.scss deleted file mode 100644 index 7585edd..0000000 --- a/assets/css/main.scss +++ /dev/null @@ -1,346 +0,0 @@ -html { - box-sizing: border-box; -} - -*, -*:before, -*:after { - box-sizing: inherit; -} - -body { - margin: 0; - padding: 0; - font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace; - font-size: 1rem; - line-height: 1.54; - letter-spacing: -0.02em; - background-color: $background; - color: $color; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - font-feature-settings: "liga", "tnum", "zero", "ss01", "locl"; - font-variant-ligatures: contextual; - -webkit-overflow-scrolling: touch; - -webkit-text-size-adjust: 100%; - - @media ($phone) { - font-size: 1rem; - } -} - -.headings--one-size { - h1, - h2, - h3, - h4, - h5, - h6 { - line-height: 1.3; - - &:not(first-child) { - margin-top: 40px; - } - } - - h1, - h2, - h3 { - font-size: 1.4rem; - } - - h4, - h5, - h6 { - font-size: 1.2rem; - } -} - -a { - color: inherit; - - /* Waiting for a better times... */ - /* &:has(code) { - text-decoration-color: $accent; - } */ -} - -img { - display: block; - max-width: 100%; - - &.left { - margin-right: auto; - } - - &.center { - margin-left: auto; - margin-right: auto; - } - - &.right { - margin-left: auto; - } -} - -p { - margin-bottom: 20px; -} - -figure { - display: table; - max-width: 100%; - margin: 25px 0; - - &.left { - margin-right: auto; - } - - &.center { - margin-left: auto; - margin-right: auto; - } - - &.right { - margin-left: auto; - } - - figcaption { - font-size: 14px; - padding: 5px 10px; - margin-top: 5px; - background: $accent; - color: $background; - /* opacity: .8; */ - - &.left { - text-align: left; - } - - &.center { - text-align: center; - } - - &.right { - text-align: right; - } - } -} - -code, kbd { - font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important; - font-feature-settings: normal; - background: transparentize($accent, .8); - color: $accent; - padding: 1px 6px; - margin: 0 2px; - font-size: .95rem; - - code, kbd { - background: transparent; - padding: 0; - margin: 0; - } -} - -pre { - background: transparent !important; - padding: 20px 10px; - margin: 40px 0; - font-size: .95rem !important; - overflow: auto; - border-top: 1px solid rgba(255, 255, 255, .1); - border-bottom: 1px solid rgba(255, 255, 255, .1); - - + pre { - border-top: 0; - margin-top: -40px; - } - - @media ($phone) { - white-space: pre-wrap; - word-wrap: break-word; - } - - code { - background: none !important; - margin: 0; - padding: 0; - font-size: inherit; - border: none; - } -} - -blockquote { - border-top: 1px solid $accent; - border-bottom: 1px solid $accent; - margin: 40px 0; - padding: 25px; - - @media ($phone) { - padding-right: 0; - } - - p:first-of-type { - margin-top: 0; - } - - p:last-of-type { - margin-bottom: 0; - } - - p { - position: relative; - } - - p:first-of-type:before { - content: '>'; - display: block; - position: absolute; - left: -25px; - color: $accent; - } - - &.twitter-tweet { - position: relative; - background: transparentize($accent, .9); - font: inherit; - color: inherit; - border: 1px solid $accent; - padding-top: 60px; - - p:before { - content: ''; - } - - &:before { - content: '> From Twitter:'; - position: absolute; - top: 20px; - color: $accent; - font-weight: bold; - } - - a { - color: $accent; - } - } -} - -table { - table-layout: auto; - border-collapse: collapse; - width: 100%; - margin: 40px 0; -} - -table, -th, -td { - border: 1px dashed $accent; - padding: 10px; -} - -th { - color: $accent; -} - -ul, -ol { - margin-left: 22px; - padding: 0; - - li { - position: relative; - } - - @media ($phone) { - margin-left: 20px; - } -} - -ol { - list-style: none; - counter-reset: li; - - > li { - counter-increment: li; - - &:before { - content: counter(li); - position: absolute; - right: calc(100% + 10px); - color: $accent; - display: inline-block; - text-align: right; - } - - > ol { - margin-left: 38px; - - > li { - counter-increment: li; - - &:before { - content: counters(li, ".") " "; - } - } - } - } -} - -mark { - background: $accent; - color: $background; -} - -.container { - display: flex; - flex-direction: column; - padding: 40px; - max-width: 864px; - min-height: 100vh; - border-right: 1px solid rgba(255, 255, 255, 0.1); - - &.full, - &.center { - border: none; - margin: 0 auto; - } - - &.full { - max-width: 100%; - } - - @media ($phone) { - padding: 20px; - } - - @media print { - display: initial; - } -} - -.content { - display: flex; - flex-direction: column; - - @media print { - display: initial; - } -} - -hr { - width: 100%; - border: none; - background: $border-color; - height: 1px; -} - -.hidden { - display: none; -} - -sup { - line-height: 0; -} diff --git a/assets/css/menu.css b/assets/css/menu.css new file mode 100644 index 0000000..87c4b04 --- /dev/null +++ b/assets/css/menu.css @@ -0,0 +1,149 @@ +/* _menu.scss */ +.navigation-menu { + display: flex; + align-items: flex-start; + justify-content: space-between; + margin: 20px 1px; +} + +.navigation-menu__inner { + display: flex; + flex: 1; + flex-wrap: wrap; + list-style: none; + margin: 0; + padding: 0; +} + +.navigation-menu__inner > li { + flex: 0 0 auto; + margin-bottom: 10px; + white-space: nowrap; +} + +.navigation-menu__inner > li:not(:last-of-type) { + margin-right: 20px; +} + +.navigation-menu .spacer { + flex-grow: 1 !important; +} + +.menu { + display: flex; + flex-direction: column; + position: relative; + list-style: none; + padding: 0; + margin: 0; +} + +.menu__trigger { + margin-right: 0 !important; + color: var(--accent); + user-select: none; + cursor: pointer; +} + +.menu__dropdown { + display: none; + flex-direction: column; + position: absolute; + background: var(--background); + box-shadow: 0 10px var(--background), -10px 10px var(--background), 10px 10px var(--background); + color: var(--accent); + border: 2px solid var(--accent); + margin: 0; + padding: 10px; + top: 10px; + left: 0; + list-style: none; + z-index: 99; +} + +.open .menu__dropdown { + display: flex; +} + +.menu__dropdown > li { + flex: 0 0 auto; +} + +.menu__dropdown > li:not(:last-of-type) { + margin-bottom: 10px; +} + +.menu__dropdown > li a { + display: flex; + padding: 5px; +} + +.menu--mobile .menu__trigger { + color: var(--accent); + border: 2px solid; + margin-left: 10px; + height: 100%; + padding: 3px 8px; + margin-bottom: 0 !important; + position: relative; + cursor: pointer; + display: none; +} + +.menu--mobile li { + flex: 0 0 auto; +} + +.menu--mobile li:not(:last-of-type) { + margin-bottom: 10px; +} + +.menu--language-selector .menu__trigger { + color: var(--accent); + border: 2px solid; + margin-left: 10px; + height: 100%; + padding: 3px 8px; + margin-bottom: 0 !important; + position: relative; + cursor: pointer; +} + +.menu--language-selector .menu__dropdown { + left: auto; + right: 0; +} + +@media (max-width: 684px) { + .navigation-menu { + margin: 0; + } + + .navigation-menu__inner { + flex-direction: column; + align-items: flex-start; + padding: 0; + } + + .navigation-menu__inner li { + margin: 0; + padding: 5px; + } + + .menu--desktop { + display: none; + } + + .menu--mobile .menu__trigger { + display: block; + } + + .menu--mobile .menu__dropdown { + left: auto; + right: 0; + } + + .menu--language-selector .menu__trigger { + display: none; + } +} diff --git a/assets/css/menu.scss b/assets/css/menu.scss deleted file mode 100644 index fdd3075..0000000 --- a/assets/css/menu.scss +++ /dev/null @@ -1,157 +0,0 @@ -@mixin menu { - display: none; - flex-direction: column; - $shadow-color: transparentize($background, .2); - $shadow: 0 10px $shadow-color, -10px 10px $shadow-color, 10px 10px $shadow-color; - position: absolute; - background: $background; - box-shadow: $shadow; - color: white; - border: 2px solid; - margin: 0; - padding: 10px; - top: 10px; - left: 0; - list-style: none; - z-index: 99; -} - -@mixin header-menu-trigger { - color: $accent; - border: 2px solid; - margin-left: 10px; - height: 100%; - padding: 3px 8px; - margin-bottom: 0 !important; - position: relative; - cursor: pointer; -} - -.navigation-menu { - display: flex; - align-items: flex-start; - justify-content: space-between; - margin: 20px 1px; - - @media ($phone) { - margin: 0; - } - - &__inner { - display: flex; - flex: 1; - flex-wrap: wrap; - list-style: none; - margin: 0; - padding: 0; - - > li { - flex: 0 0 auto; - margin-bottom: 10px; - white-space: nowrap; - - &:not(:last-of-type) { - margin-right: 20px; - } - } - - @media ($phone) { - flex-direction: column; - align-items: flex-start; - padding: 0; - - li { - margin: 0; - padding: 5px; - } - } - } - - .spacer { - flex-grow: 1 !important; - } -} - -.menu { - display: flex; - flex-direction: column; - position: relative; - list-style: none; - padding: 0; - margin: 0; - - &__trigger { - margin-right: 0 !important; - color: $accent; - user-select: none; - cursor: pointer; - } - - &__dropdown { - @include menu; - - .open & { - display: flex; - } - - > li { - flex: 0 0 auto; - - &:not(:last-of-type) { - margin-bottom: 10px; - } - - a { - display: flex; - padding: 5px; - } - } - } - - &--desktop { - @media ($phone) { - display: none - } - } - - &--mobile { - .menu__trigger { - @include header-menu-trigger; - display: none; - - @media ($phone) { - display: block; - } - } - - .menu__dropdown { - @media ($phone) { - left: auto; - right: 0; - } - } - - li { - flex: 0 0 auto; - - &:not(:last-of-type) { - margin-bottom: 10px; - } - } - } - - &--language-selector { - .menu__trigger { - @include header-menu-trigger; - - @media ($phone) { - display: none; - } - } - - .menu__dropdown { - left: auto; - right: 0; - } - } -} diff --git a/assets/css/pagination.css b/assets/css/pagination.css new file mode 100644 index 0000000..5cf162b --- /dev/null +++ b/assets/css/pagination.css @@ -0,0 +1,97 @@ +/* _pagination.scss */ +.pagination { + margin-top: 50px; +} + +.pagination__title { + display: flex; + text-align: center; + position: relative; + margin: 100px 0 20px; +} + +.pagination__title-h { + text-align: center; + margin: 0 auto; + padding: 5px 10px; + background: var(--background); + color: color-mix(in srgb var(--foreground) 30%, transparent); + font-size: 0.8rem; + text-transform: uppercase; + text-decoration: none; + letter-spacing: 0.1em; + z-index: 1; +} + +.pagination__title hr { + position: absolute; + left: 0; + right: 0; + width: 100%; + margin-top: 15px; + z-index: 0; +} + +.pagination__buttons { + display: flex; + align-items: center; + justify-content: center; + flex-flow: row wrap; + gap: 10px; +} + +.pagination__buttons a { + display: inline-flex; + max-width: 100%; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + text-decoration: none; +} + +.button { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 1rem; + padding: 0; + appearance: none; +} + +.button a { + display: flex; + justify-content: center; + flex: 1; + padding: 8px 16px; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.button__text { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.next .button__icon { + margin-left: 8px; +} + +.prev .button__icon { + margin-right: 8px; +} + +@media (max-width: 684px) { + .button { + flex: 1; + } +} + +@media print { + .pagination { + display: none; + } +} diff --git a/assets/css/pagination.scss b/assets/css/pagination.scss deleted file mode 100644 index c65efcb..0000000 --- a/assets/css/pagination.scss +++ /dev/null @@ -1,87 +0,0 @@ -.pagination { - margin-top: 50px; - - @media print { - display: none; - } - - &__title { - display: flex; - text-align: center; - position: relative; - margin: 100px 0 20px; - - &-h { - text-align: center; - margin: 0 auto; - padding: 5px 10px; - background: $background; - color: transparentize($color, .7); - font-size: .8rem; - text-transform: uppercase; - text-decoration: none; - letter-spacing: .1em; - z-index: 1; - } - - hr { - position: absolute; - left: 0; - right: 0; - width: 100%; - margin-top: 15px; - z-index: 0; - } - } - - &__buttons { - display: flex; - align-items: center; - justify-content: center; - flex-flow: row wrap; - gap: 10px; - - a { - text-decoration: none; - } - } -} - -.button { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - font-size: 1rem; - padding: 0; - appearance: none; - - @media($phone) { - flex: 1; - } - - a { - display: flex; - justify-content: center; - flex: 1; - padding: 8px 16px; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } - - &__text { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } - - &.next .button__icon { - margin-left: 8px; - } - - &.previous .button__icon { - margin-right: 8px; - } -} diff --git a/assets/css/post.css b/assets/css/post.css new file mode 100644 index 0000000..77bfe4c --- /dev/null +++ b/assets/css/post.css @@ -0,0 +1,140 @@ +/* _post.scss */ +.index-content { + margin-top: 20px; +} + +.framed { + border: 1px solid var(--accent); + padding: 20px; +} + +.framed *:first-child { + margin-top: 0; +} + +.framed *:last-child { + margin-bottom: 0; +} + +.posts { + width: 100%; +} + +.post { + width: 100%; + text-align: left; + padding: 40px 0; +} + +.post:not(:last-of-type) { + border-bottom: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent); +} + +.post-meta { + font-size: 1rem; + margin-bottom: 10px; + color: color-mix(in srgb, var(--foreground) 50%, transparent); +} + +.post-meta > *:not(:first-child)::before { + content: "::"; + display: inline-block; + margin: 0 8px; +} + +.post-title { + position: relative; + color: var(--accent); + margin-top: 0 !important; + margin-bottom: 15px !important; + padding-bottom: 15px; + border-bottom: 3px dotted var(--accent); +} + +.post-title::after { + content: ""; + position: absolute; + bottom: 2px; + display: block; + width: 100%; + border-bottom: 3px dotted var(--accent); +} + +.post-title a { + text-decoration: none; +} + +.post-tags { + display: block; + margin-bottom: 20px; + font-size: 1rem; + color: var(--accent); +} + +.table-of-contents { + margin: 40px 0; +} + +.post-content { + margin-top: 30px; +} + +.post-cover { + margin: 40px 0; +} + +.post ul { + list-style: none; +} + +.post ul li:not(:empty)::before { + content: "-"; + position: absolute; + left: -20px; + color: var(--accent); +} + +.post--regulation h1 { + justify-content: center; +} + +.post--regulation h2 { + justify-content: center; + margin-bottom: 10px; +} + +.post--regulation h2 + h2 { + margin-top: -10px; + margin-bottom: 20px; +} + +.hanchor { + color: var(--accent); + text-decoration: none; + margin-left: 10px; + visibility: hidden; +} + +h1:hover .hanchor, +h2:hover .hanchor, +h3:hover .hanchor, +h4:hover .hanchor, +h5:hover .hanchor, +h6:hover .hanchor { + visibility: visible; +} + +.footnotes { + color: color-mix(in srgb, var(--foreground) 50%, transparent); +} + +.footnotes hr { + background: color-mix(in srgb, var(--foreground) 50%, transparent); +} + +@media (max-width: 684px) { + .post-cover { + padding: 10px; + border-width: 10px; + } +} diff --git a/assets/css/post.scss b/assets/css/post.scss deleted file mode 100644 index 0457ef7..0000000 --- a/assets/css/post.scss +++ /dev/null @@ -1,136 +0,0 @@ -.index-content { - margin-top: 20px; -} - -.framed { - border: 1px solid $accent; - padding: 20px; - - *:first-child { - margin-top: 0; - } - - *:last-child { - margin-bottom: 0; - } -} - -.posts { - width: 100%; -} - -.post { - width: 100%; - text-align: left; - margin: 20px auto; - padding: 20px 0; - - &:not(:last-of-type) { - border-bottom: 1px solid $border-color; - } - - &-meta { - font-size: 1rem; - margin-bottom: 10px; - color: transparentize($accent, .3); - - & > *:not(:first-child) { - &::before { - content: "::"; - display: inline-block; - margin: 0 8px; - } - } - } - - &-title { - $border: 3px dotted $accent; - position: relative; - color: $accent; - margin: 0 0 15px; - padding-bottom: 15px; - border-bottom: $border; - - &:after { - content: ''; - position: absolute; - bottom: 2px; - display: block; - width: 100%; - border-bottom: $border; - } - - a { - text-decoration: none; - } - } - - &-tags { - display: block; - margin-bottom: 20px; - font-size: 1rem; - opacity: .5; - - a { - text-decoration: none; - } - } - - &-content { - margin-top: 30px; - } - - &-cover { - border: 20px solid $accent; - background: transparent; - margin: 40px 0; - padding: 20px; - - @media ($phone) { - padding: 10px; - border-width: 10px; - } - } - - ul { - list-style: none; - - li:not(:empty):before { - content: '-'; - position: absolute; - left: -20px; - color: $accent; - } - } -} - -.post--regulation { - h1 { - justify-content: center; - } - - h2 { - justify-content: center; - margin-bottom: 10px; - - & + h2 { - margin-top: -10px; - margin-bottom: 20px; - } - } -} - -.hanchor { - color: transparentize($accent, .1); - text-decoration: none; - margin-left: 10px; - visibility: hidden; -} - -h1:hover a, h2:hover a, h3:hover a, h4:hover a { - visibility: visible; -} - -.footnotes { - color: transparentize($color, .5); -} diff --git a/assets/css/prism.css b/assets/css/prism.css new file mode 100644 index 0000000..653e502 --- /dev/null +++ b/assets/css/prism.css @@ -0,0 +1,324 @@ +/* _prism.scss */ + +/* PrismJS 1.24.1 +https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+actionscript+apacheconf+applescript+bash+c+csharp+cpp+cmake+coffeescript+csp+css-extras+diff+django+docker+elixir+elm+erlang+fsharp+flow+git+go+graphql+haml+handlebars+haskell+http+java+json+kotlin+latex+less+llvm+makefile+markdown+markup-templating+nasm+objectivec+ocaml+perl+php+php-extras+powershell+processing+pug+python+r+jsx+tsx+reason+ruby+rust+sass+scss+scala+scheme+sql+stylus+swift+textile+toml+twig+typescript+vim+visual-basic+wasm+yaml&plugins=line-highlight+line-numbers+jsonp-highlight+highlight-keywords+command-line+toolbar+copy-to-clipboard */ + +/** + * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML + * Based on https://github.com/chriskempson/tomorrow-theme + * @author Rose Pritchard + */ +code[class*=language-], +pre[class*=language-] { + color: #ccc; + background: none; + font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; + font-size: 1em; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + tab-size: 4; + hyphens: none; +} + +/* Code blocks */ +pre[class*=language-] { + padding: 1em; + margin: 0.5em 0; + overflow: auto; +} + +:not(pre) > code[class*=language-], +pre[class*=language-] { + background: #2d2d2d; +} + +/* Inline code */ +:not(pre) > code[class*=language-] { + padding: 0.1em; + border-radius: 0.3em; + white-space: normal; +} + +.token.comment, +.token.block-comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #999; +} + +.token.punctuation { + color: #ccc; +} + +.token.tag, +.token.attr-name, +.token.namespace, +.token.deleted { + color: #e2777a; +} + +.token.function-name { + color: #6196cc; +} + +.token.boolean, +.token.number, +.token.function { + color: #f08d49; +} + +.token.property, +.token.class-name, +.token.constant, +.token.symbol { + color: #f8c555; +} + +.token.selector, +.token.important, +.token.atrule, +.token.keyword, +.token.builtin { + color: #cc99cd; +} + +.token.string, +.token.char, +.token.attr-value, +.token.regex, +.token.variable { + color: #7ec699; +} + +.token.operator, +.token.entity, +.token.url { + color: #67cdcc; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} + +.token.inserted { + color: green; +} + +pre[data-line] { + position: relative; + padding: 1em 0 1em 3em; +} + +.line-highlight { + position: absolute; + left: 0; + right: 0; + padding: inherit 0; + margin-top: 1em; + + /* Same as .prism’s padding-top */ + background: hsla(24deg, 20%, 50%, 8%); + background: linear-gradient(to right, hsla(24deg, 20%, 50%, 10%) 70%, hsla(24deg, 20%, 50%, 0%)); + pointer-events: none; + line-height: inherit; + white-space: pre; +} + +@media print { + .line-highlight { + /* + * This will prevent browsers from replacing the background color with white. + * It's necessary because the element is layered on top of the displayed code. + */ + -webkit-print-color-adjust: exact; + color-adjust: exact; + } +} + +.line-highlight::before, +.line-highlight[data-end]::after { + content: attr(data-start); + position: absolute; + top: 0.4em; + left: 0.6em; + min-width: 1em; + padding: 0 0.5em; + background-color: hsla(24deg, 20%, 50%, 40%); + color: hsl(24deg, 20%, 95%); + font: bold 65%/1.5 sans-serif; + text-align: center; + vertical-align: 0.3em; + border-radius: 999px; + text-shadow: none; + box-shadow: 0 1px white; +} + +.line-highlight[data-end]::after { + content: attr(data-end); + top: auto; + bottom: 0.4em; +} + +.line-numbers .line-highlight::before, +.line-numbers .line-highlight::after { + content: none; +} + +pre[id].linkable-line-numbers span.line-numbers-rows { + pointer-events: all; +} + +pre[id].linkable-line-numbers span.line-numbers-rows > span::before { + cursor: pointer; +} + +pre[id].linkable-line-numbers span.line-numbers-rows > span:hover::before { + background-color: rgba(128, 128, 128, 20%); +} + +pre[class*=language-].line-numbers { + position: relative; + padding-left: 3.8em; + counter-reset: linenumber; +} + +pre[class*=language-].line-numbers > code { + position: relative; + white-space: inherit; +} + +.line-numbers .line-numbers-rows { + position: absolute; + pointer-events: none; + top: 0; + font-size: 100%; + left: -3.8em; + width: 3em; + + /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + border-right: 1px solid #999; + user-select: none; +} + +.line-numbers-rows > span { + display: block; + counter-increment: linenumber; +} + +.line-numbers-rows > span::before { + content: counter(linenumber); + color: #999; + display: block; + padding-right: 0.8em; + text-align: right; +} + +.command-line-prompt { + border-right: 1px solid #999; + display: block; + float: left; + font-size: 100%; + letter-spacing: -1px; + margin-right: 1em; + pointer-events: none; + user-select: none; +} + +.command-line-prompt > span::before { + color: #999; + content: " "; + display: block; + padding-right: 0.8em; +} + +.command-line-prompt > span[data-user]::before { + content: "["attr(data-user) "@"attr(data-host) "] $"; +} + +.command-line-prompt > span[data-user=root]::before { + content: "["attr(data-user) "@"attr(data-host) "] #"; +} + +.command-line-prompt > span[data-prompt]::before { + content: attr(data-prompt); +} + +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/prism.scss b/assets/css/prism.scss deleted file mode 100644 index e4268ae..0000000 --- a/assets/css/prism.scss +++ /dev/null @@ -1,336 +0,0 @@ -/* PrismJS 1.24.1 -https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+actionscript+apacheconf+applescript+bash+c+csharp+cpp+cmake+coffeescript+csp+css-extras+diff+django+docker+elixir+elm+erlang+fsharp+flow+git+go+graphql+haml+handlebars+haskell+http+java+json+kotlin+latex+less+llvm+makefile+markdown+markup-templating+nasm+objectivec+ocaml+perl+php+php-extras+powershell+processing+pug+python+r+jsx+tsx+reason+ruby+rust+sass+scss+scala+scheme+sql+stylus+swift+textile+toml+twig+typescript+vim+visual-basic+wasm+yaml&plugins=line-highlight+line-numbers+jsonp-highlight+highlight-keywords+command-line+toolbar+copy-to-clipboard */ -/** - * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML - * Based on https://github.com/chriskempson/tomorrow-theme - * @author Rose Pritchard - */ - -code[class*="language-"], -pre[class*="language-"] { - color: #ccc; - background: none; - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - font-size: 1em; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: 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; - -} - -/* Code blocks */ -pre[class*="language-"] { - padding: 1em; - margin: .5em 0; - overflow: auto; -} - -:not(pre) > code[class*="language-"], -pre[class*="language-"] { - background: #2d2d2d; -} - -/* Inline code */ -:not(pre) > code[class*="language-"] { - padding: .1em; - border-radius: .3em; - white-space: normal; -} - -.token.comment, -.token.block-comment, -.token.prolog, -.token.doctype, -.token.cdata { - color: #999; -} - -.token.punctuation { - color: #ccc; -} - -.token.tag, -.token.attr-name, -.token.namespace, -.token.deleted { - color: #e2777a; -} - -.token.function-name { - color: #6196cc; -} - -.token.boolean, -.token.number, -.token.function { - color: #f08d49; -} - -.token.property, -.token.class-name, -.token.constant, -.token.symbol { - color: #f8c555; -} - -.token.selector, -.token.important, -.token.atrule, -.token.keyword, -.token.builtin { - color: #cc99cd; -} - -.token.string, -.token.char, -.token.attr-value, -.token.regex, -.token.variable { - color: #7ec699; -} - -.token.operator, -.token.entity, -.token.url { - color: #67cdcc; -} - -.token.important, -.token.bold { - font-weight: bold; -} -.token.italic { - font-style: italic; -} - -.token.entity { - cursor: help; -} - -.token.inserted { - color: green; -} - -pre[data-line] { - position: relative; - padding: 1em 0 1em 3em; -} - -.line-highlight { - position: absolute; - left: 0; - right: 0; - padding: inherit 0; - margin-top: 1em; /* Same as .prism’s padding-top */ - - background: hsla(24, 20%, 50%,.08); - background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); - - pointer-events: none; - - line-height: inherit; - white-space: pre; -} - -@media print { - .line-highlight { - /* - * This will prevent browsers from replacing the background color with white. - * It's necessary because the element is layered on top of the displayed code. - */ - -webkit-print-color-adjust: exact; - color-adjust: exact; - } -} - - .line-highlight:before, - .line-highlight[data-end]:after { - content: attr(data-start); - position: absolute; - top: .4em; - left: .6em; - min-width: 1em; - padding: 0 .5em; - background-color: hsla(24, 20%, 50%,.4); - color: hsl(24, 20%, 95%); - font: bold 65%/1.5 sans-serif; - text-align: center; - vertical-align: .3em; - border-radius: 999px; - text-shadow: none; - box-shadow: 0 1px white; - } - - .line-highlight[data-end]:after { - content: attr(data-end); - top: auto; - bottom: .4em; - } - -.line-numbers .line-highlight:before, -.line-numbers .line-highlight:after { - content: none; -} - -pre[id].linkable-line-numbers span.line-numbers-rows { - pointer-events: all; -} -pre[id].linkable-line-numbers span.line-numbers-rows > span:before { - cursor: pointer; -} -pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { - background-color: rgba(128, 128, 128, .2); -} - -pre[class*="language-"].line-numbers { - position: relative; - padding-left: 3.8em; - counter-reset: linenumber; -} - -pre[class*="language-"].line-numbers > code { - position: relative; - white-space: inherit; -} - -.line-numbers .line-numbers-rows { - position: absolute; - pointer-events: none; - top: 0; - font-size: 100%; - left: -3.8em; - width: 3em; /* works for line-numbers below 1000 lines */ - letter-spacing: -1px; - border-right: 1px solid #999; - - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -} - - .line-numbers-rows > span { - display: block; - counter-increment: linenumber; - } - - .line-numbers-rows > span:before { - content: counter(linenumber); - color: #999; - display: block; - padding-right: 0.8em; - text-align: right; - } - -.command-line-prompt { - border-right: 1px solid #999; - display: block; - float: left; - font-size: 100%; - letter-spacing: -1px; - margin-right: 1em; - pointer-events: none; - - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.command-line-prompt > span:before { - color: #999; - content: ' '; - display: block; - padding-right: 0.8em; -} - -.command-line-prompt > span[data-user]:before { - content: "[" attr(data-user) "@" attr(data-host) "] $"; -} - -.command-line-prompt > span[data-user="root"]:before { - content: "[" attr(data-user) "@" attr(data-host) "] #"; -} - -.command-line-prompt > span[data-prompt]:before { - content: attr(data-prompt); -} - -div.code-toolbar { - position: relative; -} - -div.code-toolbar > .toolbar { - position: absolute; - top: .3em; - right: .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; - -webkit-user-select: none; /* for button */ - -moz-user-select: none; - -ms-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: .8em; - padding: 0 .5em; - background: #f5f2f0; - background: rgba(224, 224, 224, 0.2); - box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); - border-radius: .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/style.scss b/assets/css/style.scss deleted file mode 100644 index f32f759..0000000 --- a/assets/css/style.scss +++ /dev/null @@ -1,19 +0,0 @@ -@import "variables"; - -@import "font"; -@import "buttons"; -@import "form"; - -@import "header"; -@import "menu"; -@import "logo"; -@import "main"; -@import "post"; -@import "pagination"; -@import "footer"; - -@import "prism"; -@import "syntax"; -@import "code"; -@import "terms"; -@import "gist"; diff --git a/assets/css/syntax.css b/assets/css/syntax.css new file mode 100644 index 0000000..c205855 --- /dev/null +++ b/assets/css/syntax.css @@ -0,0 +1,116 @@ +/* _syntax.scss */ +code.language-css, +code.language-scss, +.token.boolean, +.token.string, +.token.entity, +.token.url, +.language-css .token.string, +.language-scss .token.string, +.style .token.string, +.token.attr-value, +.token.keyword, +.token.control, +.token.directive, +.token.statement, +.token.regex, +.token.atrule, +.token.number, +.token.inserted, +.token.important { + color: var(--accent) !important; +} + +.token.tag-id, +.token.atrule-id, +.token.operator, +.token.unit, +.token.placeholder, +.token.variable, +.token.attr-name, +.token.namespace, +.token.deleted, +.token.property, +.token.class-name, +.token.constant, +.token.symbol { + color: color-mix(in srgb, var(--accent) 70%, transparent) !important; +} + +.token.property, +.token.function, +.token.function-name, +.token.deleted, +code.language-javascript, +code.language-html, +.command-line-prompt > span::before { + color: var(--accent) !important; +} + +.token.selector, +.token.tag, +.token.punctuation { + color: color-mix(in srgb, var(--accent) 50%, var(--foreground)) !important; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: color-mix(in srgb, var(--foreground) 30%, transparent) !important; +} + +.token.namespace { + opacity: 0.7 !important; +} + +pre[data-line] { + position: relative; +} + +pre[class*=language-] { + margin: 0; + overflow: auto; +} + +.line-highlight { + position: absolute; + left: 0; + right: 0; + padding: 0; + margin: 0; + background: color-mix(in srgb, var(--foreground) 7%, transparent); + pointer-events: none; + line-height: inherit; + white-space: pre; +} + +.line-highlight::before, +.line-highlight[data-end]::after { + content: attr(data-start); + position: absolute; + + /* top: .4em; */ + left: 0.6em; + min-width: 1em; + padding: 0 0.5em; + background-color: color-mix(in srgb, var(--foreground) 40%, transparent); + color: var(--foreground); + font: bold 65%/1.5 sans-serif; + text-align: center; + vertical-align: 0.3em; + border-radius: 999px; + text-shadow: none; + box-shadow: 0 1px var(--foreground); +} + +.line-highlight[data-end]::after { + content: attr(data-end); + top: auto; + bottom: 0.4em; +} + +.line-numbers .line-highlight::before, +.line-numbers .line-highlight::after { + content: none; +} diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss deleted file mode 100644 index 27aecc7..0000000 --- a/assets/css/syntax.scss +++ /dev/null @@ -1,153 +0,0 @@ -code.language-css, -code.language-scss, -.token.boolean, -.token.string, -.token.entity, -.token.url, -.language-css .token.string, -.language-scss .token.string, -.style .token.string, -.token.attr-value, -.token.keyword, -.token.control, -.token.directive, -.token.statement, -.token.regex, -.token.atrule, -.token.number, -.token.inserted, -.token.important { - color: $accent !important; -} - -.token.tag-id, -.token.atrule-id, -.token.operator, -.token.unit, -.token.placeholder, -.token.variable, -.token.tag, -.token.attr-name, -.token.namespace, -.token.deleted, -.token.property, -.token.class-name, -.token.constant, -.token.symbol { - color: transparentize($accent, .3) !important; -} - -.token.property, -.token.function, -.token.function-name, -.token.deleted, -code.language-javascript, -code.language-html, -.command-line-prompt > span:before { - color: mix($accent, #999, .9) !important; -} - -.token.selector, -.token.tag, -.token.punctuation { - color: white; -} - -.token.comment, -.token.prolog, -.token.doctype, -.token.cdata { - color: rgba(255, 255, 255, .3) !important; -} - -.token.namespace { - opacity: .7 !important; -} - -pre[data-line] { - position: relative; -} - -pre[class*="language-"] { - margin: 0; - padding: 0; - overflow: auto; -} - -.line-highlight { - position: absolute; - left: 0; - right: 0; - padding: 0; - margin: 0; - background: transparentize(mix($accent, #999, 90%), .92); - pointer-events: none; - line-height: inherit; - white-space: pre; -} - -.line-highlight:before, -.line-highlight[data-end]:after { - content: attr(data-start); - position: absolute; - /* top: .4em; */ - left: .6em; - min-width: 1em; - padding: 0 .5em; - background-color: hsla(24, 20%, 50%, .4); - color: hsl(24, 20%, 95%); - font: bold 65%/1.5 sans-serif; - text-align: center; - vertical-align: .3em; - border-radius: 999px; - text-shadow: none; - box-shadow: 0 1px white; -} - -.line-highlight[data-end]:after { - content: attr(data-end); - top: auto; - bottom: .4em; -} - -.line-numbers .line-highlight:before, -.line-numbers .line-highlight:after { - content: none; -} - -.code-toolbar { - $code-margin: 40px; - position: relative; - margin: $code-margin 0; - padding: 20px; - border: 1px solid rgba(255, 255, 255, .1); - - + .code-toolbar, - + .highlight, - + .highlight .code-toolbar { - border-top: 0; - margin-top: calc(-1 * $code-margin); - } - - pre, code { - border: none; - } - - code { - display: block; - color: inherit; - } - - > .toolbar { - button { - font-size: .8em !important; - background: hsla(0,0%,87.8%,.2) !important; - color: #bbb !important; - box-shadow: 0 2px 0 0 rgba(0,0,0,.2) !important; - border-radius: 0 !important; - margin: 6px !important; - padding: 10px !important; - user-select:none - } - } -} diff --git a/assets/css/terminal.css b/assets/css/terminal.css new file mode 100644 index 0000000..e91ba61 --- /dev/null +++ b/assets/css/terminal.css @@ -0,0 +1,270 @@ +@import url("https://fonts.googleapis.com/css2?family=Fira+Code&family=Fira+Code:wght@700&display=swap"); + +:root { + --background: #222129; + --foreground: #ffffff; + --accent: #ffa86a; + --radius: 0px; +} + +html { + box-sizing: border-box; +} +*, +*:before, +*:after { + box-sizing: inherit; +} +body { + margin: 0; + padding: 0; + font-family: + "Fira Code", + Monaco, + Consolas, + Ubuntu Mono, + monospace; + font-size: 1rem; + line-height: 1.54; + letter-spacing: -0.02em; + background-color: var(--background); + color: var(--foreground); + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + font-feature-settings: "liga", "tnum", "zero", "ss01", "locl"; + font-variant-ligatures: contextual; + -webkit-overflow-scrolling: touch; + -webkit-text-size-adjust: 100%; +} +::placeholder { + color: color-mix(in srgb var(--foreground) 50%, black); +} +a { + color: var(--accent); +} +button, +.button, +a.button { + position: relative; + font: inherit; + font-weight: bold; + text-decoration: none; + text-align: center; + background: var(--accent); + color: var(--background); + padding: 5px 18px; + margin: 5px 0; + border: 1px solid var(--accent); + border-radius: var(--radius); + transition: background 0.15s linear; + appearance: none; + cursor: pointer; + outline: none; +} +button:hover, +.button:hover, +a.button:hover { + background: color-mix(in srgb, var(--accent) 85%, transparent); +} +button:focus-visible, +.button:focus-visible, +a.button:focus-visible, +a:focus-visible { + outline: 1px solid var(--accent); + outline-offset: 2px; +} +fieldset { + display: inline-block; + border: 1px dashed var(--foreground); +} +input, +textarea, +select { + background: transparent; + color: var(--foreground); + border: 1px solid var(--foreground); + border-radius: var(--radius); + padding: 10px; + margin: 5px 0; + font: inherit; + appearance: none; +} +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 figcaption { + background: var(--accent); + color: var(--background); + text-align: center; + font-size: 1rem; + font-weight: normal; + margin-top: -8px; +} +p { + margin-bottom: 20px; +} +ul, +ol { + margin-left: 4ch; + padding: 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(--accent) 10%, 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: color-mix(in srgb, var(--accent) 5%, transparent) !important; + color: var(--foreground); + padding: 20px 10px; + font-size: 0.95rem !important; + overflow: auto; + border-radius: var(--radius); + border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent); +} +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; +} +abbr:hover:before { + visibility: visible; +} +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: 1px dashed var(--accent); + padding: 10px; +} +th { + border-style: solid; + background: color-mix(in srgb, var(--accent) 10%, transparent); + color: var(--accent); + text-align: left; +} +hr { + width: 100%; + border: none; + background: var(--accent); + height: 1px; +} diff --git a/assets/css/terms.css b/assets/css/terms.css new file mode 100644 index 0000000..d6534e3 --- /dev/null +++ b/assets/css/terms.css @@ -0,0 +1,19 @@ +/* _terms.scss */ +.terms h3 { + font-size: initial; +} + +.terms ul { + list-style: none; +} + +.terms ul li a { + color: var(--accent); +} + +.terms ul li:not(:empty)::before { + content: "-"; + position: absolute; + left: -20px; + color: var(--accent); +} diff --git a/assets/css/terms.scss b/assets/css/terms.scss deleted file mode 100644 index e2fcec9..0000000 --- a/assets/css/terms.scss +++ /dev/null @@ -1,22 +0,0 @@ -.terms { - h3 { - font-size: initial; - } - - ul { - list-style: none; - - li { - a { - color: $accent; - } - } - - li:not(:empty):before { - content: '-'; - position: absolute; - left: -20px; - color: $accent; - } - } -} diff --git a/assets/css/variables.scss b/assets/css/variables.scss deleted file mode 100644 index 459cdad..0000000 --- a/assets/css/variables.scss +++ /dev/null @@ -1,8 +0,0 @@ -/* COLOR VARIABLES */ -$background: mix($accent, #1D1E28, 2%); -$color: white; -$border-color: rgba(255, 255, 255, .1); - -/* MEDIA QUERIES */ -$phone: "max-width: 684px"; -$tablet: "max-width: 900px"; diff --git a/exampleSite/config.toml b/exampleSite/config.toml index a06270a..cb78253 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -3,9 +3,11 @@ languageCode = "en-us" theme = "hugo-theme-terminal" paginate = 5 +[markup.goldmark.renderer] + unsafe = true + [params] contentTypeName = "posts" - themeColor = "orange" showMenuItems = 2 fullWidthTheme = false centerTheme = false diff --git a/exampleSite/content/about.md b/exampleSite/content/about.md index 8944da1..e957768 100644 --- a/exampleSite/content/about.md +++ b/exampleSite/content/about.md @@ -14,9 +14,8 @@ This theme is pretty basic and covers all of the essentials. All you have to do The theme includes: -- **5 duotone themes**, depending on your preferences (orange, red, blue, green, pink) -- [**Fira Code**](https://github.com/tonsky/FiraCode) as default monospaced font. It's gorgeous! -- **really nice, custom duotone** syntax highlighting based on [**PrismJS**](https://prismjs.com) -- mobile friendly layout +- fully customizable color schemes generated by [**terminal.css**](https://panr.github.io/terminal-css/). +- great reading experience thanks to [**Fira Code**](https://github.com/tonsky/FiraCode). +- nice code highlighting thanks to [**PrismJS**](https://prismjs.com) that matches the theme's color scheme. So, there you have it... enjoy! diff --git a/exampleSite/content/showcase.md b/exampleSite/content/showcase.md index 1ffc150..bf6a26e 100644 --- a/exampleSite/content/showcase.md +++ b/exampleSite/content/showcase.md @@ -1,22 +1,139 @@ ---- -title: "Showcase" -date: "2018-07-18" -author: "Hello Robot" ---- ++++ +author = "Hugo Authors & Radek" +title = "Showcase" +date = "2019-03-11" +description = "Sample article showcasing basic styling and formatting for HTML elements." ++++ -## Header 2 +This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme. + -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec interdum metus. Aenean rutrum ligula sodales ex auctor, sed tempus dui mollis. Curabitur ipsum dui, aliquet nec commodo at, tristique eget ante. **Donec quis dolor nec nunc mollis interdum vel in purus**. Sed vitae leo scelerisque, sollicitudin elit sed, congue ante. In augue nisl, vestibulum commodo est a, tristique porttitor est. Proin laoreet iaculis ornare. Nullam ut neque quam. +## Headings -> Fusce pharetra suscipit orci nec tempor. Quisque vitae sem sit amet sem mollis consequat. Sed at imperdiet lorem. Vestibulum pharetra faucibus odio, ac feugiat tellus sollicitudin at. Pellentesque varius tristique mi imperdiet dapibus. Duis orci odio, sodales lacinia venenatis sit amet, feugiat et diam. +The following HTML `
Test
+ + +``` + +### Code block indented with four spaces + + + + + +Test
+ + + +### Code block with Hugo's internal highlight shortcode + +{{< highlight html >}} + + + + +Test
+ + +{{< /highlight >}} + +### Code block with custom built-in `{{ < code > }}` shortcode + +{{< code title="Hey, this is a code block title" language="css" >}} pre { background: #1a1a1d; padding: 20px; @@ -36,49 +153,40 @@ pre { font-size: inherit; } } -``` +{{< /code >}} -```js -// JS code +## List Types -const menuTrigger = document.querySelector('.menu-trigger') -const menu = document.querySelector('.menu') -const mobileQuery = getComputedStyle(document.body).getPropertyValue('--phoneWidth') -const isMobile = () => window.matchMedia(mobileQuery).matches -const isMobileMenu = () => { - menuTrigger.classList.toggle('hidden', !isMobile()) - menu.classList.toggle('hidden', isMobile()) -} +### Ordered List -isMobileMenu() +1. First item +2. Second item +3. Third item -menuTrigger.addEventListener('click', () => menu.classList.toggle('hidden')) +### Unordered List -window.addEventListener('resize', isMobileMenu) -``` +* List item +* Another item +* And another item -```html - +### Nested list -{{ .Description | markdownify }}
{{ else }} {{ .Summary }} {{ end }} @@ -55,7 +55,7 @@ {{ if not .Params.showFullContent }} {{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 67c9b60..43a4102 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -41,7 +41,7 @@