Merge remote-tracking branch 'codex/master' into src

* codex/master:
  docs: update .all-contributorsrc [skip ci]
  docs: update README.md [skip ci]
  change hardcoded colors to  variable
  Add overrides.scss (#85)
  docs: update .all-contributorsrc [skip ci]
  docs: update README.md [skip ci]
  docs: Use iconOrder when stating desired icon order

themes/codex/.all-contributorsrc

@@ -122,6 +122,25 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "SanchithHegde",
+      "name": "Sanchith Hegde",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/22217505?v=4",
+      "profile": "https://github.com/SanchithHegde",
+      "contributions": [
+        "code",
+        "doc"
+      ]
+    },
+    {
+      "login": "CER10TY",
+      "name": "Sören Johanson",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/5760400?v=4",
+      "profile": "https://soeren.codes",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

themes/codex/README.md

@@ -88,7 +88,7 @@ You can also create additional social icons by:
       # ...
       reddit = "<url to your reddit>"
    
-      iconTitles = ["Reddit"]
+      iconOrder = ["Reddit"]
    ```
 
 Make sure that the icon title must match the icon's file name. If the title contains more than one word, say "My Awesome Site",
@@ -149,8 +149,7 @@ Then, put your posts under "content/photos".
 
 ### Custom styling
 
-In your site's folder, create `assets/scss/custom.scss` and put your custom styling there. For example, the snippet below 
-changes the dot's color on your About page to blue:
+You have two options for custom styling. The first is to create an `assets/scss/custom.scss` in your project and put your custom styling there. For example, the snippet below changes the dot's color on your About page to blue:
 
 ```scss
 // custom.scss
@@ -174,6 +173,15 @@ You can even use Hugo variables/params in your custom styles too!
     fancy = "#f06292"
 ```
 
+The second option is to use the supported scss overrides. You can do this by creating an `assets/scss/overrides/scss` file in your project. The following overrides are supported:
+
+```scss
+// overrides.scss
+
+// The primary accent color used throughout the site
+$primary: ''
+```
+
 ### Tags
 
 Right now `hugo-theme-codex` uses the `tags` taxonomy for blog posts. You can view all the blog posts of a given tag by going to `/tags/:tag-name`, where `:tag-name` is the name of your tag.
@@ -189,7 +197,7 @@ Check out the [CONTRIBUTORS.md file](https://github.com/jakewies/hugo-theme-code
 ## Contributors ✨
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-12-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-14-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
@@ -213,6 +221,8 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://msfjarvis.dev"><img src="https://avatars0.githubusercontent.com/u/13348378?v=4" width="100px;" alt=""/><br /><sub><b>Harsh Shandilya</b></sub></a><br /><a href="https://github.com/jakewies/hugo-theme-codex/commits?author=msfjarvis" title="Code">💻</a></td>
     <td align="center"><a href="https://twitter.com/ProfessorLogout"><img src="https://avatars3.githubusercontent.com/u/13572444?v=4" width="100px;" alt=""/><br /><sub><b>Marco Kamner</b></sub></a><br /><a href="https://github.com/jakewies/hugo-theme-codex/commits?author=ProfessorLogout" title="Code">💻</a></td>
     <td align="center"><a href="https://ewen.io/"><img src="https://avatars3.githubusercontent.com/u/10872821?v=4" width="100px;" alt=""/><br /><sub><b>ewen</b></sub></a><br /><a href="https://github.com/jakewies/hugo-theme-codex/commits?author=ewenme" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/SanchithHegde"><img src="https://avatars2.githubusercontent.com/u/22217505?v=4" width="100px;" alt=""/><br /><sub><b>Sanchith Hegde</b></sub></a><br /><a href="https://github.com/jakewies/hugo-theme-codex/commits?author=SanchithHegde" title="Code">💻</a> <a href="https://github.com/jakewies/hugo-theme-codex/commits?author=SanchithHegde" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://soeren.codes"><img src="https://avatars1.githubusercontent.com/u/5760400?v=4" width="100px;" alt=""/><br /><sub><b>Sören Johanson</b></sub></a><br /><a href="https://github.com/jakewies/hugo-theme-codex/commits?author=CER10TY" title="Code">💻</a></td>
   </tr>
 </table>
 

themes/codex/assets/scss/_main.scss

@@ -1,5 +1,5 @@
-@import "partials/normalize";
 @import "partials/vars";
+@import "partials/normalize";
 @import "partials/reset";
 @import "partials/typography";
 @import "partials/nav";

themes/codex/assets/scss/overrides.scss

@@ -0,0 +1,4 @@
+// The following variables can be overridden
+
+// The primary accent color can take any css color property, including hex, named props, rgba etc.
+// $primary:

themes/codex/assets/scss/pages/post.scss

@@ -1,6 +1,5 @@
 @import "../main";
 @import "../partials/github-syntax-highlighting";
-@import "../partials/colors";
 
 $tocBreakpoint: 1024px;
 
@@ -196,7 +195,7 @@ $tocBreakpoint: 1024px;
 footer {
   text-align: center;
   padding: 0 1.5rem;
-  background: #ffffff;
+  background: $white;
 
   p {
     margin-top: 1rem; // reduce margin top due to social icons' padding

themes/codex/assets/scss/partials/_burger.scss

@@ -1,5 +1,3 @@
-@import "vars";
-
 .burger__container {
   height: $burgerContainerHeight;
   display: flex;
@@ -7,7 +5,7 @@
   padding: 0 1.5rem;
   position: fixed;
   width: 100%;
-  background: #fff;
+  background: $white;
   z-index: 2;
 
   @media screen and (min-width: $medium) {

themes/codex/assets/scss/partials/_colors.scss

@@ -1,7 +0,0 @@
-$black: #111;
-$lightGrey: #f7f7f7;
-$greyTableBorder: #eeeeee;
-$grey: #9b9b9b;
-$darkGrey: #717171;
-$white: #fff;
-$primary: #9013fe;

themes/codex/assets/scss/partials/_nav.scss

@@ -6,7 +6,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background: #fff;
+  background: $white;
   visibility: hidden;
   z-index: 1;
 

themes/codex/assets/scss/partials/_post-list.scss

@@ -1,6 +1,3 @@
-@import "colors";
-@import "vars";
-
 .post-list__container {
   margin: 0 auto;
   max-width: 1200px;

themes/codex/assets/scss/partials/_reset.scss

@@ -1,5 +1,3 @@
-@import "colors";
-
 html,
 body {
   background-color: $white;

themes/codex/assets/scss/partials/_screenSizes.scss

@@ -1,2 +0,0 @@
-$medium: 800px;
-$large: 1400px;

themes/codex/assets/scss/partials/_typography.scss

@@ -1,5 +1,3 @@
-@import "vars";
-
 $baseFontSize: 16;
 $fontSizeMobile: 14;
 $baseLineHeight: 1.5;

themes/codex/assets/scss/partials/_vars.scss

@@ -1,7 +1,21 @@
-@import "_colors";
-@import "_screenSizes";
-
 $navWidth: 100px;
 $meatWidth: 28px;
 $meatHeight: 2px;
 $burgerContainerHeight: 4rem;
+
+// colors
+$black: #111;
+$lightGrey: #f7f7f7;
+$greyTableBorder: #eeeeee;
+$grey: #9b9b9b;
+$darkGrey: #717171;
+$white: #fff;
+$primary: #9013fe;
+
+// screenSizes
+$medium: 800px;
+$large: 1400px;
+
+// import site overrides after variables after
+// variables have been declared
+@import "../overrides";

themes/codex/exampleSite/config.toml

@@ -35,7 +35,7 @@ copyright = "© {year}"
   # Titles for your icons (shown as tooltips), and also their display order.
   # Currently, these icons are supported: 
   #   "Twitter", "GitHub", "Email", "Facebook", "GitLab", "Instagram", "LinkedIn", "YouTube"
-  iconTitles = ["Twitter", "GitHub"]
+  iconOrder = ["Twitter", "GitHub"]
 
   # Metadata for Twitter cards, defaults to params.twitter
   # twitterSite = "@<your handle>"