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" @@ -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 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 Binary files /dev/null and b/images/screenshot-dark.png differ diff --git a/images/screenshot-light.png b/images/screenshot-light.png new file mode 100644 index 0000000..e77ae6a Binary files /dev/null and b/images/screenshot-light.png differ 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 -}}
  • - {{.Title}} {{ dateFormat "Jan 2, 2006" .Date }} + {{.Title}} {{ dateFormat "Jan 2, 2006" .Date }}{{ if .Draft }} DRAFT {{ end }}
    • {{- 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 @@

    {{ .Title }}

    -
    Posted at — {{ dateFormat "Jan 2, 2006" .Date }}
    +
    Posted at — {{ dateFormat "Jan 2, 2006" .Date }}{{ if .Draft }} DRAFT {{ end }}
    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" . }}
    - {{ partial "head.html" . }} + {{ partial "head.html" . }}

    @@ -14,7 +14,7 @@ {{ $paginator := .Paginate (where $pages "Params.hidden" "ne" true) }} {{ range $paginator.Pages }}
    -
    {{ dateFormat "Jan 2, 2006" .Date }}
    +
    {{ dateFormat "Jan 2, 2006" .Date }}{{ if .Draft }} DRAFT {{ end }}
    {{.Title}} — {{ 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" . -}} - + + {{- if or (eq .Site.Params.mode "auto") (eq .Site.Params.mode "dark") }} + + {{ end }} {{- if and (isset .Site.Params "social") (isset .Site.Params "feathericonscdn") (eq .Site.Params.featherIconsCDN true) -}} 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 - } + h4 { + font-size: 1rem; + } - .container { - margin-top: 10px; - } -} - -@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"