Merge pull request #32 from Lednerb/scssEnhancement-#9

Scss enhancement #9 and #28
Lednerb · Nov 16, 2017 · 9c9786a · 9c9786a
2 parents ffc7193 + f87aa8a
commit 9c9786a
Show file tree

Hide file tree

Showing 9 changed files with 159 additions and 92 deletions.
diff --git a/README.md b/README.md
@@ -30,6 +30,7 @@ If you like this theme and/or use it for commercial purposes, please support me!
     - [Responsive Design](#responsive-design)
     - [Permanent Top Navigation](#permanent-top-navigation)
 - [Custom Post Types](#custom-post-types)
+- [Custom colors and fonts](#custom-colors-and-fonts)
 - [Credits](#credits)
 - [License](#license)
 - [Support Me and This Theme](#support-me-and-this-theme)
@@ -68,12 +69,14 @@ All options you can and should customize are commented so it should be no proble
 
 ## Features
 
+
 ### Algolia Search
 Bilberry includes a convenient search functionality for your site.
 You can test it on the demo site.
 Just click on the navigation bar at the top right of the header.
 
-#### Setup
+
+### Setup
 If you do not want to use the search functionality set `algolia_search = false` in your `config.toml` file.
 
 If you want to include the algolia search for your site, you have to follow these steps:
@@ -84,7 +87,8 @@ If you want to include the algolia search for your site, you have to follow thes
 4. Switch over to `API Keys` and copy your `Application ID`, `Search-Only API Key` and chosen `Index name` to your `config.toml` file.
 5. Ensure that `algolia_search = true` is set.
 
-#### Update the search index
+
+### Update the search index
 You have to repeat this step every time you change a post or publish a new one to update the search index.
 
 1. Publish your changes via the `hugo` command.
@@ -93,11 +97,13 @@ You have to repeat this step every time you change a post or publish a new one t
 4. Paste the copied text from the `index.json` file.
 5. Done.
 
+
 ### Keyboard Shortcuts
 If you want to start a search on your blog simply type `s` and the search menu will open.
 
 To close it again you can enter `esc` at any time.
 
+
 ### Post Types
 Bilberry comes with a bunch of predefined post types.
 Available post types are `article`, `audio`, `code`, `gallery`, `link`, `page`, `quote` and `video`.
@@ -112,6 +118,7 @@ hugo new quote/edward-snowden-about-privacy.md
 
 Just discover the entries from the `exampleSite` folder to get an overview of the great possibilities Bilberry provides ;-)
 
+
 ### Pages and External Links
 The post type `page` is the only one that appears in the top navigation (when you click on the navigation button on the top right).
 
@@ -171,16 +178,40 @@ If you want to change the default post types (e.g., don't use the pencil icon on
 Otherwise, your changes would be overwritten when you update to the latest theme version.
 
 
+# Custom colors and fonts
+Bilberry uses SCSS for styling and a Webpack-based workflow to dynamically create the combined and compresses production-ready stylesheets.
+
+If you want to change any colors or fonts, you have follow these steps:
+
+1. Install this theme to your `themes` directory
+2. Install [yarn](https://yarnpkg.com/en/docs/install)
+3. `cd themes/bilberry-hugo-theme/src`
+4. Run `yarn install` to install all necessary dependencies
+5. Modify the `scss/_variables.scss` file to customize your colors. <br> If you want to change the header's color just edit the `$base-color` variable
+6. After finishing your changes, run `yarn run production` to produce your customized stylesheets
+7. Done
+
+If you 're going to change the default fonts (e.g., lack of support for Cyrillic languages), you can use some of the [Google Fonts](https://fonts.google.com).
+Select your favorite fonts and copy the `@import url('...');` directive to the `src/css/fonts.css` file.
+Now you have to modify the `scss/_variables.scss` and set the `$headline-font` and `$content-font` to the selected ones.
+
+Follow the steps 1-7 to implement your custom font to your site.
+
+_Note:_ You don't have to upload the `node_modules` folder to your webspace, this is only created and needed to generate your customized stylesheets.
+
+
 ## Credits
 Bilberry is inspired by the [WordPress theme Lingonberry](http://www.andersnoren.se/teman/lingonberry-wordpress-theme/), created by Anders Norén.
 
 Bilberry is a theme for the great [HUGO static site generator](https://gohugo.io).
 
 A big thank you goes to [@Ipstenu](https://github.com/Ipstenu) for his help in [this thread](https://discourse.gohugo.io/t/search-index-json-file-for-lunr-js/6286/5?u=lednerb) that helped me to create the `index.json` for the algolia export.
 
+
 ## License
 The Bilberry Theme for HUGO is licensed under the MIT license.
 
+
 ## Support Me and This Theme
 If you enjoy this theme (and especially if you make money with your blog) and want to use it for your site, please consider a small or generous monthly support towards me so I can keep up supporting and maintaining this theme in the future.
 

diff --git a/src/scss/_articles.scss b/src/scss/_articles.scss
@@ -1,7 +1,7 @@
 article {
     border-radius: 4px;
     overflow: hidden;
-    background-color: #fff;
+    background-color: $article-background-color;
     box-shadow: 0 1px 2px rgba(0,0,0,0.2);
     width: ($site-width - 100px);
     position: relative;
@@ -53,9 +53,9 @@ article {
             letter-spacing: 1px;
             margin-bottom: 2rem;
             font-size: 0.825em;
-            color: #999;
+            color: $meta-text-color;
             padding-bottom: 2.5%;
-            border-bottom: 3px double #EEE;
+            border-bottom: 3px double $meta-border-color;
             margin-bottom: 4.5%;
 
             a {
@@ -88,7 +88,7 @@ article {
             font-style: normal;
 
             &:hover {
-                color: #999;
+                color: $continue-reading-hover-color;
             }
         }
 
@@ -121,16 +121,16 @@ article {
 
         a:not(:last-child):after {
             content: " / ";
-            color: #222 !important;
+            color: $text-color !important;
         }
     }
 
     // Quotes
     &.quote {
-        background-color: $special-article-color;
+        background-color: $special-color;
 
         &:after {
-            border-right-color: $special-article-color;
+            border-right-color: $special-color;
         }
 
         a:hover {
@@ -220,11 +220,11 @@ article {
 
     // Link
     &.link {
-        background-color: $special-article-color;
+        background-color: $special-color;
         min-height: 7em;
 
         &:after {
-            border-right-color: $special-article-color;
+            border-right-color: $special-color;
         }
 
         &:hover {

diff --git a/src/scss/_footer.scss b/src/scss/_footer.scss
@@ -1,7 +1,7 @@
 footer {
-    border-top: 3px solid #EEE;
-    border-bottom: 3px solid #EEE;
-    background-color: rgba(255, 255, 255, 0.5);
+    border-top: 3px solid $footer-border-color;
+    border-bottom: 3px solid $footer-border-color;
+    background-color: $footer-background-color;
 
     .container {
         padding: 4rem 0;
@@ -24,7 +24,7 @@ footer {
 
         strong {
             text-transform: uppercase;
-            color: #444;
+            color: $footer-headline-color;
             padding-bottom: 0.75em;
         }
 

diff --git a/src/scss/_header.scss b/src/scss/_header.scss
@@ -1,6 +1,6 @@
 header {
     background-color: $base-color;
-    color: #fff;
+    color: $header-text-color;
     height: 20rem;
     display: flex;
     align-items: center;
@@ -26,13 +26,13 @@ header {
 
     .logo {
         font-size: 40pt !important;
-        background-color: #ccc;
+        background-color: $logo-color;
         border-radius: 50%;
         width: 90px;
         height: 90px;
-        border: 5px #efefef solid;
+        border: 5px $logo-color solid;
         position: relative;
-        color: #efefef;
+        color: $logo-color;
         z-index: 4;
         display: flex;
         align-items: center;
@@ -59,7 +59,7 @@ header {
             left: 0;
             bottom: 0;
             right: 0;
-            background-color: $highlight-color;
+            background-color: $bubble-hover-color;
             border-radius: 50%;
             display: flex;
             align-items: center;
@@ -81,7 +81,7 @@ header {
         position: absolute;
         right: 0;
         top: 0;
-        background: $special-article-color;
+        background: $special-color;
         padding: 0.375em 0.75em;
         font-size: 1.125em;
         border-bottom-left-radius: 4px;

diff --git a/src/scss/_main.scss b/src/scss/_main.scss
@@ -43,8 +43,8 @@
             position: absolute;
             left: 25px;
             top: 85px;
-            background-color: #ccc;
-            border: 3px solid #fff;
+            background-color: $bubble-background-color;
+            border: 3px solid $bubble-color;
             width: 45px;
             height: 45px;
             display: flex;
@@ -53,7 +53,7 @@
             border-radius: 50%;
             z-index: 10;
             text-decoration: none;
-            color: #fff;
+            color: $bubble-color;
             transition: all 0.3s ease-in-out;
 
             .fa {