update 404 page

4 files changed, 83 insertions, 54 deletions

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..af8538b
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,27 @@
+{
+  "editor.tabSize": 4,
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "[yaml]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.tabSize": 2
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.tabSize": 2
+  },
+  "[toml]": {
+    "editor.defaultFormatter": "tamasfe.even-better-toml",
+    "editor.tabSize": 2,
+    "editor.formatOnSave": true
+  },
+  "evenBetterToml.formatter.indentTables": true,
+  "evenBetterToml.formatter.indentEntries": true,
+  "evenBetterToml.formatter.compactEntries": false
+}
diff --git a/README.md b/README.md
index 5cacfa5..3c25a43 100644
--- a/README.md
+++ b/README.md
@@ -6,28 +6,33 @@ Serif is a modern business theme for Hugo. It contains multiple content types an
 [Zerostatic Themes](https://www.zerostatic.io/)
 
 ![Hugo Serif Theme screenshot](https://www.zerostatic.io/theme/hugo-serif/hugo-serif-screenshot.png)
+
 ## Features
 
 **Content Types**
+
 - Services (Markdown)
 - Team (Markdown)
 - Features (Data)
 
 **CSS**
+
 - SCSS (Hugo Pipelines)
-- Examples of using Params from the `config.toml` as SCSS variables
-- Full Responsive design
-- Bootstrap 4.4 grid and media queries only
+- Fully Responsive design
+- Bootstrap 4 grid and media queries only
 - Uncomment `@import 'bootstrap/bootstrap';` in `style.scss` to use the entire Bootstrap framework
 - Configure Google fonts from `config.toml`
 - Configure primary theme colors from `config.toml`
+- Examples of using Params from the `config.toml` as SCSS variables
 
 **Speed**
+
 - 100/100 Google Lighthouse speed score
 - Under 50KB without images or 80KB with images and illustrations ⚡
 - No jQuery, only a tiny bit of vanilla Javascript for the mobile menu.
 
 **SEO**
+
 - 100/100 Google Lighthouse SEO score
 - 100/100 Google Lighthouse accessibility score
 - Configure Google Analytics in `config.toml`
@@ -37,14 +42,17 @@ Serif is a modern business theme for Hugo. It contains multiple content types an
 - Semantic HTML document structure
 
 **Menu**
+
 - Responsive menu managed in `config.toml`
 - Animated hamburger menu on mobile
 
 **Content**
+
 - Robust example content included
 - Royalty free illustrations included
 
 **Code**
+
 - No hardcoded content in the layouts
 - Plenty of examples of using `range` and `where` to loop over various sections/content types
 - Examples of `range` by Param
@@ -62,7 +70,7 @@ To use this theme you will first need to have Hugo installed. Please follow the
 
 ⚠️ **Note:** Check your Hugo version - **Hugo Extended** is required!
 
-This theme uses [Hugo Pipes](https://gohugo.io/hugo-pipes/scss-sass/) to compile SCSS and minify assets which means if you not using the Hugo extended version this theme will not work. To check your version of Hugo, run  `hugo version`. Make sure you see __/extended__ after the version number, for example _Hugo Static Site Generator v0.51/extended darwin/amd64 BuildDate: unknown_ You do not need to use version v0.51 specifically, it just needs to have the _/extended_ part.
+This theme uses [Hugo Pipes](https://gohugo.io/hugo-pipes/scss-sass/) to compile SCSS and minify assets which means if you not using the Hugo extended version this theme will not work. To check your version of Hugo, run `hugo version`. Make sure you see **/extended** after the version number, for example _Hugo Static Site Generator v0.51/extended darwin/amd64 BuildDate: unknown_ You do not need to use version v0.51 specifically, it just needs to have the _/extended_ part.
 
 **2. Create a new Hugo site**
 
@@ -89,16 +97,6 @@ Copy the entire contents of the `mynewsite/themes/hugo-serif-theme/exampleSite/`
 cp -a themes/hugo-serif-theme/exampleSite/. .
 ```
 
-**5. Update config.toml**
-
-After you copy the `config.toml` into the root folder of your Hugo site you will need to update the `baseURL`, `themesDir` and `theme` values in `mynewsite/config.toml`
-
-```
-baseURL = "/"
-themesDir = "themes"
-theme = "hugo-serif-theme"
-```
-
 **6. Run Hugo**
 
 After installing the theme for the first time, generate the Hugo site.
@@ -117,7 +115,6 @@ hugo server
 
 Now enter [`localhost:1313`](http://localhost:1313) in the address bar of your browser.
 
-
 ## Deployment
 
 ### Netlify
@@ -126,7 +123,6 @@ Use Netlify to deploy this theme. This theme contains a valid and tested `netlif
 
 [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/zerostaticthemes/hugo-serif-theme)
 
-
 ## Configuring Theme
 
 ### Logo
@@ -149,7 +145,7 @@ You can edit the logo from the `config.toml`
 This theme uses Google fonts. You can change the google font in the `config.toml` - These fonts are injected into the `style.scss` as SCSS variables.
 
 ```toml
-# config.toml 
+# config.toml
 
   [params.fonts]
     # sets the google font link in layouts/partials/google-fonts.html
@@ -175,10 +171,10 @@ You can edit the themes main colors in the `config.toml`. These colors are injec
 
 ### Intro Image
 
-List pages such as the homepage, services and team can have a Intro image. 
+List pages such as the homepage, services and team can have a Intro image.
 
 ```yml
-# content/_index.md 
+# content/_index.md
 ---
 intro_image: "https://source.unsplash.com/wOGhHamMqLc"
 intro_image_absolute: false
@@ -186,11 +182,10 @@ intro_image_hide_on_mobile: true
 ---
 ```
 
-While this themes default content uses illustrations, its easy to change the image to a photo and it will still look great. 
+While this themes default content uses illustrations, its easy to change the image to a photo and it will still look great.
 
 the front-matter field `intro_image_absolute: true` let's illustrations "break out" (in CSS terms, it uses `position: absolute`) of the grid and is an intended stylistic effect. When using photos or normal images it's recommended to set this field to false and the photo will align with the grid. See `content/team/_index.md` for an example.
 
-
 ### Google Analytics
 
 Put your Google Analytics ID in the `google_analytics_id` field in the `config.toml` - Also supports Google Tag Manager. When your site is running locally using `hugo server` the GA tag is not injected. This prevents polluting your real data.
@@ -203,15 +198,17 @@ Put your Google Analytics ID in the `google_analytics_id` field in the `config.t
   google_tag_manager_id = ""
 ```
 
- You can also set the Google Analytics ID using a [Netlify environment variable](https://docs.netlify.com/configure-builds/environment-variables/) `HUGO_GOOGLE_ANALYTICS_ID`
- 
+You can also set the Google Analytics ID using a [Netlify environment variable](https://docs.netlify.com/configure-builds/environment-variables/) `HUGO_GOOGLE_ANALYTICS_ID`
+
 ### Meta tags
 
-A pages `<title>` is generated from the front-matter `title` and the site title set in `config.toml`. You can override the `<title>` on any page by using the `meta_title` field in the front-matter. See `content/_index.md` for an example.
+A pages `<title>` is generated from the front-matter `meta_title` else it will use the `title` property. This allows you to have a different heading on the page to what is shown in the SEO title. See `content/_index.md` for an example.
 
 The meta description field is generated from the front-matter `description`
 
-OG meta data for Facebook and Twitter is also generated. 
+OG meta data for Facebook and Twitter is also generated on a per page basis. The `image` field is used for the og:image for Twitter and Facebook.
+
+You can configure og meta data global settings in the config.
 
 ```toml
 # config.toml
@@ -222,14 +219,12 @@ OG meta data for Facebook and Twitter is also generated.
     meta_og_image = "https://www.zerostatic.io/theme/hugo-serif/hugo-serif-screenshot.png"
 ```
 
-## Extras
-
 ### License
 
-- Don't create ports or new versions of this theme without asking me
+- Don't create ports of this theme without asking me
 - You can't re-distribute or re-sell this theme as your own template
 
-### Credits 
+### Credits
 
 - Beautiful royalty free Illustrations by Icons8 - https://icons8.com/illustrations/style--pixeltrue
 - Stock images by Unsplash - https://unsplash.com/
@@ -237,14 +232,12 @@ OG meta data for Facebook and Twitter is also generated.
 
 ### Other Hugo Themes by Zerostatic
 
-
-- [Hugo Hero](https://github.com/zerostaticthemes/hugo-serif-theme) - Free: business theme
-- [Hugo Whisper](https://github.com/zerostaticthemes/hugo-whisper-theme) - Free: documentation theme
-- [Hugo Winston](https://github.com/zerostaticthemes/hugo-winston-theme) Free:- blog theme
+- [Hugo Hero](https://github.com/zerostaticthemes/hugo-serif-theme) - Open Source: business theme
+- [Hugo Whisper](https://github.com/zerostaticthemes/hugo-whisper-theme) - Open Source: documentation theme
+- [Hugo Winston](https://github.com/zerostaticthemes/hugo-winston-theme) Open Source:- blog theme
 - [Hugo Advance](https://www.zerostatic.io/theme/hugo-advance/) Premium: advanced multi page business and marketing theme
 - [Hugo Paradigm](https://www.zerostatic.io/theme/hugo-paradigm/) Premium: landing page / site builder theme
 
-
 🇦🇺 **Made in Australia** by Robert Austin - leave a star mate!
 
 <a href="https://www.buymeacoffee.com/zerostatic" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index e976c7e..01e7337 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -1,22 +1,22 @@
-baseURL = "https://example.com"
+baseURL = "/"
+themesDir = "themes"
+theme = "hugo-serif-theme"
 languageCode = "en-us"
 title = "Hugo Serif Theme"
-themesDir = "../.."
-theme = "hugo-serif-theme"
 
 [module]
   [module.hugoVersion]
     extended = true
     min = "0.55.0"
-    
+
 [params]
   # In most cases you will only want to set the google_analytics_id OR the google_tag_manager_id. If you have Google Analytics included in your GTM tags don't put your GA ID here. Otherwise your data might be useless.
   google_analytics_id = ""
   google_tag_manager_id = ""
 
   [params.homepage]
-    show_contact_box = true # show / hide the contaxt box on the homepage
-    show_services_button = true  # show / hide the "view all services" button
+    show_contact_box = true     # show / hide the contaxt box on the homepage
+    show_services_button = true # show / hide the "view all services" button
 
   [params.logo]
     mobile = "images/logo/logo-mobile.svg"
@@ -44,7 +44,7 @@ theme = "hugo-serif-theme"
     meta_og_image = "https://www.zerostatic.io/theme/hugo-serif/hugo-serif-screenshot.png"
 
   [params.team]
-    summary_large_truncate = 120  # How many characters to include in the summary of the team bios (large layout) before truncating
+    summary_large_truncate = 120 # How many characters to include in the summary of the team bios (large layout) before truncating
 
   [params.footer]
     copyright_text = 'Free Hugo theme by <a class="zerostatic" href="https://www.zerostatic.io">www.zerostatic.io</a>'
@@ -54,30 +54,30 @@ theme = "hugo-serif-theme"
   [[menu.main]]
     name = "Services"
     url = "/services/"
-      weight = 1
+    weight = 1
 
   [[menu.main]]
-      name = "Team"
-      url = "/team/"
-      weight = 2
+    name = "Team"
+    url = "/team/"
+    weight = 2
 
   [[menu.main]]
-      name = "About"
-      url = "/about/"
-      weight = 3
+    name = "About"
+    url = "/about/"
+    weight = 3
 
   [[menu.main]]
-      name = "Contact"
-      url = "/contact/"
-      weight = 4
+    name = "Contact"
+    url = "/contact/"
+    weight = 4
 
   # Footer Menu
   [[menu.footer]]
     name = "Home"
     url = "/"
-      weight = 1
+    weight = 1
 
   [[menu.footer]]
     name = "Contact"
     url = "/contact/"
-      weight = 2
+    weight = 2
diff --git a/layouts/404.html b/layouts/404.html
index edd821d..e8d5296 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -8,7 +8,16 @@
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <link href='/css/style.min.css' rel='stylesheet' />
+  <!-- CSS-->
+  {{ if .Site.IsServer }}
+  {{ $style := resources.Get "scss/style.scss" | resources.ExecuteAsTemplate "style.scss" . | toCSS (dict "targetPath"
+  "css/style.css" "enableSourceMap" true) }}
+  <link rel="stylesheet" href="{{ ($style).RelPermalink }}">
+  {{ else }}
+  {{ $style := resources.Get "scss/style.scss" | resources.ExecuteAsTemplate "style.scss" . | toCSS (dict "targetPath"
+  "css/style.css" "enableSourceMap" false) }}
+  <link rel="stylesheet" href="{{ ($style | minify | fingerprint).RelPermalink }}">
+  {{ end }}
 
 </head>