Improves the header of the main page (#6)

shivan-s · Oct 18, 2024 · 0683be2 · 0683be2
1 parent ad427ed
commit 0683be2
Show file tree

Hide file tree

Showing 15 changed files with 250 additions and 160 deletions.
diff --git 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
@@ -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
diff --git a/hugo.toml b/hugo.toml
diff --git a/hugo.yml b/hugo.yml
@@ -0,0 +1,30 @@
+---
+baseURL: https://example.org/
+languageCode: en-US
+title: My New Hugo Site
+
+params:
+  author:
+    email: [email protected]
+    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
@@ -1,17 +1,16 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="{{ site.Language.LanguageCode }}" dir="{{ or site.Language.LanguageDirection `ltr` }}">
+
 <head>
   {{ partial "head.html" . }}
 </head>
+
 <body>
-  <header>
-    {{ partial "header.html" . }}
-  </header>
+  <header>{{ partial "header.html" . }}</header>
   <main>
-    {{ block "main" . }}{{ end }}
+    {{ partial "breadcrumbs.html" . }} {{ block "main" . }}{{ end }}
   </main>
-  <footer>
-    {{ partial "footer.html" . }}
-  </footer>
+  <footer>{{ partial "footer.html" . }}</footer>
 </body>
+
 </html>
diff --git a/layouts/_default/home.html b/layouts/_default/home.html
@@ -1,7 +1,14 @@
-{{ define "main" }}
-  {{ .Content }}
-  {{ range site.RegularPages }}
-    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
-    {{ .Summary }}
-  {{ end }}
+{{ define "main" }} {{ with .GetPage "About" }}
+<section class="info">
+  <h2>Quick Intro</h2>
+  {{ truncate 100 .Content }}
+  <a class="more" href="{{ .RelPermalink }}">Read more...</a>
+</section>
+{{ end }}
+<section>
+  <h2>Posts</h2>
+  {{ range where site.Pages "Section" "posts" }}
+  <h3><a href=" {{ .RelPermalink }}">{{ .LinkTitle }}</a></h3>
+  {{ .Summary }} {{ end }}
+</section>
 {{ end }}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
@@ -1,8 +1,5 @@
 {{ define "main" }}
-  <h1>{{ .Title }}</h1>
-  {{ .Content }}
-  {{ range .Pages }}
-    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
-    {{ .Summary }}
-  {{ end }}
-{{ end }}
+<h1>{{ .Title }}</h1>
+{{ .Content }} {{ range .Pages }}
+<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+{{ .Summary }} {{ end }} {{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -1,10 +1,9 @@
 {{ define "main" }}
-  <h1>{{ .Title }}</h1>
+<h1>{{ .Title }}</h1>
 
-  {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
-  {{ $dateHuman := .Date | time.Format ":date_long" }}
-  <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
+{{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }} {{
+$dateHuman := .Date | time.Format ":date_long" }}
+<time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
 
-  {{ .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
@@ -0,0 +1,8 @@
+{{ if gt .Ancestors.Len 0 }}
+<ul id="breadcrumbs">
+  {{- range .Ancestors.Reverse }}
+  <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+  {{- end }}
+  <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+</ul>
+{{ end }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -1 +1,12 @@
-<p>Copyright {{ now.Year }}. All rights reserved.</p>
+<p>
+  Made with <span title="Love">💗</span> by
+  <a title="{{ .Site.Params.author.email }}" href="mailto:{{ .Site.Params.author.email }}">{{ .Site.Params.author.name
+    }}</a>
+</p>
+<p>·</p>
+<p>
+  <span title="Powered">⚡</span> by
+  <a title="Hugo" href="https://gohugo.io">Hugo</a> in
+  <time datetime='{{ dateFormat "2006" now
+    }}'>{{ dateFormat "2006" now }}</time>
+</p>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -1,2 +1,6 @@
-<h1>{{ site.Title }}</h1>
-{{ partial "menu.html" (dict "menuID" "main" "page" .) }}
+<nav>
+  <a title="{{ site.Title }}" href="/">
+    <h1>{{ site.Title }}</h1>
+  </a>
+  {{ partial "menu.html" (dict "menuID" "main" "page" .) }}
+</nav>