diff --git a/README.adoc b/README.adoc index 089acd5..8b5748b 100644 --- a/README.adoc +++ b/README.adoc @@ -390,9 +390,21 @@ If you belong in the former, you could override the theme by copying the file fr For a concrete example, if you want to customize the footer, copy link:./layouts/partials/footer.html[`./layouts/partials/footer.html`] of this theme (e.g., `./themes/more-contentful/layouts/partials/footer.html`) to `./layouts/partials/footer.html` and modify it there. If you want to customize the style, simply create a SCSS file at `assets/scss/extend.scss` and make your style there. +One of the main things you should keep in mind is the Base16 color palette available in the stylesheet if you want a consistent look. +They are available as link:https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties[CSS custom properties] from `base00` to `base0F`. +They could be useful if you want to add your own styling or to integrate with other libraries such as link:https://d3js.org/[D3], link:https://mermaid-js.github.io/mermaid[Mermaid], and link:https://prismjs.com/[Prism]. The downside when customizing it partially, updating the theme can be problematic. -Thus, it is recommended to check out the project if its updated and +Thus, it is recommended to check out the project if its updated. +Fortunately, this could be automated with the use of the GitHub API and a JSON parser such as link:https://stedolan.github.io/jq/manual/[jq] which makes it possible to update it in the shell. +The following shell one-liner gets the latest version of the theme. + +[source, shell] +---- +curl --silent --location https://api.github.com/repos/foo-dogsquared/hugo-theme-more-contentful/commits | jq '.[0].sha' --raw-output | xargs --replace='{}' hugo mod get -u "github.com/foo-dogsquared/hugo-theme-more-contentful@{}" && hugo mod tidy +---- + +TIP: You can then put the one-liner in a script or in a Makefile to make it easier. Otherwise, if you want to fully customize the theme, you can vendor this project into yours. Also, see the <<Development guidelines>> for more information. diff --git a/assets/scss/base.scss b/assets/scss/base.scss index 9ffadc0..f68682a 100644 --- a/assets/scss/base.scss +++ b/assets/scss/base.scss @@ -24,6 +24,8 @@ nav { margin: 1rem auto; } +h1 { margin: 1rem auto; } + article { h1 { margin: 1rem auto; } h2 { margin-top: 3rem; } @@ -168,12 +170,6 @@ figcaption { font-size: 1rem; } -svg { - height: 1rem; - width: 1rem; - fill: currentColor; -} - blockquote { margin: 2rem 1rem; } diff --git a/assets/scss/layout.scss b/assets/scss/layout.scss index d33e2de..bbdc5ce 100644 --- a/assets/scss/layout.scss +++ b/assets/scss/layout.scss @@ -13,6 +13,12 @@ footer[aria-label="Site footer"] { } } +.icon { + height: 1rem; + width: 1rem; + fill: currentColor; +} + .list { display: inline-flex; flex-flow: row wrap; diff --git a/layouts/partials/components.html b/layouts/partials/components.html index cc0f916..a4b3c6c 100644 --- a/layouts/partials/components.html +++ b/layouts/partials/components.html @@ -7,7 +7,7 @@ If the partial is short enough, it should be put here. {{- define "partials/components/icon.html" }} {{- $icon := . }} {{- $res := resources.ExecuteAsTemplate (printf $icon.output $icon.id) $icon.id (resources.Get $icon.template) }} - <svg> + <svg class="icon"> <use href="{{ $res.Permalink }}#{{ $icon.id }}"></use> </svg> {{- end }} @@ -29,7 +29,7 @@ If the partial is short enough, it should be put here. <div class="site__theme-item" {{ if ne $filename "_index" }}data-theme="{{ .scheme }}"{{ end }}>{{ $name }}</div> {{- end }} </div> - </svg> + </div> </div> <script defer> const themeDropdown = document.querySelector('.site__theme-btn');