added list page

exampleSite/config.yaml

@@ -2,6 +2,8 @@ baseURL: "https://hugo-profile.netlify.app"
 languageCode: "en-us"
 title: "Hugo Profile"
 
+Paginate: 3
+
 Menus:
   main:
     - identifier: blog

exampleSite/content/blog/rich-content.md

@@ -24,10 +24,10 @@ Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-manageme
 
 ## Twitter Simple Shortcode
 ```
-{{</* tweet 877500564405444608 */>}}
+{{</* tweet user="GoHugoIO" id="1315233626070503424" */>}}
 ```
 <br>
-{{< tweet 877500564405444608 >}}
+{{< tweet user="GoHugoIO" id="1315233626070503424" >}}
 <br>
 
 

layouts/_default/list.html

@@ -1,5 +1,6 @@
 {{ define "head" }}
 <meta name="description" content="{{ .Title }} of {{ .Site.Title }}">
+<link rel="stylesheet" href="/css/list.css" media="all">
 {{ end }}
 
 {{ define "title" }}
@@ -7,4 +8,32 @@
 {{ end }}
 
 {{ define "main" }}
+<div class="container pt-5" id="list-page">
+    <h2 class="text-center pb-2">{{.Title}}</h2>
+    <div class="row">
+        {{ range .Paginator.Pages }}
+        <div class="col-lg-4 col-md-6 my-3">
+            <div class="card h-100">
+                <div class="card-body bg-transparent p-4 shadow-sm">
+                    <a href="{{ .RelPermalink }}" class="primary-font card-title">
+                        <h5 class="card-title bg-transparent" title="{{ .Title }}">{{ .Title | truncate 25 }}</h5>
+                    </a>
+                    <div class="card-text secondary-font">
+                        <p>{{ .Summary | truncate 300}}</p>
+                    </div>
+                </div>
+                <div class="mt-auto post-footer bg-transparent py-3">
+                    <span class="float-start bg-transparent">{{ .Date.Format "January 2, 2006" }}</span>
+                    <a href="{{ .RelPermalink }}" class="float-end btn btn-outline-info btn-sm">Read</a>
+                </div>
+            </div>
+        </div>
+        {{ end }}
+        <div class="row justify-content-center">
+            <div class="col-auto m-3">
+                {{template "_internal/pagination.html" . }}
+            </div>
+        </div>
+    </div>
+</div>
 {{ end }}

layouts/blog/single.html

@@ -0,0 +1,10 @@
+{{ define "head" }}
+<meta name="description" content="{{ .Title }}">
+{{ end }}
+
+{{ define "title" }}
+{{.Title }} | {{ .Site.Title }}
+{{ end }}
+
+{{ define "main" }}
+{{ end }}

static/css/font.css

@@ -1,7 +1,7 @@
 
 /* Default font for body */
 body {
-    font-family: "Roboto", sans-serif !important;
+    font-family: "Lora", serif !important;
 }
 
 /* secondary font */

static/css/list.css

@@ -0,0 +1,57 @@
+#list-page .card {
+    background-color: var(--secondary-color) !important;
+    border-radius: .75rem;
+    cursor: context-menu;
+    overflow: hidden;
+}
+
+#list-page .card a {
+    text-decoration: none;
+}
+
+#list-page .card:hover {
+    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+    border: 1px solid var(--secondary-color);
+    transition: all 0.3s ease-out;
+}
+
+#list-page .card-text * {
+    background-color: var(--secondary-color) !important;
+}
+
+#list-page .post-footer {
+    padding: .5rem 1rem;
+    background-color: var(--secondary-color) !important;
+    color: var(--text-secondary-color) !important;
+    border-top: 1px solid rgba(15, 80, 100, 0.16);
+}
+
+#list-page .post-footer a {
+    background-color: var(--secondary-color) !important;
+    color: var(--text-secondary-color) !important;
+    border-color: var(--primary-color) !important;
+    transition: none;
+}
+
+#list-page .post-footer a:focus {
+    box-shadow: none !important;
+}
+
+#list-page .post-footer a:hover {
+    color: var(--primary-color) !important;
+}
+
+
+/* pagination */
+#list-page ul li a {
+    transition: none;
+    border-color: var(--secondary-color);
+}
+
+#list-page ul li a:focus {
+    box-shadow: none;
+}
+
+#list-page .page-item.active .page-link {
+    border-color: var(--primary-color);
+}