add blogroll type of section page

assets/css/common/main.css

@@ -169,53 +169,6 @@ figure > img {
 }
 
 
-/* links page */
-
-.links-container {
-  font-size: 16px;
-}
-.links-container blockquote {
-  margin: var(--gap) 0;
-  padding: 0 14px;
-  border-inline-start: 3px solid var(--primary);
-}
-.links .item {
-  padding: 12px;
-  background: var(--entry);
-  border-radius: var(--radius);
-  margin-bottom: var(--gap);
-  border: 1px solid var(--border);
-}
-
-.links .favicon {
-  display: inline-block;
-  background-size: 16px 16px;
-  width: 16px;
-  height: 16px;
-  image-rendering: -webkit-optimize-contrast;
-}
-.links .item .title  {
-}
-.links .item .title .favicon {
-  margin-right: calc(var(--gap) / 2);
-  vertical-align: middle;
-}
-
-.links .item .title a:hover {
-  text-decoration: underline;
-}
-
-.links .item .description {
-  margin-left: calc(16px + var(--gap) / 2);
-  color: var(--secondary);
-}
-
-.links .item .description .delimiter::after {
-    content: "·";
-    margin-inline-start: .5em;
-    margin-inline-end: .5em;
-}
-
 /* shortcodes */
 
 .standout {

layouts/blogroll/section.html

@@ -0,0 +1,75 @@
+{{- define "head" }}
+<style>
+.links-container {
+  font-size: 16px;
+}
+.links-container blockquote {
+  margin: var(--gap) 0;
+  padding: 0 14px;
+  border-inline-start: 3px solid var(--primary);
+}
+.links .item {
+  padding: 12px;
+  background: var(--entry);
+  border-radius: var(--radius);
+  margin-bottom: var(--gap);
+  border: 1px solid var(--border);
+}
+
+.links .favicon {
+  display: inline-block;
+  background-size: 16px 16px;
+  width: 16px;
+  height: 16px;
+  image-rendering: -webkit-optimize-contrast;
+}
+.links .item .title .favicon {
+  margin-right: calc(var(--gap) / 2);
+  vertical-align: middle;
+}
+
+.links .item .title a:hover {
+  text-decoration: underline;
+}
+
+.links .item .description {
+  margin-left: calc(16px + var(--gap) / 2);
+  color: var(--secondary);
+}
+
+.links .item .description .delimiter::after {
+    content: "·";
+    margin-inline-start: .5em;
+    margin-inline-end: .5em;
+}
+</style>
+{{- end }}
+
+{{- define "main" }}
+<header class="page-header">
+  <h1>{{ .Title }}</h1>
+</header>
+
+<article class="links-container">
+  <blockquote>
+    <p>{{ .Description }}</p>
+  </blockquote>
+
+  <div class="links">
+    {{ range site.Params.Links }}
+      <div class="item">
+        <div class="title">
+          {{- $url := urls.Parse .url }}
+          <span class="favicon" style="background-image: url({{ .favicon | default (printf "%s/favicon.ico" .url ) }});"></span
+            ><a href="{{ .url }}" target="_blank">{{ .name }}</a>
+        </div>
+        <div class="description">
+          {{- .domain | default $url.Host }}
+          {{- with .description }}<span class="delimiter"></span>{{ . }}{{- end }}
+        </div>
+      </div>
+    {{ end }}
+  </div>
+</article>
+
+{{- end }}