foodogsquared/hugo-theme-more-contentful
1
0
Fork 0
mirror of https://github.com/foo-dogsquared/hugo-theme-more-contentful.git synced 2025-01-31 04:58:14 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update the styles

Browse Source 
It should be easier to integrate it with other libraries such as Prism,
Mermaid, and D3 especially in the graphics department where it mostly
use vector graphics to do its thing.
This commit is contained in:
Gabriel Arazas 2021-01-21 09:08:29 +08:00
parent 6a29def8ee
commit e0277a50bb
4 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
README.adoc
View File

@ -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.

8
assets/scss/base.scss
View File

@ -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;
}

6
assets/scss/layout.scss
View File

@ -13,6 +13,12 @@ footer[aria-label="Site footer"] {
}
}
.icon {
height: 1rem;
width: 1rem;
fill: currentColor;
}
.list {
display: inline-flex;
flex-flow: row wrap;

4
layouts/partials/components.html
View File

@ -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');