Post layouts

This commit is contained in:
Sodbileg Gansukh 2022-05-14 23:51:45 +08:00
parent 6c922fca35
commit b811b72333
5 changed files with 27 additions and 11 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -814,7 +814,7 @@ make sure this only happens on large viewports / desktop-ish devices.
grid-column: span 6; grid-column: span 6;
display: grid; display: grid;
grid-gap: 4vmin; grid-gap: 4vmin;
grid-template-columns: repeat(20, 1fr); grid-template-columns: repeat(3, 1fr);
min-height: 280px; min-height: 280px;
border-top: 0; border-top: 0;
} }
@ -825,13 +825,13 @@ make sure this only happens on large viewports / desktop-ish devices.
.post-card-large .post-card-image-link { .post-card-large .post-card-image-link {
position: relative; position: relative;
grid-column: span 13; grid-column: span 2;
margin-bottom: 0; margin-bottom: 0;
min-height: 380px; min-height: 380px;
} }
.post-card-large .post-card-content { .post-card-large .post-card-content {
grid-column: span 7; grid-column: span 1;
} }
.post-card-large .post-card-image { .post-card-large .post-card-image {
@ -870,12 +870,19 @@ make sure this only happens on large viewports / desktop-ish devices.
font-size: 2.4rem; font-size: 2.4rem;
} }
.post-card:nth-child(2), .post-card-full {
.post-card:nth-child(3) { grid-column: span 6;
}
.post-card-full .post-card-title {
font-size: 6.4rem;
}
.post-card.dynamic {
grid-column: span 3; grid-column: span 3;
} }
.post-card:is(:nth-child(2), :nth-child(3)) .post-card-title { .post-card.dynamic .post-card-title {
font-size: 3rem; font-size: 3rem;
} }
} }

View File

@ -120,12 +120,21 @@
"default": true, "default": true,
"group": "homepage" "group": "homepage"
}, },
"first_post_layout": {
"type": "select",
"options": [
"Large card",
"Full-width card",
"None"
],
"default": "Large card",
"group": "homepage"
},
"feed_layout": { "feed_layout": {
"type": "select", "type": "select",
"options": [ "options": [
"Dynamic grid", "Dynamic grid",
"Simple grid", "Simple grid"
"List"
], ],
"default": "Dynamic grid", "default": "Dynamic grid",
"group": "homepage" "group": "homepage"

View File

@ -1,7 +1,7 @@
{{!-- This is a partial file used to generate a post "card" {{!-- This is a partial file used to generate a post "card"
which templates loop over to generate a list of posts. --}} which templates loop over to generate a list of posts. --}}
<article class="post-card {{post_class}} {{#match @custom.feed_layout "!=" "Simple grid"}}{{#is "home, paged"}}{{#match @custom.feed_layout "Dynamic grid"}}{{#has index="0"}}{{#is "home"}}{{#if feature_image}}post-card-large{{/if}}{{/is}}{{/has}}{{else}}post-card-large{{/match}}{{/is}}{{/match}}"> <article class="post-card {{post_class}}{{^is "paged"}}{{#has index="0"}}{{#match @custom.first_post_layout "Large card"}} post-card-large{{/match}}{{#match @custom.first_post_layout "Full-width card"}} post-card-full{{/match}}{{/has}}{{/is}}{{#match @custom.feed_layout "Dynamic grid"}}{{#match @custom.first_post_layout "None"}}{{#has index="0,1"}} dynamic{{/has}}{{else}}{{#has index="1,2"}} dynamic{{/has}}{{/match}}{{/match}}">
{{#if feature_image}} {{#if feature_image}}
<a class="post-card-image-link" href="{{url}}"> <a class="post-card-image-link" href="{{url}}">