From 4c4b37ae76a92bedf1a7dd018c5cb1b6287e6295 Mon Sep 17 00:00:00 2001
From: Jan Raasch <jan@janraasch.com>
Date: Tue, 25 Aug 2020 07:03:48 +0200
Subject: [PATCH] =?UTF-8?q?docs:=20add=20=C2=BBbranding=C2=AB-section=20to?=
 =?UTF-8?q?=20README?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 README.md                                     |  4 ++
 exampleSite/layouts/partials/custom_head.html | 64 ++++++++++++++++++-
 2 files changed, 67 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 3832d7e..d17651a 100644
--- a/README.md
+++ b/README.md
@@ -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).
 
diff --git a/exampleSite/layouts/partials/custom_head.html b/exampleSite/layouts/partials/custom_head.html
index 0f92585..53db59d 100644
--- a/exampleSite/layouts/partials/custom_head.html
+++ b/exampleSite/layouts/partials/custom_head.html
@@ -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 }}'>