chore: merge from master

selcukcihan · Oct 17, 2019 · 7d9bec3 · 7d9bec3
2 parents 470638b + edf7470
commit 7d9bec3
Show file tree

Hide file tree

Showing 12 changed files with 194 additions and 125 deletions.
diff --git 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
@@ -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"
@@ -43,11 +44,6 @@ name = "Github"
 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"

diff --git a/exampleSite/content/posts/post-7.md 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
diff --git a/images/screenshot-light.png b/images/screenshot-light.png
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
@@ -17,7 +17,7 @@ <h1 class="page-title">All articles</h1>
 			{{- 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
@@ -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
@@ -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 @@ <h2 class="section-header">
 				{{ $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
@@ -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
@@ -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;
+}