michael/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2025-01-22 14:35:43 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Merge pull request #329 from chrisbanes/cb/grid-recent-articles

Browse source 
💄 Use grid rather than flexbox for recent articles
This commit is contained in:
Nuno Coração 2022-12-21 19:39:47 +00:00 committed by GitHub
commit 68f9da6c27
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 56 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
assets/css/compiled/main.css
View file

@ -1446,6 +1446,10 @@ select {
display: flex;
}
.grid {
display: grid;
}
.hidden {
display: none;
}
@ -1653,6 +1657,10 @@ select {
justify-content: space-between;
}
.gap-4 {
gap: 1rem;
}
.space-y-10 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
@ -3435,6 +3443,10 @@ body:has(#menu-controller:checked) {
max-width: 65ch;
}
.sm\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sm\:flex-row {
flex-direction: row;
}
@ -3538,6 +3550,10 @@ body:has(#menu-controller:checked) {
width: auto;
}
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.md\:justify-start {
justify-content: flex-start;
}
@ -3701,10 +3717,18 @@ body:has(#menu-controller:checked) {
.xl\:w-1\/4 {
width: 25%;
}
.xl\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 1536px) {
.\32xl\:w-1\/5 {
width: 20%;
}
.\32xl\:grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}

74
layouts/partials/recent-articles.html
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 }}