allow rendering short summaries in the list view

assets/css/common/post-content-common.css

@@ -0,0 +1,259 @@
+.entry-content,
+.post-content {
+    color: var(--content);
+}
+
+.entry-content h3,
+.post-content h3,
+.entry-content h4,
+.post-content h4,
+.entry-content h5,
+.post-content h5,
+.entry-content h6,
+.post-content h6 {
+    margin: 24px 0 16px;
+}
+
+.entry-content h1,
+.post-content h1 {
+    margin: 40px auto 32px;
+    font-size: 40px;
+}
+
+.entry-content h2,
+.post-content h2 {
+    margin: 32px auto 24px;
+    font-size: 32px;
+}
+
+.entry-content h3,
+.post-content h3 {
+    font-size: 24px;
+}
+
+.entry-content h4,
+.post-content h4 {
+    font-size: 16px;
+}
+
+.entry-content h5,
+.post-content h5 {
+    font-size: 14px;
+}
+
+.entry-content h6,
+.post-content h6 {
+    font-size: 12px;
+}
+
+.entry-content a,
+.post-content a {
+    box-shadow: 0 1px 0;
+    box-decoration-break: clone;
+    -webkit-box-decoration-break: clone;
+}
+
+.entry-content a code,
+.post-content a code {
+    margin: auto 0;
+    border-radius: 0;
+    box-shadow: 0 -1px 0 var(--primary) inset;
+}
+
+.entry-content del,
+.post-content del {
+    text-decoration: line-through;
+    background: linear-gradient(to right, var(--primary) 100%, transparent 0) 0 50%/1px 1px repeat-x;
+}
+
+.entry-content ol,
+.post-content ol,
+.entry-content ul,
+.post-content ul {
+    padding-inline-start: 20px;
+}
+
+.entry-content li,
+.post-content li {
+    margin-top: 5px;
+}
+
+.entry-content li p,
+.post-content li p {
+    margin-bottom: 0;
+}
+
+.entry-content dl,
+.post-content dl {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+}
+
+.entry-content dt,
+.post-content dt {
+    width: 25%;
+    font-weight: 700;
+}
+
+.entry-content dd,
+.post-content dd {
+    width: 75%;
+    margin-inline-start: 0;
+    padding-inline-start: 10px;
+}
+
+.entry-content dd ~ dd,
+.post-content dd ~ dd,
+.entry-content dt ~ dt,
+.post-content dt ~ dt {
+    margin-top: 10px;
+}
+
+.entry-content table,
+.post-content table {
+    margin-bottom: var(--content-gap);
+}
+
+.entry-content table th,
+.post-content table th,
+.entry-content table:not(.highlighttable, .highlight table, .gist .highlight) td,
+.post-content table:not(.highlighttable, .highlight table, .gist .highlight) td {
+    min-width: 80px;
+    padding: 8px 5px;
+    line-height: 1.5;
+    border-bottom: 1px solid var(--border);
+}
+
+.entry-content table th,
+.post-content table th {
+    text-align: start;
+}
+
+.entry-content table:not(.highlighttable) td code:only-child,
+.post-content table:not(.highlighttable) td code:only-child {
+    margin: auto 0;
+}
+
+.entry-content .highlight table,
+.post-content .highlight table {
+    border-radius: var(--radius);
+}
+
+.entry-content .highlight:not(table),
+.post-content .highlight:not(table) {
+    margin: 10px auto;
+    background: var(--code-block-bg) !important;
+    border-radius: var(--radius);
+    direction: ltr;
+}
+
+.entry-content li > .highlight,
+.post-content li > .highlight {
+    margin-inline-end: 0;
+}
+
+.entry-content ul pre,
+.post-content ul pre {
+    margin-inline-start: calc(var(--gap) * -2);
+}
+
+.entry-content .highlight pre,
+.post-content .highlight pre {
+    margin: 0;
+}
+
+.entry-content .highlighttable,
+.post-content .highlighttable {
+    table-layout: fixed;
+}
+
+.entry-content .highlighttable td:first-child,
+.post-content .highlighttable td:first-child {
+    width: 40px;
+}
+
+.entry-content .highlighttable td .linenodiv,
+.post-content .highlighttable td .linenodiv {
+    padding-inline-end: 0 !important;
+}
+
+.entry-content .highlighttable td .highlight,
+.post-content .highlighttable td .highlight,
+.entry-content .highlighttable td .linenodiv pre,
+.post-content .highlighttable td .linenodiv pre {
+    margin-bottom: 0;
+}
+
+.entry-content code,
+.post-content code {
+    margin: auto 4px;
+    padding: 4px 6px;
+    font-size: 0.78em;
+    line-height: 1.5;
+    background: var(--code-bg);
+    border-radius: 2px;
+}
+
+.entry-content pre code,
+.post-content pre code {
+    display: grid;
+    margin: auto 0;
+    padding: 10px;
+    color: rgb(213, 213, 214);
+    background: var(--code-block-bg) !important;
+    border-radius: var(--radius);
+    overflow-x: auto;
+    word-break: break-all;
+}
+
+.entry-content blockquote,
+.post-content blockquote {
+    margin: 20px 0;
+    padding: 0 14px;
+    border-inline-start: 3px solid var(--primary);
+}
+
+.entry-content hr,
+.post-content hr {
+    margin: 30px 0;
+    height: 2px;
+    background: var(--tertiary);
+    border: 0;
+}
+
+.entry-content iframe,
+.post-content iframe {
+    max-width: 100%;
+}
+
+.entry-content img,
+.post-content img {
+    border-radius: 4px;
+    margin: 1rem 0;
+}
+
+.entry-content img[src*="#center"],
+.post-content img[src*="#center"] {
+    margin: 1rem auto;
+}
+
+.entry-content figure.align-center,
+.post-content figure.align-center {
+    text-align: center;
+}
+
+.entry-content figure > figcaption,
+.post-content figure > figcaption {
+    color: var(--primary);
+    font-size: 16px;
+    font-weight: bold;
+    margin: 8px 0 16px;
+}
+
+.entry-content figure > figcaption > p,
+.post-content figure > figcaption > p {
+    color: var(--secondary);
+    font-size: 14px;
+    font-weight: normal;
+}

assets/css/common/post-entry.css

@@ -61,12 +61,21 @@
     color: var(--secondary);
     font-size: 14px;
     line-height: 1.6;
+    position: relative;
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
 }
 
+.entry-content dl,
+.entry-content ol,
+.entry-content p,
+.entry-content figure,
+.entry-content ul {
+    margin-bottom: var(--content-gap-summary);
+}
+
 .entry-footer {
     color: var(--secondary);
     font-size: 13px;
@@ -80,6 +89,14 @@
     bottom: 0;
 }
 
+.entry-content-on-top .entry-content {
+    z-index: 1;
+}
+
+.entry-content-on-top .entry-link {
+    z-index: 0;
+}
+
 .entry-hint {
     color: var(--secondary);
 }

assets/css/common/post-single.css

@@ -32,60 +32,6 @@
     font-size: 16px;
 }
 
-.post-content {
-    color: var(--content);
-}
-
-.post-content h3,
-.post-content h4,
-.post-content h5,
-.post-content h6 {
-    margin: 24px 0 16px;
-}
-
-.post-content h1 {
-    margin: 40px auto 32px;
-    font-size: 40px;
-}
-
-.post-content h2 {
-    margin: 32px auto 24px;
-    font-size: 32px;
-}
-
-.post-content h3 {
-    font-size: 24px;
-}
-
-.post-content h4 {
-    font-size: 16px;
-}
-
-.post-content h5 {
-    font-size: 14px;
-}
-
-.post-content h6 {
-    font-size: 12px;
-}
-
-.post-content a,
-.toc a:hover {
-    box-shadow: 0 1px 0;
-    box-decoration-break: clone;
-    -webkit-box-decoration-break: clone;
-}
-
-.post-content a code {
-    margin: auto 0;
-    border-radius: 0;
-    box-shadow: 0 -1px 0 var(--primary) inset;
-}
-
-.post-content del {
-    text-decoration: line-through;
-}
-
 .post-content dl,
 .post-content ol,
 .post-content p,
@@ -94,164 +40,6 @@
     margin-bottom: var(--content-gap);
 }
 
-.post-content ol,
-.post-content ul {
-    padding-inline-start: 20px;
-}
-
-.post-content li {
-    margin-top: 5px;
-}
-
-.post-content li p {
-    margin-bottom: 0;
-}
-
-.post-content dl {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0;
-}
-
-.post-content dt {
-    width: 25%;
-    font-weight: 700;
-}
-
-.post-content dd {
-    width: 75%;
-    margin-inline-start: 0;
-    padding-inline-start: 10px;
-}
-
-.post-content dd ~ dd,
-.post-content dt ~ dt {
-    margin-top: 10px;
-}
-
-.post-content table {
-    margin-bottom: var(--content-gap);
-}
-
-.post-content table th,
-.post-content table:not(.highlighttable, .highlight table, .gist .highlight) td {
-    min-width: 80px;
-    padding: 8px 5px;
-    line-height: 1.5;
-    border-bottom: 1px solid var(--border);
-}
-
-.post-content table th {
-    text-align: start;
-}
-
-.post-content table:not(.highlighttable) td code:only-child {
-    margin: auto 0;
-}
-
-.post-content .highlight table {
-    border-radius: var(--radius);
-}
-
-.post-content .highlight:not(table) {
-    margin: 10px auto;
-    background: var(--code-block-bg) !important;
-    border-radius: var(--radius);
-    direction: ltr;
-}
-
-.post-content li > .highlight {
-    margin-inline-end: 0;
-}
-
-.post-content ul pre {
-    margin-inline-start: calc(var(--gap) * -2);
-}
-
-.post-content .highlight pre {
-    margin: 0;
-}
-
-.post-content .highlighttable {
-    table-layout: fixed;
-}
-
-.post-content .highlighttable td:first-child {
-    width: 40px;
-}
-
-.post-content .highlighttable td .linenodiv {
-    padding-inline-end: 0 !important;
-}
-
-.post-content .highlighttable td .highlight,
-.post-content .highlighttable td .linenodiv pre {
-    margin-bottom: 0;
-}
-
-.post-content code {
-    margin: auto 4px;
-    padding: 4px 6px;
-    font-size: 0.78em;
-    line-height: 1.5;
-    background: var(--code-bg);
-    border-radius: 2px;
-}
-
-.post-content pre code {
-    display: grid;
-    margin: auto 0;
-    padding: 10px;
-    color: rgb(213, 213, 214);
-    background: var(--code-block-bg) !important;
-    border-radius: var(--radius);
-    overflow-x: auto;
-    word-break: break-all;
-}
-
-.post-content blockquote {
-    margin: 20px 0;
-    padding: 0 14px;
-    border-inline-start: 3px solid var(--primary);
-}
-
-.post-content hr {
-    margin: 30px 0;
-    height: 2px;
-    background: var(--tertiary);
-    border: 0;
-}
-
-.post-content iframe {
-    max-width: 100%;
-}
-
-.post-content img {
-    border-radius: 4px;
-    margin: 1rem 0;
-}
-
-.post-content img[src*="#center"] {
-    margin: 1rem auto;
-}
-
-.post-content figure.align-center {
-    text-align: center;
-}
-
-.post-content figure > figcaption {
-    color: var(--primary);
-    font-size: 16px;
-    font-weight: bold;
-    margin: 8px 0 16px;
-}
-
-.post-content figure > figcaption > p {
-    color: var(--secondary);
-    font-size: 14px;
-    font-weight: normal;
-}
-
 .toc {
     margin: 0 2px 40px 2px;
     border: 1px solid var(--border);
@@ -291,6 +79,13 @@
     outline: 0;
 }
 
+.toc a:hover {
+    box-shadow: 0 1px 0;
+    box-decoration-break: clone;
+    -webkit-box-decoration-break: clone;
+}
+
+
 .post-footer {
     margin-top: 56px;
 }

assets/css/core/theme-vars.css.template

@@ -1,6 +1,7 @@
 :root {
     --gap: 24px;
     --content-gap: 20px;
+    --content-gap-summary: 5px;
     --nav-width: 1024px;
     --main-width: 720px;
     --header-height: 60px;

layouts/_default/list.html

@@ -63,7 +63,7 @@
 {{- $class = "post-entry tag-entry" }}
 {{- end }}
 
-<article class="{{ $class }}">
+<article class="{{ $class }}{{ cond site.Params.onlyRenderedShortSummaries " entry-content-on-top" "" }}">
   {{- $isHidden := (.Param "cover.hiddenInList") | default (.Param "cover.hidden") | default false }}
   {{- partial "cover.html" (dict "cxt" . "IsSingle" false "isHidden" $isHidden) }}
   <header class="entry-header">
@@ -79,9 +79,13 @@
       {{- end }}
     </h2>
   </header>
-  {{- if (ne (.Param "hideSummary") true) }}
+  {{- $summary := printf (.Summary | plainify | htmlUnescape) (cond .Truncated "..." "") }}
+  {{- if site.Params.onlyRenderedShortSummaries }}
+    {{- $summary = (or (.Params.summary | markdownify) (cond (not .Truncated) .Content false)) }}
+  {{- end }}
+  {{- if (and (ne (.Param "hideSummary") true) $summary) }}
   <div class="entry-content">
-    <p>{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}</p>
+    <p>{{- $summary | safeHTML }}</p>
   </div>
   {{- end }}
   {{- if not (.Param "hideMeta") }}