vividboarder/Vivid-Casper
1
0
Fork 0
mirror of https://github.com/ViViDboarder/Vivid-Casper.git synced 2024-12-22 11:37:38 +00:00
Code Issues Releases Wiki Activity

List layout

Browse Source
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
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

58
assets/css/screen.css
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;
@ -705,30 +703,7 @@ The first post in the list is styled to be bigger than the others and take over
the full width of the grid to give it more emphasis. Wrapped in a media query to the full width of the grid to give it more emphasis. Wrapped in a media query to
make sure this only happens on large viewports / desktop-ish devices. 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 {
@ -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;
} }

11
default.hbs
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">

2
index.hbs
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"}}

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

30
partials/post-card.hbs
View File

@ -1,23 +1,23 @@
{{!-- 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}}">
{{!-- This is a responsive image, it loads different sizes depending on device {{!-- This is a responsive image, it loads different sizes depending on device
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}} https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
<img class="post-card-image" <img class="post-card-image"
srcset="{{img_url feature_image size="s"}} 300w, srcset="{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 600w, {{img_url feature_image size="m"}} 600w,
{{img_url feature_image size="l"}} 1000w, {{img_url feature_image size="l"}} 1000w,
{{img_url feature_image size="xl"}} 2000w" {{img_url feature_image size="xl"}} 2000w"
sizes="(max-width: 1000px) 400px, 800px" sizes="(max-width: 1000px) 400px, 800px"
src="{{img_url feature_image size="m"}}" src="{{img_url feature_image size="m"}}"
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}" alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
loading="lazy" loading="lazy"
/> />
</a> </a>
{{/if}} {{/if}}
<div class="post-card-content"> <div class="post-card-content">