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;
display: grid;
grid-gap: 4vmin;
grid-template-columns: repeat(20, 1fr);
grid-template-columns: repeat(3, 1fr);
min-height: 280px;
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 {
position: relative;
grid-column: span 13;
grid-column: span 2;
margin-bottom: 0;
min-height: 380px;
}
.post-card-large .post-card-content {
grid-column: span 7;
grid-column: span 1;
}
.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;
}
.post-card:nth-child(2),
.post-card:nth-child(3) {
.post-card-full {
grid-column: span 6;
}
.post-card-full .post-card-title {
font-size: 6.4rem;
}
.post-card.dynamic {
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;
}
}

13
package.json
View file

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

2
partials/post-card.hbs
View file

@ -1,7 +1,7 @@
{{!-- This is a partial file used to generate a post "card"
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}}
<a class="post-card-image-link" href="{{url}}">