docs: add »branding«-section to README
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:
parent
6656a8df0c
commit
4c4b37ae76
|
@ -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).
|
||||
|
||||
|
|
|
@ -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 }}'>
|
||||
|
|
Loading…
Reference in a new issue