yann/hugo-scroll
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

docs: add »branding«-section to README

Browse source 
This came up quite a lot :-)

* https://github.com/janraasch/hugo-scroll/issues/4
* https://github.com/janraasch/hugo-scroll/issues/2
* https://github.com/janraasch/hugo-scroll/issues/1
This commit is contained in:
Jan Raasch 2020-08-25 07:03:48 +02:00
parent 6656a8df0c
commit 4c4b37ae76
2 changed files with 67 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -52,6 +52,10 @@ To create **a page separate from the homepage**, run
hugo new my-new-page.md
```
### Adding your branding / colors / css
Add a `custom_head.html`-file to your `layouts/partials`-directory. In there you may add a `<style>`-tag *or* you may add a `<link>`-tag referencing your own `override.css` (in case you prefer to have a separate `.css`-file). Checkout the [`custom_head.html`](https://github.com/janraasch/hugo-scroll/blob/master/exampleSite/layouts/partials/custom_head.html)-file to get started and to find more detailed instructions.
## Issues / Feedback / Contributing
Please use [GitHub issues](https://github.com/janraasch/hugo-scroll/issues) and [Pull Requests](https://github.com/janraasch/hugo-scroll/pulls).

64
exampleSite/layouts/partials/custom_head.html
View file

@ -1,4 +1,66 @@
<!-- Generated via https://favicon.io/favicon-generator/ -->
<!-- A partial to be overwritten by the user.
Its content will appear before the closing </head>-tag -->
<!-- Custom CSS via inline styles
You may use this template to add custom CSS to your site like so: -->
<!-- <style>
/* Links */
a:hover {
color: #b6b84c;
}
/* Header Buttons on Startpage */
a.btn {
color: white;
background-color: #ced067;
}
a.btn:hover {
background-color: #b6b84c;
}
/* Scroll Menu on Startpage */
a.fn-item.active {
color: #b6b84c;
}
a.fn-item:hover {
color: #ced067;
}
/* Content / Sections */
.post-holder.odd {
background: #B80135;
color: white;
}
.post-holder {
background: #f2efe8;
}
body {
color: #3A4145;
}
/* Footer */
.site-footer {
color: #BBC7CC;
background-color: #22343A;
}
</style> -->
<!-- Custom CSS via "custom.css"-file
If you would rather place your custom CSS into
a separate file, create a "custom.css" in your
local "static/css"-directory. Then add a <link>-tag
referencing your "custom.css" like so: -->
<!-- <link rel="stylesheet" href='{{ "css/custom.css" | absURL }}'> -->
<!-- Custom CSS: Color Codes
You may checkout https://htmlcolorcodes.com/ to get those
weird color codes (like "#22343A") ;-). -->
<!-- Custom link-tags for different icons
Generated via https://favicon.io/favicon-generator/ -->
<link rel="apple-touch-icon" sizes="180x180" href='{{ "images/apple-touch-icon.png" | absURL }}'>
<link rel="icon" type="image/png" sizes="32x32" href='{{ "images/favicon-32x32.png" | absURL }}'>
<link rel="icon" type="image/png" sizes="16x16" href='{{ "images/favicon-16x16.png" | absURL }}'>