From 1b8b2cbce78e634b36145b530c8505f2d0c5a007 Mon Sep 17 00:00:00 2001
From: Gabriel Arazas <foodogsquared@foodogsquared.one>
Date: Thu, 16 Mar 2023 18:02:42 +0800
Subject: [PATCH] Update list layout and style

Not only does this make some proper RTL styling but also make it more
responsive. The nice separators are gone though. :(
---
 assets/scss/layout.scss                    | 30 ++++++++++------------
 assets/scss/main.scss                      |  7 -----
 layouts/partials/components/post-meta.html | 12 ++++-----
 layouts/partials/footer.html               |  6 ++---
 layouts/partials/header.html               | 10 +++++---
 5 files changed, 28 insertions(+), 37 deletions(-)

diff --git a/assets/scss/layout.scss b/assets/scss/layout.scss
index 9c01b75..72c13bb 100644
--- a/assets/scss/layout.scss
+++ b/assets/scss/layout.scss
@@ -26,28 +26,24 @@ footer[aria-label="Site footer"] {
 
 .list {
   display: inline-flex;
+  align-items: baseline;
   flex-flow: row wrap;
+  gap: 0.75em;
+  justify-content: space-around;
   list-style: none;
   margin: 0;
   padding: 0;
-
-  & > *:not(:last-child) {
-    border-right: 1px solid var(--base02);
-    margin-right: 0.5em;
-    padding-right: 0.5em;
-  }
 }
 
 .site__title {
-  --size: 2rem;
-  display: inline-block;
-  font-size: var(--size);
-  margin-bottom: unset;
-  margin-right: 0.5rem;
+  font-size: 2rem;
 }
 
-.site__links {
-  @include header-link-hover-style;
+.site__nav-header {
+  display: flex;
+  align-items: baseline;
+  flex-flow: row wrap;
+  gap: 0.5em;
 }
 
 .site__languages {
@@ -55,8 +51,9 @@ footer[aria-label="Site footer"] {
 }
 
 .site__socials {
-  @include header-link-hover-style;
+  display: flex;
   font-style: unset;
+  gap: 1em;
 }
 
 .site__social-icon {
@@ -171,9 +168,10 @@ footer[aria-label="Site footer"] {
   font-size: 0.9em;
   margin-top: 0.5em;
 
-  & > * {
+  &-icon-label {
+    gap: 0.25em;
     display: inline-flex;
-    align-items: center;
+    align-items: normal;
   }
 
   .post--single & {
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index b140cf4..3bca88b 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -28,13 +28,6 @@
   padding: 0;
 }
 
-@mixin header-link-hover-style {
-  > *:hover {
-    color: var(--accent-color);
-    text-decoration: none;
-  }
-}
-
 @import "base";
 @import "layout";
 @import "extend";
diff --git a/layouts/partials/components/post-meta.html b/layouts/partials/components/post-meta.html
index 502e185..7791a2a 100644
--- a/layouts/partials/components/post-meta.html
+++ b/layouts/partials/components/post-meta.html
@@ -5,18 +5,18 @@
   {{- $RFC3339 := "2006-01-02T15:04:05Z07:00" }}
   <div class="list post__meta" aria-hidden="true">
     {{- if .PublishDate -}}
-    <span>
+    <span class="post__meta-icon-label">
       {{ partial "components/heroicon.html" "calendar" }}
-      <time datetime="{{ .PublishDate.Format $RFC3339 }}" title="{{ i18n "published_on" }}" style="margin-left: 0.5em;">
+      <time datetime="{{ .PublishDate.Format $RFC3339 }}" title="{{ i18n "published_on" }}">
         {{ .PublishDate.Format "2006-01-02" }}
       </time>
     </span>
     {{- end }}
 
     {{- if ne (.PublishDate.Format "2006-01-02") (.Lastmod.Format "2006-01-02") }}
-    <span>
+    <span class="post__meta-icon-label">
       {{ partial "components/heroicon.html" "arrow-path" }}
-      <time datetime="{{ .Lastmod.Format $RFC3339 }}" title="{{ i18n "updated_on" }}" style="margin-left: 0.5em;">
+      <time datetime="{{ .Lastmod.Format $RFC3339 }}" title="{{ i18n "updated_on" }}">
         {{ .Lastmod.Format "2006-01-02" }}
       </time>
     </span>
@@ -27,9 +27,9 @@
     {{- $names := slice }}
     {{- range . }}{{ $names = $names | append .name }}{{ end }}
     {{- $author := index (first 1 $names) 0 }}
-    <span data-authors="{{ jsonify $names }}" title="{{ i18n "published_by" }}">
+    <span class="post__meta-icon-label" data-authors="{{ jsonify $names }}" title="{{ i18n "published_by" }}">
       {{ partial "components/heroicon.html" "pencil" }}
-      <span style="margin-left: 0.5em;">
+      <span>
         {{ $author }}{{ if ge (len .) 2 }}, et al.{{ end }}
       </span>
     </span>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 8ec6fb4..e4abe3e 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -16,13 +16,12 @@
 
 <!-- List all of the social media links -->
 {{ with (index $.Site.Data "more-contentful").contacts }}
-<ul class="list site__socials">
+<nav class="list site__socials">
   {{ $useImage := index . "useImage" | default false }}
 
   {{ $links := sort .links "id" "asc" }}
   {{ $links = sort $links "weight" "asc" }}
   {{- range $links -}}
-  <li>
     <a {{ if $useImage }}class="site__social-icon"{{ end }} rel="me" href="{{ .url | absLangURL }}" aria-label="{{ with .name }}{{ . }}{{ else }}{{ .id }}{{ end }}">
     {{- if $useImage }}
       {{- partial "components/icon.html" (dict "id" .id "output" "icons/brand/%s.svg" "template" "templates/simple-icon.svg") }}
@@ -30,9 +29,8 @@
       {{- .name }}
     {{- end }}
     </a>
-  </li>
   {{- end -}}
-</ul>
+</nav>
 {{ end }}
 
 {{ $markdownOpt := dict "markup" "markdown" }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 3c5182f..6cb0f81 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,13 +1,15 @@
 <header aria-label="Site header">
-  <nav>
+  <nav class="site__nav-header">
     <a class="site__title" href="{{ "" | absLangURL }}">{{ $.Site.Title }}</a>
-    <div class="list site__links">
+    <ul class="list">
       {{ with $.Site.Menus.main }}
         {{ range . -}}
-          <a href="{{ .URL | absLangURL }}">{{- .Name -}}</a>
+          <li>
+            <a href="{{ .URL | absLangURL }}">{{- .Name -}}</a>
+          </li>
         {{ end }}
       {{ end }}
-    </div>
+    </ul>
   </nav>
   {{- partial "components/theme-button.html" . }}
 </header>