add talkyard comments

center the lists

assets/scss/_base.scss

@@ -29,11 +29,17 @@ a {
   font-family: $text-font-family;
   font-weight: $text-font-weight;
   color: $link-color;
+  letter-spacing: 0.3px;
+  margin: 0 1px;
   text-decoration: none;
   &:focus,
   &:hover {
     text-decoration: underline;
   }
+
+  strong & {
+    font-weight: $text-font-weight--bold;
+  }
 }
 
 .content a {

assets/scss/_content.scss

@@ -38,18 +38,22 @@
       margin-bottom: 0.75em;
     }
     .post-meta {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+
       i {
         text-align: center;
         width: 1.6rem;
         margin-left: 0;
         margin-right: 0.5rem;
       }
-      .date {
-        .posted-on {
-          margin-left: 0;
-          margin-right: 1.5rem;
-        }
     }
+
+    .taxonomy {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
     }
   }
   img {
@@ -58,8 +62,12 @@
     margin-right: auto;
   }
   figure {
-    margin: 0;
+    margin: 4rem 0;
     padding: 0;
+
+    &.icon-inline {
+      margin: 0;
+    }
   }
   figcaption p {
     text-align: center;
@@ -71,7 +79,100 @@
     display: block;
     margin-left: auto;
     margin-right: auto;
+    margin-bottom: 4rem;
   }
+  p a:link {
+    font-weight: bold;
+    font-size: 0.95em;
+  }
+
+  .social-links {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+
+    font-size: 1rem;
+  }
+
+  .social-link-icon {
+    font-size: 1em;
+    height: 2em;
+    margin-bottom: 1rem;
+
+    display: flex;
+
+    &:link {
+      text-decoration: none;
+    }
+
+    &--svg {
+      svg {
+        height: 100%;
+      }
+    }
+
+    &--text {
+      height: auto;
+      font-size: 1.3em;
+      line-height: 1;
+      font-weight: bold;
+    }
+  }
+}
+
+div.content .meta-tag {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  margin: 3px;
+  border-radius: 1px;
+  background-color: darken($bg-color, 5%);
+
+  color: lighten($fg-color, 15%);
+
+  .icon {
+    display: flex;
+    font-size: 0.9em;
+    line-height: 1;
+    padding-right: 6px;
+  }
+
+  &--link {
+    color: $link-color;
+    font-size: 0.8em;
+    text-decoration: underline;
+
+    &:hover {
+      opacity: 1;
+      color: lighten($link-color, 20%);
+
+      .icon {
+        color: $link-color;
+      }
+
+      .svg-icon {
+        color: $fg-color;
+      }
+    }
+
+    .svg-icon {
+      color: $fg-color;
+    }
+  }
+
+  .svg-icon {
+    > svg {
+      height: 1em;
+      width: 1em;
+    }
+  }
+}
+
+.post-meta .meta-tag:not(.meta-tag--link) {
+  display: flex;
+  align-items: center;
 }
 
 .avatar img {
@@ -84,23 +185,40 @@
 }
 
 .list {
-  ul {
+  ul:not(.pagination) {
+    position: relative;
+    width: 100%;
     margin: 3.2rem 0 3.2rem 0;
     list-style: none;
     padding: 0;
+    @media only screen and (max-width: 768px) {
+      text-align: center;
+    }
     li {
       font-size: 1.8rem;
       @media only screen and (max-width: 768px) {
         margin: 1.6rem 0 1.6rem 0;
       }
+      @media only screen and (min-width: 768px) {
+        display: flex;
+        margin-bottom: 0.8rem;
+      }
       .date {
         display: inline-block;
-        width: 20rem;
+        width: 50%;
         text-align: right;
-        margin-right: 3rem;
+        padding-right: 1.5rem;
         @media only screen and (max-width: 768px) {
+          width: 100%;
+          text-align: center;
+          font-size: 0.9em;
           display: block;
-          text-align: left;
+          padding-right: 0;
+        }
+        @media only screen and (min-width: 768px) {
+          display: flex;
+          align-items: start;
+          justify-content: flex-end;
         }
       }
       .title {
@@ -108,6 +226,10 @@
         color: $fg-color;
         font-family: $heading-font-family;
         font-weight: $heading-font-weight--bold;
+        @media only screen and (min-width: 768px) {
+          padding-left: 1.5rem;
+          max-width: 20ch;
+        }
         &:hover,
         &:focus {
           color: $link-color;
@@ -115,6 +237,25 @@
       }
     }
   }
+  h1 {
+    margin-bottom: 0.8rem;
+  }
+  .list-meta {
+    text-align: center;
+
+    .meta-tag {
+      display: inline-flex;
+      font-size: 0.7em;
+      margin-bottom: 1.6rem;
+
+      i {
+        font-size: 1em;
+        text-align: center;
+        margin-left: 0;
+        margin-right: 0.5rem;
+      }
+    }
+  }
 }
 
 .centered {
@@ -147,17 +288,10 @@
           text-transform: uppercase;
           margin-left: 1rem;
           margin-right: 1rem;
-          font-size: 1.6rem;
           &:hover,
           &:focus {
             color: $link-color;
           }
-          @media only screen and (max-width: 768px) {
-            font-size: 1.4rem;
-          }
-          i {
-            font-size: 3.2rem;
-          }
         }
       }
     }
@@ -182,4 +316,17 @@
       }
     }
   }
+
+	.footer {
+		> iframe {
+			border-radius: 1px;
+		}
+
+		.comment-attr {
+			margin-top: 25px;
+			opacity: 0.9;
+			font-size: 0.9em;
+			text-align: center;
+		}
+	}
 }

assets/scss/_content_dark.scss

@@ -1,7 +1,5 @@
 @mixin content_dark {
-
   .content {
-  
     .list {
       ul {
         li {
@@ -31,16 +29,43 @@
         }
       }
     }
+
+    .post-meta {
+      opacity: 0.8;
     }
 
+    .meta-tag {
+      $tag-color: darken($fg-color-dark, 35%);
+
+      color: $tag-color;
+      background-color: lighten($bg-color-dark, 5%);
+
+      &--link {
+        color: $link-color-dark;
+
+        .icon {
+          color: $tag-color;
+        }
+
+        &:hover {
+          opacity: 1;
+          color: lighten($link-color-dark, 15%);
+
+          .icon {
+            color: $link-color-dark;
+          }
+        }
+      }
+    }
+  }
 }
 
 body.colorscheme-dark {
-  @include content_dark()
+  @include content_dark();
 }
 
 body.colorscheme-auto {
   @media (prefers-color-scheme: dark) {
-    @include content_dark()
+    @include content_dark();
   }
 }

assets/scss/_footer.scss

@@ -4,13 +4,10 @@
   font-size: 0.8em;
   line-height: 2rem;
   margin-bottom: 1rem;
-  a {
-    color: $link-color;
-  }
 }
 
-.cs-mode-container {
+.footer-item {
-  margin: 0 0 0 0.3em;
+  margin: 0 0.3em;
 }
 
 .cs-mode-button {
@@ -26,6 +23,16 @@
   }
 }
 
+.footer-link {
+  font-family: $heading-font-family;
+	color: $fg-color;
+
+  &:hover {
+    color: $link-color;
+    text-decoration: underline;
+  }
+}
+
 .cs-mode-state {
   text-transform: capitalize;
   font-weight: $heading-font-weight--bold;

assets/scss/_navigation.scss

@@ -1,6 +1,13 @@
 .navigation {
   height: 6rem;
   width: 100%;
+
+  > .container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
   a,
   span {
     display: inline;
@@ -85,15 +92,28 @@
     display: none;
     @media only screen and (max-width: 768px) {
       display: block;
+      display: flex;
       font-size: 2.4rem;
       font-weight: 400;
       line-height: 6rem;
+      padding: 0.5em 0 0.5em 0.5em;
       color: $fg-color;
       cursor: pointer;
       &:hover,
       &:focus {
         color: $link-color;
       }
+      .svg-menu {
+        height: 1em;
+      }
+    }
+  }
+  .primary-menu-item {
+    display: none;
+
+    @media only screen and (max-width: 768px) {
+      display: block;
+      margin-left: auto;
     }
   }
 }

assets/scss/_pagination.scss

@@ -2,21 +2,30 @@
   margin-top: 6rem;
   text-align: center;
   font-family: $heading-font-family;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 2rem;
+
   li {
-    display: inline;
+    display: flex;
-    text-align: center;
+    justify-content: center;
-    font-weight: $heading-font-weight--bold;
+    align-items: center;
-    span {
+
+    > a,
+    &.current-page {
       margin: 0;
-      text-align: center;
+      padding: 0 0.25em;
-      width: 3.2rem;
+      font-family: $heading-font-family;
-    }
-    a {
       font-weight: $heading-font-weight;
-      span {
+    }
-        margin: 0;
+
-        text-align: center;
+    > a {
-        width: 3.2rem;
+      display: block;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
       }
     }
   }

assets/scss/_variables.scss

@@ -4,7 +4,7 @@ $heading-font-family: "Open Sans", sans-serif;
 $code-font-family: "Source Code Pro", "Lucida Console", monospace;
 
 $text-font-weight: 400;
-$text-font-weight--bold: 600;
+$text-font-weight--bold: 700;
 $heading-font-weight: 600;
 $heading-font-weight--bold: 700;
 $code-font-weight: 400;
@@ -14,11 +14,11 @@ $bg-color: #fafafa !default;
 $fg-color: #212121 !default;
 $alt-bg-color: #e0e0e0 !default;
 $alt-fg-color: #000 !default;
-$link-color: #464f56 !default;
+$link-color: #0862da !default;
 
 // Colors dark
 $bg-color-dark: #212121 !default;
 $fg-color-dark: #dadada !default;
 $alt-bg-color-dark: #424242 !default;
 $alt-fg-color-dark: #dadada !default;
-$link-color-dark: #464f56 !default;
+$link-color-dark: #2381ff !default;

layouts/_default/baseof.html

@@ -21,8 +21,7 @@
       <link rel="canonical" href="{{ .Permalink }}">
     {{ end }}
 
-    <link href="https://fonts.googleapis.com/css?family=Lato:400,600%7COpen+Sans:600,700%7CSource+Code+Pro:400,700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Lato:400,700%7COpen+Sans:600,700%7CSource+Code+Pro:600%7CMaterial+Icons+Outlined" rel="stylesheet">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" integrity="sha384-KA6wR/X5RY4zFAHpv/CnoG2UW1uogYfdnP67Uv7eULvTveboZJg0qUpmJZb5VqzN" crossorigin="anonymous" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
 
     {{ if .Site.IsServer }}
@@ -95,7 +94,7 @@
   {{ else if eq .Site.Params.colorscheme "auto" }}
     {{ $csClass = "colorscheme-auto" }}
   {{ end }}
-  <body class="{{ $csClass }}{{ if .Site.Params.rtl }} rtl{{ end }}">
+  <body class="{{ .Kind | lower }} {{ with .File }}{{ .BaseFileName | lower }}{{ end }} {{ $csClass }}{{ if .Site.Params.rtl }} rtl{{ end }}">
     <main class="wrapper">
       {{ partial "header.html" . }}
 

layouts/partials/footer.html

@@ -4,20 +4,27 @@
       <p>{{.}}</p>
     {{ end }}
     {{ if not .Site.Params.hideCopyright }}
+			<span class="footer-item">
 				{{ with .Site.Params.since }}
 					© {{ if lt . now.Year }}{{ . }} - {{ end }}{{ now.Year }}
 				{{ else }}
 					© {{ now.Year }}
 				{{ end }}
 				{{ if .Site.Params.Author }} {{ .Site.Params.Author }} {{ end }}
+			</span>
     {{ end }}
     {{ if not .Site.Params.hideCredits }}
       {{ if not .Site.Params.hideCopyright }} · {{ end }}
+				<span class="footer-item">
 					{{ i18n "powered_by" }} <a href="https://gohugo.io/">Hugo</a> & <a href="https://github.com/luizdepra/hugo-coder/">Coder</a>.
+				</span>
 			{{ end }}
-    <span id="cs-mode-container" class="cs-mode-container">
+		<span id="cs-mode-container" class="footer-item">
 			[<button type="button" id="cs-mode-button" class="cs-mode-button">Dark Mode: <span id="cs-mode-button-state" class="cs-mode-state">Light</span></button>]
 		</span>
+		{{ if .Site.Params.talkyardServerUrl }}
+			<span class="footer-item comment-attr">Comments by <a class="footer-link" href="https://www.talkyard.io">Talkyard</a>.</span>
+		{{ end }}
     {{ if .Site.Params.commit }}
       {{ if or (not .Site.Params.hideCredits) (not .Site.Params.hideCopyright) }} · {{ end }}
       [<a href="{{ .Site.Params.commit }}{{ getenv "GIT_COMMIT_SHA" }}">{{ getenv "GIT_COMMIT_SHA_SHORT" }}</a>]

layouts/partials/header.html

@@ -4,8 +4,13 @@
       {{ .Site.Title }}
     </a>
     {{ if or .Site.Menus.main .Site.IsMultiLingual }}
+    <span class="primary-menu-item">
+      {{ with index $.Site.Menus.main 0 }}
+          <a class="navigation-link" href="{{ .URL | absLangURL }}">{{ .Name }}</a>
+      {{ end }}
+    </span>
     <input type="checkbox" id="menu-toggle" />
-    <label class="menu-button float-right" for="menu-toggle"><i class="fas fa-bars"></i></label>
+    <label class="menu-button float-right" for="menu-toggle">{{ partial "svg/hamburger.svg" }}</label>
     <ul class="navigation-list">
       {{ with .Site.Menus.main}}
         {{ range sort . }}

layouts/partials/home.html

@@ -6,17 +6,24 @@
     <h1>{{ .Site.Params.author }}</h1>
     <h2>{{ .Site.Params.info }}</h2>
     {{ with .Site.Params.social }}
-    <ul>
+    <ul class="social-links">
       {{ range sort .}}
         {{ if .icon }}
           <li>
-            <a href="{{ .url }}" aria-label="{{ .name }}" {{ if .rel }}rel="{{ .rel }}"{{ end }} {{ if .target }}target="{{ .target }}"{{ end }} {{ if .type }}type="{{ .type }}"{{ end }}>
+            <a class="social-link-icon" href="{{ .url }}" aria-label="{{ .name }}" {{ if .rel }}rel="{{ .rel }}"{{ end }} {{ if .target }}target="{{ .target }}"{{ end }} {{ if .type }}type="{{ .type }}"{{ end }}>
               <i class="{{ .icon }}" aria-hidden="true"></i>
             </a>
           </li>
+        {{ else if .svg }}
+          <li>
+            <a class="social-link-icon social-link-icon--svg" href="{{ .url }}" aria-label="{{ .name }}" {{ if .rel }}rel="{{ .rel }}"{{ end }} {{ if .target }}target="{{ .target }}"{{ end }} {{ if .type }}type="{{ .type }}"{{ end }}>
+                {{ $path := printf "svg/%s" .svg }}
+                {{ partial $path . }}
+            </a>
+          </li>
         {{ else }}
           <li>
-            <a href="{{ .url }}" aria-label="{{ .name }}" {{ if .rel }}rel="{{ .rel }}"{{ end }} {{ if .target }}target="{{ .target }}"{{ end }}>{{ .name }}</a>
+            <a class="social-link-icon social-link-icon--text" href="{{ .url }}" aria-label="{{ .name }}" {{ if .rel }}rel="{{ .rel }}"{{ end }} {{ if .target }}target="{{ .target }}"{{ end }}>{{ .name }}</a>
           </li>
         {{ end }}
       {{ end }}

layouts/partials/list.html

@@ -1,12 +1,19 @@
 <section class="container list">
   <h1 class="title">
-    {{- if eq .Kind "taxonomy" -}}
-      {{- i18n .Data.Singular | title -}}
-      {{- print ": " -}}
-    {{- end -}}
-
     {{- .Title -}}
   </h1>
+  {{- if eq .Kind "taxonomy" -}}
+    <div class="list-meta">
+      <span class="meta-tag">
+        {{- if eq .Data.Singular "category" -}}
+          <span class="icon svg-icon">{{ partial "svg/folder.svg" }}</span>
+        {{- else if eq .Data.Singular "tag" -}}
+          <span class="icon svg-icon">{{ partial "svg/tag.svg" }}</span>
+        {{- end -}}
+        {{- .Data.Term -}}
+      </span>
+    </div>
+  {{- end -}}
   <ul>
     {{ range .Paginator.Pages }}
     <li>

layouts/partials/pagination.html

@@ -32,7 +32,7 @@
     {{ end }}
     {{ if eq ($.Scratch.Get "page_number_flag") true }}
       {{ if eq . $paginator }}
-      <li>{{ .PageNumber }}</li>
+      <li class="current-page">{{ .PageNumber }}</li>
       {{ else }}
       <li><a href="{{ .URL }}">{{ .PageNumber }}</a></li>
       {{ end }}

layouts/partials/posts/series.html

@@ -5,7 +5,7 @@
     {{ $name := . | urlize }}
     {{ $series := index $.Site.Taxonomies.series $name }}
     {{ if gt (len $series.Pages) 1 }}
-      <h3>More {{ . }} Articles</h3>
+      <h3>More of my {{ . }} Articles</h3>
       <nav>
         <ul class="see-also-list">
         {{ $maxItems := $.Site.Params.maxSeeAlsoItems | default 5 }}

layouts/partials/svg/calendar.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24">
+    <path fill="currentColor" d="M7,12H9V14H7V12M21,6V20A2,2 0 0,1 19,22H5C3.89,22 3,21.1 3,20V6A2,2 0 0,1 5,4H6V2H8V4H16V2H18V4H19A2,2 0 0,1 21,6M5,8H19V6H5V8M19,20V10H5V20H19M15,14V12H17V14H15M11,14V12H13V14H11M7,16H9V18H7V16M15,18V16H17V18H15M11,18V16H13V18H11Z" />
+</svg>
+

layouts/partials/svg/clock.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24">
+    <path fill="currentColor" d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" />
+</svg>
+

layouts/partials/svg/folder.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24">
+    <path fill="currentColor" d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z" />
+</svg>

layouts/partials/svg/hamburger.svg

@@ -0,0 +1,3 @@
+<svg class="svg-menu" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
+</svg>

layouts/partials/svg/tag.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24">
+    <path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
+</svg>

layouts/partials/taxonomy/categories.html

@@ -1,9 +1,6 @@
-<div class="categories">
-  <i class="fas fa-folder"></i>
   {{- range $index, $el := . -}}
-    {{- if gt $index 0 }}
+    <a class="meta-tag meta-tag--link" href="{{ ( printf "categories/%s/" ( . | urlize ) ) | relLangURL }}">
-      <span class="separator">•</span>
+      <span class="icon svg-icon">{{ partial "svg/folder.svg" }}</span>
-    {{- end }}
+      {{ . }}
-    <a href="{{ ( printf "categories/%s/" ( . | urlize ) ) | relLangURL }}">{{ . }}</a>
+    </a>
   {{- end -}}
-</div>

layouts/partials/taxonomy/tags.html

@@ -1,9 +1,6 @@
-<div class="tags">
-  <i class="fas fa-tag"></i>
   {{- range $index, $el := . -}}
-    {{- if gt $index 0 }}
+    <a class="meta-tag meta-tag--link" href="{{ ( printf "tags/%s/" ( . | urlize ) ) | relLangURL }}">
-      <span class="separator">•</span>
+      <span class="icon svg-icon">{{ partial "svg/tag.svg" }}</span>
-    {{- end }}
+      {{ . }}
-    <a href="{{ ( printf "tags/%s/" ( . | urlize ) ) | relLangURL }}">{{ . }}</a>
+    </a>
   {{- end -}}
-</div>

layouts/posts/single.html

@@ -9,21 +9,21 @@
           <h1 class="title">{{ .Title }}</h1>
         </div>
         <div class="post-meta">
-          <div class="date">
+          <div class="meta-tag posted-on">
-            <span class="posted-on">
+            <span class="icon svg-icon">{{ partial "svg/calendar.svg" }}</span>
-              <i class="fas fa-calendar"></i>
             <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
               {{ .Date.Format (.Site.Params.dateFormat | default "January 2, 2006" ) }}
             </time>
-            </span>
-            <span class="reading-time">
-              <i class="fas fa-clock"></i>
-              {{ i18n "reading_time" .ReadingTime }}
-            </span>
           </div>
+          <div class="meta-tag reading-time">
+            <span class="icon svg-icon">{{ partial "svg/clock.svg" }}</span>
+            {{ i18n "reading_time" .ReadingTime }}
+          </div>
+          <div class="taxonomy">
             {{ with .Page.Params.Categories }}{{ partial "taxonomy/categories.html" . }}{{ end }}
             {{ with .Page.Params.Tags }}{{ partial "taxonomy/tags.html" . }}{{ end }}
           </div>
+        </div>
       </header>
 
       <div>
@@ -35,8 +35,16 @@
 
 
       <footer>
-        {{ partial "posts/series.html" . }}
+				{{ if .Site.Params.talkyardServerUrl }}
-        {{ partial "posts/disqus.html" . }}
+					<section class="comment-section">
+						<h2>Comments</h2>
+						<script>talkyardServerUrl='{{ .Site.Params.talkyardServerUrl }}';</script>
+						<script async defer src="{{ .Site.Params.talkyardScriptUrl }}"></script>
+						<div class="talkyard-comments" data-discussion-id="{{ .Params.discussionId }}" style="margin-top: 45px;">
+							<noscript>Please enable Javascript to view comments.</noscript>
+						</div>
+					</section>
+				{{ end }}
         {{ partial "posts/commento.html" . }}
         {{ partial "posts/utteranc.html" . }}
       </footer>