chore: merge from master

12 files changed, 194 insertions, 125 deletions

diff --git a/README.md b/README.md
index ace07d7..621639a 100644
--- a/README.md
+++ b/README.md
@@ -6,11 +6,13 @@ Clean and minimal personal blog and portfolio theme for Hugo.
 
 [View demo](https://ezhil-hugo.netlify.com/)
 
-![Screenshot](images/screenshot.png "Ezhil")
+![Screenshot](images/screenshot-light.png "Ezhil light theme")
+![Screenshot](images/screenshot-dark.png "Ezhil dark theme")
 
 ## Features
 
 * Clean and minimal
+* Dark mode (Auto detect from OS)
 * Responsive
 * Supports tags
 * Social media links
@@ -65,6 +67,9 @@ paginate = 10
     featherIconsCDN = true
     # Specify favicon (icons/i.png maps to static/icons/i.png). No favicon if not defined.
     favicon = "icons/myicon.png"
+    # Switch to dark mode or auto detect mode from OS (Optional).
+    # "dark" will set mode to dark and "auto" will switch to dark mode if OS is in dark mode.
+    mode = "dark" # "dark" or "auto"
 
 # Main menu which appears below site header.
 [[menu.main]]
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 6eb3bc5..e5476bc 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -11,12 +11,13 @@ pygmentscodefences = true
 pygmentscodefencesguesssyntax = true
 
 googleAnalytics = "UA-123-45"
-disqusShortname = "localhost"
+disqusShortname = "ezhil-demo"
 
 [params]
 	subtitle = "Clean and minimal personal [blog theme for Hugo](https://github.com/vividvilla/ezhil)"
 	disableDisqusTypes = ["page"]
 	featherIconsCDN = true
+	mode = "auto" # "dark" or "auto"
 
 [[menu.main]]
 name = "Home"
@@ -44,11 +45,6 @@ icon = "github"
 url = "https://github.com/vividvilla/ezhil"
 
 [[params.social]]
-name = "Twitter"
-icon = "twitter"
-url = "https://twitter.com/gohugoio"
-
-[[params.social]]
 name = "RSS"
 icon = "rss"
 url = "/index.xml"
diff --git a/exampleSite/content/posts/post-7.md b/exampleSite/content/posts/post-7.md
new file mode 100644
index 0000000..174b948
--- /dev/null
+++ b/exampleSite/content/posts/post-7.md
@@ -0,0 +1,14 @@
+---
+title: "How to test dark mode?"
+description: "Here is how you can setup dark mode for Ezhil and test on various OS like iOS, Android, macOS and Windows 10."
+date: 2018-03-18T12:13:38+05:30
+---
+
+You can set dark mode as default by setting `params.mode` to `dark` in `config.toml` or set it to `auto` which will detect based on your OS and switch to dark mode. For more details [refer documentation](https://github.com/vividvilla/ezhil#configuration)
+
+Here is how you can switch based on your OS
+
+* [iOS](https://www.howtogeek.com/440078/how-to-enable-dark-mode-on-your-iphone-and-ipad/)
+* [Android](https://9to5google.com/2018/12/17/android-dark-mode-theme-pie/)
+* [macOS](https://support.apple.com/en-in/HT208976)
+* [Windows 10](https://www.cnet.com/how-to/turn-on-the-dark-mode-in-windows-10/)
diff --git a/images/screenshot-dark.png b/images/screenshot-dark.png
new file mode 100644
index 0000000..b02a39d
--- /dev/null
+++ b/images/screenshot-dark.png
diff --git a/images/screenshot-light.png b/images/screenshot-light.png
new file mode 100644
index 0000000..e77ae6a
--- /dev/null
+++ b/images/screenshot-light.png
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 2d02a73..a04ec31 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -17,7 +17,7 @@
 			{{- if (in (.Site.Params.excludedTypes | default (slice "page")) .Type) -}}
 			{{- else -}}
 			<li class="post">
-				<a href="{{ .RelPermalink }}">{{.Title}}</a> <span class="meta">{{ dateFormat "Jan 2, 2006" .Date }}</span>
+				<a href="{{ .RelPermalink }}">{{.Title}}</a> <span class="meta">{{ dateFormat "Jan 2, 2006" .Date }}{{ if .Draft }} <span class="draft-label">DRAFT</span> {{ end }}</span>
 			</li>
 			{{- end -}}
 			{{- end -}}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 496a564..a09cfc8 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -7,7 +7,7 @@
 
 		<div class="post-header">
 			<h1 class="title">{{ .Title }}</h1>
-			<div class="meta">Posted at &mdash; {{ dateFormat "Jan 2, 2006" .Date }}</div>
+			<div class="meta">Posted at &mdash; {{ dateFormat "Jan 2, 2006" .Date }}{{ if .Draft }} <span class="draft-label">DRAFT</span> {{ end }}</div>
 		</div>
 
 		<div class="markdown">
diff --git a/layouts/index.html b/layouts/index.html
index 5b5d87a..d7711bc 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -3,7 +3,7 @@
 {{ partial "header.html" . }}
 <body>
 	<div class="container wrapper">
-		 {{ partial "head.html" . }}
+		{{ partial "head.html" . }}
 
 		<div class="recent-posts section">
 			<h2 class="section-header">
@@ -14,7 +14,7 @@
 				{{ $paginator := .Paginate (where $pages "Params.hidden" "ne" true) }}
 				{{ range $paginator.Pages }}
 				<div class="post">
-					<div class="meta">{{ dateFormat "Jan 2, 2006" .Date }}</div>
+					<div class="meta">{{ dateFormat "Jan 2, 2006" .Date }}{{ if .Draft }} <span class="draft-label">DRAFT</span> {{ end }}</div>
 					<a class="title" href="{{ .RelPermalink }}">{{.Title}}</a> &mdash;
 					<span class="description">
 						{{ if isset .Params "description" }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 9f8913a..16a7c5f 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -20,10 +20,13 @@
 
 	{{- template "_internal/opengraph.html" . -}}
 	{{- template "_internal/twitter_cards.html" . -}}
-	<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,300italic,400italic|Raleway:500,100,300" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,300italic,400italic|Raleway:200,300" rel="stylesheet">
 
 	<link rel="stylesheet" type="text/css" media="screen" href="{{ .Site.BaseURL }}css/normalize.css" />
 	<link rel="stylesheet" type="text/css" media="screen" href="{{ .Site.BaseURL }}css/main.css" />
+	{{- if or (eq .Site.Params.mode "auto") (eq .Site.Params.mode "dark") }}
+	<link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/dark.css" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} />
+	{{ end }}
 
 	{{- if and (isset .Site.Params "social") (isset .Site.Params "feathericonscdn") (eq .Site.Params.featherIconsCDN true) -}}
 	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
diff --git a/static/css/dark.css b/static/css/dark.css
new file mode 100644
index 0000000..1b6eb1f
--- /dev/null
+++ b/static/css/dark.css
@@ -0,0 +1,44 @@
+body {
+	color: #fff;
+	background-color: #000;
+}
+
+::-moz-selection {
+    background: #666;
+    text-shadow: none
+}
+
+::selection {
+    background: #666;
+    text-shadow: none
+}
+
+hr {
+    border-color: #333;
+}
+
+blockquote {
+	border-color: #fff;
+}
+
+h1,h2,h3,h4,h5,h6 {
+	color: #fff;
+}
+
+a,a:hover {
+	color: #fff;
+	text-decoration: underline;
+}
+
+a:hover {
+	opacity: 0.8;
+}
+
+.header nav,
+.footer {
+	border-color: #333;
+}
+
+.highlight {
+	background-color: #333;
+}
diff --git a/static/css/main.css b/static/css/main.css
index 62577ad..355f437 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,28 +1,29 @@
 body {
     font-family: "ubuntu", sans-serif;
     font-weight: 300;
-	color: #333;
-	line-height: 1.6;
-	font-size: 16px;
+    color: #333;
+    line-height: 1.6;
+    font-size: 16px;
 }
 
 a, a:hover {
     color: #a00;
     text-decoration: none;
+    word-break: break-word;
 }
 
 html,button,input,select,textarea {
-    color: #222
+    color: #333;
 }
 
 ::-moz-selection {
     background: #b3d4fc;
-    text-shadow: none
+    text-shadow: none;
 }
 
 ::selection {
     background: #b3d4fc;
-    text-shadow: none
+    text-shadow: none;
 }
 
 hr {
@@ -31,32 +32,32 @@ hr {
     border: 0;
     border-top: 1px solid #ccc;
     margin: 1rem 0;
-    padding: 0
+    padding: 0;
 }
 
 img {
-	margin: 10px auto 10px auto;
-	max-width: 100%;
-	display: block;
+    margin: 10px auto 10px auto;
+    max-width: 100%;
+    display: block;
 }
 
 a img {
-	border:none;
+    border:none;
 }
 
 figure {
-	margin: 0;
-	text-align: center;
+    margin: 0;
+    text-align: center;
 }
 
 fieldset {
     border: 0;
     margin: 0;
-    padding: 0
+    padding: 0;
 }
 
 textarea {
-    resize: vertical
+    resize: vertical;
 }
 
 blockquote {
@@ -66,12 +67,12 @@ blockquote {
     font-family: Georgia,bitstream charter,serif;
     border-left: 3px solid;
     border-color: #a00;
-    padding-left: 20px
+    padding-left: 20px;
 }
 
 blockquote cite {
     font-size: 70%;
-    opacity: .8
+    opacity: .8;
 }
 
 blockquote em {
@@ -91,64 +92,64 @@ h1,h2,h3,h4,h5,h6 {
     font-family: raleway,sans-serif;
     line-height: 1.2;
     color: #333;
-    font-weight: 100
+    font-weight: 200;
 }
 
 h1 {
-    font-size: 2.75rem
+    font-size: 2.75rem;
 }
 
 h2 {
-    font-size: 2rem
+    font-size: 2rem;
 }
 
 h3 {
-    font-size: 1.6rem
+    font-size: 1.6rem;
 }
 
 h4 {
-    font-size: 1.2rem
+    font-size: 1.2rem;
 }
 
 h5 {
     font-weight: 300;
-    font-size: 1rem
+    font-size: 1rem;
 }
 
 h6 {
     font-weight: 300;
-    font-size: .9rem
+    font-size: .9rem;
 }
 
 .align-center {
-	text-align: center;
+    text-align: center;
 }
 
 .align-left {
-	text-align: left;
+    text-align: left;
 }
 
 .align-right {
-	text-align: right;
+    text-align: right;
 }
 
 .container {
-    max-width: 800px
+    max-width: 800px;
 }
 
 ul {
-	padding-left: 15px;
+    padding-left: 15px;
 }
 
 ul.flat {
-	margin: 0;
-	padding: 0;
+    margin: 0;
+    padding: 0;
 }
 
 ul.flat li {
     display: inline-block;
     list-style: none;
-	margin-left: 0
+    margin-left: 0;
 }
 
 .prevent-collapse {
@@ -156,19 +157,19 @@ ul.flat li {
 }
 
 .page-title {
-    margin: 0
+    margin: 0;
 }
 
 .smaller {
-    font-size: 70%
+    font-size: 70%;
 }
 
 ul {
-    list-style: disc inside
+    list-style: disc inside;
 }
 
 .post ul li {
-	margin-bottom: 10px;
+    margin-bottom: 10px;
 }
 
 .post ul li p {
@@ -177,27 +178,28 @@ ul {
 
 .highlight pre {
     margin-bottom: 0;
-	margin-top: 0;
-	padding: 20px;
-	background-color: #FAFAFA !important;
+    margin-top: 0;
+    padding: 20px;
+    background-color: transparent !important;
 }
 
 .highlight {
-    background: 0 0
+    background: 0 0;
+    background-color: #FAFAFA;
 }
 
 .wrapper {
-	max-width: 760px;
-	margin: 0 auto;
+    max-width: 760px;
+    margin: 0 auto;
 }
 
 .container {
-	margin-top: 50px;
+    margin-top: 50px;
 }
 
 .header {
-	margin-bottom: 20px;
-	padding-bottom: 20px;
+    margin-bottom: 20px;
+    padding-bottom: 20px;
 }
 
 .header h1,
@@ -213,17 +215,17 @@ ul {
 }
 
 .header nav {
-	margin-top: 20px;
-	border-top: 1px solid #f4f4f4;
+    margin-top: 20px;
+    border-top: 1px solid #f4f4f4;
 }
 
 .header nav ul,
 .header nav li {
-	margin: 0;
+    margin: 0;
 }
 
 .header nav ul.flat {
-	padding: 0;
+    padding: 0;
 }
 
 .header nav ul.flat li {
@@ -236,47 +238,49 @@ ul {
 }
 
 .header .site-description {
-	display: flex;
-	justify-content: space-between;
+    display: flex;
+    justify-content: space-between;
 }
 
 .header .site-description nav {
-	margin: 0;
-	padding: 0;
-	border: none;
+    margin: 0;
+    padding: 0;
+    border: none;
+    min-width: 50px;
+    margin-left: 15px;
 }
 
 .header .site-description nav ul svg {
-	max-height: 15px;
+    max-height: 15px;
 }
 
 .section .section-header {
-	font-size: 0.75rem;
-	font-weight: 600;
-	text-transform: uppercase;
-	color: #999;
-	margin-bottom: 20px;
-	letter-spacing: 1px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: #999;
+    margin-bottom: 20px;
+    letter-spacing: 1px;
 }
 
 .recent-posts .posts .post {
-	margin-bottom: 30px;
+    margin-bottom: 30px;
 }
 
 .recent-posts .posts .post .meta,
 .post .post-header .meta,
 .list .posts .post .meta {
-	font-size: 0.725rem;
-	color: #999;
-	margin-bottom: 4px;
+    font-size: 0.725rem;
+    color: #999;
+    margin-bottom: 4px;
 }
 
 .post .post-header {
-	margin-bottom: 30px;
+    margin-bottom: 30px;
 }
 
 .post .post-header .title {
-	margin: 0;
+    margin: 0;
 }
 
 .post-tags a {
@@ -284,20 +288,29 @@ ul {
 }
 
 .post .post-header .meta {
-	padding-left: 5px;
-	margin-top: 10px;
+    padding-left: 5px;
+    margin-top: 10px;
+}
+
+.post .draft-label {
+    color: #a00;
+    text-decoration: none;
+    padding: 2px 4px;
+    border-radius: 4px;
+    margin-left: 6px;
+    background-color: #f9f2f4;
 }
 
 .list .posts .post .meta {
-	margin-bottom: 0;
-	margin-left: 5px;
+    margin-bottom: 0;
+    margin-left: 5px;
 }
 
 .footer {
-	text-align: right;
-	font-size: 0.75em;
-	color: #999;
-	border-top: 1px solid #f4f4f4;
+    text-align: right;
+    font-size: 0.75em;
+    color: #999;
+    border-top: 1px solid #f4f4f4;
     padding: 20px 0;
     margin-top: 40px;
 }
@@ -315,61 +328,55 @@ ul {
 }
 
 .pagination {
-	margin: 0;
-	padding: 0;
-	text-align: left;
-	display: flex;
-	justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    text-align: left;
+    display: flex;
+    justify-content: space-between;
 }
 
 .pagination li {
-	list-style: none;
-	display: inline-block;
-	margin: 0;
-	padding: 0;
+    list-style: none;
+    display: inline-block;
+    margin: 0;
+    padding: 0;
 }
 
 .pagination .page-prev {
-	margin-right: 20px;
-	padding-right: 20px;
+    margin-right: 20px;
+    padding-right: 20px;
 }
 
 .pagination .page-item.page-prev {
-	text-align: left;
+    text-align: left;
 }
 
 .pagination .page-item.page-next {
-	text-align: right;
+    text-align: right;
 }
 
 @media (max-width: 767px) {
-	body {
-		padding: 20px;
-	}
+    body {
+        padding: 20px;
+    }
 
-	h1 {
-		font-size: 2rem
-	}
+    h1 {
+        font-size: 1.8rem;
+    }
 
-	h2 {
-		font-size: 1.6rem
-	}
+    h2 {
+        font-size: 1.6rem;
+    }
 
-	h3 {
-		font-size: 1.2rem
-	}
+    h3 {
+        font-size: 1.2rem;
+    }
 
-	h4 {
-		font-size: 1rem
-	}
-
-	.container {
-		margin-top: 10px;
-	}
-}
+    h4 {
+        font-size: 1rem;
+    }
 
-@media (max-width: 480px) {
-	body {
-		font-size: 14px;
-	}
+    .container {
+        margin-top: 10px;
+    }
 }
diff --git a/theme.toml b/theme.toml
index 356a543..e9dfef4 100644
--- a/theme.toml
+++ b/theme.toml
@@ -6,7 +6,7 @@ license = "MIT"
 licenselink = "https://github.com/vividvilla/ezhil/blob/master/LICENSE.md"
 description = "Clean and minimal personal blog and portfolio theme."
 homepage = "https://github.com/vividvilla/ezhil"
-tags = ["minimal", "clean", "blog", "responsive", "personal", "simple", "minimalist", "portfolio"]
+tags = ["minimal", "clean", "blog", "responsive", "personal", "simple", "minimalist", "portfolio", "dark"]
 features = ["blog", "Clean and minimal", "Responsive", "Social media links", "Syntax highlighting"]
 min_version = "0.37.0"