changes working

bash-script/deploywebsite.sh

@@ -26,4 +26,3 @@ cd public && git add --all && git commit -m "Publishing to gh-pages (publish.sh)
 
 #echo "Pushing to github"
 #git push --all
-

sample-hugo-template/Tech-Club-Blog/.forestry/front_matter/templates/author.yml

@@ -0,0 +1,45 @@
+---
+label: Author
+hide_body: true
+fields:
+- name: title
+  type: text
+  config:
+    required: false
+  label: Name
+- name: bio
+  type: textarea
+  default: ''
+  config:
+    required: false
+    wysiwyg: false
+    schema:
+      format: markdown
+  label: Bio
+- name: avatar
+  type: file
+  config:
+    maxSize: 250
+  label: Avatar Image
+- name: social
+  type: field_group_list
+  fields:
+  - name: title
+    type: text
+    config:
+      required: false
+    label: Title
+  - name: url
+    type: text
+    config:
+      required: false
+    label: URL
+  config:
+    min: 
+    max: 
+    labelField: 
+  label: Social Media
+- name: featured
+  type: boolean
+  label: Featured Author
+  description: Feature this author on the home page

sample-hugo-template/Tech-Club-Blog/.forestry/front_matter/templates/home-hero.yml

@@ -0,0 +1,20 @@
+---
+label: Home Hero
+hide_body: true
+fields:
+- name: heading
+  type: text
+  config:
+    required: false
+  label: Heading
+  description: The text displayed in the hero
+- name: maxWidthPX
+  type: number
+  label: Max Width
+  description: The maximum possible width of the hero (in pixels)
+  default: '652'
+  config:
+    required: true
+    min: 
+    max: 
+    step: 

sample-hugo-template/Tech-Club-Blog/.forestry/front_matter/templates/home.yml

@@ -0,0 +1,9 @@
+---
+label: Home
+hide_body: true
+fields:
+- name: hero
+  type: include
+  config: {}
+  template: home-hero
+  label: Hero

sample-hugo-template/Tech-Club-Blog/.forestry/front_matter/templates/post.yml

@@ -0,0 +1,42 @@
+---
+label: Post
+hide_body: false
+fields:
+- name: title
+  type: text
+  config:
+    required: false
+  label: Title
+- name: excerpt
+  type: text
+  config:
+    required: false
+  label: Excerpt
+- name: date
+  type: datetime
+  label: Date
+  description: ''
+  config:
+    required: false
+    date_format: 
+    time_format: 
+    display_utc: false
+- name: timeToRead
+  type: number
+  label: Read Time
+  description: The time it takes to read the post (in minutes)
+  default: 0
+  config:
+    required: true
+    min: 
+    max: 
+    step: 
+- name: hero
+  type: file
+  config:
+    maxSize: 250
+  label: Hero Image
+- name: authors
+  type: tag_list
+  default: []
+  label: Authors

sample-hugo-template/Tech-Club-Blog/.forestry/settings.yml

@@ -0,0 +1,49 @@
+---
+new_page_extension: md
+auto_deploy: false
+admin_path: ''
+webhook_url: 
+sections:
+- type: heading
+  label: Content
+- type: document
+  path: content/_index.md
+  label: Home
+- type: directory
+  path: content/post
+  label: Posts
+  create: all
+  match: "**/*"
+  templates:
+  - post
+- type: heading
+  label: Data
+- type: directory
+  path: content/authors
+  label: Authors
+  create: all
+  match: "**/_index.md"
+  templates:
+  - author
+- type: directory
+  path: config/_default
+  label: Config
+  create: all
+  match: "**/*"
+  new_doc_ext: yaml
+upload_dir: static/uploads
+public_path: "/static/images"
+front_matter_path: ''
+use_front_matter_path: false
+file_template: ":filename:"
+build:
+  preview_env:
+  - HUGO_ENV=staging
+  - HUGO_VERSION=0.60.1
+  preview_output_directory: public
+  preview_docker_image: forestryio/hugo:latest
+  mount_path: "/srv"
+  working_dir: "/srv"
+  instant_preview_command: hugo server -D -E -F --port 8080 --bind 0.0.0.0 --renderToDisk
+    -d public
+version: 0.58.2

sample-hugo-template/Tech-Club-Blog/.gitignore

@@ -0,0 +1,2 @@
+public
+.DS_Store

sample-hugo-template/Tech-Club-Blog/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019-present Forestry.io and contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

sample-hugo-template/Tech-Club-Blog/README.md

@@ -0,0 +1,51 @@
+# Tech-Club-Blog
+This repository is for the HWU Tech Club Blog.
+Contains the new and unique developments in the tech industry.
+
+--Made using HUGO
+
+## Install Hugo
+
+You need to install hugo to ensure that the format you add the blog in is responsive and looks as you wanted it to.
+https://gohugo.io/getting-started/installing/
+
+
+Run Hugo command to run the website locally on your computer
+```
+hugo serve
+```
+
+## How to add a blog
+
+1. Navigate to content/post
+
+2. Add a new file <filename>.md
+
+3. Use the previous blog as your template
+
+## How to add an author
+
+1. Navigate to content/authors
+
+2. Create a folder <first-lastname>
+
+3. Create a file _index.md
+
+4. Add this template and modify
+
+```
+---
+title: Akilan Selvacoumar
+bio: |
+  HW Tech Club President
+avatar: https://i1.rgstatic.net/ii/profile.image/763939705069568-1559148827007_Q512/Akilan_Selvacoumar.jpg
+date: 1999-11-07
+featured: true
+social:
+  - title: github
+    url: https://github.com/Akilan1999
+  - title: linkedin
+    url: https://www.linkedin.com/in/akilan-selvacoumar
+---
+
+```

sample-hugo-template/Tech-Club-Blog/READme-contributers.md

@@ -0,0 +1,29 @@
+# How to add a New Post as a contributer;
+
+- First, Clone this repository into your Mac/PC.
+- The root directory of this repository contains all the necessary folders for hosting/serving this blog.
+- To add a new Post, Goto "contect/post" and simply add a new '.md' file or duplicate the template from other '.md' files 
+- These posts follow the simple Markdown File format.(Check out the Markdown File Cheatsheet to know more!)
+
+- To add a new Author, under 'content/Authors', add a new file 'XYZ.md', where you just substitute XYZ with your name. The file should contain the following:
+        ---
+        title: XYZ
+        bio: |
+        xoxo
+        avatar: /images/myphoto.jpeg
+        date: 2001-10-10
+        featured: true
+        social:
+        - title: github
+            url: https://github.com/mk210/Tech-Club-Blog
+        - title: instagram
+            url: https://www.instagram.com/
+        - title: linkedin
+            url: https://www.linkedin.com/
+        ---
+    To add your name as an author in you post, simply edit the "authors: hugo-authors/XYZ", by substituting XYZ as the name of your file which you have created earlier. That should do the job. Play around with this page to know more.
+
+- To add a new Image in your post, First, place the photo in "static/images" and then write the file destination in "hero: /images/XYZ.jpg" by replacing XYZ.jpg as the photo you have placed in the folder.in order to add a new Photo in between the post, the syntax is ![Example image](/static/image.png)
+
+- Play around with Hugo first to learn more and don't forget to refer the cheat sheet. 
+So, That's the manual for a contributer.

sample-hugo-template/Tech-Club-Blog/archetypes/default.md

@@ -0,0 +1,7 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+hero: /images/hero-3.jpg
+excerpt:
+draft: true
+---

sample-hugo-template/Tech-Club-Blog/assets/css/prism.css

@@ -0,0 +1,235 @@
+/* PrismJS 1.17.1
+https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+git+go+json+json5+typescript+jsx+yaml+toml+tsx&plugins=line-numbers+toolbar+copy-to-clipboard */
+/**
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ * @author Rose Pritchard
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #ccc;
+	background: none;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 1em;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #2d2d2d;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #999;
+}
+
+.token.punctuation {
+	color: #ccc;
+}
+
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted {
+	color: #e2777a;
+}
+
+.token.function-name {
+	color: #6196cc;
+}
+
+.token.boolean,
+.token.number,
+.token.function {
+	color: #f08d49;
+}
+
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+	color: #f8c555;
+}
+
+.token.selector,
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+	color: #cc99cd;
+}
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+	color: #7ec699;
+}
+
+.token.operator,
+.token.entity,
+.token.url {
+	color: #67cdcc;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+.token.inserted {
+	color: green;
+}
+
+pre[class*="language-"].line-numbers {
+	position: relative;
+	padding-left: 3.8em;
+	counter-reset: linenumber;
+}
+
+pre[class*="language-"].line-numbers > code {
+	position: relative;
+	white-space: inherit;
+}
+
+.line-numbers .line-numbers-rows {
+	position: absolute;
+	pointer-events: none;
+	top: 0;
+	font-size: 100%;
+	left: -3.8em;
+	width: 3em; /* works for line-numbers below 1000 lines */
+	letter-spacing: -1px;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+	.line-numbers-rows > span {
+		pointer-events: none;
+		display: block;
+		counter-increment: linenumber;
+	}
+
+		.line-numbers-rows > span:before {
+			content: counter(linenumber);
+			color: #666;
+			display: block;
+			padding-right: 0.8em;
+			text-align: right;
+		}
+
+div.code-toolbar {
+	position: relative;
+}
+
+div.code-toolbar > .toolbar {
+	position: absolute;
+	top: .3em;
+	right: .2em;
+	transition: opacity 0.3s ease-in-out;
+	opacity: 0;
+}
+
+div.code-toolbar:hover > .toolbar {
+	opacity: 1;
+}
+
+/* Separate line b/c rules are thrown out if selector is invalid.
+   IE11 and old Edge versions don't support :focus-within. */
+div.code-toolbar:focus-within > .toolbar {
+	opacity: 1;
+}
+
+div.code-toolbar > .toolbar .toolbar-item {
+	display: inline-block;
+}
+
+div.code-toolbar > .toolbar a {
+	cursor: pointer;
+}
+
+div.code-toolbar > .toolbar button {
+	background: none;
+	border: 0;
+	color: inherit;
+	font: inherit;
+	line-height: normal;
+	overflow: visible;
+	padding: 0;
+	-webkit-user-select: none; /* for button */
+	-moz-user-select: none;
+	-ms-user-select: none;
+}
+
+div.code-toolbar > .toolbar a,
+div.code-toolbar > .toolbar button,
+div.code-toolbar > .toolbar span {
+	color: #bbb;
+	font-size: .8em;
+	padding: 0 .5em;
+	background: #f5f2f0;
+	background: rgba(224, 224, 224, 0.2);
+	box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
+	border-radius: .5em;
+}
+
+div.code-toolbar > .toolbar a:hover,
+div.code-toolbar > .toolbar a:focus,
+div.code-toolbar > .toolbar button:hover,
+div.code-toolbar > .toolbar button:focus,
+div.code-toolbar > .toolbar span:hover,
+div.code-toolbar > .toolbar span:focus {
+	color: inherit;
+	text-decoration: none;
+}
+
+img{
+  width: 100%;
+	height:auto;
+}

sample-hugo-template/Tech-Club-Blog/assets/js/addFormStyles.js

@@ -0,0 +1,27 @@
+document.getElementById("submitButton").addEventListener("click", addErrorStyles);
+document.getElementById("emailInput").addEventListener("keyup", updateStyles);
+
+subscriptionForm = document.getElementById("subscriptionForm");
+emailField = document.getElementById("emailInput");
+submitted = false;
+
+function addErrorStyles(){
+    submitted = true;
+    updateClasses();
+}
+
+function updateStyles(){
+    if (submitted === true){
+        updateClasses();
+    }
+}
+
+function updateClasses(){
+    if(emailField.validity.valid){
+        subscriptionForm.classList.remove("submitted-form");
+    }
+    else{
+        subscriptionForm.classList.add("submitted-form");
+        emailField.classList.add("submitted-input");
+    }
+}

sample-hugo-template/Tech-Club-Blog/assets/js/collapseAuthors.js

@@ -0,0 +1,12 @@
+let collapsed = true;
+
+document.getElementById("collapsedCoauthors").addEventListener("click", displayCoauthors);
+document.getElementById("uncollapsedAction").addEventListener("click", hideCoauthors);
+
+function displayCoauthors(){
+    document.getElementById("uncollapsedCoauthors").classList.remove("hidden");
+}
+
+function hideCoauthors(){
+    document.getElementById("uncollapsedCoauthors").classList.add("hidden");
+}

sample-hugo-template/Tech-Club-Blog/assets/js/copyUrl.js

@@ -0,0 +1,18 @@
+document.getElementById("copyButton").addEventListener("click", copyToClipboard);
+    
+let currentUrl = window.location;
+let copyTextContainer = document.getElementById("copyText");
+let toolTip = document.getElementById("toolTip");
+
+function copyToClipboard(){
+    copyTextContainer.value = currentUrl
+    copyTextContainer.focus();
+    copyTextContainer.select();
+    document.execCommand("copy");
+
+    toolTip.style.animationName = "pan-toolbar";
+
+    setTimeout(function(){
+         toolTip.style.removeProperty('animation-name');
+    }, 2000);
+}

sample-hugo-template/Tech-Club-Blog/assets/js/initColors.js

@@ -0,0 +1,58 @@
+
+let be = document.getElementsByTagName("BODY")[0];
+
+initColors();
+
+function initColors(){
+    if (localStorage.getItem("isLight") === null) {
+        localStorage.setItem("isLight", 'true');
+    }
+
+    if (localStorage.getItem("isLight") === 'false'){
+        makeDark();
+    }
+    else{
+        makeLight();
+    }
+}
+
+
+function makeDark(){
+    be.style.setProperty('--primary', "#fff");
+    be.style.setProperty('--secondary', "#fff");
+    be.style.setProperty('--grey', "#73737D");
+    be.style.setProperty('--background-color', "#111216");
+    be.style.setProperty('--accent', "#E9DAAC");
+    be.style.setProperty('--hover', "rgba(255, 255, 255, 0.07)");
+    be.style.setProperty('--gradient', "linear-gradient(180deg, #111216 0%, rgba(66, 81, 98, 0.36) 100%)");
+    be.style.setProperty('--articleText', "#fff");
+    be.style.setProperty('--track', "rgba(255, 255, 255, 0.3)");
+    be.style.setProperty('--progress', "#fff");
+    be.style.setProperty('--card', "#1D2128");
+    be.style.setProperty('--error', "#EE565B");
+    be.style.setProperty('--success', "#46B17B");
+    be.style.setProperty('--errorBackground', "rgba(238, 86, 91, 0.1)");
+    be.style.setProperty('--horizontalRule', "rgba(255, 255, 255, 0.15)");
+    be.style.setProperty('--inputBackground', "rgba(255, 255, 255, 0.07)");
+    be.style.setProperty('--tooltip', "#000");
+}
+
+function makeLight(){
+    be.style.setProperty('--primary', "");
+    be.style.setProperty('--secondary', "");
+    be.style.setProperty('--grey', "");
+    be.style.setProperty('--background-color', "");
+    be.style.setProperty('--accent', "");
+    be.style.setProperty('--hover', "");
+    be.style.setProperty('--gradient', "");
+    be.style.setProperty('--articleText', "");
+    be.style.setProperty('--track', "");
+    be.style.setProperty('--progress', "");
+    be.style.setProperty('--card', "");
+    be.style.setProperty('--error', "");
+    be.style.setProperty('--success', "");
+    be.style.setProperty('--errorBackground', "");
+    be.style.setProperty('--horizontalRule', "");
+    be.style.setProperty('--inputBackground', "");
+    be.style.setProperty('--tooltip', "lightgrey");
+}

sample-hugo-template/Tech-Club-Blog/assets/js/progressBar.js

@@ -0,0 +1,46 @@
+window.addEventListener("scroll", updateProgress);
+    
+progressBar = document.getElementById("progressBar");
+
+scrollProgress = document.getElementById("progressIndicator");
+
+if (document.getElementById("subscriptionSection")){
+    articleSubscription = document.getElementById("subscriptionSection").offsetHeight;
+}
+else{
+    articleSubscription = 0;
+}
+
+if(document.getElementById("articleNext")){
+    articleNext = document.getElementById("articleNext").offsetHeight;
+}
+else{
+    articleNext = 0;
+}
+
+footerSection = 150;
+
+bottomOffset = ((articleSubscription + articleNext + footerSection + 250) / document.body.scrollHeight) * 100 ;
+bottomOffset += bottomOffset * 1.1;
+
+
+function updateProgress(){
+    let percentScrolled = ((window.pageYOffset / document.body.scrollHeight) * (100 + bottomOffset));
+
+    let transformation = "translateY(" + percentScrolled + "%)";
+    scrollProgress.style.webkitTransform = (transformation);
+
+
+    if (percentScrolled > 100){
+        progressBar.style.animationName = "progress-fade-out";
+        setTimeout(function(){
+            progressBar.style.opacity = "0";
+        }, 500);
+    }
+    else{
+        progressBar.style.animationName = "progress-fade-in";
+        setTimeout(function(){
+            progressBar.style.opacity = "1";
+        }, 500);
+    }
+}

sample-hugo-template/Tech-Club-Blog/assets/js/toggleBorder.js

@@ -0,0 +1,13 @@
+window.addEventListener("resize", adjustListBorder);
+
+let listRemoveWidth = window.matchMedia("(max-width: 1070px)");
+let listAddWidth = window.matchMedia("(min-width: 1070px)");
+
+function adjustListBorder(){
+    if (listRemoveWidth.matches) {
+        document.getElementById("articlesList").classList.remove("author-alc");
+    }
+    else if (listAddWidth.matches) {
+        document.getElementById("articlesList").classList.add("author-alc");
+    }
+}

sample-hugo-template/Tech-Club-Blog/assets/js/toggleColors.js

@@ -0,0 +1,104 @@
+document.getElementById("themeColorButton").addEventListener("click", toggleColors);
+
+let bodyElement = document.getElementsByTagName("BODY")[0];
+let moonOrSun = document.getElementById("moonOrSun");
+let sunRays = document.getElementById("sunRays");
+let moonMask = document.getElementById("moonMask");
+
+initAnimation();
+
+function initAnimation(){
+    if (localStorage.getItem("isLight") === 'true'){
+        moonMask.style.top = "-8px";
+        moonMask.style.right = "-5px";
+        moonOrSun.style.transform = "scale(1)"
+        sunRays.style.transform = "scale(0.1)"
+    }
+    else{
+        moonMask.style.top = "-25px";
+        moonMask.style.right = "-15px";
+        moonOrSun.style.transform = "scale(0.5)"
+        sunRays.style.transform = "scale(0.6)"
+    }
+}
+
+function toggleColors(){
+    if (localStorage.getItem("isLight") === 'true'){
+        makeDark();
+
+        moonMask.classList.add("mask-to-sun-animation");
+        moonOrSun.classList.add("to-sun-animation");
+        sunRays.classList.add("expand-rays");
+
+        setTimeout(function(){
+            sunRays.classList.remove("expand-rays");
+        }, 500);
+        setTimeout(function(){
+            moonMask.classList.remove("mask-to-sun-animation");
+            moonOrSun.classList.remove("to-sun-animation");
+            initAnimation();
+        }, 400);
+
+        localStorage.setItem("isLight", 'false');
+    }
+    else{
+        makeLight();
+
+        moonMask.classList.add("mask-to-moon-animation");
+        moonOrSun.classList.add("to-moon-animation");
+        sunRays.classList.add("contract-rays");
+
+
+        setTimeout(function(){
+            sunRays.classList.remove("contract-rays");
+        }, 500);
+        setTimeout(function(){
+            moonMask.classList.remove("mask-to-moon-animation");
+            moonOrSun.classList.remove("to-moon-animation");
+            sunRays.classList.remove("contract-rays");
+            initAnimation();
+        }, 400);
+
+        localStorage.setItem("isLight", 'true');
+    }
+}
+
+function makeDark(){
+    bodyElement.style.setProperty('--primary', "#fff");
+    bodyElement.style.setProperty('--secondary', "#fff");
+    bodyElement.style.setProperty('--grey', "#73737D");
+    bodyElement.style.setProperty('--background-color', "#111216");
+    bodyElement.style.setProperty('--accent', "#E9DAAC");
+    bodyElement.style.setProperty('--hover', "rgba(255, 255, 255, 0.07)");
+    bodyElement.style.setProperty('--gradient', "linear-gradient(180deg, #111216 0%, rgba(66, 81, 98, 0.36) 100%)");
+    bodyElement.style.setProperty('--articleText', "#fff");
+    bodyElement.style.setProperty('--track', "rgba(255, 255, 255, 0.3)");
+    bodyElement.style.setProperty('--progress', "#fff");
+    bodyElement.style.setProperty('--card', "#1D2128");
+    bodyElement.style.setProperty('--error', "#EE565B");
+    bodyElement.style.setProperty('--success', "#46B17B");
+    bodyElement.style.setProperty('--errorBackground', "rgba(238, 86, 91, 0.1)");
+    bodyElement.style.setProperty('--horizontalRule', "rgba(255, 255, 255, 0.15)");
+    bodyElement.style.setProperty('--inputBackground', "rgba(255, 255, 255, 0.07)");
+    bodyElement.style.setProperty('--tooltip', "#000");
+}
+
+function makeLight(){
+    bodyElement.style.setProperty('--primary', "");
+    bodyElement.style.setProperty('--secondary', "");
+    bodyElement.style.setProperty('--grey', "");
+    bodyElement.style.setProperty('--background-color', "");
+    bodyElement.style.setProperty('--accent', "");
+    bodyElement.style.setProperty('--hover', "");
+    bodyElement.style.setProperty('--gradient', "");
+    bodyElement.style.setProperty('--articleText', "");
+    bodyElement.style.setProperty('--track', "");
+    bodyElement.style.setProperty('--progress', "");
+    bodyElement.style.setProperty('--card', "");
+    bodyElement.style.setProperty('--error', "");
+    bodyElement.style.setProperty('--success', "");
+    bodyElement.style.setProperty('--errorBackground', "");
+    bodyElement.style.setProperty('--horizontalRule', "");
+    bodyElement.style.setProperty('--inputBackground', "");
+    bodyElement.style.setProperty('--tooltip', "lightgrey");
+}

sample-hugo-template/Tech-Club-Blog/assets/js/toggleLayout.js

@@ -0,0 +1,32 @@
+document.getElementById("btnGrid").addEventListener("click", makeGrid);
+document.getElementById("btnRows").addEventListener("click", makeRows);
+window.addEventListener("resize", adjustListAtMobile);
+
+document.getElementById("rows").style.fill = "var(--grey)";
+
+let listRemoveWidth = window.matchMedia("(max-width: 735px)");
+let listAddWidth = window.matchMedia("(min-width: 735px)");
+let isList = false;
+
+function adjustListAtMobile(){
+    if (listRemoveWidth.matches) {
+        document.getElementById("articlesList").classList.remove("articles-list-container-alt");
+    }
+    else if (listAddWidth.matches && isList === true) {
+        document.getElementById("articlesList").classList.add("articles-list-container-alt");
+    }
+}
+
+function makeGrid(){
+    document.getElementById("articlesList").classList.remove("articles-list-container-alt");
+    document.getElementById("tiles").style.fill = "var(--primary)";
+    document.getElementById("rows").style.fill = "var(--grey)";
+    isList = false;
+}
+
+function makeRows(){
+    document.getElementById("articlesList").classList.add("articles-list-container-alt");
+    document.getElementById("rows").style.fill = "var(--primary)";
+    document.getElementById("tiles").style.fill = "var(--grey)";
+    isList = true;
+}

sample-hugo-template/Tech-Club-Blog/assets/js/toggleLogos.js

@@ -0,0 +1,15 @@
+window.addEventListener("resize", toggleLogo);
+
+let lrw = window.matchMedia("(max-width: 735px)");
+let law = window.matchMedia("(min-width: 735px)");
+
+function toggleLogo(){
+    if (lrw.matches) {
+        document.getElementById("logo-mobile").classList.remove("hidden");
+        document.getElementById("logo-desktop").classList.add("hidden");
+    }
+    else if (law.matches) {
+        document.getElementById("logo-mobile").classList.add("hidden");
+        document.getElementById("logo-desktop").classList.remove("hidden");
+    }
+}

sample-hugo-template/Tech-Club-Blog/assets/scss/anchor.scss

@@ -0,0 +1,16 @@
+a{
+  -webkit-transition: var(--color-mode-transition);
+  -o-transition: var(--color-mode-transition);
+  transition: var(--color-mode-transition);
+  color: var(--accent);
+}
+
+a:visited {
+  color: var(--accent);
+  opacity: 0.85;
+}
+
+a:hover,
+a:focus {
+  text-decoration: underline;
+}

sample-hugo-template/Tech-Club-Blog/assets/scss/article.scss

@@ -0,0 +1,503 @@
+/**************************************ARTICLE HEAD**************************************/
+
+.article-hero{
+    @media screen and (max-width: $phablet){
+        &::before {
+          content: "";
+          width: 100%;
+          height: 20px;
+          background: var(--primary);
+          position: absolute;
+          left: 0;
+          top: 0;
+          -webkit-transition: var(--color-mode-transition);
+          -o-transition: var(--color-mode-transition);
+          transition: var(--color-mode-transition);
+        }
+    
+        &::after {
+          content: "";
+          width: 100%;
+          height: 10px;
+          background: var(--background-color);
+          position: absolute;
+          left: 0;
+          top: 10px;
+          border-top-left-radius: 25px;
+          border-top-right-radius: 25px;
+          -webkit-transition: var(--color-mode-transition);
+          -o-transition: var(--color-mode-transition);
+          transition: var(--color-mode-transition);
+        }
+      }
+}
+
+.article-meta{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+
+    /*PHABLET*/
+    @media screen and (max-width: $phablet){
+        margin-left: 0;
+        flex-direction: column;
+    }
+}
+
+.article-header{
+    position: relative;
+    z-index: 10;
+    margin:100px auto 120px;
+    padding-left: 68px;
+    max-width: 749px;
+  
+    @media screen and (max-width: $desktop){
+        padding-left: 53px;
+        max-width: calc(507px + 53px);
+        margin: 100px auto 70px;
+    }
+
+    @media screen and (max-width: $tablet){
+        padding-left: 0;
+        margin: 100px auto 70px;
+        max-width: 480px;
+    }
+
+    @media screen and (max-width: $phablet){
+        margin: 170px auto 180px;
+        padding: 0 40px;
+    }
+  
+    @media screen and (max-height: 700px) {
+      margin: 100px auto;
+    }
+}
+
+.article-hero-heading{
+    font-size: 48px;
+    font-family: var(--serif);
+    margin-bottom: 25px;
+    font-weight: bold;
+    line-height: 1.32;
+  
+    @media screen and (max-width: $tablet){
+        margin-bottom: 20px;
+        font-size: 36px;
+    }
+
+    @media screen and (max-width: $phablet){
+        font-size: 32px;
+    }
+}
+
+.article-hero-subtitle{
+    padding: 10px;
+    max-width: 700px;
+    margin-left: auto;
+    margin-right: auto;
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    font-size: 18px;
+    color: var(--grey);
+
+    /*PHABLET*/
+    @media screen and (max-width: $phablet){
+        border: 1px solid var(--horizontalRule);
+        border-radius: 5px;
+    }
+  
+    @media screen and(max-width: $phablet){
+        font-size: 14px;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+                flex-direction: column;
+
+        &.has-coauthors::before{
+            content: '';
+            position: absolute;
+            left: -20px;
+            right: -20px;
+            top: -10px;
+            bottom: -10px;
+            border: 1px solid var(--horizontalRule);
+            opacity: 0.5;
+            border-radius: 5px;
+        }
+
+        strong {
+            display: block;
+            font-weight: 500;
+            margin-bottom: 5px;
+        }
+    }
+}
+
+.article-hero-image{
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    max-width: 944px;
+    overflow: hidden;
+    margin: 0 auto;
+    -webkit-box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.2),
+      0 18px 36px -18px rgba(0, 0, 0, 0.22);
+            box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.2),
+      0 18px 36px -18px rgba(0, 0, 0, 0.22);
+
+    img{
+        width: 100%;
+    }
+
+    /*DESKTOP MEDIUM*/
+    @media screen and (max-width: $desktop_medium){
+        position: relative;
+    }
+  
+    /*TABLET*/
+    @media screen and (max-width: $tablet){
+        max-width: 100%;
+    }
+
+    /*PHABLET*/
+    @media screen and (max-width: phablet){
+        margin: 0 auto;
+        width: calc(100vw - 40px);
+        height: 220px;
+    
+        & > div {
+          height: 220px;
+        }
+    }
+}
+
+.article-author-link{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    color: inherit;
+
+    &:hover{
+        text-decoration: none;
+    }
+
+    &:visited{
+        color: inherit;
+    }
+  
+    strong {
+      -webkit-transition: var(--color-mode-transition);
+      -o-transition: var(--color-mode-transition);
+      transition: var(--color-mode-transition);
+    }
+  
+    &:hover strong {
+      color: var(--primary);
+    }
+}
+
+.article-author-avatar{
+    height: 25px;
+    width: 25px;
+    border-radius: 50%;
+    margin-right: 14px;
+    background: var(--grey);
+    overflow: hidden;
+
+    img{
+        width: 100%;
+    }
+  
+    .gatsby-image-wrapper > div {
+      padding-bottom: 100% !important;
+    }
+  
+    /*PHABLET*/
+    @media screen and (max-width: $phablet){
+        display: none;
+    }
+}
+
+.hide-on-mobile{
+    /*PHABLET*/
+    @media screen and (max-width: $phablet){
+        display: none;
+    }
+}
+
+.article-coauthors-container{
+    margin-right: 10px;
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    font-size: 18px;
+    color: var(--grey);
+    cursor: pointer;
+  
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: -16px;
+      bottom: -16px;
+      background: var(--card);
+      -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
+              box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
+      border-radius: 5px;
+      z-index: 0;
+      -webkit-transition: opacity 0.3s;
+      -o-transition: opacity 0.3s;
+      transition: opacity 0.3s;
+      cursor: pointer;
+      opacity: 0;
+    }
+  
+    &:hover::before {
+      opacity: 1;
+    }
+
+    /*PHABLET*/
+    @media screen and (max-width: $phablet){
+        font-size: 14px;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+    
+        &::before {
+          -webkit-box-shadow: none;
+                  box-shadow: none;
+          bottom: -30px;
+          background: transparent;
+        }
+    
+    
+        strong {
+          display: block;
+          font-weight: semi-bold;
+          margin-bottom: 5px;
+        }
+    }
+}
+
+.article-coauthors-collapsed{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+}
+
+.article-coauthors-list{
+    position: relative;
+    height: 25px;
+    margin-right: 15px;
+    margin-left: 15px;
+
+    /*PHABLET*/
+    @media screen and (max-width: $phablet){
+        display: none;
+    }
+}
+
+.article-coauthors-avatar{
+    position: absolute;
+    height: 25px;
+    width: 25px;
+    border-radius: 50%;
+    z-index: 1;
+    background: var(--grey);
+    -webkit-box-shadow: 0 0 0 2px var(--background-color);
+            box-shadow: 0 0 0 2px var(--background-color);
+    -webkit-transition: -webkit-box-shadow 0.25s ease;
+    transition: -webkit-box-shadow 0.25s ease;
+    -o-transition: box-shadow 0.25s ease;
+    transition: box-shadow 0.25s ease;
+    transition: box-shadow 0.25s ease, -webkit-box-shadow 0.25s ease;
+    overflow: hidden;
+    pointer-events: none;
+  
+    img{
+        width: 100%;
+    }
+  
+    /*PHABLET*/
+    @media screen and (max-width: $phablet){
+        display: none;
+    }
+}
+
+.article-coauthors-name-container{
+    position: relative;
+    max-width: 260px;
+    white-space: nowrap;
+    overflow: hidden;
+    -o-text-overflow: ellipsis;
+       text-overflow: ellipsis;
+    font-weight: 600;
+    cursor: pointer;
+  
+    /*DESKTOP*/
+    @media screen and (max-width: $desktop){
+        max-width: 120px;
+    }
+    
+    /*PHABLET*/
+    @media screen and (max-width: $phablet){
+        max-width: 200px;
+    }
+}
+
+.article-coauthors-icon-container{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    position: relative;
+    cursor: pointer;
+    margin-left: 10px;
+    margin-right: 10px;
+  
+    /*PHABLET*/
+    @media screen and (max-width: $phablet){
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        top: 10px;
+        height: 100%;
+    }
+
+}
+
+.article-coauthors-list-open{
+    position: absolute;
+    z-index: 2;
+    left: -21px;
+    right: -21px;
+    top: -19px;
+    padding: 21px;
+    background: var(--card);
+    -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
+            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    cursor: pointer;
+    list-style-type: none;
+    -webkit-transform: translateY(-2px);
+        -ms-transform: translateY(-2px);
+            transform: translateY(-2px);
+
+
+    li::before{
+        display: none;
+    }
+}
+
+.article-icon-open-container{
+    position: absolute;
+    cursor: pointer;
+    top: 25px;
+    right: 10px;
+
+}
+
+.article-coauthors-list-item-open{
+    padding: 0;
+    a {
+        width: 100%;
+    }
+    
+    &:not(:last-child) {
+        margin-bottom: 10px;
+    }
+}
+
+.article-coauthor-avatar-open{
+    height: 25px;
+    width: 25px;
+    border-radius: 50%;
+    margin-right: 15px;
+    background: var(--grey);
+    overflow: hidden;
+    pointer-events: none;
+
+    img{
+        width: 100%;
+    }
+  
+    .gatsby-image-wrapper > div {
+      padding-bottom: 100% !important;
+      overflow: hidden;
+    }
+}
+
+.article-author-name-open{
+    position: relative;
+    cursor: pointer;
+    color: var(--secondary);
+    font-weight: 600;
+}
+
+/**************************************ARTICLE BODY**************************************/
+
+.post-content{
+    padding: 160px 0 35px;
+}
+
+/**************************************ARTICLE NEXT**************************************/
+
+.footer-next-heading{
+    display: block;
+    font-size: 1.6rem;
+    position: relative;
+    opacity: 0.25;
+    margin-left: 0;
+    margin-right: 0;
+    margin-bottom: 100px;
+    min-width: 100%;
+    font-weight: 400;
+    color: var(--primary);
+  
+    /*TABLET*/
+    @media screen and (max-width: $tablet){
+        margin-bottom: 60px;
+    }
+  
+    &::after {
+        content: '';
+        position: absolute;
+        background: var(--grey);
+        width: 62%;
+        max-width: 100%;
+        height: 1px;
+        right: 0;
+        top: 50%;
+
+        /*TABLET*/
+        @media screen and (max-width: $tablet){
+          width: 41.7%;
+        }
+
+        /*PHABLET*/
+        @media screen and (max-width: $phablet){
+            width: 27.8%;
+        }
+
+        /*PHONE*/
+        @media screen and (max-width: $phone){
+            width: 90px;
+        }
+    }
+}
+
+.footer-spacer{
+    margin-bottom: 65px;
+}

sample-hugo-template/Tech-Club-Blog/assets/scss/articles.scss

@@ -0,0 +1,624 @@
+/****************************************HEADER****************************************/
+
+.subheading-container{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    margin-bottom: 100px;
+  
+    /*DESKTOP*/
+    @media screen and (max-width: $desktop){
+      margin-bottom: 80px;
+    }
+  
+    /*TABLET*/
+    @media screen and (max-width: $tablet){
+      margin-bottom: 60px;
+    }
+  
+    /*PHABLET*/
+    @media screen and (max-width: $phablet){
+      display: none;
+    }
+}
+
+.grid-controls-container{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  
+    /*TABLET*/
+    @media screen and (max-width: $tablet){
+      display: none !important;
+    }
+}
+
+.heading-container{
+    margin: 100px 0;
+
+    /*DESKTOP*/
+    @media screen and (max-width: $desktop){
+      width: 80%;
+    }
+  
+    /*TABLET*/
+    @media screen and (max-width: $tablet){
+      width: 100%;
+    }
+}
+
+.hero-heading{
+    font-style: normal;
+    font-weight: 600;
+    font-size: 52px;
+    font-family: var(--sanserif);
+    line-height: 1.15;
+    color: var(--primary);
+    margin: 0;
+  
+    /*DESKTOP*/
+    @media screen and (max-width: $desktop){
+      font-size: 38px
+    }
+  
+    /*PHABLET*/
+    @media screen and (max-width: $phablet){
+      font-size: 32px;
+    }
+}
+
+.grid-button{
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    height: 36px;
+    width: 36px;
+    border-radius: 50%;
+    background: transparent;
+    -webkit-transition: background 0.25s;
+    -o-transition: background 0.25s;
+    transition: background 0.25s;
+  
+    &:not(:last-child) {
+      margin-right: 30px;
+    }
+  
+    &:hover {
+      background: var(--hover);
+    }
+  
+    &[data-a11y="true"]:focus::after {
+      content: "";
+      position: absolute;
+      left: -10%;
+      top: -10%;
+      width: 120%;
+      height: 120%;
+      border: 2px solid var(--accent);
+      background: rgba(255, 255, 255, 0.01);
+      border-radius: 50%;
+    }
+  
+    svg {
+      -webkit-transition: opacity 0.2s;
+      -o-transition: opacity 0.2s;
+      transition: opacity 0.2s;
+  
+      path {
+        fill: var(--primary);
+      }
+    }
+}
+
+/****************************************LIST****************************************/
+
+/*LIMIT TO TWO LINES*/
+.limit-to-two-lines, .articles-title, .article-excerpt{
+    -o-text-overflow: ellipsis;
+       text-overflow: ellipsis;
+    overflow-wrap: normal;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    white-space: normal;
+    overflow: hidden;
+  
+    /*PHABLET*/
+    @media screen and (max-width: $phablet){
+      -webkit-line-clamp: 3;
+    }
+}
+
+/*SHOW DETAILS*/
+.show-details{
+    p {
+        display: -webkit-box;
+      }
+    
+    h2 {
+      margin-bottom: 10px;
+    }
+}
+
+.articles-list-container{
+    -webkit-transition: opacity 0.25s;
+    -o-transition: opacity 0.25s;
+    transition: opacity 0.25s;
+}
+
+.author-alc{
+    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--card)), to(var(--background-color)));
+    background-image: -o-linear-gradient(var(--card), var(--background-color));
+    background-image: linear-gradient(var(--card), var(--background-color));
+    padding-top: 90px;
+
+    .post-row-alt{
+        -webkit-box-pack: center;
+            -ms-flex-pack: center;
+                justify-content: center;
+        .article-link{
+            max-width: 40%!important;
+            margin: 15px;
+        }
+    }
+}
+
+/*LIST TITLE*/
+.list-title{
+    position: relative;
+    display: -ms-grid;
+    display: grid;
+    -ms-grid-columns:
+      '457px 1fr';
+    grid-template-columns:
+      '457px 1fr';
+    -ms-grid-rows: 2;
+    grid-template-rows: 2;
+    -webkit-column-gap: 30px;
+       -moz-column-gap: 30px;
+            column-gap: 30px;
+  
+    &:not(:last-child) {
+      margin-bottom: 75px;
+    }
+
+    /*DESKTOP MEDIUM*/
+    @media screen and (max-width: $desktop_medium){
+        grid-template-columns: 1fr 1fr;
+      }
+    
+    /*TABLET*/
+    @media screen and (max-width: $tablet){
+      grid-template-columns: 1fr;
+      
+      &:not(:last-child) {
+        margin-bottom: 0;
+      }
+    }
+  
+}
+.list-title > *:nth-child(1){
+    -ms-grid-row: 1;
+    -ms-grid-column: 1
+  
+}
+
+.list-title-alt{
+    -ms-grid-columns:
+      '457px 1fr';
+    grid-template-columns:
+      '457px 1fr';
+}
+
+.list-item-row{
+    display: -ms-grid;
+    display: grid;
+    -ms-grid-rows: 1fr;
+    grid-template-rows: 1fr;
+    -ms-grid-columns: 1fr 96px 488px;
+    grid-template-columns: 1fr 488px;
+    grid-column-gap: 96px;
+    -ms-grid-rows: 1;
+    grid-template-rows: 1;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    position: relative;
+    margin-bottom: 50px;
+
+    /*DESKTOP*/
+    @media screen and (max-width: $desktop){
+        grid-column-gap: 24px;
+        grid-template-columns: 1fr 380px;
+    }
+    
+      /*TABLET*/
+      @media screen and (max-width: $tablet){
+        grid-template-columns: 1fr;
+    }
+
+    @media (max-width: 540px) {
+        background: var(--card);
+    }
+    
+    /*PHABLET*/
+    @media screen and (max-width: $phablet){
+        -webkit-box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.2);
+                box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.2);
+        border-bottom-right-radius: 5px;
+        border-bottom-left-radius: 5px;
+    }
+  
+
+}.list-item-row > *:nth-child(1){
+    -ms-grid-row: 1;
+    -ms-grid-column: 1;
+  
+
+}.list-item-row > *:nth-child(2){
+    -ms-grid-row: 1;
+}
+
+.list-item-tile{
+    position: relative;
+
+    /*TABLET*/
+    @media screen and (max-width: $tablet){
+      margin-bottom: 60px;
+    }
+  
+    @media (max-width: 540px) {
+      background: var(--card);
+    }
+  
+    /*PHABLET*/
+    @media screen and (max-width: $phablet){
+      margin-bottom: 40px;
+      -webkit-box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.2);
+              box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.2);
+      border-bottom-right-radius: 5px;
+      border-bottom-left-radius: 5px;
+    }
+}
+
+.list-row{
+    display: -ms-grid;
+    display: grid;
+    -ms-grid-rows: "1fr 1fr";
+    grid-template-rows: "1fr 1fr";
+}
+
+.list-row-alt{
+    -ms-grid-rows: "1fr";
+    grid-template-rows: "1fr";
+}
+
+.image-container{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    overflow: hidden;
+    position: relative;
+    height: 280px;
+    -webkit-box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.22),
+      0 18px 36px -18px rgba(0, 0, 0, 0.25);
+            box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.22),
+      0 18px 36px -18px rgba(0, 0, 0, 0.25);
+    margin-bottom: 30px;
+    -webkit-transition: -webkit-transform 0.3s var(--ease-out-quad),
+      -webkit-box-shadow 0.3s var(--ease-out-quad);
+    transition: -webkit-transform 0.3s var(--ease-out-quad),
+      -webkit-box-shadow 0.3s var(--ease-out-quad);
+    -o-transition: transform 0.3s var(--ease-out-quad),
+      box-shadow 0.3s var(--ease-out-quad);
+    transition: transform 0.3s var(--ease-out-quad),
+      box-shadow 0.3s var(--ease-out-quad);
+    transition: transform 0.3s var(--ease-out-quad),
+      box-shadow 0.3s var(--ease-out-quad),
+      -webkit-transform 0.3s var(--ease-out-quad),
+      -webkit-box-shadow 0.3s var(--ease-out-quad);
+  
+    & > div {
+      height: 100%;
+    }
+  
+    /*TABLET*/
+    @media screen and (max-width: $tablet){
+      height: 200px;
+      margin-bottom: 35px;
+    }
+  
+    /*PHABLET*/
+    @media screen and (max-width: $phablet){
+      overflow: hidden;
+      margin-bottom: 0;
+      -webkit-box-shadow: none;
+              box-shadow: none;
+      border-top-right-radius: 5px;
+      border-top-left-radius: 5px;
+    }
+}
+
+.article-image{
+    -ms-flex-negative: 0;
+        flex-shrink: 0;
+    max-width: 100%;
+    min-height: 100%;
+    -o-object-fit: cover;
+       object-fit: cover;
+}
+
+.article-title{
+    font-size: 21px;
+    font-family: var(--serif);
+    margin-bottom: 35px;
+    -webkit-transition: color 0.3s ease-in-out;
+    -o-transition: color 0.3s ease-in-out;
+    transition: color 0.3s ease-in-out;
+  
+    /*DESKTOP*/
+    @media screen and (max-width: $desktop){
+      margin-bottom: 15px;
+    }
+  
+    /*TABLET*/
+    @media screen and (max-width: $tablet){
+      font-size: 24px;  
+    }
+  
+    /*PHABLET*/
+    @media screen and (max-width: $phablet){
+      font-size: 22px;  
+      padding: 30px 20px 0;
+      margin-bottom: 10px;
+      -webkit-line-clamp: 3;
+    }
+}
+
+.article-excerpt{
+    font-size: 16px;
+    margin-left: 0;
+    margin-right: 0;
+    margin-bottom: 10px;
+    color: var(--grey);
+    display: none;
+  
+    /*DESKTOP*/
+    @media screen and (max-width: $desktop){
+      display: -webkit-box;
+    }
+  
+    /*PHABLET*/
+    @media screem and (max-width: $phablet){
+      margin-bottom: 15px;
+      max-width: 100%;
+      padding:  0 20px;
+      margin-bottom: 20px;
+      -webkit-line-clamp: 3;
+    }
+}
+
+.article-metadata{
+    font-weight: 600;
+    font-size: 16px;
+    color: var(--grey);
+    opacity: 0.33;
+  
+    /*PHABLET*/
+    @media screen and (max-width: $phablet){
+      max-width: 100%;
+      padding:  0 20px 30px;
+    }
+}
+
+.post-row{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    width: 100%;
+    margin-bottom: 100px;
+
+    /*TABLET*/
+    @media screen and (max-width: $tablet){
+        margin: 0;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+      -webkit-box-pack: center;
+          -ms-flex-pack: center;
+              justify-content: center;
+    }
+}
+
+.post-row-alt{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    width: 100%;
+    margin-bottom: 100px;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+
+    .article-link{
+        margin-top: 75px;
+        max-width: 48.3%;
+
+        /*TABLET*/
+        @media screen and (max-width: $tablet){
+            max-width: 100%;
+        }
+    }
+}
+
+.article-link{
+    max-width: 39.5%;
+    position: relative;
+    display: block;
+    width: 100%;
+    top: 0;
+    left: 0;
+    border-radius: 5px;
+    z-index: 1;
+    -webkit-transition: -webkit-transform 0.33s var(--ease-out-quart);
+    transition: -webkit-transform 0.33s var(--ease-out-quart);
+    -o-transition: transform 0.33s var(--ease-out-quart);
+    transition: transform 0.33s var(--ease-out-quart);
+    transition: transform 0.33s var(--ease-out-quart), -webkit-transform 0.33s var(--ease-out-quart);
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  
+    &:hover{
+        text-decoration: none;
+    }
+
+    &:hover .image-container, &:focus .image-container {
+      -webkit-transform: translateY(-1px);
+          -ms-transform: translateY(-1px);
+              transform: translateY(-1px);
+      -webkit-box-shadow: 0 50px 80px -20px rgba(0, 0, 0, 0.27),
+        0 30px 50px -30px rgba(0, 0, 0, 0.3);
+              box-shadow: 0 50px 80px -20px rgba(0, 0, 0, 0.27),
+        0 30px 50px -30px rgba(0, 0, 0, 0.3);
+    }
+  
+    &:hover h2,
+    &:focus h2 {
+      color: var(--accent);
+    }
+  
+    &[data-a11y="true"]:focus::after {
+      content: "";
+      position: absolute;
+      left: -1.5%;
+      top: -2%;
+      width: 103%;
+      height: 104%;
+      border: 3px solid var(--accent);
+      background: rgba(255, 255, 255, 0.01);
+      border-radius: 5px;
+    }
+
+    /*DESKTOP MEDIUM*/
+    @media screen and (max-width: $desktop_medium){
+      max-width: 48.5%;
+    }
+
+    /*TABLET*/
+    @media screen and (max-width: $tablet){
+      min-width: 80% !important;
+      display: block;
+      margin-bottom: 60px;
+
+      p{
+        padding: 0;
+      }
+    }
+  
+    /*PHABLET*/
+    @media screen and (max-width: $phablet){
+      min-width: 100% !important;
+      margin-bottom: 40px;
+      -webkit-box-shadow: 0px 20px 40px rgba(0,0,0,0.2);
+              box-shadow: 0px 20px 40px rgba(0,0,0,0.2);
+
+      &:hover .image-container {
+        -webkit-transform: none;
+            -ms-transform: none;
+                transform: none;
+        -webkit-box-shadow: initial;
+                box-shadow: initial;
+      }
+  
+      &:active {
+        -webkit-transform: scale(0.97) translateY(3px);
+            -ms-transform: scale(0.97) translateY(3px);
+                transform: scale(0.97) translateY(3px);
+      }
+
+      p{
+        padding: 30px 20px 0;
+      }
+    }
+}
+
+#article-link-bigger{
+  max-width: 58.5% !important; 
+
+  /*DESKTOP MEDIUM*/
+  @media screen and (max-width: $desktop_medium){
+    max-width: 48.5% !important;
+  }
+}
+
+.articles-list-container-alt{
+
+    .post-row{
+      -ms-flex-wrap: wrap !important;
+          flex-wrap: wrap !important;
+      margin-bottom: 0;
+  
+      .article-link{
+        display: -webkit-box !important;
+        display: -ms-flexbox !important;
+        display: flex !important;
+        min-width: 100% !important;
+        -webkit-box-orient: horizontal;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: row;
+                flex-direction: row;
+        -ms-flex-wrap: none;
+            flex-wrap: none;
+  
+        .article-data-outer{
+          display: -webkit-box !important;
+          display: -ms-flexbox !important;
+          display: flex !important;
+          min-width: 100% !important;
+          -webkit-box-orient: horizontal;
+          -webkit-box-direction: normal;
+              -ms-flex-direction: row;
+                  flex-direction: row;
+          -ms-flex-wrap: none;
+              flex-wrap: none;
+          -webkit-box-pack: justify;
+              -ms-flex-pack: justify;
+                  justify-content: space-between;
+  
+          .image-container{
+            max-width: 46%;
+          }
+        
+          .article-data{
+            max-width: 46%;
+          }
+        }
+      }
+    
+    }
+  }

sample-hugo-template/Tech-Club-Blog/assets/scss/authors.scss

@@ -0,0 +1,108 @@
+/****************************HERO****************************/
+.author-hero{
+    position: relative;
+    z-index: 1;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    margin: 35px auto 110px;
+}
+
+.author-hero-image{
+    position: relative;
+    z-index: 1;
+    height: 164px;
+    width: 164px;
+    margin-bottom: 35px;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 2px solid var(background-color);
+    -webkit-box-shadow: 0px 15.619px 31.2381px rgba(0, 0, 0, 0.15);
+            box-shadow: 0px 15.619px 31.2381px rgba(0, 0, 0, 0.15);
+    border: 2px solid var(--card);
+
+    img{
+        width: 100%;
+    }
+  
+    /*TABLET*/
+    @media screen and (max-width: $tablet){
+        width: 146px;
+        height: 146px;
+    }
+
+    /*PHABLET*/
+    @media screen and (max-width: $phablet){
+        width: 136px;
+        height: 136px;
+        margin-bottom: 25px;
+    }
+}
+
+.author-heading{
+    font-size: 38px;
+    font-family: var(--sanserif);
+    color: var(--primary);
+    margin-bottom: 15px;
+    font-weight: 600;
+    text-align: center;
+}
+
+.author-subheading{
+    margin: 0 auto;
+    max-width: 450px;
+    color: var(--grey);
+    font-size: 18px;
+    font-family: var(--sanserif);
+    line-height: 1.4;
+    text-align: center;
+
+    /*PHABLET*/
+    @media screen and (max-width: $phablet){
+        font-size: 14px;
+    }
+}
+
+.author-social{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    margin-top: 35px;
+    width: 100%;
+  
+    /*PHABLET*/
+    @media screen and (max-width: $phablet){
+        font-size: 14px;
+    }
+}
+
+/****************************CONTENT****************************/
+.authors-gradient{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 590px;
+    z-index: 0;
+    pointer-events: none;
+    background: var(--gradient);
+    -webkit-transition: var(--color-mode-transition);
+    -o-transition: var(--color-mode-transition);
+    transition: var(--color-mode-transition);
+}

sample-hugo-template/Tech-Club-Blog/assets/scss/bio.scss

@@ -0,0 +1,76 @@
+.bio-container{
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  position: relative;
+  left: -10px;
+}
+
+.bio-link{
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+
+  &:hover{
+    text-decoration: none;
+  }
+}
+
+.bio-avatar{
+  display: block;
+  position: relative;
+  height: 40px;
+  width: 40px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.25);
+  margin-right: 16px;
+  margin: 10px 26px 10px 10px;
+}
+
+.bio-avatar::after {
+  content: "";
+  position: absolute;
+  left: -5px;
+  top: -5px;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+}
+
+.bio-avatar[data-a11y="true"]:focus::after {
+  content: "";
+  position: absolute;
+  left: -5px;
+  top: -5px;
+  width: 50px;
+  height: 50px;
+  border: 2px solid var(--accent);
+}
+
+.bio-avatar-inner{
+  height: 40px;
+  width: 40px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.25);
+  margin-right: 16px;
+  overflow: hidden;
+}
+
+.bio-text{
+  margin-bottom: 0;
+  max-width: 430px;
+  font-size: 14px;
+  line-height: 1.45;
+  color: var(--grey);
+}
+
+.author-avatar{
+  width: 100%;
+}

sample-hugo-template/Tech-Club-Blog/assets/scss/blockquote.scss

@@ -0,0 +1,36 @@
+blockquote{
+    -webkit-transition: var(--color-mode-transition);
+    -o-transition: var(--color-mode-transition);
+    transition: var(--color-mode-transition);
+    margin: 15px auto 50px;
+    color: var(--articleText);
+    font-family: var(--serif);
+    font-style: italic;
+}
+
+blockquote > p {
+  font-family: var(--serif);
+  max-width: 880px !important;
+  padding-right: 100px;
+  padding-bottom: 0;
+  width: 100%;
+  margin: 0 auto;
+  font-size: 36px;
+  line-height: 1.32;
+  font-weight: bold;
+}
+
+@media screen and (max-width: 735px) {
+    blockquote{
+        margin: 10px auto 35px;
+        font-size: 26px;
+        padding: 0 180px;
+    }
+}
+
+@media screen and (max-width: 540px) {
+    blockquote{
+        font-size: 36px;
+        padding: 0 20px 0 40px;
+    }
+}

sample-hugo-template/Tech-Club-Blog/assets/scss/code.scss

@@ -0,0 +1,25 @@
+.code-toolbar{
+    max-width: 750px;
+    margin: 0 auto 35px;
+    overflow: auto;
+    font-size: 12px;
+
+    pre{
+      padding-top: 2.5em !important;
+      padding-bottom: 2.5em !important;
+      padding-left: 5em !important;
+      padding-right: 5em !important;
+      border-radius: 5px !important;
+      background-color: #292c34 !important;
+
+      code{
+        color: white;
+      }
+    }
+
+    .toolbar-item{
+      position: absolute;
+      top: 1em;
+      right: 1em;
+    }
+}

sample-hugo-template/Tech-Club-Blog/assets/scss/global.scss

@@ -0,0 +1,226 @@
+@import "vars.scss";
+@import "anchor.scss";
+@import "bio.scss";
+@import "blockquote.scss";
+@import "headings.scss";
+@import "horizontal-rule.scss";
+@import "image.scss";
+@import "layout.scss";
+@import "lists.scss";
+@import "logo.scss";
+@import "navigation.scss";
+@import "paragraph.scss";
+@import "progress.scss";
+@import "social-links.scss";
+@import "subscription.scss";
+@import "tables.scss";
+@import "section.scss";
+@import "articles.scss";
+@import "home-articles.scss";
+@import "code.scss";
+@import "article.scss";
+@import "authors.scss";
+@import "paginator.scss";
+
+
+/**
+ * Thanks to Benjamin De Cock
+ * https://gist.github.com/bendc/ac03faac0bf2aee25b49e5fd260a727d
+ */
+ :root {
+  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
+  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+}
+
+@font-face {
+  font-family: "-apple-system", "BlinkMacSystemFont", "San Francisco",
+    "Helvetica Neue", "Helvetica", "Ubuntu", "Roboto", "Noto", "Segoe UI",
+    "Arial", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+*,
+*:before,
+*:after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+  margin: 0;
+  padding: 0;
+  font-size: inherit;
+}
+
+:root {
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  cursor: default;
+  font-size: 0.625rem;
+  line-height: 1.4;
+}
+
+body {
+  font-family: "-apple-system", "BlinkMacSystemFont", "San Francisco",
+    "Helvetica Neue", "Helvetica", "Ubuntu", "Roboto", "Noto", "Segoe UI",
+    "Arial", sans-serif;
+  font-size: 1.6rem;
+  margin: 0;
+  font-weight: 400;
+  height: 100%;
+}
+
+button,
+a {
+  text-decoration: none;
+  cursor: pointer;
+}
+
+a:focus {
+  outline: none;
+}
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+  vertical-align: middle;
+}
+
+input,
+textarea,
+select,
+button {
+  font-family: "-apple-system", "BlinkMacSystemFont", "San Francisco",
+    "Helvetica Neue", "Helvetica", "Ubuntu", "Roboto", "Noto", "Segoe UI",
+    "Arial", sans-serif;
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+button,
+input,
+select,
+textarea {
+  color: inherit;
+  font-family: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+}
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace;
+}
+
+fieldset,
+button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: none;
+  outline: none;
+  background: transparent;
+}
+
+table {
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+audio:not([controls]) {
+  display: none;
+}
+
+details {
+  display: block;
+}
+
+input {
+  &:focus,
+  &:active {
+    outline: none;
+  }
+
+  &[type="number"] {
+    width: auto;
+  }
+}
+
+img.Image__Zoom ~ div {
+  background: transparent !important;
+}
+
+.Image__Small{
+  width: 100%;
+  max-width: 680px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 35px;
+  img{
+    width: 100%;
+  }
+}
+
+.Image__medium{
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 35px;
+  img{
+    width: 100%;
+  }
+}
+
+.Image__large{
+  width: 100%;
+  margin-bottom: 35px;
+  img{
+    width: 100vw;
+    position: relative;
+    left: 50%;
+    right: 50%;
+    margin-left: -50vw;
+    margin-right: -50vw;
+  }
+}
+
+.author-alc-section{
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.icon-image{
+  path{
+    fill: var(--primary);
+  }
+}
+
+img{
+  -webkit-animation-name: image-load-in;
+          animation-name: image-load-in;
+  -webkit-animation-duration: 0.8s;
+          animation-duration: 0.8s;
+}
+
+@-webkit-keyframes image-load-in {
+  0% {-webkit-filter: blur(8px);filter: blur(8px); opacity: 0;}
+  100% {-webkit-filter: blur(0);filter: blur(0); opacity: 1;}
+}
+
+@keyframes image-load-in {
+  0% {-webkit-filter: blur(8px);filter: blur(8px); opacity: 0;}
+  100% {-webkit-filter: blur(0);filter: blur(0); opacity: 1;}
+}

sample-hugo-template/Tech-Club-Blog/assets/scss/headings.scss

@@ -0,0 +1,91 @@
+h1, h2, h3, h4, h5, h6{
+    margin: 0 auto;
+    font-weight: bold;
+    color: var(--primary);
+    font-family: var(--serif);
+    width: 100%;
+    max-width: 680px;
+}
+
+h1, h1 *, h2, h2 * {
+  margin: 25px auto 18px;
+}
+
+h3, h3 * {
+  margin: 20px auto 10px;
+}
+
+h1{
+    font-size: 52px;
+    line-height: 1.15;
+}
+
+h2{
+    font-size: 32px;
+    line-height: 1.333;
+}
+
+h3{
+    font-size: 24px;
+    line-height: 1.45;
+}
+
+h4{
+    font-size: 18px;
+    line-height: 1.45;
+}
+
+h5{
+    font-size: 18px;
+    line-height: 1.45;
+}
+
+h6{
+    font-size: 16px;
+    line-height: 1.45;
+}
+
+@media screen and (max-width: 1070px){
+    h1{
+        font-size: 38px;
+        line-height: 1.2;
+    }
+    h2{
+        font-size: 21px;
+    }
+}
+
+@media screen and (max-width: 737px){
+    h1, h2{
+        margin: 30px auto 18px;
+    }
+    h2{
+        font-size: 24px;
+        line-height: 1.45;
+    }
+    h3{
+        font-size: 22px;
+    }
+}
+
+@media screen and (max-width: 540px){
+    h1{
+        font-size: 32px;
+        line-height: 1.3;
+    }
+    h2{
+        font-size: 22px;
+    }
+    h3{
+        font-size: 20px;
+    }
+    h4{
+        font-size: 16px;
+    }
+    h5{
+        font-size: 16px;
+    }
+    h6{
+        font-size: 14px;
+    }
+}

sample-hugo-template/Tech-Club-Blog/assets/scss/home-articles.scss

@@ -0,0 +1,17 @@
+.articles-gradient{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 590px;
+    z-index: 0;
+    pointer-events: none;
+    background: var(--gradient);
+    -webkit-transition: var(--color-mode-transition);
+    -o-transition: var(--color-mode-transition);
+    transition: var(--color-mode-transition);
+}
+
+.articles-paginator{
+    margin-top: 95px;
+}

sample-hugo-template/Tech-Club-Blog/assets/scss/horizontal-rule.scss

@@ -0,0 +1,32 @@
+hr{
+    position: relative;
+    width: 100%;
+    max-width: 680px;
+    margin: 50px auto;
+    border: 0;
+    height: 14.36px;
+    background-repeat: repeat-x;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    background-position: center;
+}
+
+@media screen and (max-width: 1070px){
+    hr{
+        max-width: 507px;
+    }
+}
+
+@media screen and (max-width: 735px){
+    hr{
+        max-width: 486px;
+        width: calc(100vw - 40px);
+        margin: 0px auto 50px;
+    }
+}
+
+@media screen and (max-width: 340px){
+    hr{
+        padding: 0 20px;
+    }
+}

sample-hugo-template/Tech-Club-Blog/assets/scss/image.scss

@@ -0,0 +1,29 @@
+.image-placeholder{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    width: 100%;
+    height: 100%;
+    background: #ccc;
+    color: #898989;
+    font-size: 32px;
+    font-weight: 600;
+}
+
+.image-zoom{
+    display: block;
+    margin: 0 auto;
+    width: 100%;
+}
+
+@media screen and (max-width: 540px){
+    .image-placeholder{
+        font-size: 28px;
+    }
+}

sample-hugo-template/Tech-Club-Blog/assets/scss/layout.scss

@@ -0,0 +1,8 @@
+.layout-styled{
+    position: relative;
+    background: var(--background-color);
+    -webkit-transition: var(--color-mode-transition);
+    -o-transition: var(--color-mode-transition);
+    transition: var(--color-mode-transition);
+    min-height: 100vh;
+}

sample-hugo-template/Tech-Club-Blog/assets/scss/lists.scss

@@ -0,0 +1,169 @@
+ul{
+    list-style: none;
+    counter-reset: list;
+    color: var(--articleText);
+    position: relative;
+    padding: 15px 0 30px 30px;
+    -webkit-transition: var(--color-mode-transition);
+    -o-transition: var(--color-mode-transition);
+    transition: var(--color-mode-transition);
+    margin: 0 auto;
+    font-size: 18px;
+  
+    width: 100%;
+    max-width: 680px;
+}
+
+/*DESKTOP*/
+@media screen and (max-width: 1070px){
+    ul{
+        max-width: 507px;
+    }
+}
+
+/*TABLET*/
+@media screen and (max-width: 735px){
+    ul{
+        max-width: 486px;
+        padding-left: 0px;
+    }
+}
+
+/*PHABLET*/
+@media screen and (max-width: 540px){
+    ul{
+        padding-left: 20px;
+    }
+}
+
+li{
+    position: relative;
+    padding-bottom: 15px;
+}
+
+/*TABLET*/
+@media screen and (max-width: 735px){
+    ul li{
+        padding-left: 30px;
+    }
+
+    ul li p{
+        padding: 0;
+    }
+}
+
+/*PHABLET*/
+@media screen and (max-width: 540px){
+    ul li{
+        padding-left: 30px;
+    }
+}
+
+ul li > *{
+    display: inline;
+}
+
+ul li::before{
+    width: 3rem;
+    display: inline-block;
+    position: absolute;
+    color: var(--articleText);
+    content: "";
+    position: absolute;
+    left: -30px;
+    top: 8px;
+    height: 8px;
+    width: 8px;
+    background: var(--articleText);
+}
+
+/*TABLET*/
+@media screen and (max-width: 735px){
+    ul li::before{
+        left: 0;
+    }
+}
+
+ol{
+    list-style: none;
+    counter-reset: list;
+    color: var(--articleText);
+    position: relative;
+    padding: 15px 0 30px 30px;
+    margin: 0 auto;
+    -webkit-transition: var(--color-mode-transition);
+    -o-transition: var(--color-mode-transition);
+    transition: var(--color-mode-transition);
+    font-size: 18px;
+    width: 100%;
+    max-width: 680px;
+}
+
+/*DESKTOP*/
+@media screen and (max-width: 1070px){
+    ol{
+        max-width: 507px;
+    }
+}
+
+/*TABLET*/
+@media screen and (max-width: 735px){
+    ol{
+        max-width: 486px;
+        padding-left: 0px;
+    }
+}
+
+/*PHABLET*/
+@media screen and (max-width: 540px){
+    ol{
+        padding-left: 20px;
+    }
+}
+
+ol li{
+    position: relative;
+    padding-bottom: 15px;
+}
+
+/*TABLET*/
+@media screen and (max-width: 735px){
+    ol li{
+        padding-left: 30px;
+        padding: 0;
+    }
+    ol li p{
+        padding-left: 30px;
+    }
+}
+
+/*PHABLET*/
+@media screen and (max-width: 540px){
+    ol li{
+        padding-left: 30px;
+    }
+}
+
+ol li > *{
+    display: inline;
+}
+
+ol li::before {
+    width: 3rem;
+    display: inline-block;
+    position: absolute;
+    color: var(--articleText);
+    counter-increment: list;
+    content: counter(list) ".";
+    font-weight: 600;
+    position: absolute;
+    left: -3rem;
+    top: -0.3rem;
+    font-size: 2rem;
+}
+
+@media screen and (max-width: 735px){
+    ol li::before{
+        left: 0;
+    }
+}

sample-hugo-template/Tech-Club-Blog/assets/scss/logo.scss

@@ -0,0 +1,20 @@
+#logo-desktop{
+    .change-fill{
+        fill: var(--primary);
+    }
+}
+
+#logo-mobile{
+    path{
+        fill: var(--primary);
+    }
+}
+
+@media screen and (max-width: 735px){
+    .Logo__Desktop {
+        display: none;
+    }
+    .Logo__Mobile{
+        display: block;
+    }
+}

sample-hugo-template/Tech-Club-Blog/assets/scss/navigation.scss

@@ -0,0 +1,523 @@
+/************************FOOTER************************/
+
+.footer-container{
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    padding-bottom: 80px;
+    color: var(--grey);
+}
+
+/*TABLET*/
+@media screen and (max-width: 735px){
+    .footer-container{
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+                flex-direction: column;
+      padding-bottom: 100px;
+    }
+}
+
+/*PHABLET*/
+@media screen and (max-width: 540px){
+    .footer-container{
+        padding-bottom: 50px;
+    }
+}
+
+.footer-hr{
+    position: relative;
+    margin: 140px auto 50px;
+    border-bottom: 1px solid var(--horizontalRule);
+}
+
+/*TABLET*/
+@media screen and (max-width: 735px){
+    .footer-hr{
+        margin: 60px auto;
+    }
+    .footer-text{
+        margin-bottom: 80px;
+    }
+}
+
+/*PHABLET*/
+@media screen and (max-width: 540px){
+    .footer-hr{
+        display: none;
+    }
+    .footer-text{
+        margin: 120px auto 100px;
+    }
+}
+
+.footer-gradient{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 590px;
+    z-index: 0;
+    pointer-events: none;
+    background: var(--gradient);
+    -webkit-transition: var(--color-mode-transition);
+    -o-transition: var(--color-mode-transition);
+    transition: var(--color-mode-transition);
+}
+
+/************************HEADER************************/
+
+.back-arrow-ico-container{
+    -webkit-transition: 0.2s -webkit-transform var(--ease-out-quad);
+    transition: 0.2s -webkit-transform var(--ease-out-quad);
+    -o-transition: 0.2s transform var(--ease-out-quad);
+    transition: 0.2s transform var(--ease-out-quad);
+    transition: 0.2s transform var(--ease-out-quad), 0.2s -webkit-transform var(--ease-out-quad);
+    opacity: 0;
+    padding-right: 30px;
+    -webkit-animation: fadein 0.3s linear forwards;
+            animation: fadein 0.3s linear forwards;
+}
+
+@-webkit-keyframes fadein {
+    to {
+      opacity: 1;
+    }
+}
+
+@keyframes fadein {
+    to {
+      opacity: 1;
+    }
+}
+
+/*DESKTOP MEDIUM*/
+@media screen and (max-width: 1280px){
+    .back-arrow-ico-container{
+        display: none;
+    }
+}
+
+.nav-container{
+    position: relative;
+    z-index: 100;
+    padding-top: 100px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+}
+
+@media screen and (max-height: 800px) {
+    .nav-container{
+        padding-top: 50px;
+    }
+}
+
+/*DESKTOP MEDIUM*/
+@media screen and (max-width: 1280px){
+    .nav-container{
+        padding-top: 50px;
+    }
+}
+
+.logo-link{
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+}
+
+.logo-link[class*="data-ally"]:focus::after {
+    content: "";
+    position: absolute;
+    left: -10%;
+    top: -30%;
+    width: 120%;
+    height: 160%;
+    border: 2px solid var(--accent);
+    background: rgba(255, 255, 255, 0.01);
+    border-radius: 5px;
+}
+
+.logo-link[class*="back-arrow-ico-container"]{
+    -webkit-transform: translateX(-3px);
+        -ms-transform: translateX(-3px);
+            transform: translateX(-3px);
+}
+
+.logo-link:hover{
+    text-decoration: none;
+}
+
+/*DESKTOP MEDIUM*/
+@media screen and (max-width: 1280px){
+    .logo-link{
+        left: 0
+    }
+}
+
+.nav-controls{
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+}
+
+/*PHABLET*/
+@media screen and (max-width: 540px){
+    .nav-controls{
+        right: -5px;
+    }
+}
+
+.tool-tip{
+    opacity: 0;
+    -webkit-transform: translateY(6px);
+        -ms-transform: translateY(6px);
+            transform: translateY(6px);
+    position: absolute;
+    padding: 4px 13px;
+    border-radius: 5px;
+    font-size: 14px;
+    top: -35px;
+    color: var(--primary);
+    background-color: var(--tooltip);
+    -webkit-animation-duration: 2s;
+            animation-duration: 2s;
+}
+
+@-webkit-keyframes pan-toolbar {
+    0% {opacity: 0; -webkit-transform: translateY(6px); transform: translateY(6px);}
+    30% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
+    70% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
+    100% {opacity: 0; -webkit-transform: translateY(6px); transform: translateY(6px);}
+}
+
+@keyframes pan-toolbar {
+    0% {opacity: 0; -webkit-transform: translateY(6px); transform: translateY(6px);}
+    30% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
+    70% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
+    100% {opacity: 0; -webkit-transform: translateY(6px); transform: translateY(6px);}
+}
+
+.icon-wrapper{
+    opacity: 0.5;
+    position: relative;
+    border-radius: 5px;
+    width: 40px;
+    height: 25px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    -webkit-transition: opacity 0.3s ease;
+    -o-transition: opacity 0.3s ease;
+    transition: opacity 0.3s ease;
+    margin-left: 30px;
+}
+
+.icon-wrapper:hover{
+    opacity: 1;
+}
+
+.icon-wrapper[class*="data-ally"]:focus::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: -30%;
+    width: 100%;
+    height: 160%;
+    border: 2px solid var(--accent);
+    background: rgba(255, 255, 255, 0.01);
+    border-radius: 5px;
+}
+
+/*TABLET*/
+@media screen and (max-width: 735px){
+    .icon-wrapper{
+        display: -webkit-inline-box;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+        -webkit-transform: scale(0.708);
+            -ms-transform: scale(0.708);
+                transform: scale(0.708);
+        margin-left: 10px;
+    }
+    .icon-wrapper:hover{
+        opacity: 0.5;
+    }
+}
+
+.sun-rays{
+    position: relative;
+    right: -16px;
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    border: 2px solid
+      var(--primary);
+    background: var(--primary);
+    -webkit-transform: 1;
+        -ms-transform: 1;
+            transform: 1;
+    -webkit-transition: all 0.45s ease;
+    -o-transition: all 0.45s ease;
+    transition: all 0.45s ease;
+    overflow: hidden;
+    -webkit-box-shadow: 0 -23px 0 var(--primary),
+        0 23px 0 var(--primary),
+        23px 0 0 var(--primary),
+        -23px 0 0 var(--primary),
+        15px 15px 0 var(--primary),
+        -15px 15px 0 var(--primary),
+        15px -15px 0 var(--primary),
+        -15px -15px 0 var(--primary);
+            box-shadow: 0 -23px 0 var(--primary),
+        0 23px 0 var(--primary),
+        23px 0 0 var(--primary),
+        -23px 0 0 var(--primary),
+        15px 15px 0 var(--primary),
+        -15px 15px 0 var(--primary),
+        15px -15px 0 var(--primary),
+        -15px -15px 0 var(--primary);
+    -webkit-transform: scale(0.6);
+        -ms-transform: scale(0.6);
+            transform: scale(0.6);
+}
+
+.moon-or-sun{
+    position: relative;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: 2px solid
+      var(--primary);
+    background: var(--primary);
+    -webkit-transform: 1;
+        -ms-transform: 1;
+            transform: 1;
+    -webkit-transition: all 0.45s ease;
+    -o-transition: all 0.45s ease;
+    transition: all 0.45s ease;
+    overflow: hidden;
+}
+
+.moon-mask{
+    position: absolute;
+    right: -1px;
+    top: -8px;
+    height: 24px;
+    width: 24px;
+    border-radius: 50%;
+    border: 0;
+    background: var(--background-color);
+    -webkit-transform: translate("0, 0");
+        -ms-transform: translate("0, 0");
+            transform: translate("0, 0");
+    opacity: 1;
+    -webkit-transition: var(--color-mode-transition), -webkit-transform 0.45s ease;
+    transition: var(--color-mode-transition), -webkit-transform 0.45s ease;
+    -o-transition: transform 0.45s ease, var(--color-mode-transition);
+    transition: transform 0.45s ease, var(--color-mode-transition);
+    transition: transform 0.45s ease, var(--color-mode-transition), -webkit-transform 0.45s ease;
+}
+
+.mask-to-sun-animation{
+    -webkit-animation-name: mask-to-sun;
+            animation-name: mask-to-sun;
+    -webkit-animation-duration: 0.4s;
+            animation-duration: 0.4s;
+}
+
+.mask-to-moon-animation{
+    -webkit-animation-name: mask-to-moon;
+            animation-name: mask-to-moon;
+    -webkit-animation-duration: 0.4s;
+            animation-duration: 0.4s;
+}
+
+.to-sun-animation{
+    -webkit-animation-name: to-sun;
+            animation-name: to-sun;
+    -webkit-animation-duration: 0.4s;
+            animation-duration: 0.4s;
+}
+
+.to-moon-animation{
+    -webkit-animation-name: to-moon;
+            animation-name: to-moon;
+    -webkit-animation-duration: 0.4s;
+            animation-duration: 0.4s;
+}
+
+.expand-rays{
+    -webkit-animation-name: expand-rays;
+            animation-name: expand-rays;
+    -webkit-animation-duration: 0.5s;
+            animation-duration: 0.5s;
+}
+
+.contract-rays{
+    -webkit-animation-name: contract-rays;
+            animation-name: contract-rays;
+    -webkit-animation-duration: 0.5s;
+            animation-duration: 0.5s;
+}
+
+@-webkit-keyframes mask-to-sun {
+    from {top: -8px; right: -5px; -webkit-transform: scale(1); transform: scale(1);}
+    to {top: -25px; right: -15px; -webkit-transform: scale(0.5); transform: scale(0.5);}
+}
+
+@keyframes mask-to-sun {
+    from {top: -8px; right: -5px; -webkit-transform: scale(1); transform: scale(1);}
+    to {top: -25px; right: -15px; -webkit-transform: scale(0.5); transform: scale(0.5);}
+}
+
+@-webkit-keyframes mask-to-moon {
+    from {top: -25px; right: -15px; -webkit-transform: scale(0.5); transform: scale(0.5);}
+    to {top: -8px; right: -5px; -webkit-transform: scale(1); transform: scale(1);}
+}
+
+@keyframes mask-to-moon {
+    from {top: -25px; right: -15px; -webkit-transform: scale(0.5); transform: scale(0.5);}
+    to {top: -8px; right: -5px; -webkit-transform: scale(1); transform: scale(1);}
+}
+
+@-webkit-keyframes to-sun {
+    from {-webkit-transform: scale(1);transform: scale(1);}
+    to {-webkit-transform: scale(0.5);transform: scale(0.5);}
+}
+
+@keyframes to-sun {
+    from {-webkit-transform: scale(1);transform: scale(1);}
+    to {-webkit-transform: scale(0.5);transform: scale(0.5);}
+}
+
+@-webkit-keyframes to-moon {
+    from {-webkit-transform: scale(0.5);transform: scale(0.5);}
+    to {-webkit-transform: scale(1);transform: scale(1);}
+}
+
+@keyframes to-moon {
+    from {-webkit-transform: scale(0.5);transform: scale(0.5);}
+    to {-webkit-transform: scale(1);transform: scale(1);}
+}
+
+@-webkit-keyframes expand-rays {
+    from {-webkit-transform: scale(0.1);transform: scale(0.1);}
+    to {-webkit-transform: scale(0.6);transform: scale(0.6);}
+}
+
+@keyframes expand-rays {
+    from {-webkit-transform: scale(0.1);transform: scale(0.1);}
+    to {-webkit-transform: scale(0.6);transform: scale(0.6);}
+}
+
+@-webkit-keyframes contract-rays {
+    from {-webkit-transform: scale(0.6);transform: scale(0.6);}
+    to {-webkit-transform: scale(0.1);transform: scale(0.1);}
+}
+
+@keyframes contract-rays {
+    from {-webkit-transform: scale(0.6);transform: scale(0.6);}
+    to {-webkit-transform: scale(0.1);transform: scale(0.1);}
+}
+
+
+
+.header-hidden{
+    position: absolute;
+    display: inline-block;
+    opacity: 0;
+    width: 0px;
+    height: 0px;
+    visibility: hidden;
+    overflow: hidden;
+}
+
+/************************HEADER************************/
+
+.page-button{
+    font-weight: 600;
+    font-size: 18px;
+    text-decoration: none;
+    color: var(--primary);
+}
+
+.page-button:hover, .page-button:focus{
+    opacity: 1;
+    text-decoration: underline;
+}
+
+.page-number-button{
+    font-weight: 400;
+    font-size: 18px;
+    text-decoration: none;
+    color: var(--primary);
+}
+
+.page-number-button:hover, .page-number-button:focus{
+    text-decoration: underline;
+}
+
+.spacer{
+    opacity: 0.3;
+}
+
+.spacer::before{
+    content: "...";
+}
+
+.mobiler-reference{
+    font-weight: 400;
+    color: var(--primary);
+}
+
+.mobile-reference em{
+    font-style: normal;
+    color: var(--primary);
+}
+
+.frame{
+    position: relative;
+    z-index: 1;
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+}
+
+/*TABLET*/
+@media screen and (max-width: 735px){
+    .frame{
+        left: -15px;
+    }
+}

sample-hugo-template/Tech-Club-Blog/assets/scss/paginator.scss

@@ -0,0 +1,48 @@
+.pagination{
+    z-index: 100;
+    margin: 0;
+    margin-top: 95px;
+    padding: 0;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: start;
+        -ms-flex-pack: start;
+            justify-content: flex-start;
+
+    &:hover{
+        cursor: pointer;
+    }
+
+    a:hover{
+        color: var(--primary);
+    }
+    
+    .page-item{
+        display: block;
+        width: auto;
+        height: auto;
+        padding: 0;
+
+        .page-link{
+            display: block;
+            color: var(--grey);
+            min-width: 6rem;
+        }
+
+        .page-next, .page-prev{
+            color: var(--primary);
+        }
+
+
+        &::before{
+            display: none;
+        }
+    }
+
+    .active{
+        .page-link{
+            color: var(--primary);
+        }
+    }
+}

sample-hugo-template/Tech-Club-Blog/assets/scss/paragraph.scss

@@ -0,0 +1,38 @@
+p{
+    line-height: 1.756;
+    font-size: 18px;
+    color: var(--articleText);
+    font-family: var(--sanserif);
+    -webkit-transition: var(--color-mode-transition);
+    -o-transition: var(--color-mode-transition);
+    transition: var(--color-mode-transition);
+    margin: 0 auto 35px;
+    width: 100%;
+    max-width: 680px;
+}
+
+p b {
+    font-weight: 800;
+}
+
+/*DESKTOP*/
+@media screen and (max-width: 1070px){
+    p{
+        max-width: 507px;
+    }
+}
+
+/*TABLET*/
+@media screen and (max-width: 735px){
+    p{
+        max-width: 486px;
+        margin: 0 auto 25px;
+    }
+}
+
+/*PHABLET*/
+@media screen and (max-width: 540px){
+    p{
+        padding: 0 20px;
+    }
+}

sample-hugo-template/Tech-Club-Blog/assets/scss/progress.scss

@@ -0,0 +1,111 @@
+/*************************ASIDE*************************/
+.aside-container{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    margin: 0 auto;
+    max-width: 1140px;
+    z-index: 0;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 30%;
+    -webkit-animation-name: progress-fade-in;
+            animation-name: progress-fade-in;
+    -webkit-animation-duration: 0.5s;
+            animation-duration: 0.5s;
+  
+    /*DESKTOP MEDIUM*/
+    @media screen and (max-width: $desktop_medium){
+        display: none;
+    }
+}
+
+@-webkit-keyframes progress-fade-in {
+    from {opacity: 0;}
+    to {opacity: 1;}
+}
+
+@keyframes progress-fade-in {
+    from {opacity: 0;}
+    to {opacity: 1;}
+}
+
+@-webkit-keyframes progress-fade-out {
+    from {opacity: 1;}
+    to {opacity: 0;}
+}
+
+@keyframes progress-fade-out {
+    from {opacity: 1;}
+    to {opacity: 0;}
+}
+
+.aside-align{
+    position: fixed;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-transform: translateY(0px);
+        -ms-transform: translateY(0px);
+            transform: translateY(0px);
+    top: 0;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    height: 100vh;
+    z-index: 3;
+  
+    opacity: 1;
+    visibility: visible;
+    -webkit-transition: opacity 0.4s linear, visibility 0.4s linear;
+    -o-transition: opacity 0.4s linear, visibility 0.4s linear;
+    transition: opacity 0.4s linear, visibility 0.4s linear;
+}
+
+.overlap-container{
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    pointer-events: none;
+    opacity: 0;
+    -webkit-transition: opacity 0.25s;
+    -o-transition: opacity 0.25s;
+    transition: opacity 0.25s;
+}
+
+/*************************PROGRESS*************************/
+.progress-container{
+    position: relative;
+    outline: none;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+}
+
+.track-line{
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    height: calc(88vh - 40px);
+    max-height: 425px;
+    width: 1px;
+    background-color: var(--track);
+    opacity: 0.6;
+    overflow: hidden;
+}
+
+.progress-line{
+    position: absolute;
+    height: 100%;
+    top: -100%;
+    width: 1px;
+    background-color: var(--progress);
+    left: 0;
+}

sample-hugo-template/Tech-Club-Blog/assets/scss/section.scss

@@ -0,0 +1,38 @@
+.section{
+    width: 100%;
+    max-width: 1220px;
+    margin: 0 auto;
+    padding: 0 4rem;
+
+    /*DESKTOP*/
+    @media screen and (max-width: 1070px){
+        max-width: 850px;
+    }
+
+    /*PHABLET*/
+    @media screen and (max-width: 540px){
+        max-width: 100%;
+        padding: 2rem;;
+    }
+
+    p{
+        /*TABLET*/
+        @media screen and (max-width: 735px){
+            padding: 0 4rem;
+            max-width: 567px;
+        }
+    }
+
+    
+}
+
+.narrow{
+    p{
+        /*TABLET*/
+        @media screen and (max-width: 735px){
+            padding: 0 2rem;
+            max-width: 527px;
+        }
+    }
+    
+}

sample-hugo-template/Tech-Club-Blog/assets/scss/social-links.scss

@@ -0,0 +1,73 @@
+.social-icon-outer{
+    width: 20%;
+    min-width: 220px;
+}
+
+/*TABLET*/
+@media screen and (max-width: $tablet){
+    .authors-sio{
+        width: 60%;
+    }
+}
+
+.social-icon-container{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    min-width: 100%;
+    position: relative;
+    margin-left: 3.2rem;
+    text-decoration: none;
+    max-width: 16px;
+
+    a{
+        margin-right: 25px;
+    }
+}
+
+.social-icon-container:hover > svg {
+    fill: var (--primary);
+  }
+
+.social-icon-container:hover > * {
+    -webkit-transition: fill 0.25s var(--ease-in-out-quad);
+    -o-transition: fill 0.25s var(--ease-in-out-quad);
+    transition: fill 0.25s var(--ease-in-out-quad);
+}
+
+.social-icon-container:first-of-type {
+    margin-left: 0;
+}
+
+.social-icon-container:last-child {
+    margin-right: 0;
+}
+
+/*TABLET*/
+@media screen and (max-width: 735px){
+    .social-icon-container{
+        margin: 0 2.2rem;
+    }
+}
+
+.social-icon-image{
+    path{
+        fill: var(--grey);
+    }
+}
+
+.hidden{
+    width: 0px;
+    height: 0px;
+    visibility: hidden;
+    opacity: 0;
+    overflow: hidden;
+    display: inline-block;
+}

sample-hugo-template/Tech-Club-Blog/assets/scss/subscription.scss

@@ -0,0 +1,256 @@
+.subscription-container{
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    padding: 64px 0 55px;
+    margin: 10px auto 100px;
+    background: var(--card);
+    -webkit-box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.05);
+            box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.05);
+    z-index: 1;
+}
+
+/*TABLET*/
+@media screen and (max-width: 735px){
+    .subscription-container{
+        padding: 50px 0 0;
+        text-align: center;
+    }
+}
+
+/*PHABLET*/
+@media screen and (max-width: 540px){
+    .subscription-container{
+        margin: -20px auto 80px;
+    }
+}
+
+.subscription-content{
+    margin: 0 auto;
+    width: 100%;
+    max-width: 640px;
+}
+
+/*TABLET*/
+@media screen and (max-width: 735px){
+    .subscription-content{
+        h3{
+            padding: 0 50px;
+        }
+    }
+}
+
+/*PHONE*/
+@media screen and (max-width: 376px){
+    .subscription-content{
+        h3 {
+            padding: 0 24px;
+        }
+    }
+}
+
+.subscription-heading{
+    font-family: var(--serif);
+    margin-bottom: 20px;
+}
+
+/*TABLET*/
+@media screen and (max-width: 735px){
+    .subscription-heading{
+        margin-bottom: 15px;
+    }
+}
+
+.subscription-text{
+    margin: 0 auto 30px;
+    color: var(--grey);
+    line-height: 1.75;
+}
+
+/*TABLET*/
+@media screen and (max-width: 735px){
+    .subscription-text{
+        padding: 0 26px;
+        margin: 0 auto 25px;
+    }
+}
+
+.subscription-form{
+    position: relative;
+}
+
+.subscription-form::after {
+    color: var(--accent);
+    content: ">";
+    position: absolute;
+    left: 21px;
+    top: 10px;
+  }
+
+/*TABLET*/
+@media screen and (max-width: 735px){
+    .subscription-form:after{
+        left: 34px;
+        top: 11px;
+    }
+}
+
+.subscription-input{
+    position: relative;
+    border-radius: 35px;
+    border: none;
+    padding: 13px 21px 13px 35px;
+    width: 471px;
+    color: var(--primary);
+    background-color: var(--inputBackground);
+}
+
+.subscription-input.submitted-input:invalid{
+    position: relative;
+    background: var(--theme-ui-colors-errorBackground,rgba(238,86,91,0.1)) !important;
+    border-radius: 35px;
+    border: none;
+    padding: 13px 21px 13px 35px;
+    width: 471px;
+    color: var(--primary,#000);
+    outline: none !important;
+}
+
+input:invalid {
+    -webkit-box-shadow:0 0 2px 1px transparent;
+            box-shadow:0 0 2px 1px transparent;
+}
+
+input:focus,
+select:focus,
+textarea:focus,
+button:focus {
+    outline: none;
+}
+
+.subscription-input.submitted-input:invalid ~ .subscription-error-message{
+    opacity: 1;
+}
+
+.subscription-input.submitted-input:invalid ~ .submit-button{
+    color: var(--error);
+    border: 1px solid var(--error);
+}
+
+.submitted-form:after{
+    color: var(--error);
+}
+
+.subscription-error-message{
+    position: absolute;
+    left: 35px;
+    bottom: -20px;
+    color: var(--theme-ui-colors-error,#EE565B);
+    font-size: 12px;
+    opacity: 0;
+}
+
+.subscription-input::-webkit-input-placeholder {
+    color: var(--track);
+    opacity: 1;
+}
+
+.subscription-input::-moz-placeholder {
+    color: var(--track);
+    opacity: 1;
+}
+
+.subscription-input:-ms-input-placeholder {
+    color: var(--track);
+    opacity: 1;
+}
+
+.subscription-input::-ms-input-placeholder {
+    color: var(--track);
+    opacity: 1;
+}
+
+.subscription-input::placeholder {
+    color: var(--track);
+    opacity: 1;
+}
+
+.subscription-input:-ms-input-placeholder {
+    color: var(--track);
+}
+
+.subscription-input::-ms-input-placeholder {
+    color: var(--track);
+}
+
+/*TABLET*/
+@media screen and (max-width: 735px){
+    .subscription-input{
+        width: calc(100% - 36px);
+        margin: 0 18px;
+        padding: 14px 14px 14px 30px;
+        margin-bottom: 30px;
+    }
+}
+
+.submit-button{
+    border: 1px solid var(--accent);
+    color: var(--accent);
+    position: absolute;
+    left: 306px;
+    top: 3px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    width: 161px;
+    height: 38px;
+    font-weight: 600;
+    border-radius: 35px;
+    letter-spacing: 0.42px;
+    -webkit-transition: border-color 0.2s var(--ease-in-out-quad),
+      background 0.2s var(--ease-in-out-quad), color 0.2s var(--ease-in-out-quad);
+    -o-transition: border-color 0.2s var(--ease-in-out-quad),
+      background 0.2s var(--ease-in-out-quad), color 0.2s var(--ease-in-out-quad);
+    transition: border-color 0.2s var(--ease-in-out-quad),
+      background 0.2s var(--ease-in-out-quad), color 0.2s var(--ease-in-out-quad);
+}
+
+.submit-button:disabled {
+    cursor: not-allowed;
+}
+
+.submit-button svg * {
+    fill: var(--background-color);
+}
+
+.submit-error{
+    position: absolute;
+    left: 35px;
+    bottom: -20px;
+    color: var(--error);
+    font-size: 12px;
+}
+
+.submit-error a {
+    color: var (--error);
+    text-decoration: underline;
+}
+
+/*TABLET*/
+@media screen and (max-width: 735px){
+    .submit-error{
+        left: 50px;
+        top: 50px;
+    }
+}

sample-hugo-template/Tech-Club-Blog/assets/scss/tables.scss

@@ -0,0 +1,78 @@
+/*************************************TABLE************************************/
+
+table{
+    position: relative;
+    line-height: 1.65;
+    color: var(--grey);
+    font-family: var(--sanserif);
+    -webkit-transition: var(--color-mode-transition);
+    -o-transition: var(--color-mode-transition);
+    transition: var(--color-mode-transition);
+    background: var(--card);
+    margin: 45px auto 85px;
+    width: 100%;
+    max-width: 1004px;
+    border: 1px solid var(--horizontalRule);
+    border-radius: 5px;
+    overflow: hidden;
+    border-collapse: separate;
+}
+
+/*DESKTOP*/
+@media screen and (max-width: 1070px){
+    table{
+        margin: 25px auto 65px;
+    }
+}
+
+/*TABLET*/
+@media screen and (max-width: 735px){
+    table{
+        max-width: 486px;
+    }
+}
+
+/*PHABLET*/
+@media screen and (max-width: 540px){
+    table{
+        margin: 15px auto 55px;
+    }
+}
+
+/*************************************TABLE CELL************************************/
+
+td{
+    border-top: 1px solid var(--horizontalRule);
+    padding: 15px 30px;
+    font-size: 16px;
+    background: var(--card);
+}
+
+/*DESKTOP*/
+@media screen and (max-width: 1070px){
+    td{
+        padding: 14px 20px;
+    }
+}
+
+/*TABLET*/
+@media screen and (max-width: 735px){
+    td{
+        font-size: 14px;
+    }
+}
+
+/*************************************TABLE HEAD************************************/
+
+thead{
+    text-align: left;
+    border-collapse: collapse;
+    position: relative;
+    line-height: 1.756;
+    font-weight: 600;
+    color: var(--primary);
+    font-family: var(--serif);
+    -webkit-transition: var(--color-mode-transition);
+    -o-transition: var(--color-mode-transition);
+    transition: var(--color-mode-transition);
+}

sample-hugo-template/Tech-Club-Blog/assets/scss/vars.scss

@@ -0,0 +1,85 @@
+/*BREAKPOINTS*/
+$phone_small: 320px;
+$phone: 376px;
+$phablet: 540px;
+$tablet: 735px;
+$desktop: 1070px;
+$desktop_medium: 1280px;
+$desktop_large: 1440px;
+
+body{
+    /*FONTS*/
+    --serif: "Merriweather", Georgia, Serif;
+    --sanserif: "SF Pro Display", "-apple-system", "BlinkMacSystemFont", "San Francisco", "Helvetica Neue", "Helvetica", "Ubuntu", "Roboto", "Noto", "Segoe UI", "Arial", sans-serif;
+    --monospace: "Operator Mono", Consolas, Menlo, Monaco, source-code-pro, Courier New, monospace;
+
+    /*COLOR MODE TRANSITION*/
+    --color-mode-transition: background 0.25s var(--ease-in-out-quad), color 0.25s var(--ease-in-out-quad);
+
+    /*PRIMARY COLORS*/
+    --primary: #000;
+    --secondary: #73737D;
+    --grey: #73737D;
+    --background-color: #fafafa;
+    --accent: #6166DC;
+    --hover: rgba(0, 0, 0, 0.07);
+    --gradient: linear-gradient(180deg, rgba(217, 219, 224, 0) 0%, #D9DBE0 100%);
+    --articleText: #08080B;
+    --track: rgba(8, 8, 11, 0.3);
+    --progress: #000;
+    --card: #fff;
+    --error: #EE565B;
+    --success: #46B17B;
+    --errorBackground: rgba(238, 86, 91, 0.1);
+    --horizontalRule: rgba(8, 8, 11, 0.15);
+    --inputBackground: rgba(0, 0, 0, 0.05);
+    --tooltip: lightgrey;
+
+    /*DARK COLORS*/
+    --dark-grey: #73737D;
+    --dark-primary: #fff;
+    --dark-secondary: #fff;
+    --dark-accent: #E9DAAC;
+    --dark-background: #111216;
+    --dark-hover: rgba(255, 255, 255, 0.07);
+    --dark-gradient: linear-gradient(180deg, #111216 0%, rgba(66, 81, 98, 0.36) 100%);
+    --dark-articleText: #fff;
+    --dark-track: rgba(255, 255, 255, 0.3);
+    --dark-progress: #fff;
+    --dark-card: #1D2128;
+    --dark-error: #EE565B;
+    --dark-success: #46B17B;
+    --dark-errorBackground: rgba(238, 86, 91, 0.1);
+    --dark-horizontalRule: rgba(255, 255, 255, 0.15);
+    --dark-inputBackground: rgba(255, 255, 255, 0.07);
+
+    /*PRISM*/
+    --token: #fff;
+    --languageJavascript: #e8696b;
+    --javascript: #e8696b;
+    --background: #292c34;
+    --comment: #5e6a76;
+    --string: #a8e2a8;
+    --var: #b3bac5;
+    --number: #e4854d;
+    --constant: #b3bac5;
+    --plain: #fff;
+    --doctype: #e8696b;
+    --tag: #e8696b;
+    --keyword: #d49fd4;
+    --boolean: #ff5874;
+    --function: #5F8DC3;
+    --parameter: #F9965D;
+    --className: #ffcf74;
+    --attrName: #bf87ba;
+    --attrValue: #a8e2a8;
+    --interpolation: #fff;
+    --punctuation: #5FA8AA;
+    --property: #80cbc4;
+    --propertyAccess: #fff;
+    --namespace: #b2ccd6;
+    --highlight: rgba(255,255,255,0.07);
+    --highlightBorder: #e1bde2;
+    --dom: #5F8DC3;
+    --operator: #5FA8AA;
+}

sample-hugo-template/Tech-Club-Blog/config.yaml

@@ -0,0 +1,5 @@
+baseURL: "http://hwtech.club"
+languageCode: "en-us"
+title: "HW Tech Club Blog"
+pygmentsstyle: 'monokai'
+# pygmentsstyle: 'solarized-light'

sample-hugo-template/Tech-Club-Blog/config/_default/social.yaml

@@ -0,0 +1,3 @@
+github: "https://github.com/Tech-club/"
+instagram: "https://www.instagram.com/hwtechclub/?hl=en"
+linkedin: "https://www.linkedin.com/company/hw-tech-club/"

sample-hugo-template/Tech-Club-Blog/content/_index.md

@@ -0,0 +1,5 @@
+---
+hero:
+  heading: <The Heriot Watt Tech Club Blog/>
+  maxWidthPX: 500px
+---

sample-hugo-template/Tech-Club-Blog/content/about.md

@@ -0,0 +1,6 @@
+---
+title: About
+---
+
+This page is related to the Tech Club. 
+All the other content goes here.

sample-hugo-template/Tech-Club-Blog/content/authors/MohitKatta/_index.md

@@ -0,0 +1,15 @@
+---
+title: Mohit Katta
+bio: |
+  Studying BSC Computer Science Student at the Heriot Watt University,Dubai
+avatar: /images/myphoto.jpeg
+date: 2001-05-29
+featured: true
+social:
+  - title: github
+    url: https://github.com/mk210/Tech-Club-Blog
+  - title: instagram
+    url: https://www.instagram.com/mo.kvs_/?hl=en
+  - title: linkedin
+    url: https://www.linkedin.com/in/mohit-kvs-016034131/
+---

sample-hugo-template/Tech-Club-Blog/content/authors/akilan-selvacoumar/_index.md

@@ -0,0 +1,13 @@
+---
+title: Akilan Selvacoumar
+bio: |
+  HW Tech Club President
+avatar: https://i1.rgstatic.net/ii/profile.image/763939705069568-1559148827007_Q512/Akilan_Selvacoumar.jpg
+date: 1999-11-07
+featured: true
+social:
+  - title: github
+    url: https://github.com/Akilan1999
+  - title: linkedin
+    url: https://www.linkedin.com/in/akilan-selvacoumar
+---

sample-hugo-template/Tech-Club-Blog/content/authors/hugo-authors/MohitKatta.md

@@ -0,0 +1,15 @@
+---
+title: Mohit Katta
+bio: |
+  Studying BSC Computer Science Student at the Heriot Watt University,Dubai
+avatar: /images/myphoto.jpeg
+date: 2001-05-29
+featured: true
+social:
+  - title: github
+    url: https://github.com/mk210/Tech-Club-Blog
+  - title: instagram
+    url: https://www.instagram.com/mo.kvs_/?hl=en
+  - title: linkedin
+    url: https://www.linkedin.com/in/mohit-kvs-016034131/
+---

sample-hugo-template/Tech-Club-Blog/content/contact/index.md

@@ -0,0 +1,13 @@
++++
+date="2020"
+title="Drop in your suggestions"
++++
+<form method="post" name="Contact" netlify>
+    <label>Name <input type="text" name="name"></label>
+    <label>Email <input type="email" name="email"></label>
+    <label for="message">Message</label>
+    <textarea id="message" name ="message" placeholder="Write something here!" style="height:200px"></textarea>
+    <button type="submit">Send</button>
+    <br>
+    <div data-netlify-recaptcha></div>
+</form>

sample-hugo-template/Tech-Club-Blog/content/post/S20.md

@@ -0,0 +1,49 @@
+---
+title: A New Decade, A New Series
+date: 2020-01-13
+hero: /images/S20-Header.jpg
+excerpt: About the new Samsung S20 Series
+timeToRead: 5
+authors:
+- MohitKatta  
+
+---
+As the new decade is here, We have a new set of smartphones which came into the market. The Korean Company designed their first 2020 smartphone series and is now available to the consumers.
+
+As always, there were a lot of speculations on the design perspective of this gigantic smartphone. The flagship S20 series comes in 3 different variants, the Galaxy S20, the Galaxy S20 Plus and the magnanimous Galaxy S20 Ultra.
+
+All 3 smartphones are have the famous water drop pin-hole front facing camera and the special focuz on these phones, especially the S20 Ultra is the 100 Megapixel space Zoom. The S20 Plus has a mediocre 30 Megapixel zoom with enhanced picture quality.
+These phones also come in different sizes, the S20 comes in a handful 6.2" Dynamic AMOLED 2X whereas the S20 plus comes in a 6.7" Dynamic AMOLED 2X and the S20 Ultra, as the name suggests, comes in a gigantic 6.9" Dynamic AMOLED 2X.
+Samsung also managed to increase the battery capacity of the smartphones, the S20 and the S20 Plus have a manageable 4000 and 4500 mAh whereas the S20 Ultra has a magnanimous 5000mAh battery Capacity.
+
+#Welcome to 5G
+--
+Huawei being the 1st Smart Phone producer to incorporate the 5G technology into their Mate30 Pro 5G smartphone, Samsung is also one of the first producers to incorporate 5G Compatible technology into all of their flasgship smartphones.
+
+#Software Specs
+--
+Apart from te hardware aspect, the software has also been upgraded from OneUI to the OneUI V2.1. A couple of years back, we got the first lightweight and smooth UI created by Samsung and purging the old TouchWIz UI. With the new flagship line, we also have a lot of new changes made to primary version of OneUI. It has become a lot easier and faster with almost no noticeable lags, the korean company did a fabulous job in terms of the software aspect as well.
+All the phones are now packed with 64-bit octa-core processor (Max 2.7GHz + 2.5 GHz + 2.0 GHz).All the phones are Android 10 pre-installed.
+
+#Color Specs
+--
+The Galaxy S20 comes in three colors: Cosmic gray, Cloud blue and Cloud pink.Like the standard Galaxy S20, the S20 Plus comes in the Cosmic gray and Cloud blue colors. Instead of Cloud pink, though, the S20 Plus offers a Cosmic black option.
+
+#The Camera Bump
+--
+Samsung's first quad camera smartphone was the Galaxy A9. The picture quality isn't that great but the innovaive quad cam idea was exceptional.The Galaxy S20 series also has a quad cam option , that is with the S20 Ultra.
+The S20 ultra is packed with 108-megapixel (wide-angle), 48-megapixel (telephoto), 12-megapixel (ultrawide), time-of-flight camera.
+The S20 Plus has a reasonable 12-megapixel (wide-angle), 64-megapixel (telephoto), 12-megapixel (ultrawide), time-of-flight camera and the S20 has a mediocre 12-megapixel (wide-angle), 64-megapixel (telephoto), 12-megapixel (ultrawide).
+
+All the phones have exceptional yet storage eating 8k recording capabilities which can take clean, eye catching and pure videos.
+
+
+                                                                                                              --By Mohit Katta  
+
+
+
+{{< css.inline >}}
+<style>
+.canon { background: white; width: 100%; height: auto;}
+</style>
+{{< /css.inline >}}

sample-hugo-template/Tech-Club-Blog/content/post/beginningtoCode.md

@@ -0,0 +1,68 @@
+---
+title: <Intrigued to code/>
+date: 2020-04-07
+hero: /images/hello-world.png
+excerpt: "Read more about coding here.."
+timeToRead: 10
+authors:
+  - MohitKatta
+
+---
+<!-- TO insert images -> ![Example image](/static/image.png) -->
+
+My Coding History
+--
+Right now, I am a computer Science student who learnt a lot of languages and coded many programs. But all this started years back, when i first wrote my Hello World! program in Java in my school days. That's when it all started off. My First programming langiage was Java and believed that it was the best programming language that was out there and when i came to university, that perspective changed... for the the better.
+
+As of now, i have learnt over 14 Programming languages which includes declarative,imperative and web Programming as well. Database management systems is also a key learning factor while learning programming languages.
+
+Pre-Basics of coding
+--
+Well, before learning the basics of coding, we all need to understand in what to code and why with emphasis on the latter. There are thousands of programming languages out there and choosing to learn one language to begin with is a hard task. That comes to the second question of why.
+Well,I believe that if you start learning a more Non-Abstracted code language like C and Java, it'll help you understand how recent and more professional code languages like Python work behind the scenes.
+
+Keeping that in mind, i would like to give you some languages to start working on and learning the basics of the language.Remember, Learning WHY is more important than WHAT the code does.
+
+- C      (Best to start with)
+- Java   (Good option as well)
+- C++
+
+## What to start with?
+--
+Every language has it's own syntax and it's own concept, but the basics remain the same. You have to first understand these basic concepts:
+1. [Classes and Objects](https://www.youtube.com/watch?v=MeP1CztNMdo&feature=emb_logo)
+2. [Encapsulation and Inheritance](https://www.youtube.com/watch?v=QXHOrKEjHo0)
+3. [Polymorphism](https://www.youtube.com/watch?v=AmdgVatPL9k)
+
+These concepts make the building blocks of [Object Oriented Programming](https://www.youtube.com/watch?v=xoL6WvCARJY).Only after you are thorough with these topics, you should have your *hands on coding!!*.
+
+![4 Pillars of OOP](/images/coding-post-1.png)
+
+Now, These pillars of OOP as some call it, are essential and build your foundation for coding any language,well,technically.
+
+## Resources that will teach you the ABC in programing:
+- Google started it's own teaching platform called [DigitalGarage](https://learndigital.withgoogle.com/digitalgarage) which enables anyone with a google account to sign up and learn programming and many more courses online.
+- [Coursera](https://www.coursera.org/) is another webiste which gives you detailed explanation and implementation from various top universities.
+- Another website like coursera is [eDx](https://www.edx.org/), which is packed with various new and innovatiove material and gives you the pleasure of learning at your own pace.
+- Saving the best for last,[OpenClassrooms]() is another website, which i personally love, gives detailed, step by step instructions and explanations with video reference to most of the languages out there and I personally prefer this website.
+
+All the learning materials and quizes are free and these websites give free (and sometimes paid) certifications as well. This will help you immensely while creating your profile and makes you stand-out in the eyes of the employers.
+
+## Other resources that might help you
+Well, these resources are very helpful in any point ,while learning or implementing your code. Most of the time, professional coders also refer to sites like these when they lose their path.
+
+- [stackoverflow](https://stackoverflow.com/) --> This is like "Quora" for coders.
+- [GeeksforGeeks](https://www.geeksforgeeks.org/) --> This shows the implementation and explanation of various methods in libraries.
+& so much more!
+
+Even after you have done a professional course in anylanguage, you may lose your way and would have to refer these websites, so never discard them.
+
+## Where is the world heading?
+In my opinion, we are heading to the ineveitable destination, Machine Learning, Artificial Intelligence by utilising skills like Data Analysis and Data Science. My goal is to learn new concepts in programming and applying it in Machine learning and the like.
+
+
+{{< css.inline >}}
+<style>
+.canon { background: white; width: 100%; height: auto;}
+</style>
+{{< /css.inline >}}

sample-hugo-template/Tech-Club-Blog/content/post/fs2020.md

@@ -0,0 +1,104 @@
+---
+title: Why FS2020 is something very Exciting
+date: 2020-05-02
+hero: https://www.dsogaming.com/wp-content/uploads/2019/11/Microsoft-Flight-Simulater-new-2.jpg
+excerpt: Closer towards a future where it's hard to compare reality and simulation
+timeToRead: 10
+authors:
+  - akilan-selvacoumar
+
+---
+
+## What are Flight sims ?
+
+A flight simulator is a device that artificially re-creates aircraft flight and the environment in which it flies, for pilot training, design, or other purposes. It has been really popular since 1982. The first release was called subLogic flight simulator which was released in 1979 on the Apple II.
+
+![](https://i.ytimg.com/vi/vK-iIrIEOyc/hqdefault.jpg)
+
+Since this release flight sim has completely evolved with newer versions with newer features which means more and more accurate modelling of newer aircrafts.
+
+### Important milestones:
+
+-  Flight Simulator 2.0:
+
+![](https://s.uvlist.net/l/y2014/01/122928.jpg)
+
+-  Flight Simulator 5.1:
+
+![](https://i.ytimg.com/vi/dHpzHYHcqV8/hqdefault.jpg)
+
+-  Flight Simulator X:
+
+![](https://s3-eu-west-2.amazonaws.com/assets.fsxinsider.com/app/uploads/2015/09/27215612/Image2.jpg)
+
+Flight sims have also become part open source. The current best flight simulator in the market Xplane 11 has open source modules such as BetterPushBack , SharedCockpit etc ... In recent years flight school students can even skip most of the instrumental classes for aircrafts such as the Ceesna's due to the fact that they have already learned it in the flight sim at home.
+
+## FS2020 Competitor
+
+Before we start the discussion of FS2020 we need to compare the current progress of their competitor [Xplane](https://www.x-plane.com/) which is designed by a Software Company called [Laminar research](http://www.laminarresearch.com/). Xplane 11 is the current best Flight sim platform out there. Xplane 11 comes built in with VR compatibility ,  Runs on all platforms such as Mac , Windows , Linux and the graphics speaks for itself and runs on most common Pc's on today's standards.
+
+![](https://steamcdn-a.akamaihd.net/steam/apps/269950/ss_35a2520bad426346196ac6e2aa96883e96f84e59.1920x1080.jpg?t=1586961059)
+
+[XPlane 11 in VR](https://www.youtube.com/watch?v=31S_jUy3h7Q&t=887s)
+
+## Introduction to FS2020
+
+The release date of FS2020 is still unknown due to COVID19 delays. All we know is that it should be coming out sometime this year. The idea is that the game is rendered on your PC but the scenery is downloaded from the azure servers. The reason it has a lot of hype is because of the fact that it's graphics is game changing and even the amount of realism that they have added to the game (We will talk more on this later).
+
+## Ground Scenery
+
+![](https://lh6.googleusercontent.com/sagSw47Tw5K8i9KLgN-SZVKudzYN4B2UJu78qEiKZniaTaEWmFRkj673Cr4CCkISZgvYk0Q5mk-HF-2SU_tUfn_PqzCoCBbjK8q1Ur1X9lzlQJQjvvJV_p59qdPV470iw3uOZTwM)
+
+The game has an online and offline maps. The Hype comes from the online maps as it's a 3D map from Bing. With the current technology, satellites are able to take a picture of cities from different angles and generate 3D models out of them and the game developers have been using a lot of machine learning techniques to generate the tiniest details such as grass ,trees , cars on the road etc.. There have also been very funny comments on these 3D maps such as "Tips on how to tour north korea", "How to catch your wife cheating","This video gave me morning wood. Girlfriend thought it was because of her. Yea honey....it's totally you." etc...
+
+
+[This link will give you a general idea on 3D models of cities look like](https://earth.google.com/web/@40.71247137,-74.0072421,27.70327415a,2644.644745d,35y,35.47111927h,60.00244366t,0r)
+
+For higher details many of the major airports are modeled partially manually. The movement ground crew and vehicles are all a bunch of AI's working in parallel.  The details of the runway and taxiway are super high. In the demo we can even see tiny stones on the taxiway.
+
+As per the developers the 3D models are generated using Photogrammetry data or else it's augmented bitmap which means that the base image is from bing maps and then it's filled with some pre-build objects. The size of the bing scenery which they use is around 2 Petabytes and this is only one aspect of the Sim. All the maps are generated or drawn based on the horizon and this varies based on the height of the aircraft.
+
+## Behavior in the Sky
+
+
+![](https://lh5.googleusercontent.com/_vxFWb0lLyo-NnwgypPoz4m0EFRbNX4qh54E5-YvnlPZ1cZEo-xW7kv9MqK06ns561bTfS2_QTwi13uEnU1CcLDBo8G9mg84nGBhvBqPiXl0fBU2K124CfedGS7_IOlpxG2PkjxD)
+
+
+Again for the weather there is online and offline data. Is it actually interesting to know that simulating or modeling the weather is as complex as doing it for the ground. To simulate that the game generates millions of virtual particles to generate accurate lift for the aircraft. In many other sims the stalls in the code have been like flags (i.e on and off switch) this means that when the aircraft loses speed the nose dive will be a bit unrealistic. This has been fixed in FS2020 and they calculate various aspects such as density of air , wind patterns because at many times the aircraft would not even stall due to the design of the hardware which automatically pushes the nose down to gain speed. FS2020 can even predict which direction the aircraft will stall at.
+
+### Atmospheric Simulation:
+
+The developers had to use a fresh approach to ensure that the lighting effects have to be as realistic as possible and to also accommodate all new techniques coming out from the video game industry. They have their own scattering system which gets lights from unified sources such as Sunlight ,Moonlight ,Starlight ,City light  etc... The photons are scattered based on the parameters such as humidity , weather , pollution etc ... The shadows of the clouds are casted on the ground ,  shadows of the ground have been casted on the clouds and so this gives unbelievable sights.
+
+### Weather Special Effects:
+
+The sim has volumetric 3D rain , volumetric Rainbow scattering; this means that the rainbow is generated based on the compositions required to generate one. Each water droplet on the windshield is generated based on the speed of the aircraft and as the aircraft speed varies this impacts on how much the water is stretched in the windshield of the cockpit.
+
+The sim even has window icing that takes place mostly in the cruise altitude if the Anti ice systems are not turned on in the aircraft.
+
+The position of the sun , moon  and stars will be informed based on date and time of year and even the light of the city will be reflected back to the cloud which creates realistic VFR flying. The reflection of the building on water is also realistic based on time of day, number of clouds etc.. and it is rendered the same way as how the atmosphere is rendered.
+
+### Volumetric clouds:
+
+This is one of the best features for anyone flying aircraft's through clouds. There are 32 layers from sea level and they are based on density , shape , fuzziness and all these clouds can be seen from any angle. The formations are informed based on the updraft winds. The sim natively supports all types of clouds. The max view distance of generated clouds is 600 km.
+
+### Real Weather Data:
+
+The weather data is collected from one of the research centers in Switzerland. Based on data provided to the engine, The corresponding clouds and updrafts are generated. The sim gets upto 32 layers of real world cloud data, pressure , humidity, temperature, wind speed and gusts.
+
+## Specs for the game:
+
+![](https://lh3.googleusercontent.com/F-UoR7uLg0AfDB0ybzpE4uE8UM-IndxoVoLaSVlERcO7bBUXPERSNINNJLV8FqtWfjOtozGm7zf1rbmrHJPgXXidqMgOGyKfQPIM3eHKnNWARYIEVSqeAetDidGbAdxv_4NTDaox)
+
+
+
+
+---
+
+{{< css.inline >}}
+<style>
+.canon { background: white; width: 100%; height: auto}
+
+</style>
+{{< /css.inline >}}
+=

sample-hugo-template/Tech-Club-Blog/content/post/iPhone11.md

@@ -0,0 +1,41 @@
+---
+title: The all new 3-cam iPhone
+date: 2020-03-24
+hero: /images/iPhone-11-post.jpg
+excerpt: All new updates on this magnanimous smartphone.
+timeToRead: 5
+authors:
+  - hugo-authors/MohitKatta
+
+---
+
+The title is not entirely accurate, obviously because there is the iPhone 11 which has only 2 cam's and missing the telephoto lens. Well, the cheaper variant is assumed to have limited features, but the American tech supergiant has not compromised on any major hardware or software aspect of this phone which is commendable.The iPhone 11 comes in 3 different variants, the iPhone 11,iPhone 11 Pro and the iPhone 11 Pro Max.
+
+The major change made to this phone and it's predecessor is the new camera lens. Like many other competetors, Apple also designed their first 3-cam smartphone.
+
+The iPhone 11 has the wide and ultra wide angle cams and not the telephoto lens. It also comes with the iconic Night Mode which is automatically switched to when low light is detected.
+The iPhones come in multiple color variants, there’s a new midnight green color, refreshed silver,refreshed space gray and a new gold finish.
+
+
+#Triple Cam
+--
+Apple has added the Ultra ide angle cam lens instead of a new telephoto lens which many of us expected. The Ultra wide lens is @ 0.5X zoom and it can go upto 2X zoom. The ultra wide angle lens also has an f/2.4 aperture and a 120-degree field of view.
+Similar to the Google Pixel, Apple have also come up with a new night mode to take low-light mode shots.
+The teh giant stepped a bit further by creating the "Deep Fusion" tech. This is a technology combines photo data from the 3 lens and fuses it to get a Deep and clear picture of every shot which is said by Senior Vice President of Worldwide Marketing Phil Schiller, "computational photography mad science."
+
+The Front camera has also gone through some upgrades, it has been upgraded to the 12-megapixel zoom sensor and can accomodate a lot more people with every front cam shot.
+
+#My Personal View
+--
+With all this being said, We'll get down to my say. Frankly, i did not see a major upgrade in most of the aspects except a few and I don't see as to why there is a new phone upcoming into the market with not a lot of upgrades.Apple phones have now reached the ultimatum in terms of the price and quality and perhaps innovation as well. Well, like i said , there has been some developments and from various sources, We can say that the photo department did a good job in generating absoulutely amazing shots from every click.
+
+The last iPhone to have a fingerprint sensor was the iPhone 8 and after updating the design to an almost infinity display touch screen, Apple removed Touch iD . With the latest Optical Fingerprint tech, they can incorporate touch iD from under the screen. This is one of the many things Apple could really work on to get on the top of the arguably "Best Phone in the Market".
+
+-- By Mohit Katta
+
+
+{{< css.inline >}}
+<style>
+.canon { background: white; width: 100%; height: auto;}
+</style>
+{{< /css.inline >}}

sample-hugo-template/Tech-Club-Blog/content/post/onePlus7.md

@@ -0,0 +1,63 @@
+---
+title: Breathe free with OxygenOS
+date: 2020-03-29
+hero: /images/oneplus-7-pro-edited-final.jpg
+excerpt: "The inevitable has hapenned..."
+timeToRead: 5
+authors:
+  - MohitKatta
+
+---
+<!-- TO insert images -> ![Example image](/static/image.png) -->
+
+---
+#What is OnePlus?
+--
+We all have seen that in recent years, mobile tech has increasingly improved in many aspects.
+We have all witnessed the creativity to make technological wonders. Slowly and gradually, the inevitable has happenned, rise in technological competetion forcing the existing brands to improve their R&D to compete.
+
+Amongst all the brands, one well-renowned, Shanghai based company grew exponentionally, that is the OnePlus Corporation. This tech giant flew right in the hotspot tech companies competing Apple, Samsung, Huawei and other major companies in the league for the gold-winner in the arguable "Best Phone in the Market".
+
+
+The consumer world started getting a glimpse of their technological marvel after the OnePlus 3. Mainly because of its prodigal specs at a very resonable price.
+
+#The 7T and 7T Pro
+--
+If you want me to describe this phone, I need 2 words, 'Smooth' and 'Fast' and ofcourse "Never Settle" as the company tagline goes by.
+
+These phones came into the market in the late 2019 making the culmination of the year a fruitful one, disregarding the iPhone 11 (that is!)
+It is a manageable 6.3" smartphone with a dual side gorilla glass 5 protection with an aluminium frame.
+
+#OxygenOS
+--
+It comes out-of-the-box with an Android 10 and an OxygenOS 10.0.7, which is an android based OnePlus Developed Tech. Hands down, the lightest and (arguably) the smoothest OS of all. Unlike android which is written in Java, OxygenOS is written in C++.
+
+#Camera Specs
+--
+This beautiful piece of tech has 3 Cameras, A 48 MP wide cam, 12 MP telephoto cam and a sufficient 16MP ultrawide cam with autofocus capabilities.Videos can be recorded in 3 different resolutions at different speeds, the 2160p @ 30/60fps, the 1080p @ 30/60/240fps, 720p @ 60fps
+When we come to the selfie camera, comes packed with an Auto HDR 16 MP f/2.0 camera and records videos @ 1080P @ 30FPS resolution which is great for a smartphone of this time and age.
+
+#Hardware & Software
+--
+This phone comes in a Snapdragon 855+ chipset with 8 cores of CPU. It has 2 storage variants, the 128GB and 256GB and 8 GB of RAM.It also has a really smooth and secure Optical fingerprint, right under the screen which works under dust and watery fingers.
+
+#Charging
+--
+Comes packed with a Big 3800 mAh battery with 30W fast charging capabilities and with a Warp Charging 30T charger out-of-the-box.
+
+#My Personal View
+--
+Well, let's come down to my personal view at this Smartphone which bested at almost all the aspects of a smartphone.
+
+This phone has all the features that I would like to see in a smartphone for a long-run. But obviously, the removal of the classic 3.5 mm AUX port has had a lasting effect on my wired earphones😂. Oh yes, as well as the removal of the expandable storage facility is also not expected and I am sure they will find a new way to get more storage into piece of tech.
+
+The Shenzhen based firm did a pretty impressive job developing such an awe-inspiring piece of tech. I would like to give it a 9/10!!
+So, that's that for now, tune into my blog for more reviews to the latest and innovative Pieces of Tech.
+
+-- Mohit Katta
+
+{{< css.inline >}}
+<style>
+.canon { background: white; width: 100%; height: auto;}
+</style>
+{{< /css.inline >}}

sample-hugo-template/Tech-Club-Blog/content/post/paperlessPaper.md

@@ -0,0 +1,14 @@
+---
+title: reMarkable..2
+date: 2020-04-01
+hero: /images/reMarkable-tab2-edit.jpg
+excerpt: The tablet that feels like paper...
+timeToRead: 5
+authors:
+  -  MohitKatta
+
+---
+
+---
+//post under Construction!//
+This is a technological marvel. A piece of tech ahead of it's time.

sample-hugo-template/Tech-Club-Blog/exampleSite/config.yaml

@@ -0,0 +1,14 @@
+baseURL: "https://example.com"
+languageCode: "en-us"
+title: "Hugo Novela"
+pygmentsstyle: 'monokai'
+paginate: 6
+social:
+  twitter: "#"
+  github: "#"
+  instagram: "#"
+  linkedin: "#"
+  dribbble: "#"
+  youtube: "#"
+taxonomies:
+  author: authors

sample-hugo-template/Tech-Club-Blog/exampleSite/content/_index.md

@@ -0,0 +1,5 @@
+---
+hero:
+  heading: Welcome to Novela, the simplest way to start publishing with Hugo.
+  maxWidthPX: 652
+---

sample-hugo-template/Tech-Club-Blog/exampleSite/content/about.md

@@ -0,0 +1,11 @@
+---
+title: About
+---
+
+Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Donec sed odio dui.
+
+Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+
+Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+
+Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

sample-hugo-template/Tech-Club-Blog/exampleSite/content/authors/hugo-authors/_index.md

@@ -0,0 +1,19 @@
+---
+title: Hugo Authors
+bio: |
+  Written by You. This is where your author bio lives. Share your work, your
+  joys and of course, your Twitter handle.
+avatar: /images/profile-01.jpeg
+featured: true
+social:
+  - title: github
+    url: https://github.com
+  - title: github
+    url: https://github.com
+  - title: github
+    url: https://github.com
+  - title: github
+    url: https://github.com
+  - title: github
+    url: https://github.com
+---

sample-hugo-template/Tech-Club-Blog/exampleSite/content/post/emoji-support.md

@@ -0,0 +1,48 @@
+---
+title: Emoji Support
+date: 2019-03-05
+hero: "/images/hero-3.jpg"
+excerpt: Guide to emoji usage in Hugo
+timeToRead: 8
+authors:
+  - Hugo Authors
+
+---
+
+Emoji can be enabled in a Hugo project in a number of ways. 
+<!--more-->
+The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes). 
+
+To enable emoji globally, set `enableEmoji` to `true` in your site’s [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.
+
+
+<p><span class="nowrap"><span class="emojify">🙈</span> <code>:see_no_evil:</code></span>  <span class="nowrap"><span class="emojify">🙉</span> <code>:hear_no_evil:</code></span>  <span class="nowrap"><span class="emojify">🙊</span> <code>:speak_no_evil:</code></span></p>
+<br>
+
+The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes.
+
+***
+
+**N.B.** The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.
+
+```css
+.emoji {
+font-family: Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Segoe UI Symbol,Android Emoji,EmojiSymbols;
+}
+```
+
+{{< css.inline >}}
+<style>
+.emojify {
+	font-family: Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Segoe UI Symbol,Android Emoji,EmojiSymbols;
+	font-size: 2rem;
+	vertical-align: middle;
+}
+@media screen and (max-width:650px) {
+    .nowrap {
+	display: block;
+	margin: 25px 0;
+}
+}
+</style>
+{{< /css.inline >}}

sample-hugo-template/Tech-Club-Blog/exampleSite/content/post/markdown-syntax.md

@@ -0,0 +1,127 @@
+---
+title: Markdown Syntax Guide
+date: 2019-03-11
+hero: "/images/hero-2.jpg"
+excerpt: Sample article showcasing basic Markdown syntax and formatting for HTML elements.
+timeToRead: 10
+authors:
+  - Hugo Authors
+
+---
+
+This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
+<!--more-->
+
+## Headings
+
+The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
+
+# H1
+## H2
+### H3
+#### H4
+##### H5
+###### H6
+
+## Paragraph
+
+Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
+
+Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
+
+## Blockquotes
+
+The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
+
+#### Blockquote without attribution
+
+> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
+> **Note** that you can use *Markdown syntax* within a blockquote.
+
+#### Blockquote with attribution
+
+> Don't communicate by sharing memory, share memory by communicating.  
+> — <cite>Rob Pike[^1]</cite>
+
+
+[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
+
+## Tables
+
+Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.
+
+   Name | Age
+--------|------
+    Bob | 27
+  Alice | 23
+
+#### Inline Markdown within tables
+
+| Inline&nbsp;&nbsp;&nbsp;     | Markdown&nbsp;&nbsp;&nbsp;  | In&nbsp;&nbsp;&nbsp;                | Table      |
+| ---------- | --------- | ----------------- | ---------- |
+| *italics*  | **bold**  | ~~strikethrough~~&nbsp;&nbsp;&nbsp; | `code`     |
+
+## Code Blocks
+
+#### Code block with backticks
+
+```html
+html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Example HTML5 Document</title>
+</head>
+<body>
+  <p>Test</p>
+</body>
+</html>
+```
+
+#### Code block with Hugo's internal highlight shortcode
+{{< highlight html >}}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Example HTML5 Document</title>
+</head>
+<body>
+  <p>Test</p>
+</body>
+</html>
+{{< /highlight >}}
+
+## List Types
+
+#### Ordered List
+
+1. First item
+2. Second item
+3. Third item
+
+#### Unordered List
+
+* List item
+* Another item
+* And another item
+
+#### Nested list
+
+* Item
+1. First Sub-item
+2. Second Sub-item
+
+## Other Elements — abbr, sub, sup, kbd, mark
+
+<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
+
+H<sub>2</sub>O
+
+X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
+
+Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
+
+Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
+

sample-hugo-template/Tech-Club-Blog/exampleSite/content/post/math-typesetting.mmark

@@ -0,0 +1,48 @@
+---
+title: Math Typesetting
+date: 2019-03-08
+hero: /images/hero-6.jpg
+excerpt: A brief guide to setup KaTeX
+timeToRead: 8
+authors:
+  - Hugo Authors
+
+---
+
+Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.
+<!--more-->
+
+In this example we will be using [KaTeX](https://katex.org/)
+
+- Create a partial under `/layouts/partials/math.html`
+- Within this partial reference the [Auto-render Extension](https://katex.org/docs/autorender.html) or host these scripts locally.
+- Include the partial in your templates like so:  
+
+```go
+{{ if or .Params.math .Site.Params.math }}
+{{ partial "math.html" . }}
+{{ end }}
+```  
+- To enable KaTex globally set the parameter `math` to `true` in a project's configuration
+- To enable KaTex on a per page basis include the parameter `math: true` in content files.
+
+**Note:** Use the online reference of [Supported TeX Functions](https://katex.org/docs/supported.html)
+{{< math.inline >}}
+{{ if or .Page.Params.math .Site.Params.math }}
+<!-- KaTeX -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css" integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ" crossorigin="anonymous">
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
+{{ end }}
+{{</ math.inline >}}
+
+### Examples
+
+Inline math: $$ \varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887… $$
+
+Block math:
+
+$$
+ \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } 
+$$
+

sample-hugo-template/Tech-Club-Blog/hugo-theme-novela-master/README.md

@@ -0,0 +1,72 @@
+# Hugo Novela
+
+A port of [Narative](https://www.narative.co/)'s Gatsby theme [Novela](https://www.narative.co/labs/novela/)
+
+![](https://raw.githubusercontent.com/forestryio/hugo-theme-novela/master/images/tn.png)
+
+<a href="https://app.forestry.io/quick-start?repo=forestryio/novela-hugo-starter&engine=hugo&version=0.60.1">
+    <img alt="Import this project into Forestry" src="https://assets.forestry.io/import-to-forestryK.svg" />
+</a>
+
+## Customization
+
+### Logo
+
+Add to your projects layout directory your logo's SVG:
+`/layouts/icons/ui/logo.html`
+
+### Socials
+
+In order for the Socials to be surfaced in Forestry, you should copy the theme's `config/_default/social.yaml` to your project.
+
+### Authors
+
+You should register authors as a taxonomy in your project's `config.yaml``
+
+```yaml
+taxonomies:
+  author: authors
+```
+
+#### Creating authors
+Add the following file to your content directory and Front Matter example.
+
+```yaml
+# /content/authors/firstname-lastname/_index.md
+---
+title: Dennis Brotzky
+bio: |
+  Written by You. This is where your author bio lives. Share your work, your
+  joys and of course, your Twitter handle.
+avatar: /images/dennis-brotzky.jpg
+featured: true
+social:
+  - title: unsplash
+    url: https://unsplash.com
+  - title: github
+    url: https://github.com
+  - title: github
+    url: https://github.com
+  - title: github
+    url: https://github.com
+  - title: github
+    url: https://github.com
+---
+```
+
+#### Assigning authors to posts.
+Simply add the name of the author to the "authors" field:
+
+```yaml
+authors:
+  - Dennis Brotzky
+  - Thiago Costa
+```
+### Newsletter CTA
+
+This theme includes a shortcode for a newsletter callout form that you can add to any page. 
+It uses [formspree.io](//formspree.io/) as proxy to send the actual email. Each month, visitors can send you up to one thousand emails without incurring extra charges. Visit the Formspree site to get get going add your Formspree email to your shortcode like this:
+
+```
+{{< subscribe email="your@email.com" >}}
+```

sample-hugo-template/Tech-Club-Blog/hwuTechClub/archetypes/default.md

@@ -0,0 +1,6 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+draft: true
+---
+

sample-hugo-template/Tech-Club-Blog/hwuTechClub/config.toml

@@ -0,0 +1,3 @@
+baseURL = "http://example.org/"
+languageCode = "en-us"
+title = "My New Hugo Site"

sample-hugo-template/Tech-Club-Blog/index.html

@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+<title>mk210.techblog.io</title>
+<body>
+<h1>Hello World</h1>
+<p>I'm hosted with GitHub Pages.</p>
+</body>
+</html>

sample-hugo-template/Tech-Club-Blog/layouts/_default/baseof.html

@@ -0,0 +1,26 @@
+<html>
+
+{{ partial "head/head.html" . }}
+
+<body class="line-numbers">
+
+    {{ $script := resources.Get "js/initColors.js" }}
+    <script src="{{ $script.RelPermalink }}"></script>
+
+    <div class="layout-styled">
+
+        {{ partial "header.html" . }}
+
+        {{ block "main" . }}
+        
+        {{ end }}
+        
+        {{ partial "footer.html" . }}
+
+    </div>
+
+    {{ $script := resources.Get "js/prism.js" }}
+    <script src="{{ $script.RelPermalink }}"></script>
+</body>
+
+</html>

sample-hugo-template/Tech-Club-Blog/layouts/_default/list.html

@@ -0,0 +1,4 @@
+{{ define "main" }}
+  {{ partial "articles/hero.html" . }}
+  {{ partial "articles/articles.html" . }}
+{{ end }}

sample-hugo-template/Tech-Club-Blog/layouts/_default/single.html

@@ -0,0 +1,13 @@
+{{ define "main" }}
+
+<section class="section narrow">
+
+    {{ partial "page/hero.html" . }}
+
+    <article  id="articleContent" class="post-content">
+        {{ .Content }}
+    </article>
+    
+</section>
+
+{{ end }}

sample-hugo-template/Tech-Club-Blog/layouts/authors/list.html

@@ -0,0 +1,10 @@
+{{ define "main" }}
+<section class="section narrow">
+    <section>
+        {{ partial "author/hero.html" . }}
+        {{ partial "author/articles_list.html" . }}
+    </section>
+    <div class="authors-gradient"></div>
+</section>
+
+{{ end }}

sample-hugo-template/Tech-Club-Blog/layouts/index.html

@@ -0,0 +1,6 @@
+{{ define "main" }}
+
+{{ partial "articles/hero.html" . }}
+{{ partial "articles/articles.html" . }}
+
+{{ end }}

sample-hugo-template/Tech-Club-Blog/layouts/partials/article/authors.html

@@ -0,0 +1,61 @@
+
+{{ $authors := partialCached "func/GetArticleAuthors" . .File.UniqueID }}
+{{ if eq (len $authors) 1 }}
+    {{ with $author := index $authors 0 }}
+            <a href="{{ .URL }}" class="article-author-link">
+                {{ with .avatar }}
+                    <div class="article-author-avatar">
+                        <img src="{{ . }}" />
+                    </div>
+                {{ end }}
+                {{ with .name }}
+                <strong>{{ . }}</strong>
+                {{ end }}
+                <span class="hide-on-mobile">,&nbsp;</span>
+            </a>
+    {{ end }}
+{{ else }}
+    <div class="article-coauthors-container">
+        {{ $avatarsWidth:= mul (len $authors) 15 }}
+        <span id="collapsedCoauthors" class="article-coauthors-collapsed">
+            <div class="article-coauthors-list" style="width: {{ $avatarsWidth }}px;">
+                {{ range $index, $author := $authors }}
+                    {{ with .avatar }}
+                        <div class="article-coauthors-avatar" style="left: {{ mul $index 15 }}px;">
+                            <img src="{{ . }}" />
+                        </div>
+                    {{ end }}
+                {{ end }}
+            </div>
+            <strong class="article-coauthors-name-container">
+                {{ range $index, $author := $authors }}
+                    {{ .firstname }}{{ if ne (add $index 1) (len $authors) }},{{ end }}
+                {{ end }}
+            </strong>
+            <div class="article-coauthors-icon-container">
+                {{ partial "icons/ui/toggle-open.html" . }}
+            </div>
+        </span>
+
+        <ul id="uncollapsedCoauthors" class="article-coauthors-list-open hidden">
+            <div id="uncollapsedAction" class="article-icon-open-container">
+                {{ partial "icons/ui/toggle-closed.html" . }}
+            </div>
+            {{ range $index, $author := $authors }}
+                <li class="article-coauthors-list-item-open">
+                    <a href="{{ .URL }}" class="article-author-link">
+                        {{ with $author.avatar }}
+                            <div class="article-coauthor-avatar-open">
+                                <img src="{{ . }}" />
+                            </div>
+                        {{ end }}
+                        <strong class="article-author-name-open">{{ .name }}</strong>
+                    </a>
+                </li>
+            {{ end }}
+        </ul>
+    </div>
+{{ end }}
+
+{{ $script := resources.Get "js/collapseAuthors.js" }}
+<script src="{{ $script.RelPermalink }}"></script>

sample-hugo-template/Tech-Club-Blog/layouts/partials/article/hero.html

@@ -0,0 +1,19 @@
+<section id="articleHero" class="section narrow">
+    <div class="article-hero">
+        <header class="article-header">
+            <h1 class="article-hero-heading">{{ .Page.Params.Title }}</h1>
+            <div class="article-hero-subtitle">
+                <div class="article-meta">
+                    {{ partial "article/authors.html" . }}
+                    {{ .Page.Date.Format "January 2, 2006" }}
+                    {{ with .Page.Params.timetoread }} • {{ . }} min read{{ end }}
+                </div>
+            </div>
+        </header>
+        {{ with .Page.Params.hero }}
+        <div class="article-hero-image" id="ArticleImage__Hero">
+            <img src="{{ . }}">
+        </div>
+        {{ end }}
+    </div>
+</section>

sample-hugo-template/Tech-Club-Blog/layouts/partials/article/next.html

@@ -0,0 +1,58 @@
+{{/*
+    Prints the next 2 articles in the same section or, if less or 2 found, the first (and potentially second) of the section.
+
+    @author @regisphilibert @mountainbug95
+
+    @context Type Page (.)
+
+    @access public
+
+*/}}
+
+{{/* declaring next empty slice */}}
+{{ $next := slice }}
+{{/* Checking if current article has a PrevInSection (Prev as we are ordering dsc here.) */}}
+{{ with .PrevInSection }}
+    {{ $next = $next | append . }}
+    {{/* Checking for that "next" article own "next" to fill the "second next" */}}
+    {{ with .PrevInSection }}
+        {{ $next = $next | append . }}
+    {{ end }}
+{{ end }}
+{{/* If the number of found "next article" is less than two we need to find the first and potentially second article
+of the whole section and append them to our $next slice. */}}
+{{ $diff := sub 2 (len $next) }}
+{{ if $diff }}
+    {{/* We use that diff number (if > 0) to grab the first x number of articles */}}
+    {{ $articles := partialCached "func/GetArticles" . "articles"}}
+    {{ $next = $next | append (first $diff $articles) }}
+{{ end }}
+<section id="articleNext" class="section nartrow">
+    <h3 class="footer-next-heading">More articles from {{ .Site.Title }}</h3>
+    <div class="footer-spacer"></div>
+    <div class="next-articles-grid" numberOfArticles={numberOfArticles}>
+        <div class="post-row">
+            {{ range $index, $article := $next }}
+                <a href="{{ $article.RelPermalink }}" class="article-link"
+                {{ if not $index}} id="article-link-bigger"{{ end }}>
+                    <div>
+                        <div class="image-container">
+                            <img src="{{ $article.Params.hero }}" class="article-image" /> 
+                        </div>
+                        <div>
+                            <h2 class="article-title">
+                                {{ $article.Params.title }}
+                            </h2>
+                            <p class="article-excerpt">
+                                {{ $article.Params.excerpt }}
+                            </p>
+                            <div class="article-metadata">
+                                {{ $article.Date | dateFormat "January 1, 2006" }}{{ with $article.Params.timeToRead }} · {{ $article.Params.timeToRead }} min read{{ end }}
+                            </div>
+                        </div>
+                    </div>
+                </a>
+            {{ end }}
+        </div>
+    </div>
+</section>

sample-hugo-template/Tech-Club-Blog/layouts/partials/article/progress.html

@@ -0,0 +1,14 @@
+<aside id="progressBar" class="aside-container">
+    <div class="aside-align">
+      <div>
+        <div class="overlap-container">
+        </div>
+      </div>
+    </div>
+    
+    <div class="progress-container" tabIndex={-1}>
+        <div class="track-line" aria-hidden="true">
+            <div id="progressIndicator" class="progress-line"></div>
+        </div>
+    </div>
+</aside>

sample-hugo-template/Tech-Club-Blog/layouts/partials/articles/articles.html

@@ -0,0 +1,8 @@
+
+<Section className="section narrow">
+  {{ partial "articles/list.html" . }}
+  <div class="articles-paginator">
+    
+  </div>
+</Section>
+<div class="articles-gradient"></div>

sample-hugo-template/Tech-Club-Blog/layouts/partials/articles/hero.html

@@ -0,0 +1,19 @@
+<Section class="section" relative id="Articles__Hero">
+    <div class="heading-container" style="maxWidth: {{ .Page.Params.hero.maxWidthPX }}px;">
+        <h1 class="hero-heading">{{ .Page.Params.hero.heading }}</h1>
+    </div>
+    <div class="subheading-container">
+        {{ partial "bio.html" . }}
+        <div class="grid-controls-container">
+            <button id="btnGrid" class="grid-button">
+                {{ partial "icons/ui/tiles.html" . }}
+            </button>
+            <button id="btnRows" class="grid-button">
+                {{ partial "icons/ui/rows.html" . }}
+            </button>
+        </div>
+    </div>
+</Section>
+
+{{ $script := resources.Get "js/toggleLayout.js" }}
+<script src="{{ $script.RelPermalink }}"></script>

sample-hugo-template/Tech-Club-Blog/layouts/partials/articles/list.html

@@ -0,0 +1,55 @@
+<section class="section nartrow">
+    <div id="articlesList" class="articles-list-container show-details">
+        {{ $posts := partialCached "func/GetArticles" . "articles" }}
+        {{ $paginator := .Paginate $posts }}
+        {{ $biggerFirst := true }}
+        {{ $biggerPlaced := false }}
+        {{ range $index, $article := $paginator.Pages }}
+            {{ $counter := mod $index 2 }}
+            {{ if not $counter }}
+                <div class="post-row">
+            {{ end }}
+            <a href="{{ $article.RelPermalink }}" class="article-link" 
+            {{ if and (eq ($biggerFirst) true) (eq ($biggerPlaced) false) }}
+              {{ if eq $counter 0 }}
+                id="article-link-bigger"
+                {{ $biggerPlaced = true }}
+              {{ end }}
+            {{ else if and (not $biggerFirst) (not $biggerPlaced) }}
+              {{ if ne $counter 0 }}
+                id="article-link-bigger"
+                {{ $biggerPlaced = true }}
+              {{ end }}
+            {{ end }}>
+              <div class="article-data-outer">
+                <div class="image-container">
+                  <img src="{{ $article.Params.hero }}" class="article-image" /> 
+                </div>
+                <div class="article-data">
+                  <h2 class="article-title">
+                    {{ $article.Params.title }}
+                  </h2>
+                  <p class="article-excerpt">
+                    {{ $article.Params.excerpt }}
+                  </p>
+                  <div class="article-metadata">
+                    {{ $article.Date.Format "January 2, 2006" }}{{ if $article.Params.timetoread }} • {{ $article.Params.timetoread }} min read{{ end }}
+                  </div>
+                </div>
+              </div>
+            </a>
+            {{ $counter := mod (add $index 1) 2 }}
+            {{ $len := (where .Pages "Type" "posts") }}
+            {{ if or (eq $counter 0) (eq (add $index 1) $len) }}
+                </div>
+                {{ $biggerPlaced = false }}
+                {{ if $biggerFirst }}
+                  {{ $biggerFirst = false }}
+                {{ else }}
+                  {{ $biggerFirst = true }}
+                {{ end }}
+            {{ end }}
+        {{ end }}
+    </div>
+    {{ partial "paginator/paginator.html" . }}
+</section>

sample-hugo-template/Tech-Club-Blog/layouts/partials/author/articles_list.html

@@ -0,0 +1,39 @@
+<section class="section nartrow author-alc-section">
+  <div id="articlesList" class="articles-list-container show-details author-alc">
+    {{ $articles := .Pages }}
+    {{ $paginator := .Paginate .Pages }}
+      <div class="post-row-alt">
+        {{ $scratch := newScratch }}
+        {{ $scratch.Set "numPages" (len $paginator.Pages) }}
+        {{ range $index, $article := $paginator.Pages }}
+          {{ $counter := mod $index 2 }}
+            <a href="{{ .RelPermalink }}" class="article-link">
+              <div class="article-data-outer">
+                <div class="image-container">
+                  <img src="{{ .Params.hero }}" class="article-image" /> 
+                </div>
+                <div class="article-data">
+                  <h2 class="article-title">
+                    {{ .Params.title }}
+                  </h2>
+                  <p class="article-excerpt">
+                    {{ .Params.excerpt }}
+                  </p>
+                  <div class="article-metadata">
+                    {{ .Date.Format "January 2, 2006" }}{{ if .Params.timetoread }} • {{ .Params.timetoread }} min read{{ end }}
+                  </div>
+                </div>
+              </div>
+            </a>
+            {{ if eq ($scratch.Get "numPages") (add $index 1) }}
+              <a href="{{ .RelPermalink }}" style="opacity: 0;" class="article-link">
+              </a>
+            {{ end }}
+        {{ end }}
+      </div>
+  </div>
+  {{ partial "paginator/paginator.html" . }}
+</section>
+
+{{ $script := resources.Get "js/toggleBorder.js" }}
+<script src="{{ $script.RelPermalink }}"></script>

sample-hugo-template/Tech-Club-Blog/layouts/partials/author/hero.html

@@ -0,0 +1,14 @@
+<section class="section narrow">
+    <div class="author-hero">
+        {{ with .Params.avatar }}
+            <div class="author-hero-image">
+                <img src="{{ . }}" />
+            </div>
+        {{ end }}
+        <h1 class="author-heading">{{ .Title }}</h1>
+        <p class="author-subheading">{{ .Params.bio }}</p>
+        <div class="author-social">
+            {{ partial "author/social_links.html" . }}
+        </div>
+    </div>
+</section>

sample-hugo-template/Tech-Club-Blog/layouts/partials/author/social_links.html

@@ -0,0 +1,9 @@
+<div class="social-icon-outer authors-sio">
+    <div class="social-icon-container">
+        {{ range $component := .Params.social }}
+            {{ $path := print "icons/social/" .title }}
+            <a href="{{ .url }}">{{ partial $path $ }}</a>
+            <span class="hidden">{{ .url }}</span>
+        {{ end }}
+    </div>
+</div>

sample-hugo-template/Tech-Club-Blog/layouts/partials/bio.html

@@ -0,0 +1,20 @@
+    <div class="bio-container">
+        {{ range site.Taxonomies.authors }}
+            {{ with .Page }}
+                {{ if .Params.featured }}
+                    <a href="{{ .RelPermalink }}" class="bio-link">
+                        {{ with .Params.avatar }}
+                            <div class="bio-avatar">
+                                <div class="bio-avatar-inner">
+                                    <img class="author-avatar" src="{{ . }}" />
+                                </div>
+                            </div>
+                        {{ end }}
+                        {{ with .Params.bio }}
+                            <p class="bio-text">{{ . }}</p>
+                        {{ end }}
+                    </a>
+                {{ end }}
+            {{ end }}
+        {{ end }}
+    </div>

sample-hugo-template/Tech-Club-Blog/layouts/partials/footer.html

@@ -0,0 +1,10 @@
+<div class="footer-gradient"></div>
+    <div class="section narrow">
+      <div class="footer-hr"></div>
+      <div class="footer-container">
+        <div class="footer-text">
+          © {{ dateFormat "2006" now }} {{ .Site.Title }}
+        </div>
+        {{ partial "social-links/social-links.html" . }}
+    </div>
+</div>

sample-hugo-template/Tech-Club-Blog/layouts/partials/func/GetArticleAuthors.html

@@ -0,0 +1,39 @@
+{{/*
+  GetArticle Authors
+  Retrieve the authors assigned to a given article
+
+  @author @regisphilibert
+
+  @context Page (.) The article in quest
+
+  @access public
+
+  @return Slice
+          - String (.name)
+          - String (.URL)
+          - String (.name)
+          - String (.firstname)
+
+  @example - Go Template
+    {{ $authors := partialCached "func/GetArticleAuthors" . .File.UniqueID }}
+*/}}
+{{ $authors := slice }}
+{{ with .Params.authors  }}
+  {{ range $name := . }}
+    {{ with site.GetPage (printf "/%s/%s" "authors" ($name | urlize)) }}
+      {{ $firstname := "" }}
+      {{ $name := "" }}
+      {{ $avatar := false }}
+      {{ with .Title }}
+        {{ $name = . }}
+        {{ $firstname = index (split . " ") 0 }}
+      {{ end }}
+      {{ with .Params.avatar }}
+        {{ $avatar = . }}
+      {{ end }}
+      {{ $authors = $authors | append (dict "URL" .RelPermalink "name" $name "firstname" $firstname "avatar" $avatar) }}
+    {{ end }}
+  {{ end }}
+{{ end }}
+
+{{ return $authors }}

sample-hugo-template/Tech-Club-Blog/layouts/partials/func/GetArticles.html

@@ -0,0 +1,21 @@
+{{/*
+  GetArticles
+  Retrieve article or posts
+
+  @author @regisphilibert
+
+  @context Page (.)
+
+  @access public
+
+  @return Collection
+          - Page (.)
+
+  @example - Go Template
+    {{ $articles := partialCached "func/GetArticles" . "articles" }}
+*/}}
+{{ $articles := slice }}
+{{ with where site.RegularPages "Type" "post" }}
+  {{ $articles = . }}
+{{ end }}
+{{ return $articles }}

sample-hugo-template/Tech-Club-Blog/layouts/partials/head/head.html

@@ -0,0 +1,15 @@
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="icon" href="http://hwtech.club/images/output-onlinepngtools.png">
+    {{ $style := resources.Get "scss/global.scss" | toCSS | minify | fingerprint }}
+    <link rel="stylesheet" href="{{ $style.RelPermalink }}">
+    {{ $prism := resources.Get "css/prism.css" }}
+    <link rel="stylesheet" href="{{ $prism.RelPermalink }}" />
+    <link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">
+    {{ partial "seo/print.html" . }}
+    {{ with .Params.forestry_instant_preview_id }}
+      {{- safeHTML (printf "<meta property='forestry_instant_preview_id' content='%s'>" .) -}}
+    {{ end -}}
+</head>

sample-hugo-template/Tech-Club-Blog/layouts/partials/header.html

@@ -0,0 +1,33 @@
+<Section class="section">
+  <div class="nav-container">
+    <a class="logo-link" href="/">
+      {{ partial "icons/ui/hwlogo.html" . }}
+      <!-- <img src="icons/ui/hwtechlogo.png"> -->
+      <span class="header-hidden">Navigate back to the homepage</span>
+    </a>
+    <div class="nav-controls">
+      <button id="copyButton" class="icon-wrapper">
+        {{ partial "icons/ui/link.html" . }}
+        <div id="toolTip" class="tool-tip " >
+            copied
+        </div>
+        <input id="copyText" style="opacity: 0;" type="text" class="tool-tip " />
+      </button>
+
+      <button id="themeColorButton" class="icon-wrapper"> 
+        <div id="sunRays" class="sun-rays"></div>
+        <div id="moonOrSun" class="moon-or-sun"></div>
+        <div id="moonMask" class="moon-mask"></div>
+      </button>
+    </div>
+</div>
+</Section>
+
+{{ $script := resources.Get "js/toggleLogos.js" }}
+<script src="{{ $script.RelPermalink }}"></script>
+
+{{ $script := resources.Get "js/toggleColors.js" }}
+<script src="{{ $script.RelPermalink }}"></script>
+
+{{ $script := resources.Get "js/copyUrl.js" }}
+<script src="{{ $script.RelPermalink }}"></script>

sample-hugo-template/Tech-Club-Blog/layouts/partials/icons/social/dribbble.html

@@ -0,0 +1,13 @@
+<svg
+class="social-icon-image"
+width="14"
+height="14"
+viewBox="0 0 14 14"
+fill="none"
+xmlns="http://www.w3.org/2000/svg"
+>
+<path
+  d="M7 0C3.14016 0 0 3.14019 0 7C0 10.8598 3.14016 14 7 14C10.8598 14 14 10.8598 14 7C14 3.14019 10.8598 0 7 0ZM11.5616 3.30136C12.3475 4.26869 12.8313 5.48966 12.8715 6.82062C11.4158 6.51926 10.0977 6.55462 8.93404 6.78278C8.72334 6.29005 8.50523 5.82062 8.28509 5.37697C9.55235 4.83104 10.6556 4.13375 11.5616 3.30136ZM10.7731 2.49993C9.87371 3.32085 8.83147 3.92867 7.76427 4.37742C6.98097 2.945 6.23154 1.86633 5.775 1.25333C6.17032 1.16911 6.57995 1.12393 7 1.12393C8.4354 1.12393 9.75151 1.64199 10.7731 2.49993ZM4.63984 1.62041C4.98459 2.06714 5.80572 3.18567 6.68777 4.77709C4.47095 5.49933 2.31992 5.62101 1.28629 5.63232C1.71713 3.83253 2.97749 2.35262 4.63984 1.62041ZM1.13006 6.7591C1.14115 6.7591 1.15187 6.75918 1.16318 6.75918C1.8774 6.75918 3.18594 6.71115 4.72646 6.43024C5.60536 6.26997 6.43879 6.05425 7.22081 5.7869C7.42439 6.19264 7.62677 6.62064 7.82301 7.06923C6.72801 7.42177 5.8046 7.92904 5.07315 8.43271C3.84658 9.27739 2.9873 10.2145 2.51811 10.7939C1.64939 9.76944 1.12392 8.4453 1.12392 7C1.12392 6.91923 1.12677 6.83913 1.13006 6.7591ZM3.328 11.5826C3.73194 11.074 4.55412 10.1482 5.74346 9.33591C6.55171 8.78383 7.3879 8.37367 8.24875 8.10445C8.74822 9.39907 9.17464 10.8295 9.42887 12.3484C8.68798 12.6862 7.86602 12.8761 7 12.8761C5.61143 12.8761 4.33474 12.3909 3.328 11.5826ZM10.4629 11.7432C10.2009 10.3483 9.8101 9.03664 9.35836 7.83793C10.4695 7.65046 11.618 7.68912 12.7975 7.95407C12.5431 9.50435 11.6805 10.8519 10.4629 11.7432Z"
+  fill="#73737D"
+/>
+</svg>

sample-hugo-template/Tech-Club-Blog/layouts/partials/icons/social/facebook.html

@@ -0,0 +1,15 @@
+<svg
+class="social-icon-image"
+width="7"
+height="14"
+viewBox="0 0 7 14"
+fill="none"
+xmlns="http://www.w3.org/2000/svg"
+>
+<path
+  fillRule="evenodd"
+  clipRule="evenodd"
+  d="M4.36849 7.36482H6.35279L6.64986 4.99457H4.36849V3.48124C4.36849 2.79501 4.55373 2.32731 5.5103 2.32731L6.73028 2.32673V0.206821C6.51919 0.17804 5.79505 0.113525 4.95257 0.113525C3.19363 0.113525 1.98943 1.21807 1.98943 3.24662V4.99464H0V7.36488H1.98936V13.4469L4.36849 13.4468V7.36482Z"
+  fill="#73737D"
+/>
+</svg>

sample-hugo-template/Tech-Club-Blog/layouts/partials/icons/social/github.html

@@ -0,0 +1,15 @@
+<svg
+class="social-icon-image"
+width="14"
+height="14"
+viewBox="0 0 14 14"
+fill="none"
+xmlns="http://www.w3.org/2000/svg"
+>
+<path
+  fillRule="evenodd"
+  clipRule="evenodd"
+  d="M7 0C3.1325 0 0 3.21173 0 7.17706C0 10.3529 2.00375 13.0353 4.78625 13.9863C5.13625 14.0491 5.2675 13.8338 5.2675 13.6454C5.2675 13.4749 5.25875 12.9097 5.25875 12.3087C3.5 12.6406 3.045 11.8691 2.905 11.4653C2.82625 11.259 2.485 10.622 2.1875 10.4516C1.9425 10.317 1.5925 9.98508 2.17875 9.97611C2.73 9.96714 3.12375 10.4964 3.255 10.7118C3.885 11.7973 4.89125 11.4923 5.29375 11.3039C5.355 10.8374 5.53875 10.5234 5.74 10.3439C4.1825 10.1645 2.555 9.54549 2.555 6.80026C2.555 6.01976 2.82625 5.37382 3.2725 4.87143C3.2025 4.692 2.9575 3.95635 3.3425 2.96951C3.3425 2.96951 3.92875 2.78111 5.2675 3.70516C5.8275 3.54367 6.4225 3.46293 7.0175 3.46293C7.6125 3.46293 8.2075 3.54367 8.7675 3.70516C10.1063 2.77214 10.6925 2.96951 10.6925 2.96951C11.0775 3.95635 10.8325 4.692 10.7625 4.87143C11.2087 5.37382 11.48 6.01079 11.48 6.80026C11.48 9.55446 9.84375 10.1645 8.28625 10.3439C8.54 10.5682 8.75875 10.9988 8.75875 11.6717C8.75875 12.6316 8.75 13.4032 8.75 13.6454C8.75 13.8338 8.88125 14.0581 9.23125 13.9863C11.9963 13.0353 14 10.3439 14 7.17706C14 3.21173 10.8675 0 7 0Z"
+  fill="#73737D"
+/>
+</svg>

sample-hugo-template/Tech-Club-Blog/layouts/partials/icons/social/instagram.html

@@ -0,0 +1,27 @@
+<svg
+class="social-icon-image"
+width="13"
+height="13"
+viewBox="0 0 13 13"
+fill="none"
+xmlns="http://www.w3.org/2000/svg"
+>
+<path
+  fillRule="evenodd"
+  clipRule="evenodd"
+  d="M-3.05176e-05 3.97163C-3.05176e-05 1.77803 1.77824 -0.000244141 3.97184 -0.000244141H9.0281C11.2217 -0.000244141 13 1.77802 13 3.97163V9.02788C13 11.2215 11.2217 12.9998 9.0281 12.9998H3.97184C1.77824 12.9998 -3.05176e-05 11.2215 -3.05176e-05 9.02789V3.97163ZM3.97184 1.281C2.48585 1.281 1.28122 2.48564 1.28122 3.97163V9.02789C1.28122 10.5139 2.48585 11.7185 3.97184 11.7185H9.0281C10.5141 11.7185 11.7187 10.5139 11.7187 9.02788V3.97163C11.7187 2.48564 10.5141 1.281 9.0281 1.281H3.97184Z"
+  fill="#73737D"
+/>
+<path
+  fillRule="evenodd"
+  clipRule="evenodd"
+  d="M3.07483 6.55115C3.07483 4.64454 4.61242 3.09253 6.51702 3.09253C8.42162 3.09253 9.95921 4.64454 9.95921 6.55115C9.95921 8.45776 8.42162 10.0098 6.51702 10.0098C4.61242 10.0098 3.07483 8.45776 3.07483 6.55115ZM6.51702 4.37378C5.32709 4.37378 4.35608 5.34508 4.35608 6.55115C4.35608 7.75722 5.32709 8.72853 6.51702 8.72853C7.70695 8.72853 8.67796 7.75722 8.67796 6.55115C8.67796 5.34508 7.70695 4.37378 6.51702 4.37378Z"
+  fill="#73737D"
+/>
+<path
+  fillRule="evenodd"
+  clipRule="evenodd"
+  d="M9.95062 3.87075C10.4035 3.87075 10.7706 3.50149 10.7706 3.04597C10.7706 2.59046 10.4035 2.22119 9.95062 2.22119C9.49776 2.22119 9.13065 2.59046 9.13065 3.04597C9.13065 3.50149 9.49776 3.87075 9.95062 3.87075Z"
+  fill="#73737D"
+/>
+</svg>

sample-hugo-template/Tech-Club-Blog/layouts/partials/icons/social/linkedin.html

@@ -0,0 +1,16 @@
+<svg
+class="social-icon-image"
+width="14"
+height="14"
+viewBox="0 0 14 14"
+fill="none"
+xmlns="http://www.w3.org/2000/svg"
+{...props}
+>
+<path
+  fillRule="evenodd"
+  clipRule="evenodd"
+  d="M3.59615 13.125H0.871552V4.36523H3.59615V13.125ZM2.24847 3.16406C1.81878 3.16406 1.44769 3.00781 1.13519 2.69531C0.822692 2.38281 0.666443 2.01171 0.666443 1.58203C0.666443 1.15234 0.822692 0.781248 1.13519 0.468749C1.44769 0.156249 1.81878 0 2.24847 0C2.67816 0 3.04925 0.156249 3.36175 0.468749C3.67425 0.781248 3.8305 1.15234 3.8305 1.58203C3.8305 2.01171 3.67425 2.38281 3.36175 2.69531C3.04925 3.00781 2.67816 3.16406 2.24847 3.16406ZM13.7915 13.125H11.0669V8.84765C11.0669 8.14452 11.0083 7.63671 10.8911 7.32421C10.6763 6.79687 10.2563 6.5332 9.63134 6.5332C9.00634 6.5332 8.56689 6.76757 8.31298 7.23632C8.11767 7.58788 8.02001 8.10546 8.02001 8.78905V13.125H5.32471V4.36523H7.93212V5.5664H7.96142C8.15673 5.17578 8.46923 4.85351 8.89892 4.59961C9.36767 4.28711 9.91454 4.13086 10.5395 4.13086C11.8091 4.13086 12.6977 4.53125 13.2055 5.33203C13.5962 5.97656 13.7915 6.97265 13.7915 8.3203V13.125Z"
+  fill="#73737D"
+/>
+</svg>