diff options
| -rw-r--r-- | LICENSE | 20 | ||||
| -rw-r--r-- | archetypes/default.md | 2 | ||||
| -rw-r--r-- | hugo.toml | 1 | ||||
| -rw-r--r-- | layouts/404.html | 0 | ||||
| -rw-r--r-- | layouts/_default/baseof.html | 16 | ||||
| -rw-r--r-- | layouts/_default/list.html | 13 | ||||
| -rw-r--r-- | layouts/_default/single.html | 3 | ||||
| -rw-r--r-- | layouts/blog/list.html | 19 | ||||
| -rw-r--r-- | layouts/blog/single.html | 27 | ||||
| -rw-r--r-- | layouts/index.html | 24 | ||||
| -rw-r--r-- | layouts/partials/blog-list.html | 16 | ||||
| -rw-r--r-- | layouts/partials/blog-section-list.html | 8 | ||||
| -rw-r--r-- | layouts/partials/footer.html | 5 | ||||
| -rw-r--r-- | layouts/partials/head.html | 30 | ||||
| -rw-r--r-- | layouts/partials/header.html | 10 | ||||
| -rw-r--r-- | static/css/blog.css | 77 | ||||
| -rw-r--r-- | static/css/home.css | 75 | ||||
| -rw-r--r-- | static/css/styles.css | 93 | ||||
| -rw-r--r-- | theme.toml | 12 |
19 files changed, 451 insertions, 0 deletions
@@ -0,0 +1,20 @@ +The MIT License (MIT) + +Copyright (c) 2023 YOUR_NAME_HERE + +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 +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of +the Software, and to permit persons to whom the Software is furnished to do so, +subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS +FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR +COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER +IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN +CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/archetypes/default.md b/archetypes/default.md new file mode 100644 index 0000000..ac36e06 --- /dev/null +++ b/archetypes/default.md @@ -0,0 +1,2 @@ ++++ ++++ diff --git a/hugo.toml b/hugo.toml new file mode 100644 index 0000000..938865a --- /dev/null +++ b/hugo.toml @@ -0,0 +1 @@ +# Theme config. diff --git a/layouts/404.html b/layouts/404.html new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/layouts/404.html diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html new file mode 100644 index 0000000..9bc0b22 --- /dev/null +++ b/layouts/_default/baseof.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> + {{- partial "head.html" . -}} + <body> + {{ if ne .Kind "home" }} + <!-- don't show header on index.html --> + {{- partial "header.html" . -}} + {{ end }} + + <main id="site-{{ if eq .Kind "home" }}home{{ else }}{{ .Section }}{{ end }}-page"> + {{- block "main" . }}{{- end }} + </main> + + {{- partial "footer.html" . -}} + </body> +</html> diff --git a/layouts/_default/list.html b/layouts/_default/list.html new file mode 100644 index 0000000..5ecbbe0 --- /dev/null +++ b/layouts/_default/list.html @@ -0,0 +1,13 @@ +{{ define "main" }} + <div id="{{.Section}}-list"> + <h1>{{ if .Params.heading }}{{ .Params.heading }}{{ else }}{{ .Title }}{{ end }}</h1> + + {{ .Content }} + + {{ range (union .Sections .Pages).ByDate.Reverse }} + <p> + <a href="{{ .RelPermalink }}">{{ .Title }}</a> + </p> + {{ end }} + </div> +{{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html new file mode 100644 index 0000000..e0e8308 --- /dev/null +++ b/layouts/_default/single.html @@ -0,0 +1,3 @@ +{{ define "main" }} + {{ .Content }} +{{ end }} diff --git a/layouts/blog/list.html b/layouts/blog/list.html new file mode 100644 index 0000000..9040dea --- /dev/null +++ b/layouts/blog/list.html @@ -0,0 +1,19 @@ +{{ define "main" }} + <div id="blog-list"> + <h1> + {{ if .Params.heading }} + {{ .Params.heading }} + {{ else }} + {{ .Title }} + {{ end }} + </h1> + + {{ .Content }} + + {{ if .Sections }} + {{- partial "blog-section-list.html" . -}} + {{ else }} + {{- partial "blog-list.html" . -}} + {{ end }} + </div> +{{ end }} diff --git a/layouts/blog/single.html b/layouts/blog/single.html new file mode 100644 index 0000000..035db0a --- /dev/null +++ b/layouts/blog/single.html @@ -0,0 +1,27 @@ +{{ define "main" }} + <article id="blog-post"> + <header> + <h1>{{ .Title }}</h1> + + <div id="blog-post-details"> + <span id="date"> + Published on + {{ .Date.Format "2" }}{{ if in (slice 1 21 31) .Date.Day}}st{{ else if in (slice 2 22) .Date.Day}}nd{{ else if in (slice 3 23) .Date.Day}}rd{{ else }}th{{ end }} + {{ .Date.Format "January" }} + {{ .Date.Format "2006" }} + </span> + + <span id="reading-time"> + Approx + {{ .ReadingTime }} + minute{{ if (ne .ReadingTime 1) }}s{{ end }} + read + </span> + </div> + + <hr> + </header> + + {{ .Content }} + </article> +{{ end }} diff --git a/layouts/index.html b/layouts/index.html new file mode 100644 index 0000000..46e5188 --- /dev/null +++ b/layouts/index.html @@ -0,0 +1,24 @@ +{{ define "main" }} +<div id="home-wrapper"> + <div id="home"> + <div id="nav-wrapper"> + <div id="my-image-wrapper"> + <img id="my-image" src="{{ .Params.img }}" alt="{{ .Params.alt }}"> + </div> + + <div id="title-nav"> + <h1>{{ .Params.navTitle }}</h1> + <nav> + {{ range .Site.Params.homepageLinks }} + <a href="{{ index . 1 }}">{{ index . 0 }}</a> + {{ end }} + </nav> + </div> + </div> + + <div id="content"> + {{ .Content }} + </div> + </div> +</div> +{{ end }} diff --git a/layouts/partials/blog-list.html b/layouts/partials/blog-list.html new file mode 100644 index 0000000..c05eb84 --- /dev/null +++ b/layouts/partials/blog-list.html @@ -0,0 +1,16 @@ +{{ range (union .Sections .Pages).ByDate.Reverse }} + <div class="blog-post-wrapper"> + <a class="blog-post-anchor" href="{{ .RelPermalink }}"> + <div class="blog-post"> + <span class="date"> + {{/* .Date.Format "2" }}{{ if in (slice 1 21 31) .Date.Day}}st{{ else if in (slice 2 22) .Date.Day}}nd{{ else if in (slice 3 23) .Date.Day}}rd{{ else }}th{{ end }} {{ .Date.Format "January" */}} + {{ .Date.Format "02" }} {{ .Date.Format "Jan" }} + </span> + + <span class="title"> + {{ .Title }} + </span> + </div> + </a> + </div> +{{ end }} diff --git a/layouts/partials/blog-section-list.html b/layouts/partials/blog-section-list.html new file mode 100644 index 0000000..b475f27 --- /dev/null +++ b/layouts/partials/blog-section-list.html @@ -0,0 +1,8 @@ +{{ range .Sections.ByDate.Reverse }} + <div class="blog-section-wrapper"> + <a href="{{ .RelPermalink }}"> + <h2 class="blog-section" id="{{ .Title }}">{{ .Title }}</h2> + </a> + {{- partial "blog-list.html" . -}} + </div> +{{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html new file mode 100644 index 0000000..63ba377 --- /dev/null +++ b/layouts/partials/footer.html @@ -0,0 +1,5 @@ +<footer> + <div id="copyright"> + {{ .Site.Copyright | safeHTML }} + </div> +</footer> diff --git a/layouts/partials/head.html b/layouts/partials/head.html new file mode 100644 index 0000000..9cf7575 --- /dev/null +++ b/layouts/partials/head.html @@ -0,0 +1,30 @@ +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + <meta name="author" content={{ .Site.Author.name }}> + + <meta name="robots" content="index,follow"> + <meta name="description" content="{{ .Title }}"> + + <meta property="og:type" content="website"> + <meta property="og:title" content="{{ if .Title }}{{ .Title }}{{ else }}{{ .Site.Title }}{{ end }}"> + <meta property="og:site_name" content="{{ .Site.Title }}"> + <meta property="og:image" content="{{ .Site.Params.ogImage }}"> + <meta property="og:url" content="{{ .Permalink }}"> + + <link rel="stylesheet" type="text/css" href="/css/styles.css"> + + {{ if eq .Section "blog" }} + <link rel="stylesheet" type="text/css" href="/css/blog.css"> + {{ else }} + <link rel="stylesheet" type="text/css" href="/css/home.css"> + {{ end }} + + <title> + {{ if .Title }} + {{ .Title }} + {{ else }} + {{ .Site.Title }} + {{ end }} + </title> +</head> diff --git a/layouts/partials/header.html b/layouts/partials/header.html new file mode 100644 index 0000000..ba1869b --- /dev/null +++ b/layouts/partials/header.html @@ -0,0 +1,10 @@ +<div id="site-header"> + <nav id="global-nav"> + {{ range .Site.Params.navLinks }} + {{ $path := index . 1 }} + <a href="{{ $path }}" {{ if $.Params.navPath }}{{ $p := printf "/%s" $.Params.navPath | printf "%s" }}{{ if eq $path $p }}id="nav-link-active"{{ end }}{{ else }}{{ $p := printf "/%s" $.Section | printf "%s" }}{{ if eq $path $p }}id="nav-link-active"{{ end }}{{ end }}> + {{ index . 0 }} + </a> + {{ end }} + </nav> +</div> diff --git a/static/css/blog.css b/static/css/blog.css new file mode 100644 index 0000000..08097f0 --- /dev/null +++ b/static/css/blog.css @@ -0,0 +1,77 @@ +:root { + --blog-bg: var(--body-bg); + --blog-fg: var(--body-fg); + + --blog-date-color: #69dbd6; + + --blog-h1-fg: #bf87d0; + --blog-h2-fg: #bf87d0; + --blog-h3-fg: #ff7070; + --blog-h4-fg: #76d674; + --blog-h5-fg: #9c80f4; + --blog-h6-fg: #ef7b7a; +} + +#site-blog-page a { + text-decoration: none; +} + +#site-blog-page h1 { color: var(--blog-h1-fg); } +#site-blog-page h2 { color: var(--blog-h2-fg); } +#site-blog-page h3 { color: var(--blog-h3-fg); } +#site-blog-page h4 { color: var(--blog-h4-fg); } +#site-blog-page h5 { color: var(--blog-h5-fg); } +#site-blog-page h6 { color: var(--blog-h6-fg); } + +#blog-list .blog-post-wrapper { + padding: 0.3rem 0; +} + +#blog-list .blog-section-wrapper { + margin: 2rem 0; +} + +#blog-list .blog-section { + background-color: var(--listitem-bg1); + margin: 0; + padding: 0.5rem 0 0 0.8rem; + border-radius: 1rem 1rem 0 0; + border-bottom: 1px dotted var(--blog-date-color); +} + +#blog-list .blog-post-wrapper:nth-child(even) { + background-color: var(--listitem-bg2); +} + +#blog-list .blog-post-wrapper:nth-child(odd) { + background-color: var(--listitem-bg1); +} + +#blog-list .blog-post { + display: grid; + grid-template-columns: 4rem 1fr; + align-items: start; + padding-left: 0.8rem; +} + +#blog-list .blog-post .date { + color: var(--blog-date-color); +} + +#blog-list .blog-post .title { + color: var(--blog-fg); +} + +#blog-post header h1 { + text-align: center; +} + +#blog-post-details { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; +} + +#blog-post header hr { + color: var(--blog-h1-fg); +} diff --git a/static/css/home.css b/static/css/home.css new file mode 100644 index 0000000..a408685 --- /dev/null +++ b/static/css/home.css @@ -0,0 +1,75 @@ +#home-wrapper { + background-color: var(--home-bg); + color: var(--home-fg); + + min-height: 100vh; + overflow: hidden; + + display: flex; + justify-content: center; +} + +#home { + max-width: 1300px; + width: 95%; + + margin: auto; +} + +#home #nav-wrapper { + margin: 3rem 0; + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + gap: 3rem; +} + +#home #my-image-wrapper { + width: 20rem; + display: flex; + justify-content: center; + align-items: center; +} + +#home #my-image { + border-radius: 50%; + height: 100%; + width: 100%; +} + +#home #title-nav nav { + display: flex; + justify-content: left; + gap: 0.7rem; +} + +#home #title-nav nav a { + color: var(--home-fg); +} + +@media only screen and (max-width: 1000px) { + #home-wrapper { + display: block; + } + + #home #nav-wrapper { + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + margin: 1rem 0; + gap: 0; + } + + #home #my-image-wrapper { + width: 16rem; + max-width: 90vw; + } + + #home #title-nav nav { + justify-content: center; + flex-wrap: wrap; + } +} diff --git a/static/css/styles.css b/static/css/styles.css new file mode 100644 index 0000000..9b5a5ab --- /dev/null +++ b/static/css/styles.css @@ -0,0 +1,93 @@ +:root { + --body-bg: #1d1f21; + --body-fg: #c5c8c6; + + --selection-bg: #bf87d0; + --selection-fg: #232627; + + --nav-fg: #edafb8; + --nav-selected-fg: #232627; + --nav-selected-bg: #bf87d0; + + --link-fg: #23d19b; + + --home-bg: #56355D; + --home-fg: #ffffff; + + --listitem-bg1: #232323; + --listitem-bg2: #272727; +} + +* { + font-family: sans-serif; + box-sizing: border-box; +} + +body { + background-color: var(--body-bg); + color: var(--body-fg); + + line-height: 1.5; + + margin: 0; + padding: 0; +} + +::selection { + background: var(--selection-bg); + color: var(--selection-fg); +} + +::-moz-selection { + background: var(--selection-bg); + color: var(--selection-fg); +} + +a { + color: var(--link-fg); +} + +img { + width: 100%; +} + +main:not(#site-home-page) { + max-width: 1000px; + width: 95%; + margin: auto; +} + +#site-header { + width: 100%; + margin-top: 1rem; + display: flex; + justify-content: center; +} + +#global-nav { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 0.5rem; +} + +#global-nav a { + text-decoration: none; + color: var(--nav-fg); + padding: 0 6px; +} + +#global-nav a#nav-link-active { + background-color: var(--nav-selected-bg); + color: var(--nav-selected-fg); +} + +footer { + max-width: 95%; + margin: auto; +} + +footer #copyright { + text-align: center; + line-height: 1.1; +} diff --git a/theme.toml b/theme.toml new file mode 100644 index 0000000..63ca150 --- /dev/null +++ b/theme.toml @@ -0,0 +1,12 @@ +name = "zt-hugo" +license = "GNU General Public License Version 3" +licenselink = "https://dev.vidhukant.xyz/zt-hugo/tree/LICENSE" +description = "VidhuKant's Hugo Theme (used on vidhukant.com)" +homepage = "https://dev.vidhukant.xyz/zt-hugo" +tags = [] +features = [] +min_version = "0.116.1" + +[author] + name = "Vidhu Kant Sharma" + homepage = "https://vidhukant.com" |