List layout

This commit is contained in:
Sodbileg Gansukh 2022-05-18 10:48:08 +08:00
parent 6236067373
commit 994a2287a2
7 changed files with 34 additions and 74 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

@ -166,6 +166,10 @@ body:not(.has-cover-image) .site-header-content:not(.vertical) {
font-weight: 800; font-weight: 800;
} }
.has-serif-title .site-title {
font-family: var(--font-serif);
}
.site-header-content.vertical .site-title { .site-header-content.vertical .site-title {
font-size: 10rem; font-size: 10rem;
} }
@ -536,12 +540,6 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
padding: 64px 0; padding: 64px 0;
} }
.post-feed.list {
row-gap: 6vmin;
max-width: 940px;
margin: 2vmin auto 0;
}
@media (max-width: 1000px) { @media (max-width: 1000px) {
.post-feed { .post-feed {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@ -707,29 +705,6 @@ make sure this only happens on large viewports / desktop-ish devices.
*/ */
@media (min-width: 701px) {
.post-feed.list .post-card-large {
grid-column: 1 / span 3;
display: grid;
grid-gap: 4vmin;
grid-template-columns: 3fr 5fr;
border-top: 0;
}
.post-feed.list .post-card-large.no-image {
grid-template-columns: 1fr;
}
.post-feed.list .post-card-large:not(.no-image) .post-card-header {
margin-top: 0;
}
.post-feed.list .post-card-large .post-card-content {
justify-content: flex-start;
margin-top: -6px;
}
}
@media (min-width: 1001px) { @media (min-width: 1001px) {
.post-card-large { .post-card-large {
grid-column: span 6; grid-column: span 6;
@ -773,21 +748,6 @@ make sure this only happens on large viewports / desktop-ish devices.
margin-top: 16px; margin-top: 16px;
} }
.post-feed.list .post-card-large .post-card-image-link {
grid-column: 1 / span 1;
height: max-content;
}
.post-feed.list .post-card-large .post-card-image-link::after {
content: "";
display: block;
padding-bottom: 60%;
}
.post-feed.list .post-card-large .post-card-title {
font-size: 2.4rem;
}
.post-card-full { .post-card-full {
grid-column: span 6; grid-column: span 6;
} }
@ -810,6 +770,14 @@ make sure this only happens on large viewports / desktop-ish devices.
font-size: 1.8rem; font-size: 1.8rem;
} }
.post-card-large + .post-card-large:nth-child(even) {
margin: 32px 0;
}
.post-card-large + .post-card-large:nth-child(even) .post-card-content {
order: -1;
}
.post-card.dynamic { .post-card.dynamic {
grid-column: span 3; grid-column: span 3;
} }

View File

@ -9,15 +9,6 @@
<meta name="HandheldFriendly" content="True" /> <meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
:root {
{{#if @custom.header_button_background}}
--button-bg-color: {{@custom.header_button_background}};
{{/if}}
--button-text-color: {{#match @custom.header_button_text_color "Light"}}#fff{{else}}var(--color-darkgrey){{/match}};
}
</style>
{{!-- Theme assets - use the {asset} helper to reference styles & scripts, {{!-- Theme assets - use the {asset} helper to reference styles & scripts,
this will take care of caching and cache-busting automatically --}} this will take care of caching and cache-busting automatically --}}
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" /> <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
@ -27,7 +18,7 @@
{{ghost_head}} {{ghost_head}}
</head> </head>
<body class="{{body_class}}{{#match @custom.title_font "=" "Elegant serif"}} has-serif-title{{/match}}{{#match @custom.body_font "=" "Modern sans-serif"}} has-sans-body{{/match}}{{#is "home"}}{{#if @site.cover_image}} has-cover-image{{/if}}{{#match @custom.about_section "!=" "None"}}{{#if @custom.include_logo_in_about_section}} no-logo{{/if}}{{/match}}{{/is}}"> <body class="{{body_class}}{{#match @custom.title_font "=" "Elegant serif"}} has-serif-title{{/match}}{{#match @custom.body_font "=" "Modern sans-serif"}} has-sans-body{{/match}}{{#if @site.cover_image}} has-cover-image{{/if}}{{#is "home"}}{{#match @custom.about_section "!=" "None"}}{{#if @custom.include_logo_in_about_section}} no-logo{{/if}}{{/match}}{{/is}}">
<div class="viewport"> <div class="viewport">
<header id="gh-head" class="gh-head outer"> <header id="gh-head" class="gh-head outer">

View File

@ -48,7 +48,7 @@ into the {body} of the default.hbs template --}}
<main id="site-main" class="site-main outer"> <main id="site-main" class="site-main outer">
<div class="inner posts"> <div class="inner posts">
<div class="post-feed{{#match @custom.feed_layout "List"}} list{{/match}}"> <div class="post-feed">
{{#foreach posts}} {{#foreach posts}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}} {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{> "post-card"}} {{> "post-card"}}

View File

@ -134,7 +134,8 @@
"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}}{{#is "home"}}{{^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}}{{#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}}{{/is}}{{/is}}{{#if @custom.keep_card_thumbnail_ratio}} keep-ratio{{/if}}"> <article class="post-card {{post_class}}{{#match @custom.feed_layout "!=" "List"}}{{#is "home"}}{{^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}}{{#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}}{{/is}}{{/is}}{{else}} post-card-large{{/match}}{{#if @custom.keep_card_thumbnail_ratio}} keep-ratio{{/if}}">
{{#if feature_image}} {{#if feature_image}}
<a class="post-card-image-link" href="{{url}}"> <a class="post-card-image-link" href="{{url}}">