From 0683be2044095a011cf15d05e415ca1c68f6d5eb Mon Sep 17 00:00:00 2001 From: Shivan Sivakumaran <51132467+shivan-s@users.noreply.github.com> Date: Sat, 19 Oct 2024 00:26:25 +1300 Subject: [PATCH] Improves the header of the main page (#6) --- archetypes/default.md | 4 +- assets/css/main.css | 146 +++++++++++++++++++++++------- content/_index.md | 9 -- hugo.toml | 23 ----- hugo.yml | 30 ++++++ layouts/_default/baseof.html | 15 ++- layouts/_default/home.html | 19 ++-- layouts/_default/list.html | 11 +-- layouts/_default/single.html | 13 ++- layouts/partials/breadcrumbs.html | 8 ++ layouts/partials/footer.html | 13 ++- layouts/partials/header.html | 8 +- layouts/partials/menu.html | 59 ++++++------ theme.toml | 31 ------- theme.yml | 21 +++++ 15 files changed, 250 insertions(+), 160 deletions(-) delete mode 100644 content/_index.md delete mode 100644 hugo.toml create mode 100644 hugo.yml create mode 100644 layouts/partials/breadcrumbs.html delete mode 100644 theme.toml create mode 100644 theme.yml diff --git a/archetypes/default.md b/archetypes/default.md index c6f3fce..2120614 100644 --- a/archetypes/default.md +++ b/archetypes/default.md @@ -1,5 +1,5 @@ -+++ +--- title = '{{ replace .File.ContentBaseName "-" " " | title }}' date = {{ .Date }} draft = true -+++ +--- diff --git a/assets/css/main.css b/assets/css/main.css index e0cc053..602aa38 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,67 +1,151 @@ :root { + /* Colors */ --primary-color: #196680; --secondary-color: #80dfff; --alternative-color: #ff9b33; --text-color: #222222; + + /* Spacing */ + --small-gap: 0.5rem; + --gap: 1rem; + --variable-gap: calc(8px + 1.5625vw); } -a { - color: var(--primary-color); +* { + transition: all 0.3s ease-in-out; } -.dark a { - color: var(--secondary-color); +h1, +h2 { + font-family: + Optician Sans, + sans-serif; } -a:hover { - color: var(--alternative-color); +header, +footer { + font-family: + Optician Sans, + sans-serif; } -h1, -h2, -h3 { +header nav { + display: flex; + flex-direction: column; + align-items: center; +} + +header nav a { + display: flex; + flex-grow: 1; + justify-content: center; +} + +header nav ul { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +header nav ul:hover a:not(:hover) { + opacity: 0.8; + filter: blur(1px); +} + +header nav ul a:hover { + outline: 2px ridge var(--text-color); + filter: none; + border-radius: 4rem; + box-shadow: 0 0 0 2pt var(--text-color); +} + +header nav ul li a { + padding: 0.5rem 1rem; +} + +header nav ul li { + list-style: none; +} + +[aria-current="page"] { + outline: 2px ridge var(--text-color); + filter: none; + border-radius: 4rem; + box-shadow: 0 0 0 2pt var(--text-color); +} + +section { + border-radius: 1rem; + padding: 0rem calc(var(--gap) / 2); +} + +section.info { + display: flex; + flex-direction: column; + box-shadow: 1px 1px 1px black; + border: 1px solid var(--text-color); +} + +section.info a.more { + align-self: end; + padding: 1rem; +} + +a { color: var(--primary-color); + text-decoration: underline dotted; } -.dark h1, -.dark h2, -.dark h3 { - color: var(--secondary-color); +a:hover { + color: var(--alternative-color); + text-decoration: underline solid; } -.dark .pagination a { +h1, +h2, +h3 { color: var(--primary-color); } body { - color: #222; + display: flex; + margin: 0; + flex-direction: column; + width: 100dvw; + min-height: 100dvh; + color: var(--text-color); font-family: Monaspace Argon, sans-serif; - line-height: 1.5; - margin: 1rem; - max-width: 768px; } -header { - border-bottom: 1px solid #222; - margin-bottom: 1rem; +main { + display: flex; + flex-direction: column; + gap: var(--small-gap); + margin-left: auto; + margin-right: auto; + padding: 0 var(--variable-gap); + width: 100%; + max-width: calc(75ch + var(--variable-gap)); + flex-grow: 1; } footer { - border-top: 1px solid #222; - margin-top: 1rem; + display: flex; + align-items: center; + justify-content: center; + gap: var(--gap); } -a { - color: #00e; - text-decoration: none; +ul#breadcrumbs { + list-style: none; + display: flex; + gap: 1ch; } -h1 { - font-family: - Optician Sans, - sans-serif; +ul#breadcrumbs>li:not(:last-child)::after { + content: " /"; } @font-face { @@ -80,5 +164,5 @@ h1 { @font-face { font-family: "Monaspace Argon"; font-style: normal; - src: url("/fonts/MonaspaceArgon-Medium.woff") format("woff"); + src: url("/fonts/MonaspaceArgon-Regular.woff") format("woff"); } diff --git a/content/_index.md b/content/_index.md deleted file mode 100644 index 0e6a35a..0000000 --- a/content/_index.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: "Home" ---- - -# Hi there - -Welcome to your new Hugo site. - -Now go build something great. diff --git a/hugo.toml b/hugo.toml deleted file mode 100644 index 6c35bc4..0000000 --- a/hugo.toml +++ /dev/null @@ -1,23 +0,0 @@ -baseURL = 'https://example.org/' -languageCode = 'en-US' -title = 'My New Hugo Site' - -[[menus.main]] -name = 'Home' -pageRef = '/' -weight = 10 - -[[menus.main]] -name = 'Posts' -pageRef = '/posts' -weight = 20 - -[[menus.main]] -name = 'Tags' -pageRef = '/tags' -weight = 30 - -[module] - [module.hugoVersion] - extended = false - min = "0.116.0" diff --git a/hugo.yml b/hugo.yml new file mode 100644 index 0000000..634a5ac --- /dev/null +++ b/hugo.yml @@ -0,0 +1,30 @@ +--- +baseURL: https://example.org/ +languageCode: en-US +title: My New Hugo Site + +params: + author: + email: author@email.com + name: Author name + welcome: + title: Welcome + body: Stuff in here + image: image.webp + +menus: + main: + - name: About + pageRef: /about + weight: 10 + - name: Posts + pageRef: /posts + weight: 20 + - name: Projects + pageRef: /projects + weight: 30 + +module: + hugoVersion: + extended: false + min: "0.116.0" diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 39dcbec..b7fd44b 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,17 +1,16 @@ - + + {{ partial "head.html" . }} + -
- {{ partial "header.html" . }} -
+
{{ partial "header.html" . }}
- {{ block "main" . }}{{ end }} + {{ partial "breadcrumbs.html" . }} {{ block "main" . }}{{ end }}
- + + diff --git a/layouts/_default/home.html b/layouts/_default/home.html index 0df6597..0adaecd 100644 --- a/layouts/_default/home.html +++ b/layouts/_default/home.html @@ -1,7 +1,14 @@ -{{ define "main" }} - {{ .Content }} - {{ range site.RegularPages }} -

{{ .LinkTitle }}

- {{ .Summary }} - {{ end }} +{{ define "main" }} {{ with .GetPage "About" }} +
+

Quick Intro

+ {{ truncate 100 .Content }} + Read more... +
+{{ end }} +
+

Posts

+ {{ range where site.Pages "Section" "posts" }} +

{{ .LinkTitle }}

+ {{ .Summary }} {{ end }} +
{{ end }} diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 50fc92d..ab0d19d 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,8 +1,5 @@ {{ define "main" }} -

{{ .Title }}

- {{ .Content }} - {{ range .Pages }} -

{{ .LinkTitle }}

- {{ .Summary }} - {{ end }} -{{ end }} +

{{ .Title }}

+{{ .Content }} {{ range .Pages }} +

{{ .LinkTitle }}

+{{ .Summary }} {{ end }} {{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 7e286c8..f5d1d09 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,10 +1,9 @@ {{ define "main" }} -

{{ .Title }}

+

{{ .Title }}

- {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }} - {{ $dateHuman := .Date | time.Format ":date_long" }} - +{{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }} {{ +$dateHuman := .Date | time.Format ":date_long" }} + - {{ .Content }} - {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }} -{{ end }} +{{ .Content }} {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }} {{ +end }} diff --git a/layouts/partials/breadcrumbs.html b/layouts/partials/breadcrumbs.html new file mode 100644 index 0000000..4b35349 --- /dev/null +++ b/layouts/partials/breadcrumbs.html @@ -0,0 +1,8 @@ +{{ if gt .Ancestors.Len 0 }} + +{{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index a7cd916..9943f15 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1 +1,12 @@ -

Copyright {{ now.Year }}. All rights reserved.

+

+ Made with 💗 by + {{ .Site.Params.author.name + }} +

+

·

+

+ âš¡ by + Hugo in + +

diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 7980a00..c9cab34 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,2 +1,6 @@ -

{{ site.Title }}

-{{ partial "menu.html" (dict "menuID" "main" "page" .) }} + diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html index 7183180..e6eec0d 100644 --- a/layouts/partials/menu.html +++ b/layouts/partials/menu.html @@ -11,41 +11,34 @@ {{- $menuID := .menuID }} {{- with index site.Menus $menuID }} - + {{- end }} {{- define "partials/inline/menu/walk.html" }} - {{- $page := .page }} - {{- range .menuEntries }} - {{- $attrs := dict "href" .URL }} - {{- if $page.IsMenuCurrent .Menu . }} - {{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }} - {{- else if $page.HasMenuCurrent .Menu .}} - {{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }} - {{- end }} - {{- $name := .Name }} - {{- with .Identifier }} - {{- with T . }} - {{- $name = . }} - {{- end }} - {{- end }} -
  • - {{ $name }} - {{- with .Children }} - - {{- end }} -
    • +{{- $page := .page }} +{{- range .menuEntries }} +{{- $attrs := dict "href" .URL }} +{{- if $page.IsMenuCurrent .Menu . }} +{{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }} +{{- else if $page.HasMenuCurrent .Menu .}} +{{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }} +{{- end }} +{{- $name := .Name }} +{{- with .Identifier }} +{{- with T . }} +{{- $name = . }} +{{- end }} +{{- end }} +
  • + {{ + $name }} + {{- with .Children }} + {{- end }} +
    • +{{- end }} {{- end }} diff --git a/theme.toml b/theme.toml deleted file mode 100644 index 3ba3164..0000000 --- a/theme.toml +++ /dev/null @@ -1,31 +0,0 @@ -name = 'Theme name' -license = 'MIT' -licenselink = 'https://github.com/owner/repo/LICENSE' -description = 'Theme description' - -# The home page of the theme, where the source can be found -homepage = 'https://github.com/owner/repo' - -# If you have a running demo of the theme -demosite = 'https://owner.github.io/repo' - -# Taxonomy terms -tags = ['blog', 'company'] -features = ['some', 'awesome', 'features'] - -# If the theme has multiple authors -authors = [ - {name = 'Name of author', homepage = 'Website of author'}, - {name = 'Name of author', homepage = 'Website of author'} -] - -# If the theme has a single author -[author] - name = 'Your name' - homepage = 'Your website' - -# If porting an existing theme -[original] - author = 'Name of original author' - homepage = 'Website of original author' - repo = 'https://github.com/owner/repo' diff --git a/theme.yml b/theme.yml new file mode 100644 index 0000000..20e33e5 --- /dev/null +++ b/theme.yml @@ -0,0 +1,21 @@ +--- +name: "Optom Code" +license: "MIT" +licenselink: "https://github.com/shivan/hugo-optom-code/LICENSE" +description: "A theme for optometrists who code" +homepage: "https://github.com/shivan-s/hugo-optom-code" + +# If you have a running demo of the theme +# TODO! +demosite: "https://owner.github.io/repo" + +# Taxonomy terms +tags: + - blog + - company + +features: + +author: + name: "Shivan Sivakumaran" + homepage: "https://shivan.xyz"