mirror of
https://github.com/nunocoracao/blowfish.git
synced 2025-01-22 14:35:43 -06:00
Use grid rather than flexbox for recent articles
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
parent
5f1efb9946
commit
8c939bf372
2 changed files with 60 additions and 51 deletions
|
|
@ -1446,6 +1446,10 @@ select {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1526,10 +1530,6 @@ select {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.w-36 {
|
||||
width: 9rem;
|
||||
}
|
||||
|
||||
.w-24 {
|
||||
width: 6rem;
|
||||
}
|
||||
|
|
@ -1542,6 +1542,10 @@ select {
|
|||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.w-36 {
|
||||
width: 9rem;
|
||||
}
|
||||
|
||||
.min-w-0 {
|
||||
min-width: 0px;
|
||||
}
|
||||
|
|
@ -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)));
|
||||
|
|
@ -1749,11 +1757,6 @@ select {
|
|||
border-color: rgba(var(--color-neutral-300), var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-neutral-400 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(var(--color-neutral-400), var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-neutral-200 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(var(--color-neutral-200), var(--tw-border-opacity));
|
||||
|
|
@ -3440,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;
|
||||
}
|
||||
|
|
@ -3543,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;
|
||||
}
|
||||
|
|
@ -3706,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));
|
||||
}
|
||||
}
|
||||
|
|
@ -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 }}
|
||||
Loading…
Reference in a new issue