diff options
| -rw-r--r-- | assets/css/utils/_utility.scss | 4 | ||||
| -rw-r--r-- | layouts/archive.html | 2 | ||||
| -rw-r--r-- | layouts/essays/section.html | 2 | ||||
| -rw-r--r-- | layouts/highlights.html | 4 | ||||
| -rw-r--r-- | layouts/section.html | 2 |
5 files changed, 9 insertions, 5 deletions
diff --git a/assets/css/utils/_utility.scss b/assets/css/utils/_utility.scss index df29ce0a..ce11796c 100644 --- a/assets/css/utils/_utility.scss +++ b/assets/css/utils/_utility.scss @@ -46,3 +46,7 @@ details.no-mark summary::marker { content: "" } +.lazy-render { + content-visibility: auto; + contain-intrinsic-size: auto 500px; +} diff --git a/layouts/archive.html b/layouts/archive.html index 3af7c9ce..764f0879 100644 --- a/layouts/archive.html +++ b/layouts/archive.html @@ -6,7 +6,7 @@ <ol class="mx-0 my-4 p-0 leading-loose flex flex-col-reverse"> {{ range (.Site.RegularPages | collections.Reverse) }} {{ if eq .Language .Site.Language }} - <li class="list-decimal text-secondary"> + <li class="list-decimal text-secondary lazy-render"> <div class="flex justify-between"> <a href="{{ .Permalink }}">{{ .LinkTitle }}</a> <a href="/{{ .Section }}" class="font-mono text-secondary">{{ .Section }}</a> diff --git a/layouts/essays/section.html b/layouts/essays/section.html index f5a08ace..40baea9e 100644 --- a/layouts/essays/section.html +++ b/layouts/essays/section.html @@ -16,7 +16,7 @@ )}} {{ range .Pages.GroupByDate "January" }} - <details class="posts-month-archive"{{ if gt $remainingMonthsToOpen 0 }} open{{ end }}> + <details class="lazy-render"{{ if gt $remainingMonthsToOpen 0 }} open{{ end }}> <summary class="flex items-center border-b border-b-dashed border-[var(--border-color)] py-2 px-1"> <h2 class="text-size-lg inline-block w-full m-0 flex justify-between items-center"> diff --git a/layouts/highlights.html b/layouts/highlights.html index 9d7c13bf..f9f9c030 100644 --- a/layouts/highlights.html +++ b/layouts/highlights.html @@ -6,12 +6,12 @@ </div> <!-- Highlights --> {{ range shuffle site.Data.highlights }} - <section class="post-content"> + <section class="post-content lazy-render"> <h3><a href="{{ .url }}">《{{ .title }}》</a></h3> <ul class="list-none"> {{ range .highlights }} <li class="my-4 text-lg"> - <a class="font-italic hover:no-underline" href="{{ .link }}">{{ .text | markdownify }}</a> + <a class="hover:no-underline" href="{{ .link }}">{{ .text | markdownify }}</a> </li> {{ end }} </ul> diff --git a/layouts/section.html b/layouts/section.html index a70c6cd1..7497a217 100644 --- a/layouts/section.html +++ b/layouts/section.html @@ -25,7 +25,7 @@ )}} {{ range .Pages.GroupByDate "January" }} - <div class="posts-month-archive"{{ if gt $remainingMonthsToOpen 0 }} open{{ end }}> + <div class="lazy-render"{{ if gt $remainingMonthsToOpen 0 }} open{{ end }}> <h2 class="text-size-lg inline-block w-full m-0 flex justify-between items-center"> {{ .Key }} |