mirror of
https://github.com/ViViDboarder/Vivid-Casper.git
synced 2024-12-22 11:37:38 +00:00
List layout
This commit is contained in:
Sodbileg Gansukh
parent
6236067373
commit
994a2287a2
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -166,6 +166,10 @@ body:not(.has-cover-image) .site-header-content:not(.vertical) {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.has-serif-title .site-title {
|
||||
font-family: var(--font-serif);
|
||||
}
|
||||
|
||||
.site-header-content.vertical .site-title {
|
||||
font-size: 10rem;
|
||||
}
|
||||
@ -536,12 +540,6 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
|
||||
padding: 64px 0;
|
||||
}
|
||||
|
||||
.post-feed.list {
|
||||
row-gap: 6vmin;
|
||||
max-width: 940px;
|
||||
margin: 2vmin auto 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.post-feed {
|
||||
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
|
||||
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) {
|
||||
.post-card-large {
|
||||
@ -773,21 +748,6 @@ make sure this only happens on large viewports / desktop-ish devices.
|
||||
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 {
|
||||
grid-column: span 6;
|
||||
}
|
||||
@ -810,6 +770,14 @@ make sure this only happens on large viewports / desktop-ish devices.
|
||||
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 {
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
11
default.hbs
11
default.hbs
@ -9,15 +9,6 @@
|
||||
<meta name="HandheldFriendly" content="True" />
|
||||
<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,
|
||||
this will take care of caching and cache-busting automatically --}}
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
|
||||
@ -27,7 +18,7 @@
|
||||
{{ghost_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">
|
||||
|
||||
<header id="gh-head" class="gh-head outer">
|
||||
|
||||
@ -48,7 +48,7 @@ into the {body} of the default.hbs template --}}
|
||||
<main id="site-main" class="site-main outer">
|
||||
<div class="inner posts">
|
||||
|
||||
<div class="post-feed{{#match @custom.feed_layout "List"}} list{{/match}}">
|
||||
<div class="post-feed">
|
||||
{{#foreach posts}}
|
||||
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
|
||||
{{> "post-card"}}
|
||||
|
||||
@ -134,7 +134,8 @@
|
||||
"type": "select",
|
||||
"options": [
|
||||
"Dynamic grid",
|
||||
"Simple grid"
|
||||
"Simple grid",
|
||||
"List"
|
||||
],
|
||||
"default": "Dynamic grid",
|
||||
"group": "homepage"
|
||||
|
||||
@ -1,23 +1,23 @@
|
||||
{{!-- 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}}{{#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}}
|
||||
<a class="post-card-image-link" href="{{url}}">
|
||||
{{!-- 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 --}}
|
||||
<img class="post-card-image"
|
||||
srcset="{{img_url feature_image size="s"}} 300w,
|
||||
{{img_url feature_image size="m"}} 600w,
|
||||
{{img_url feature_image size="l"}} 1000w,
|
||||
{{img_url feature_image size="xl"}} 2000w"
|
||||
sizes="(max-width: 1000px) 400px, 800px"
|
||||
src="{{img_url feature_image size="m"}}"
|
||||
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
|
||||
loading="lazy"
|
||||
/>
|
||||
</a>
|
||||
<a class="post-card-image-link" href="{{url}}">
|
||||
{{!-- 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 --}}
|
||||
<img class="post-card-image"
|
||||
srcset="{{img_url feature_image size="s"}} 300w,
|
||||
{{img_url feature_image size="m"}} 600w,
|
||||
{{img_url feature_image size="l"}} 1000w,
|
||||
{{img_url feature_image size="xl"}} 2000w"
|
||||
sizes="(max-width: 1000px) 400px, 800px"
|
||||
src="{{img_url feature_image size="m"}}"
|
||||
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
|
||||
loading="lazy"
|
||||
/>
|
||||
</a>
|
||||
{{/if}}
|
||||
|
||||
<div class="post-card-content">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user