The MIT License (MIT) | The MIT License (MIT) | ||||
Copyright (c) 2018 YOUR_NAME_HERE | |||||
Copyright (c) 2019 | |||||
Permission is hereby granted, free of charge, to any person obtaining a copy of | 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 | this software and associated documentation files (the "Software"), to deal in |
# Ezhil | |||||
Clean and minimal personal blog and portfolio theme for Hugo. | |||||
# Ink | |||||
Crisp, minimal personal website and blog theme Hugo. Forked from [Ezhil](https://github.com/vividvilla/ezhil). | |||||
## Demo | ## Demo | ||||
[View demo](https://ezhil-hugo.netlify.com/) | |||||
![Screenshot](images/screenshot-light.png "Ezhil light theme") | |||||
![Screenshot](images/screenshot-dark.png "Ezhil dark theme") | |||||
[View demo](https://ink-hugo.netlify.com) | |||||
![Screenshot](https://user-images.githubusercontent.com/547147/69119000-3ace9280-0abb-11ea-81bc-5af68433e845.png "Ink light theme") | |||||
## Features | ## Features | ||||
* Clean and minimal | |||||
* Dark mode (Auto detect from OS) | |||||
* Responsive | |||||
* Supports tags | |||||
* Social media links | |||||
* Google Analytics integration | * Google Analytics integration | ||||
* Syntax highlighting | * Syntax highlighting | ||||
* Twitter cards and opengraph tags support | * Twitter cards and opengraph tags support | ||||
* Disqus comments | * Disqus comments | ||||
* Hugo RSS feeds | |||||
* RSS feeds | |||||
* Custom CSS/JS | * Custom CSS/JS | ||||
## Installation | ## Installation | ||||
From your Hugo site run the following. | |||||
cd into your hugo site's root directory and: | |||||
```sh | ```sh | ||||
cd themes | cd themes | ||||
git clone https://github.com/vividvilla/ezhil.git | |||||
git clone https://github.com/knadh/hugo-ink.git | |||||
``` | ``` | ||||
For more information read the [official setup guide](https://gohugo.io/overview/installing/) of Hugo. | For more information read the [official setup guide](https://gohugo.io/overview/installing/) of Hugo. | ||||
## Configuration | |||||
```toml | |||||
baseURL = "http://example.org/" | |||||
languageCode = "en-us" | |||||
title = "My personal blog" | |||||
theme = "ezhil" | |||||
copyright = "© Copyright notice" | |||||
# Enable syntax highlighting. | |||||
pygmentsstyle = "vs" | |||||
pygmentscodefences = true | |||||
pygmentscodefencesguesssyntax = true | |||||
# Your Google analytics code. | |||||
googleAnalytics = "UA-123-45" | |||||
# Your Disqus sortname. | |||||
disqusShortname = "localhost" | |||||
# Number of posts to show in recent posts list (Optional). Defaults to 10. | |||||
paginate = 10 | |||||
[params] | |||||
# Blog subtitle which appears below blog title. Supports markdown. | |||||
subtitle = "Clean and minimal personal [blog theme for Hugo](https://github.com/vividvilla/ezhil)" | |||||
# Content types which are included in home page recent posts list. | |||||
mainSections = ["posts"] | |||||
# Content types which are excludes Disqus comments. | |||||
disableDisqusTypes = ["page"] | |||||
# If social media links are enabled then enable this to fetch icons from CDN instead of hosted on your site. | |||||
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" | |||||
# Custom CSS added to default styles. Files added to `static` folder is copied as it is to | |||||
# root by Hugo. For example if you have custom CSS file under `static/css/custom.css` then | |||||
# you can specify custom css path as `css/custom.css`. | |||||
customCSS = "css/custom.css" | |||||
# Custom CSS added to dark mode style. | |||||
customDarkCSS = "css/custom-dark.css" | |||||
# Custom list of Javascript files to load. Just like custom CSS you can place js files under | |||||
# `static/js` folder and specify path here as `js/script-name.js`. | |||||
customJS = ["js/abc.js", "js/xyz.js"] | |||||
# Main menu which appears below site header. | |||||
[[menu.main]] | |||||
name = "Home" | |||||
url = "/" | |||||
weight = 1 | |||||
[[menu.main]] | |||||
name = "All posts" | |||||
url = "/posts" | |||||
weight = 2 | |||||
[[menu.main]] | |||||
name = "About" | |||||
url = "/about" | |||||
weight = 3 | |||||
[[menu.main]] | |||||
name = "Tags" | |||||
url = "/tags" | |||||
weight = 4 | |||||
# Social media links which shows up on site header. | |||||
# Uses feather icons for icons. You can [search icon names from here](https://feathericons.com/). | |||||
[[params.social]] | |||||
name = "Github" | |||||
icon = "github" | |||||
url = "https://github.com/vividvilla/ezhil" | |||||
[[params.social]] | |||||
name = "Twitter" | |||||
icon = "twitter" | |||||
url = "https://twitter.com/gohugoio" | |||||
# Enable tags. | |||||
[taxonomies] | |||||
tag = "tags" | |||||
``` | |||||
## Content type | ## Content type | ||||
This is some static page where you can write about yourself. | This is some static page where you can write about yourself. | ||||
``` | ``` | ||||
## Disable Disqus | |||||
You can disable Disqus from contents selectively or for all contents with certain content type. Use content field `disqus` to disable Disqus from certain contents. | |||||
```md | |||||
--- | |||||
title: "Content without comments" | |||||
date: 2019-04-19T21:37:58+05:30 | |||||
disqus: false | |||||
--- | |||||
This is a content without Disqus comments. | |||||
``` | |||||
You can also disable Disqus for certain content types by using site param `disableDisqusTypes`. You can check config section above for example. | |||||
## Credits | ## Credits | ||||
* [Feather Icons](https://feathericons.com/) | |||||
* [Zen habits](https://zenhabits.net/) for demo content | |||||
* [Ezhil theme](https://github.com/vividvilla/ezhil) from which Ink was forked | |||||
Licensed under the MIT license. |
baseURL = "http://example.org/" | baseURL = "http://example.org/" | ||||
languageCode = "en-us" | languageCode = "en-us" | ||||
title = "Ezhil" | |||||
theme = "ezhil" | |||||
title = "Ink" | |||||
theme = "ink" | |||||
paginate = 5 | paginate = 5 | ||||
copyright = "© Copyright notice" | copyright = "© Copyright notice" | ||||
pygmentscodefencesguesssyntax = true | pygmentscodefencesguesssyntax = true | ||||
googleAnalytics = "UA-123-45" | googleAnalytics = "UA-123-45" | ||||
disqusShortname = "ezhil-demo" | |||||
disqusShortname = "ink-demo" | |||||
[params] | [params] | ||||
subtitle = "Clean and minimal personal [blog theme for Hugo](https://github.com/vividvilla/ezhil)" | |||||
subtitle = "Crisp, minimal personal [blog theme for Hugo](https://github.com/knadh/hugo-ink)" | |||||
# Optional 64x64 avatar image. | |||||
avatar = "https://image.freepik.com/free-vector/young-man-head-with-beard-avatar-character_24877-36786.jpg" | |||||
# Content types to disable Disqus on. | |||||
disableDisqusTypes = ["page"] | disableDisqusTypes = ["page"] | ||||
featherIconsCDN = true | featherIconsCDN = true | ||||
mode = "auto" # "dark" or "auto" | |||||
mode = "dark" # "dark" or "auto" | |||||
# customCSS = "css/custom.css" # Custom CSS applied to default styles. | # customCSS = "css/custom.css" # Custom CSS applied to default styles. | ||||
# customDarkCSS = "css/custom-dark.css" # Custom styles applied to dark mode css. | # customDarkCSS = "css/custom-dark.css" # Custom styles applied to dark mode css. | ||||
# customJS = ["js/custom.js", "js/custom1.js"] # Custom JS scripts. | # customJS = ["js/custom.js", "js/custom1.js"] # Custom JS scripts. | ||||
# Nav. | |||||
[[menu.main]] | [[menu.main]] | ||||
name = "Home" | name = "Home" | ||||
url = "/" | url = "/" | ||||
[[params.social]] | [[params.social]] | ||||
name = "Github" | name = "Github" | ||||
icon = "github" | icon = "github" | ||||
url = "https://github.com/vividvilla/ezhil" | |||||
url = "https://github.com/knadh/ink" | |||||
[[params.social]] | [[params.social]] | ||||
name = "RSS" | name = "RSS" |
--- | --- | ||||
title: "How to test dark mode?" | 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." | |||||
description: "Here is how you can setup dark mode for Ink and test on various OS like iOS, Android, macOS and Windows 10." | |||||
date: 2018-03-18T12:13:38+05:30 | 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) | |||||
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/knadh/hugo-ink#configuration) | |||||
Here is how you can switch based on your OS | Here is how you can switch based on your OS | ||||
{{ partial "head.html" . }} | {{ partial "head.html" . }} | ||||
{{ if isset .Data "Term" }} | {{ if isset .Data "Term" }} | ||||
<h1>Entries tagged - "{{ .Data.Term }}"</h1> | |||||
<h2>{{ .Data.Term }}</h2> | |||||
{{ else }} | {{ else }} | ||||
<h1 class="page-title">All articles</h1> | |||||
<h2 class="page-title">All posts</h2> | |||||
{{ end }} | {{ end }} | ||||
<ul class="posts"> | |||||
<ul class="posts flat"> | |||||
{{- range .Data.Pages -}} | {{- range .Data.Pages -}} | ||||
{{- if (in (.Site.Params.excludedTypes | default (slice "page")) .Type) -}} | {{- if (in (.Site.Params.excludedTypes | default (slice "page")) .Type) -}} | ||||
{{- else -}} | {{- else -}} | ||||
<li class="post"> | <li class="post"> | ||||
<a href="{{ .RelPermalink }}">{{.Title}}</a> <span class="meta">{{ dateFormat "Jan 2, 2006" .Date }}{{ if .Draft }} <span class="draft-label">DRAFT</span> {{ end }}</span> | |||||
<div class="post-header"> | |||||
<div class="meta"> | |||||
<div class="date"> | |||||
<span class="day">{{ dateFormat "02" .Date }}</span> | |||||
<span class="rest">{{ dateFormat "Jan 2006" .Date }}</span> | |||||
</div> | |||||
</div> | |||||
<div class="matter"> | |||||
<h4 class="title small"> | |||||
<a href="{{ .RelPermalink }}">{{.Title}}{{ if .Draft }}<sup class="draft-label">DRAFT</sup>{{ end }}</a> | |||||
</h4> | |||||
<span class="description"> | |||||
{{ if isset .Params "description" }} | |||||
{{ .Description }} | |||||
{{ else if gt (len .RawContent) 120 }} | |||||
{{ slicestr .RawContent 0 120 }}... | |||||
{{ else }} | |||||
{{ .RawContent }} | |||||
{{ end }} | |||||
</span> | |||||
</div> | |||||
</div> | |||||
</li> | </li> | ||||
{{- end -}} | {{- end -}} | ||||
{{- end -}} | {{- end -}} |
<html> | <html> | ||||
{{ partial "header.html" . }} | {{ partial "header.html" . }} | ||||
<body> | <body> | ||||
<div class="container wrapper post"> | |||||
<div class="container wrapper"> | |||||
{{ partial "head.html" . }} | {{ partial "head.html" . }} | ||||
<div class="post-header"> | |||||
<h1 class="title">{{ .Title }}</h1> | |||||
<div class="meta">Posted at — {{ dateFormat "Jan 2, 2006" .Date }}{{ if .Draft }} <span class="draft-label">DRAFT</span> {{ end }}</div> | |||||
</div> | |||||
<div class="markdown"> | |||||
{{ .Content }} | |||||
</div> | |||||
<div class="post"> | |||||
<div class="post-header"> | |||||
{{ if ne .Date.Year 1 }} | |||||
<div class="meta"> | |||||
<div class="date"> | |||||
<span class="day">{{ dateFormat "02" .Date }}</span> | |||||
<span class="rest">{{ dateFormat "Jan 2006" .Date }}</span> | |||||
</div> | |||||
</div> | |||||
{{ end }} | |||||
<div class="matter"> | |||||
<h1 class="title">{{ .Title }}</h1> | |||||
</div> | |||||
</div> | |||||
<div class="markdown"> | |||||
{{ .Content }} | |||||
</div> | |||||
<div class="post-tags"> | |||||
{{ if ne .Type "page" }} | |||||
{{ if gt .Params.tags 0 }} | |||||
<nav class="nav tags"> | |||||
<ul class="flat"> | |||||
{{ range .Params.tags }} | |||||
<li><a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a></li> | |||||
{{ end }} | |||||
</ul> | |||||
</nav> | |||||
<div class="tags"> | |||||
{{ if ne .Type "page" }} | |||||
{{ if gt .Params.tags 0 }} | |||||
<ul class="flat"> | |||||
{{ range .Params.tags }} | |||||
<li><a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a></li> | |||||
{{ end }} | |||||
</ul> | |||||
{{ end }} | |||||
{{ end }} | {{ end }} | ||||
{{ end }} | |||||
</div> | |||||
</div> | |||||
{{- $.Scratch.Set "isDisqus" true -}} | |||||
{{- $.Scratch.Set "isDisqus" true -}} | |||||
{{- if and (isset .Params "type") (in .Site.Params.disableDisqusTypes .Params.type) -}} | |||||
{{- $.Scratch.Set "isDisqus" false -}} | |||||
{{- end -}} | |||||
{{- if and (isset .Params "type") (in .Site.Params.disableDisqusTypes .Params.type) -}} | |||||
{{- $.Scratch.Set "isDisqus" false -}} | |||||
{{- end -}} | |||||
{{- if and (isset .Params "disqus") (eq .Params.disqus false) -}} | |||||
{{- $.Scratch.Set "isDisqus" false -}} | |||||
{{- else if and (isset .Params "disqus") (eq .Params.disqus true) -}} | |||||
{{- $.Scratch.Set "isDisqus" true -}} | |||||
{{- end -}} | |||||
{{- if and (isset .Params "disqus") (eq .Params.disqus false) -}} | |||||
{{- $.Scratch.Set "isDisqus" false -}} | |||||
{{- else if and (isset .Params "disqus") (eq .Params.disqus true) -}} | |||||
{{- $.Scratch.Set "isDisqus" true -}} | |||||
{{- end -}} | |||||
{{- if eq ($.Scratch.Get "isDisqus") true -}} | |||||
{{- partial "disqus.html" . -}} | |||||
{{- end -}} | |||||
{{- if eq ($.Scratch.Get "isDisqus") true -}} | |||||
{{- partial "disqus.html" . -}} | |||||
{{- end -}} | |||||
</div> | |||||
</div> | </div> | ||||
{{ partial "footer.html" . }} | {{ partial "footer.html" . }} | ||||
</body> | </body> |
{{ range $key, $value := .Data.Terms.ByCount }} | {{ range $key, $value := .Data.Terms.ByCount }} | ||||
{{ $size := (add (mul (div $value.Count $biggest) (sub $max $min)) $min) }} | {{ $size := (add (mul (div $value.Count $biggest) (sub $max $min)) $min) }} | ||||
{{ $size := (cond (eq $biggest $smallest) $min $size) }} | {{ $size := (cond (eq $biggest $smallest) $min $size) }} | ||||
<a style="font-size: {{ $size }}rem;" href="{{ $.Site.LanguagePrefix | absURL }}{{ $data.Plural }}/{{ $value.Name | urlize }}/">{{ $value.Name }}</a> | |||||
<a style="font-size: {{ $size }}rem;" href="{{ $.Site.LanguagePrefix | absURL }}{{ $data.Plural }}/{{ $value.Name | urlize }}/">{{ $value.Name }}<sup>{{ $value.Count }}</sup></a> | |||||
{{ end }} | {{ end }} | ||||
</div> | </div> | ||||
</div> | </div> |
{{ partial "head.html" . }} | {{ partial "head.html" . }} | ||||
<div class="recent-posts section"> | <div class="recent-posts section"> | ||||
<h2 class="section-header"> | |||||
Recent posts | |||||
</h2> | |||||
<div class="posts"> | <div class="posts"> | ||||
{{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }} | {{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }} | ||||
{{ $paginator := .Paginate (where $pages "Params.hidden" "ne" true) }} | {{ $paginator := .Paginate (where $pages "Params.hidden" "ne" true) }} | ||||
{{ range $paginator.Pages }} | {{ range $paginator.Pages }} | ||||
<div class="post"> | |||||
<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> — | |||||
<span class="description"> | |||||
{{ if isset .Params "description" }} | |||||
{{ .Description }} | |||||
{{ else if gt (len .RawContent) 120 }} | |||||
{{ slicestr .RawContent 0 120 }}... | |||||
{{ else }} | |||||
{{ .RawContent }} | |||||
{{ end }} | |||||
</span> | |||||
</div> | |||||
<div class="post"> | |||||
<div class="post-header"> | |||||
<div class="meta"> | |||||
<div class="date"> | |||||
<span class="day">{{ dateFormat "02" .Date }}</span> | |||||
<span class="rest">{{ dateFormat "Jan 2006" .Date }}</span> | |||||
</div> | |||||
</div> | |||||
<div class="matter"> | |||||
<h4 class="title small"> | |||||
<a href="{{ .RelPermalink }}">{{.Title}}{{ if .Draft }}<sup class="draft-label">DRAFT</sup>{{ end }}</a> | |||||
</h4> | |||||
<span class="description"> | |||||
{{ if isset .Params "description" }} | |||||
{{ .Description }} | |||||
{{ else if gt (len .RawContent) 120 }} | |||||
{{ slicestr .RawContent 0 120 }}... | |||||
{{ else }} | |||||
{{ .RawContent }} | |||||
{{ end }} | |||||
</span> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
{{ end }} | {{ end }} | ||||
{{ template "partials/paginator.html" . }} | {{ template "partials/paginator.html" . }} | ||||
</div> | </div> |
<div class="footer wrapper"> | <div class="footer wrapper"> | ||||
<nav class="nav"> | <nav class="nav"> | ||||
<div>{{ with .Site.Copyright }} {{ . }} | {{ end }} <a href="https://github.com/vividvilla/ezhil">Ezhil theme</a> | Built with <a href="https://gohugo.io">Hugo</a></div> | |||||
<div>{{ with .Site.Copyright }} {{ . }} | {{ end }} <a href="https://github.com/knadh/hugo-ink">Ink</a> theme on <a href="https://gohugo.io">Hugo</a></div> | |||||
</nav> | </nav> | ||||
</div> | </div> | ||||
<div class="header"> | <div class="header"> | ||||
{{ if .Site.Params.Avatar }} | |||||
<div class="avatar"> | |||||
<a href="{{ .Site.BaseURL }}"> | |||||
<img src="{{ .Site.Params.Avatar }}" alt="{{ .Site.Title }}" /> | |||||
</a> | |||||
</div> | |||||
{{ end }} | |||||
<h1 class="site-title"><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1> | <h1 class="site-title"><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1> | ||||
<div class="site-description"> | <div class="site-description"> | ||||
{{- if isset .Site.Params "subtitle" -}} | {{- if isset .Site.Params "subtitle" -}} | ||||
<h2>{{ .Site.Params.Subtitle | markdownify }}</h2> | |||||
<p>{{ .Site.Params.Subtitle | markdownify }}</p> | |||||
{{- end -}} | {{- end -}} | ||||
<nav class="nav social"> | <nav class="nav social"> | ||||
<ul class="flat"> | <ul class="flat"> | ||||
{{- range $index, $key := .Site.Params.Social -}} | {{- range $index, $key := .Site.Params.Social -}} | ||||
<a href="{{ $key.url }}" title="{{ $key.name }}"><i data-feather="{{ $key.icon }}"></i></a> | |||||
<li><a href="{{ $key.url }}" title="{{ $key.name }}"><i data-feather="{{ $key.icon }}"></i></a></li> | |||||
{{- end -}} | {{- end -}} | ||||
</ul> | </ul> | ||||
</nav> | </nav> |
{{- $title := ( .Title ) -}} | {{- $title := ( .Title ) -}} | ||||
{{- $siteTitle := ( .Site.Title ) -}} | {{- $siteTitle := ( .Site.Title ) -}} | ||||
{{- if .IsHome -}} | {{- if .IsHome -}} | ||||
<title>{{ $siteTitle }} {{ if isset .Site.Params "subtitle" }}- {{ .Site.Params.Subtitle }}{{ end }} </title> | |||||
<title>{{ $siteTitle }} {{ if isset .Site.Params "subtitle" }}- {{ .Site.Params.Subtitle }}{{ end }} </title> | |||||
{{- else -}} | {{- else -}} | ||||
<title>{{ $title }} - {{ $siteTitle }}</title> | |||||
<title>{{ $title }} - {{ $siteTitle }}</title> | |||||
{{- end -}} | {{- end -}} | ||||
{{- if isset .Site.Params "favicon" -}} | {{- if isset .Site.Params "favicon" -}} | ||||
<link rel="icon" type="image/png" href={{ .Site.Params.favicon }} /> | |||||
<link rel="icon" type="image/png" href={{ .Site.Params.favicon }} /> | |||||
{{- end -}} | {{- end -}} | ||||
<meta name="viewport" content="width=device-width, initial-scale=1"> | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||||
{{ with .OutputFormats.Get "rss" -}} | {{ with .OutputFormats.Get "rss" -}} | ||||
{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} | |||||
{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} | |||||
{{ end -}} | {{ end -}} | ||||
{{- template "_internal/opengraph.html" . -}} | {{- template "_internal/opengraph.html" . -}} | ||||
{{- template "_internal/twitter_cards.html" . -}} | {{- template "_internal/twitter_cards.html" . -}} | ||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,300italic,400italic|Raleway:200,300" rel="stylesheet"> | |||||
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:700' rel='stylesheet' type='text/css'> | |||||
<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/normalize.css" /> | ||||
<link rel="stylesheet" type="text/css" media="screen" href="{{ .Site.BaseURL }}css/main.css" /> | <link rel="stylesheet" type="text/css" media="screen" href="{{ .Site.BaseURL }}css/main.css" /> | ||||
{{- if isset .Site.Params "customcss" }} | {{- if isset .Site.Params "customcss" }} | ||||
<link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}{{ .Site.Params.customCSS }}" /> | |||||
<link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}{{ .Site.Params.customCSS }}" /> | |||||
{{ end }} | {{ end }} | ||||
{{- if or (eq .Site.Params.mode "auto") (eq .Site.Params.mode "dark") -}} | {{- 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 }} /> | |||||
{{- if isset .Site.Params "customdarkcss" }} | |||||
<link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}{{ .Site.Params.customDarkCSS }}" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} /> | |||||
{{- end }} | |||||
<link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/dark.css" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} /> | |||||
{{- if isset .Site.Params "customdarkcss" }} | |||||
<link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}{{ .Site.Params.customDarkCSS }}" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} /> | |||||
{{- end }} | |||||
{{- end }} | {{- end }} | ||||
{{ if and (isset .Site.Params "social") (isset .Site.Params "feathericonscdn") (eq .Site.Params.featherIconsCDN true) -}} | {{ 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> | |||||
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |||||
{{- else if (isset .Site.Params "social") -}} | {{- else if (isset .Site.Params "social") -}} | ||||
<script src="{{ .Site.BaseURL }}js/feather.min.js"></script> | |||||
<script src="{{ .Site.BaseURL }}js/feather.min.js"></script> | |||||
{{ end }} | {{ end }} | ||||
<script src="{{ .Site.BaseURL }}js/main.js"></script> | |||||
<script src="{{ .Site.BaseURL }}js/main.js"></script> | |||||
{{- if isset .Site.Params "customjs" -}} | {{- if isset .Site.Params "customjs" -}} | ||||
{{- range .Site.Params.customJS }} | |||||
<script src="{{ $.Site.BaseURL }}{{ . }}"></script> | |||||
{{- end }} | |||||
{{- range .Site.Params.customJS }}<script src="{{ $.Site.BaseURL }}{{ . }}"></script>{{- end }} | |||||
{{- end }} | {{- end }} | ||||
</head> | </head> |
} | } | ||||
::-moz-selection { | ::-moz-selection { | ||||
background: #666; | |||||
background: #9375fd; | |||||
color: #fff; | |||||
text-shadow: none | text-shadow: none | ||||
} | } | ||||
::selection { | ::selection { | ||||
background: #666; | |||||
background: #9375fd; | |||||
color: #fff; | |||||
text-shadow: none | text-shadow: none | ||||
} | } | ||||
} | } | ||||
a,a:hover { | a,a:hover { | ||||
color: #ff7979; | |||||
color: #9375fd; | |||||
text-decoration: none; | text-decoration: none; | ||||
} | } | ||||
@font-face { | |||||
font-family: 'Inter'; | |||||
font-display: auto; | |||||
font-style: normal; | |||||
font-weight: 400; | |||||
src: url("https://rsms.me/inter/font-files/Inter-Regular.woff2") format("woff2"), | |||||
url("https://rsms.me/inter/font-files/Inter-Regular.woff") format("woff"); | |||||
} | |||||
@font-face { | |||||
font-family: 'Inter'; | |||||
font-display: auto; | |||||
font-style: normal; | |||||
font-weight: 500; | |||||
src: url("https://rsms.me/inter/font-files/Inter-Medium.woff2") format("woff2"), | |||||
url("https://rsms.me/inter/font-files/Inter-Medium.woff") format("woff"); | |||||
} | |||||
body { | body { | ||||
font-family: "ubuntu", sans-serif; | |||||
font-family: "Inter", sans-serif; | |||||
font-weight: 400; | font-weight: 400; | ||||
color: #333; | color: #333; | ||||
line-height: 1.6; | |||||
font-size: 16px; | |||||
line-height: 1.8em; | |||||
font-size: 17px; | |||||
} | } | ||||
a, a:hover { | |||||
color: #a00; | |||||
a { | |||||
color: #3700ff; | |||||
text-decoration: none; | text-decoration: none; | ||||
word-break: break-word; | word-break: break-word; | ||||
} | } | ||||
a:hover { | |||||
border-bottom: 2px solid #3700ff; | |||||
} | |||||
html,button,input,select,textarea { | html,button,input,select,textarea { | ||||
color: #333; | color: #333; | ||||
} | } | ||||
::-moz-selection { | ::-moz-selection { | ||||
background: #b3d4fc; | |||||
background: #3700ff; | |||||
text-shadow: none; | text-shadow: none; | ||||
color: #fff; | |||||
} | } | ||||
::selection { | ::selection { | ||||
background: #b3d4fc; | |||||
background: #3700ff; | |||||
text-shadow: none; | text-shadow: none; | ||||
color: #fff; | |||||
} | } | ||||
hr { | hr { | ||||
font-size: 1.4rem; | font-size: 1.4rem; | ||||
font-family: Georgia,bitstream charter,serif; | font-family: Georgia,bitstream charter,serif; | ||||
border-left: 3px solid; | border-left: 3px solid; | ||||
border-color: #a00; | |||||
border-color: #3700ff; | |||||
padding-left: 20px; | padding-left: 20px; | ||||
} | } | ||||
font-weight: 600; | font-weight: 600; | ||||
} | } | ||||
a,a:hover { | |||||
color: #a00; | |||||
text-decoration: none | |||||
} | |||||
a:hover { | |||||
text-decoration: underline | |||||
} | |||||
h1,h2,h3,h4,h5,h6 { | |||||
font-family: raleway,sans-serif; | |||||
line-height: 1.2; | |||||
h1, h2, h3, h4, h5, h6 { | |||||
color: #333; | color: #333; | ||||
font-weight: 200; | |||||
font-weight: 500; | |||||
line-height: 1.3em; | |||||
margin: 30px 0 20px 0; | |||||
} | } | ||||
h1 { | h1 { | ||||
text-align: right; | text-align: right; | ||||
} | } | ||||
.container { | |||||
max-width: 800px; | |||||
} | |||||
ul { | ul { | ||||
padding-left: 15px; | padding-left: 15px; | ||||
} | } | ||||
min-height: .1rem | min-height: .1rem | ||||
} | } | ||||
.page-title { | |||||
margin: 0; | |||||
} | |||||
.smaller { | .smaller { | ||||
font-size: 70%; | font-size: 70%; | ||||
} | } | ||||
list-style: disc inside; | list-style: disc inside; | ||||
} | } | ||||
.site-title a { | |||||
color: #333; | |||||
text-decoration: none !important; | |||||
} | |||||
.post ul li { | .post ul li { | ||||
margin-bottom: 10px; | margin-bottom: 10px; | ||||
} | } | ||||
} | } | ||||
.container { | .container { | ||||
max-width: 800px; | |||||
margin-top: 50px; | margin-top: 50px; | ||||
} | } | ||||
padding-bottom: 20px; | padding-bottom: 20px; | ||||
} | } | ||||
.header h1, | |||||
.header h2 { | |||||
margin: 0; | |||||
padding: 0; | |||||
font-size: 2rem; | |||||
line-height: 1.3em; | |||||
.header .avatar { | |||||
float: left; | |||||
margin: -25px 20px 0 0; | |||||
} | |||||
.header .avatar img { | |||||
width: 64px; | |||||
height: 64px; | |||||
overflow: hidden; | |||||
border-radius: 100%; | |||||
} | |||||
.header .site-title { | |||||
margin: 0 0 10px 0; | |||||
line-height: 0.2em; | |||||
} | } | ||||
.site-title a { | |||||
color: #333; | |||||
text-decoration: none !important; | |||||
} | |||||
.site-title a:hover { | |||||
border-bottom-width: 3px; | |||||
} | |||||
.header h2 { | |||||
font-size: 1.125rem; | |||||
.header .site-description { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
} | } | ||||
.header nav { | .header nav { | ||||
margin-top: 20px; | |||||
border-top: 1px solid #f4f4f4; | |||||
border-top: 1px solid #eee; | |||||
padding-top: 15px; | |||||
} | } | ||||
.header nav ul, | .header nav ul, | ||||
.header nav li { | .header nav li { | ||||
margin: 0; | margin: 0; | ||||
} | |||||
.header nav ul.flat { | |||||
padding: 0; | padding: 0; | ||||
} | } | ||||
.header nav ul.flat li { | |||||
.header nav li { | |||||
display: inline-block; | display: inline-block; | ||||
list-style: none; | list-style: none; | ||||
margin-left: 0; | |||||
margin-right: 10px; | |||||
margin-top: 10px; | |||||
text-transform: capitalize; | |||||
} | |||||
.header .site-description { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
margin: 0 30px 0 0; | |||||
} | } | ||||
.header nav.social a { | |||||
color: #333; | |||||
} | |||||
.header nav.social a:hover { | |||||
color: #3700ff; | |||||
} | |||||
.header .site-description nav { | .header .site-description nav { | ||||
margin: 0; | margin: 0; | ||||
} | } | ||||
.recent-posts .posts .post { | .recent-posts .posts .post { | ||||
margin-bottom: 30px; | |||||
margin-bottom: 45px; | |||||
} | } | ||||
.recent-posts .posts .post .meta, | |||||
.post .post-header .meta, | |||||
.list .posts .post .meta { | |||||
font-size: 0.725rem; | |||||
color: #999; | |||||
margin-bottom: 4px; | |||||
.post-header { | |||||
display: flex; | |||||
} | } | ||||
.post .post-header { | |||||
margin-bottom: 30px; | |||||
.post-header .meta .date { | |||||
margin-right: 30px; | |||||
width: 64px; | |||||
text-align: center; | |||||
} | } | ||||
.post .post-header .title { | |||||
margin: 0; | |||||
.post-header .meta .date .day { | |||||
font-family: "Playfair Display", serif; | |||||
font-weight: 700; | |||||
line-height: 0.45em; | |||||
font-size: 3em; | |||||
display: block; | |||||
margin-bottom: 20px; | |||||
} | } | ||||
.post-tags a { | |||||
margin-right: 5px; | |||||
.post-header .meta .date .rest { | |||||
display: block; | |||||
font-size: 0.75em; | |||||
} | |||||
.post-header h1.title { | |||||
margin: -10px 0 0 0; | |||||
} | } | ||||
.post .post-header .meta { | |||||
padding-left: 5px; | |||||
margin-top: 10px; | |||||
.post .title.small { | |||||
margin: 0 0 10px 0; | |||||
} | |||||
.post .post-header { | |||||
margin-bottom: 30px; | |||||
} | } | ||||
.post .draft-label { | .post .draft-label { | ||||
color: #a00; | |||||
color: #3700ff; | |||||
text-decoration: none; | text-decoration: none; | ||||
padding: 2px 4px; | padding: 2px 4px; | ||||
border-radius: 4px; | border-radius: 4px; | ||||
background-color: #f9f2f4; | background-color: #f9f2f4; | ||||
} | } | ||||
.post-tags .tags li { | |||||
margin-bottom: 0; | |||||
margin-top: 20px; | |||||
} | |||||
.post-tags .tags a { | |||||
.post .tags a { | |||||
display: inline-block; | display: inline-block; | ||||
border: 1px solid #a00; | |||||
border-radius: 4px; | |||||
border: 1px solid #3700ff; | |||||
border-radius: 3px; | |||||
padding: 0px 6px; | padding: 0px 6px; | ||||
color: #a00; | |||||
color: #3700ff; | |||||
line-height: 20px; | line-height: 20px; | ||||
font-size: 12px; | |||||
font-size: 0.85em; | |||||
text-decoration: none; | text-decoration: none; | ||||
margin: 0 1px; | |||||
margin: 0 10px 0 0; | |||||
} | } | ||||
.list .posts .post .meta { | |||||
.list .posts .post-header .meta { | |||||
margin-bottom: 0; | margin-bottom: 0; | ||||
margin-left: 5px; | margin-left: 5px; | ||||
} | } | ||||
font-size: 0.75em; | font-size: 0.75em; | ||||
color: #999; | color: #999; | ||||
border-top: 1px solid #f4f4f4; | border-top: 1px solid #f4f4f4; | ||||
padding: 20px 0; | |||||
margin-top: 40px; | margin-top: 40px; | ||||
padding: 15px 0; | |||||
} | } | ||||
.page-title { | |||||
margin-bottom: 0; | |||||
} | |||||
.footer a { | |||||
color: #666; | |||||
} | |||||
.footer a:hover { | |||||
color: #3700ff; | |||||
} | |||||
.tag-cloud { | .tag-cloud { | ||||
margin-top: 20px; | margin-top: 20px; | ||||
.container { | .container { | ||||
margin-top: 10px; | margin-top: 10px; | ||||
} | } | ||||
.header .nav.social li { | |||||
margin: 0; | |||||
} | |||||
.header .nav li { | |||||
margin: 0 10px 0 0; | |||||
font-size: 14px; | |||||
} | |||||
} | } |
# theme.toml template for a Hugo theme | # theme.toml template for a Hugo theme | ||||
# See https://github.com/gohugoio/hugoThemes#themetoml for an example | # See https://github.com/gohugoio/hugoThemes#themetoml for an example | ||||
name = "Ezhil" | |||||
name = "Ink" | |||||
license = "MIT" | 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" | |||||
licenselink = "https://github.com/knadh/ink/blob/master/LICENSE.md" | |||||
description = "Crisp, minimal personal website and blog theme Hugo." | |||||
homepage = "https://github.com/knadh/ink" | |||||
tags = ["minimal", "clean", "blog", "responsive", "personal", "simple", "minimalist", "portfolio", "dark"] | tags = ["minimal", "clean", "blog", "responsive", "personal", "simple", "minimalist", "portfolio", "dark"] | ||||
features = ["blog", "Clean and minimal", "Responsive", "Social media links", "Syntax highlighting"] | |||||
features = ["blog", "Clean and minimal", "Responsive", "Social media links", "Syntax highlighting", "Dark mode"] | |||||
min_version = "0.37.0" | min_version = "0.37.0" | ||||
[author] | [author] | ||||
name = "Vivek R" | |||||
homepage = "https://vivekr.net" | |||||
name = "Kailash Nadh" | |||||
homepage = "https://nadh.in" |