ADD summary, CHANGE single page

assets/scss/index.scss

@@ -325,7 +325,7 @@ a {
 
 .title h1 {
   font-size: xxx-large;
-  padding-block-end: 3rem;
+  margin-block-end: 3rem;
 }
 
 main > .content {
@@ -340,6 +340,47 @@ main > .content {
   flex-grow: 1;
 }
 
+.list {
+  margin-block-start: 2rem;
+}
+
+.list > li {
+  list-style: none;
+  margin: 0.5rem;
+}
+
+.list > article {
+  margin: 0.5rem;
+  padding: 0.5rem;
+  border: 2px solid gray;
+  border-radius: 6px;
+}
+
+.list > article > h3 {
+  margin: 0px;
+  padding-block: 0.25rem;
+  font-size: x-large;
+}
+
+.list > article > .meta {
+  font-size: smaller;
+  padding-block-end: 1rem;
+}
+
+.meta > span {
+  padding-inline-end: 1rem;
+}
+
+.list > article > .more {
+  display: block;
+  width: 100%;
+  text-align: right;
+  font-size: x-large;
+  border: none;
+  background: inherit;
+  color: {{ .Site.Params.color.secondary }};
+}
+
 .section {
   padding-top: 2rem;
   padding-bottom: 2.5rem;
@@ -494,4 +535,4 @@ img {
   color: gray;
   font-size: small;
   margin: 0px;
-}
+}

layouts/_default/li.html

@@ -0,0 +1,4 @@
+<li>
+  <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
+  <div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>
+</li>

layouts/_default/list.html

@@ -11,7 +11,7 @@
       </article>
       <div class="list">
         {{ range .Pages }}
-          <a href="{{.Permalink}}"><p>{{ .Title }}</p></a>
+          {{ .Render "summary" }}
         {{ end }}
       </div>
     </div>

layouts/_default/single.html

@@ -1,18 +1,27 @@
 {{ define "main" }}
-    <div class="content">
-        {{ with .Title }}
-            <div class="title">
-                <h1>{{ . }}</h1>
-                <div class="divider"></div>
-            </div>
-        {{ end }}
-        <!-- <h6>{{ .Date.Format "Mon, Jan 2, 2006" }}</h6> -->
-        {{ if gt (.TableOfContents | findRE `<li>` | len) 4}}
-            <div class="table-of-contents">
-                {{ .TableOfContents }}
-                <div class="extend" onclick="toggleTableOfContent(event)"><i class="icon-angle-right"></i></div>
-            </div>
-        {{ end }}
-        {{ .Content }}
+<div class="content">
+  <div class="meta">
+    <span> {{ .Date.Format "2006-01-02" }}</span>
+    <span> ⏱ {{.ReadingTime}} min</span>
+    {{ with .Params.tags }}
+    <span>
+      {{ range . }}
+      <a href="{{ " tags" | absURL }}/{{ . | urlize }}/">#{{ . }}</a>
+      {{ end }}
+    </span>
+    {{ end }}
+  </div>
+  {{ with .Title }}
+  <div class="title">
+    <h1>{{ . }}</h1>
+  </div>
+  {{ end }}
+  {{ if gt (.TableOfContents | findRE `<li>` | len) 4}}
+    <div class="table-of-contents">
+      {{ .TableOfContents }}
+      <div class="extend" onclick="toggleTableOfContent(event)"><i class="icon-angle-right"></i></div>
     </div>
-{{ end }}
+    {{ end }}
+    {{ .Content }}
+</div>
+{{ end }}

layouts/_default/summary.html

@@ -0,0 +1,16 @@
+<article>
+  <h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
+  <div class="meta">
+    <span> {{ .Date.Format "2006-01-02" }}</span>
+    <span> ⏱ {{.ReadingTime}} min</span>
+    {{ with .Params.tags }}
+    <span>
+      {{ range . }}
+      <a href="{{ " tags" | absURL }}/{{ . | urlize }}/">#{{ . }}</a>
+      {{ end }}
+    </span>
+    {{ end }}
+  </div>
+  {{ .Summary }}
+  <a class="more" href='{{ .RelPermalink }}'><i class="icon-angle-right"></i></a>
+</article>

layouts/contact.vcf

@@ -0,0 +1 @@
+test