From fa4474d216f940fcec2a9fec1ebe6b093cd56c26 Mon Sep 17 00:00:00 2001 From: Victor Ananyev Date: Fri, 26 Jan 2024 19:10:39 +0100 Subject: [PATCH] allow rendering short summaries in the list view --- assets/css/common/post-content-common.css | 259 ++++++++++++++++++++++ assets/css/common/post-entry.css | 17 ++ assets/css/common/post-single.css | 219 +----------------- assets/css/core/theme-vars.css.template | 1 + layouts/_default/list.html | 10 +- 5 files changed, 291 insertions(+), 215 deletions(-) create mode 100644 assets/css/common/post-content-common.css diff --git a/assets/css/common/post-content-common.css b/assets/css/common/post-content-common.css new file mode 100644 index 0000000..5ad40bf --- /dev/null +++ b/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; +} diff --git a/assets/css/common/post-entry.css b/assets/css/common/post-entry.css index c3cba37..b53d969 100644 --- a/assets/css/common/post-entry.css +++ b/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); } diff --git a/assets/css/common/post-single.css b/assets/css/common/post-single.css index 9f9f479..97b4129 100644 --- a/assets/css/common/post-single.css +++ b/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; } diff --git a/assets/css/core/theme-vars.css.template b/assets/css/core/theme-vars.css.template index db1845d..e165f09 100644 --- a/assets/css/core/theme-vars.css.template +++ b/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; diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 81aea6e..5b247ae 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -63,7 +63,7 @@ {{- $class = "post-entry tag-entry" }} {{- end }} -
+
{{- $isHidden := (.Param "cover.hiddenInList") | default (.Param "cover.hidden") | default false }} {{- partial "cover.html" (dict "cxt" . "IsSingle" false "isHidden" $isHidden) }}
@@ -79,9 +79,13 @@ {{- end }}
- {{- 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) }}
-

{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}

+

{{- $summary | safeHTML }}

{{- end }} {{- if not (.Param "hideMeta") }}