mentos1386/mnts.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Post layouts

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/built/screen.css
View file

File diff suppressed because one or more lines are too long

2
assets/built/screen.css.map
View file

File diff suppressed because one or more lines are too long

19
assets/css/screen.css
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;
} }
} }

13
package.json
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"

2
partials/post-card.hbs
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}}">