feat: update code styles and more styling

shivan-s · Oct 22, 2024 · ceccea1 · ceccea1
1 parent 5d52762
commit ceccea1
Show file tree

Hide file tree

Showing 16 changed files with 177 additions and 179 deletions.
diff --git a/archetypes/default.md b/archetypes/default.md
@@ -13,4 +13,7 @@ cover:
   relative: false
   hidden: false
 audio:
+  src: audio.mp3
+  caption: caption
+  hidden: true
 ---
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -38,6 +38,10 @@
   --normal-size: 1rem;
   --large-size: 1.5rem;
   --very-large-size: 2.5rem;
+
+  /* Border */
+  --normal-border-radius: 0.25rem;
+  --large-border-radius: 4rem;
 }
 
 html {
@@ -58,7 +62,6 @@ h5,
 h6 {
   margin: 0;
   padding: 0;
-  line-height: normal;
 }
 
 p {
@@ -118,39 +121,48 @@ body>header {
     flex-direction: column;
     align-items: center;
 
+    & span.site-title {
+      font-size: var(--large-size);
+    }
+
     a {
       display: flex;
       align-items: center;
       gap: var(--letter-gap);
     }
+  }
+}
 
-    & ul {
-      padding: 0;
-      margin: 0;
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
+div.tags {
+  font-family:
+    Optician Sans,
+    sans-serif;
 
-      & a:hover {
-        outline: 2px ridge var(--text-color);
-        filter: none;
-        border-radius: 4rem;
-        box-shadow: 0 0 0 2pt var(--text-color);
-      }
+  & ul {
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--small-gap);
+
+    & a:hover {
+      outline: 2px ridge var(--text-color);
+      filter: none;
+      border-radius: var(--large-border-radius);
+      box-shadow: 0 0 0 2pt var(--text-color);
+    }
 
-      & li {
-        padding: 0.5rem 1rem;
-        list-style: none;
+    & li {
+      padding: calc(var(--small-gap) / 2) var(--small-gap);
+      list-style: none;
 
-        & a {
-          padding: 0.5rem 1rem;
-        }
+      & a {
+        padding: calc(var(--small-gap) / 2) var(--small-gap);
+      }
 
-        & a.active {
-          outline: 2px ridge var(--text-color);
-          filter: none;
-          border-radius: 4rem;
-        }
+      & a.active {
+        outline: 2px ridge var(--text-color);
+        filter: none;
+        border-radius: var(--large-border-radius);
       }
     }
   }
@@ -161,23 +173,6 @@ body>header {
   }
 }
 
-nav.breadcrumbs {
-  font-family:
-    Optician Sans,
-    sans-serif;
-  font-size: var(--small-size);
-
-  ul {
-    list-style: none;
-    display: flex;
-
-    & li:not(:last-child)::after {
-      padding: 0 var(--letter-gap);
-      content: "/";
-    }
-  }
-}
-
 section {
   display: flex;
   flex-direction: column;
@@ -196,12 +191,23 @@ section {
   }
 }
 
+section.posts {
+  & .page-groupby:hover {
+    transform: rotate(1deg);
+  }
+
+  & .page-groupby:hover a:not(:hover) {
+    opacity: 0.8;
+    filter: blur(1px);
+  }
+}
+
 section.about {
   position: relative;
-  transform: rotate(-1deg);
+  transform: rotate(-2deg);
   flex-direction: column;
   border: 2px solid var(--text-color);
-  border-radius: 0.25rem;
+  border-radius: var(--normal-border-radius);
   /* TODO: shadow */
   box-shadow: 1px 1px 1px 1px var(--text-color);
 }
@@ -223,20 +229,55 @@ article {
   }
 }
 
-.post-metadata {
+div.page-groupby {
   display: flex;
-  flex-wrap: nowrap;
+  gap: var(--large-gap);
+  border-top: 1px dotted var(--text-color);
+  padding: var(--small-gap) 0;
+
+  & ul {
+    width: 100%;
+
+    & li {
+      padding: var(--small-gap) 0;
+      list-style: none;
+
+      & a {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--small-gap);
+
+        & span.post-title {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
 
-  & span:not(:last-child)::after {
-    padding: 0 var(--letter-gap);
-    content: "·";
+    & li:not(:first-child) {
+      border-top: 1px dotted var(--text-color);
+    }
+  }
+
+  & h3 {
+    padding-top: var(--small-gap);
   }
 }
 
-hr {
-  border: none;
-  border: 1px groove var(--text-color);
-  width: 4ch;
+small.post-metadata {
+  display: flex;
+
+  & span {
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  & span:not(:last-child)::after {
+    padding: 0 calc(var(--letter-gap) / 2);
+    content: "·";
+  }
 }
 
 body {
@@ -272,6 +313,7 @@ main {
 /* footer */
 body>footer {
   padding: 1rem 0rem;
+  margin-top: 1rem;
   border-top: 1px solid var(--text-color);
   font-family:
     Optician Sans,
@@ -285,19 +327,24 @@ body>footer {
   }
 
   & p:not(:last-child)::after {
-    padding: 0 var(--letter-gap);
+    padding: 0 calc(var(--letter-gap) / 2);
     content: "·";
   }
 }
 
+pre:has(code) {
+  border-radius: calc(var(--normal-border-radius) * 2);
+  padding: calc(var(--small-gap)) calc(var(--small-gap) / 2);
+}
+
 code {
   font-family: "Monaspace Radon";
-  padding: calc(var(--small-gap)) calc(var(--small-gap) / 2);
 }
 
 div.content {
   white-space: break-spaces;
-  work-break: break-word;
+  word-break: break-word;
+  line-height: 1.5;
 }
 
 @font-face {

diff --git a/content/posts/lorem/my-first-post.md → content/posts/my-first-post.md b/content/posts/lorem/my-first-post.md → content/posts/my-first-post.md
@@ -3,8 +3,7 @@ title: "My First Post"
 date: 2020-09-03
 author: Author Name
 summary: Summary
-categories: [""]
-tags: [""]
+tags: ["lorem", "epsum"]
 draft: true
 cover:
   image: image.jpg
@@ -15,6 +14,7 @@ cover:
 audio:
   file: audio.mp3
   caption: audio
+  hidden: true
 ---
 
 Here's an example blog post.

diff --git a/hugo.yml b/hugo.yml
@@ -9,7 +9,7 @@ params:
     name: Author name
   about:
     image: image.webp
-  githubRepo: "http://github.com/shivan-s/hugo-optom-code"
+  githubRepo: "http://github.com/shivan-s/shivan.xyz"
 
 menus:
   main:
@@ -36,3 +36,9 @@ pagination:
 markup:
   highlight:
     style: catppuccin-mocha
+
+enableGitInfo: true
+
+taxonomies:
+  category: categories
+  tag: tags
diff --git a/layouts/_default/home.html b/layouts/_default/home.html
@@ -1,4 +1,5 @@
 {{ define "main" }} {{ with .GetPage "About" }}
+<h1 hidden>{{ .Page.Title }}</h1>
 <section class="about">
   <header>
     <a href="{{ .RelPermalink }}">
@@ -15,10 +16,24 @@ <h2>About</h2>
   <header>
     <h2>Posts</h2>
   </header>
-  {{ $pages := where site.RegularPages "Type" "posts" }} {{ $paginator :=
-  .Paginate $pages }} {{ range $paginator.Pages }} {{ partial
-  "article-item.html" . }}
-  <hr />
+  {{ $pages := where site.RegularPages "Type" "posts" }} {{ range
+  $pages.GroupByPublishDate "2006" }}
+  <div class="page-groupby">
+    <h3>{{ .Key }}</h3>
+    <ul>
+      {{ range .Pages }}
+      <li>
+        <a href="{{ .RelPermalink }}"><span class="post-title">{{ .LinkTitle }}</span>
+          <small class="post-metadata">
+            {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00"
+            }} {{ $dateHuman := .Date | time.Format "2 Jan" }}
+            <span><time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time></span>
+            <span title="{{ .WordCount }} words">
+              {{ .ReadingTime }} min</span></small></a>
+      </li>
+      {{ end }}
+    </ul>
+  </div>
   {{ end }}
   <footer />
 </section>

diff --git a/layouts/_default/list.html b/layouts/_default/list.html
@@ -3,5 +3,25 @@
   {{ partial "breadcrumbs.html" . }}
   <h2>{{ .Title }}</h2>
 </header>
-{{ range .Pages }} {{ partial "article-item.html" . }} {{ .Summary }} {{ end }}
-{{ end }}
+
+{{ range .Pages.GroupByPublishDate "2006" }}
+<div class="page-groupby">
+  <h3>{{ .Key }}</h3>
+  <ul>
+    {{ range .Pages }} {{ with .GetTerms "tags" }}
+    <p>Tags</p>
+    <ul>
+      {{ range . }}
+      <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+      {{ end }}
+    </ul>
+    {{ end }}
+    <li>
+      <a href="{{ .RelPermalink }}"><span>{{ .LinkTitle }}<span>{{ . }}</span></span>
+        <small class="post-metadata">{{ partial "time.html" . }}<span title="{{ .WordCount }} words">
+            {{ .ReadingTime }} min</span></small></a>
+    </li>
+    {{ end }}
+  </ul>
+</div>
+{{ end }} {{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -1,7 +1,6 @@
 {{ define "main" }}
 <article>
   <header>
-    {{ partial "breadcrumbs.html" . }}
     <h2>{{ .Title }}</h2>
   </header>
   <div class="content">{{ .Content }}</div>

diff --git a/layouts/partials/article-item.html b/layouts/partials/article-item.html
diff --git a/layouts/partials/audio.html b/layouts/partials/audio.html
diff --git a/layouts/partials/breadcrumbs.html b/layouts/partials/breadcrumbs.html
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -2,7 +2,6 @@
   <span id="top" />
   <a title="{{ site.Title }}" href="/">
     <img src="/favicon.ico" height="35" />
-    <h1>{{ site.Title }}</h1>
+    <span class="site-title">{{ site.Title }}</span>
   </a>
-  {{ partial "menu.html" (dict "menuID" "main" "page" .) }}
 </nav>