Merge pull request #1 from rhazdon/master

update remote

README.md

@@ -1,10 +1,10 @@
 # Hello Friend NG
 
-![Hello Friend NG](https://dsh.re/2bd45)
+![Hello Friend NG](https://dsh.re/d914c)
 
 ## General informations
 
-This theme was highly inspired by the [hello-friend](https://github.com/panr/hugo-theme-hello-friend) and [hermit](https://github.com/Track3/hermit). A lot of kudos for theier great work.
+This theme was highly inspired by the [hello-friend](https://github.com/panr/hugo-theme-hello-friend) and [hermit](https://github.com/Track3/hermit). A lot of kudos for their great work.
 
 ---
 ## Table of Contents
@@ -27,13 +27,14 @@ This theme was highly inspired by the [hello-friend](https://github.com/panr/hug
 ---
 ## Features
 
-- Theming: **dark/light mode**, depending on your preferences (dark is default, but you can change it)
+- Theming: **dark/light mode**, depending on your system preferences
 - Great reading experience thanks to [**Inter UI font**](https://rsms.me/inter/), made by [Rasmus Andersson](https://rsms.me/about/)
 - Nice code highlighting thanks to [**PrismJS**](https://prismjs.com)
 - An easy way to modify the theme with Hugo tooling
 - Fully responsive
 - Support for social icons
 - Support for sharing buttons
+- Support for [Commento](https://commento.io)
 
 
 ## How to start
@@ -69,7 +70,7 @@ paginate     = 10
   dateform        = "Jan 2, 2006"
   dateformShort   = "Jan 2"
   dateformNum     = "2006-01-02"
-  dateformNumTime = "2006-01-02 15:04 -0700"
+  dateformNumTime = "2006-01-02 15:04"
 
   # Subtitle for home
   homeSubtitle = "A simple and beautiful blog"
@@ -85,9 +86,6 @@ paginate     = 10
   keywords = "homepage, blog"
   images = [""]
 
-  # Default theme "light" or "dark"
-  defaultTheme = "dark"
-
 [taxonomies]
     category = "blog"
     tag      = "tags"
@@ -139,8 +137,6 @@ Example:
 
 ### Code highlighting
 
-Supported languages: [Take a look here](https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+abap+actionscript+ada+apacheconf+apl+applescript+c+arff+asciidoc+asm6502+csharp+autohotkey+autoit+bash+basic+batch+bison+brainfuck+bro+cpp+aspnet+arduino+cil+coffeescript+clojure+ruby+csp+css-extras+d+dart+diff+markup-templating+docker+eiffel+elixir+elm+lua+erb+erlang+fsharp+flow+fortran+gcode+gedcom+gherkin+git+glsl+gml+go+graphql+groovy+less+handlebars+haskell+haxe+hcl+http+hpkp+hsts+ichigojam+icon+inform7+ini+io+j+java+scala+php+javastacktrace+jolie+n4js+markdown+json+julia+keyman+kotlin+latex+crystal+scheme+liquid+lisp+livescript+lolcode+makefile+django+matlab+mel+mizar+monkey+n1ql+typescript+nand2tetris-hdl+nasm+nginx+nim+nix+nsis+objectivec+ocaml+opencl+oz+parigp+parser+pascal+perl+php-extras+sql+powershell+processing+prolog+properties+protobuf+scss+puppet+pure+python+q+qore+r+jsx+renpy+reason+vala+rest+rip+roboconf+textile+rust+plsql+sass+stylus+smalltalk+smarty+soy+sas+twig+swift+yaml+tcl+haml+toml+tt2+pug+tsx+visual-basic+vbnet+velocity+verilog+vhdl+vim+wasm+wiki+xeora+xojo+xquery+tap)
-
 By default the theme is using PrismJS to color your code syntax. All you need to do is to wrap you code like this:
 
 <pre>
@@ -183,6 +179,6 @@ If you like my work and if you think this project is worth to support it, just <
 
 ## Licence
 
-Copyright © 2019-2020 Djordje Atlialp
+Copyright © 2019-2021 Djordje Atlialp
 
 The theme is released under the MIT License. Check the [original theme license](https://github.com/rhazdon/hugo-theme-hello-friend-ng/blob/master/LICENSE.md) for additional licensing information.

assets/scss/_buttons.scss

@@ -23,20 +23,18 @@ a.button {
   cursor: pointer;
   outline: none;
 
-  .dark-theme & {
+  @media (prefers-color-scheme: dark) {
     background: $dark-background-secondary;
     color: inherit;
   }
 
-  /* variants */
-
   &.outline {
     background: transparent;
     border-color: $light-background-secondary;
     box-shadow: none;
     padding: 8px 18px;
 
-    .dark-theme & {
+    @media (prefers-color-scheme: dark) {
       border-color: $dark-background-secondary;
       color: inherit;
     }
@@ -91,7 +89,7 @@ a.button {
     cursor: pointer;
     outline: none;
 
-    .dark-theme & {
+    @media (prefers-color-scheme: dark) {
       background: $dark-background-secondary;
       color: inherit;
     }

assets/scss/_header.scss

@@ -1,13 +1,13 @@
 .header {
-  background: #fafafa;
+  background: $light-background-header;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   padding: 20px;
 
-  .dark-theme & {
-    background: #252627;
+  @media (prefers-color-scheme: dark) {
+    background: $dark-background-header;
   }
 
   &__right {

assets/scss/_list.scss

@@ -12,7 +12,7 @@
   &:not(:last-of-type) {
     border-bottom: 1px solid $light-border-color;
 
-    .dark-theme & {
+    @media (prefers-color-scheme: dark) {
       border-color: $dark-border-color;
     }
   }

assets/scss/_main.scss

@@ -1,7 +1,7 @@
 html {
   box-sizing: border-box;
   line-height: 1.6;
-  letter-spacing: .06em;
+  letter-spacing: 0.06em;
   scroll-behavior: smooth;
 }
 
@@ -14,7 +14,8 @@ html {
 body {
   margin: 0;
   padding: 0;
-  font-family: 'Inter UI', -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI",  Helvetica, Arial, sans-serif;
+  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Roboto",
+    "Segoe UI", Helvetica, Arial, sans-serif;
   font-display: auto;
   font-size: 1rem;
   line-height: 1.54;
@@ -34,13 +35,17 @@ body {
     font-size: 1rem;
   }
 
-  &.dark-theme {
+  @media (prefers-color-scheme: dark) {
     background-color: $dark-background;
     color: $dark-color;
   }
 }
 
-h2, h3, h4, h5, h6 {
+h2,
+h3,
+h4,
+h5,
+h6 {
   display: flex;
   align-items: center;
   line-height: 1.3;
@@ -52,6 +57,7 @@ h1 {
 
 h2 {
   font-size: 1.625rem;
+  margin-top: 2.5em;
 }
 
 h3 {
@@ -150,7 +156,7 @@ figure {
   figcaption {
     font-size: 14px;
     margin-top: 5px;
-    opacity: .8;
+    opacity: 0.8;
 
     &.left {
       text-align: left;
@@ -166,17 +172,25 @@ figure {
   }
 }
 
+em, i, strong {
+  color: black;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+}
+
 code {
-  font-family: Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;
+  font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
   font-display: auto;
   font-feature-settings: normal;
   background: $light-background-secondary;
   padding: 1px 6px;
   margin: 0 2px;
   border-radius: 5px;
-  font-size: .95rem;
+  font-size: 0.95rem;
 
-  .dark-theme & {
+  @media (prefers-color-scheme: dark) {
     background: $dark-background-secondary;
   }
 }
@@ -185,7 +199,7 @@ pre {
   background: #212020;
   padding: 10px 10px 10px 20px;
   border-radius: 8px;
-  font-size: .95rem;
+  font-size: 0.95rem;
   overflow: auto;
 
   @media #{$media-size-phone} {
@@ -200,14 +214,14 @@ pre {
     padding: 0;
     font-size: inherit;
 
-    .dark-theme & {
+    @media (prefers-color-scheme: dark) {
       color: inherit;
     }
   }
 }
 
 blockquote {
-  border-left: 2px solid;
+  border-left: 3px solid #3eb0ef;
   margin: 40px;
   padding: 10px 20px;
 
@@ -217,7 +231,7 @@ blockquote {
   }
 
   &:before {
-    content: '”';
+    content: "”";
     font-family: Georgia, serif;
     font-display: auto;
     font-size: 3.875rem;
@@ -235,7 +249,8 @@ blockquote {
   }
 }
 
-ul, ol {
+ul,
+ol {
   margin-left: 40px;
   padding: 0;
 
@@ -275,7 +290,7 @@ hr {
   background: $light-border-color;
   height: 1px;
 
-  .dark-theme & {
+  @media (prefers-color-scheme: dark) {
     background: $dark-border-color;
   }
 }
@@ -298,35 +313,47 @@ hr {
 
 // Accessibility
 .screen-reader-text {
-	border: 0;
-	clip: rect(1px, 1px, 1px, 1px);
-	clip-path: inset(50%);
-	height: 1px;
-	margin: -1px;
-	overflow: hidden;
-	padding: 0;
-	position: absolute !important;
-	width: 1px;
-	word-wrap: normal !important;
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute !important;
+  width: 1px;
+  word-wrap: normal !important;
 }
 
 .screen-reader-text:focus {
-	background-color: #f1f1f1;
-	border-radius: 3px;
-	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
-	clip: auto !important;
-	clip-path: none;
-	color: #21759b;
-	display: block;
-	font-size: 14px;
-	font-size: 0.875rem;
-	font-weight: bold;
-	height: auto;
-    width: auto;
-    top: 5px;
-	left: 5px;
-	line-height: normal;
-	padding: 15px 23px 14px;
-	text-decoration: none;
-	z-index: 100000;
+  background-color: #f1f1f1;
+  border-radius: 3px;
+  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+  clip: auto !important;
+  clip-path: none;
+  color: #21759b;
+  display: block;
+  font-size: 14px;
+  font-size: 0.875rem;
+  font-weight: bold;
+  height: auto;
+  width: auto;
+  top: 5px;
+  left: 5px;
+  line-height: normal;
+  padding: 15px 23px 14px;
+  text-decoration: none;
+  z-index: 100000;
 }
+
+.background-image {
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-size: cover;
+  background-position: center center;
+}
+
+// Prism JS Additionals
+.highlight {
+  margin: 30px auto;
+}

assets/scss/_menu.scss

@@ -1,11 +1,9 @@
 .menu {
-  background: #fafafa;
-  border-right: 1px solid;
-  margin-right: 18px;
+  background: $light-background-header;
   z-index: 9999;
 
-  .dark-theme & {
-    background: #252627;
+  @media (prefers-color-scheme: dark) {
+    background: $dark-background-header;
   }
 
   @media #{$media-size-phone} {
@@ -49,6 +47,11 @@
     fill: currentColor;
     margin-left: 10px;
     cursor: pointer;
+    display: none;
+
+    @media #{$media-size-phone} {
+      display: block;
+    }
   }
 
   a {