dbrun/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2026-01-30 15:31:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use grid rather than flexbox for recent articles

Browse Source 
Currently the items include some inner padding, which means
that the items have some leading spacing on the left/right
which don't align with the keyline.

This PR updates this to use a grid, with a fixed number of
columns depending on the screen size.
This commit is contained in:
Chris Banes
2022-12-17 15:58:50 +00:00
parent 5f1efb9946
commit 8c939bf372
2 changed files with 60 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/partials/recent-articles.html
+32 -42
View File
@@ -8,46 +8,36 @@
{{ if .Site.Params.homepage.cardView | default false }}
{{ if .Site.Params.homepage.cardViewScreenWidth | default false }}
<section class="relative w-screen max-w-[1600px]" style="left: calc(max(-50vw,-800px) + 50%);">
<div class="flex flex-wrap pl-8 pr-8">
{{ else }}
<section class="w-full">
<div class="flex flex-wrap">
{{ end }}
{{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
.Site.Params.mainSections)).Pages }}
{{ if .Site.Params.homepage.cardViewScreenWidth | default false }}
<div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3 xl:w-1/4 2xl:w-1/5">
{{ else }}
<div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3">
{{ end }}
{{ partial "article-link-card.html" . }}
</div>
{{ end }}
</div>
</section>
{{ else }}
<section class="space-y-10 w-full">
{{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)).Pages
}}
{{ partial "article-link.html" . }}
{{ end }}
</section>
<section class="relative w-screen max-w-[1600px] grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
style="left: calc(max(-50vw,-800px) + 50%);">
{{ else }}
<section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
{{ end }}
{{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
.Site.Params.mainSections)).Pages }}
{{ partial "article-link-card.html" . }}
{{ end }}
{{ if .Site.Params.homepage.showMoreLink | default false }}
{{ if index .Site.Params.homepage "showRecentItems" }}
{{ $showMoreLinkDest = .Site.Params.homepage.showMoreLinkDest }}
{{ end }}
<div class="mt-10 flex justify-center">
<a href="{{ $showMoreLinkDest }}">
<button
class="bg-transparent hover:text-primary-500 prose dark:prose-invert font-semibold hover:text-white py-2 px-4 border border-primary-500 hover:border-transparent rounded">
{{ i18n "recent.show_more" | markdownify | emojify }}
</button>
</a>
</div>
{{ end }}
{{ end }}
</section>
{{ else }}
<section class="space-y-10 w-full">
{{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)).Pages
}}
{{ partial "article-link.html" . }}
{{ end }}
</section>
{{ end }}
{{ if .Site.Params.homepage.showMoreLink | default false }}
{{ if index .Site.Params.homepage "showRecentItems" }}
{{ $showMoreLinkDest = .Site.Params.homepage.showMoreLinkDest }}
{{ end }}
<div class="mt-10 flex justify-center">
<a href="{{ $showMoreLinkDest }}">
<button
class="bg-transparent hover:text-primary-500 prose dark:prose-invert font-semibold hover:text-white py-2 px-4 border border-primary-500 hover:border-transparent rounded">
{{ i18n "recent.show_more" | markdownify | emojify }}
</button>
</a>
</div>
{{ end }}
{{ end }}