Header styles

This commit is contained in:
Sodbileg Gansukh 2023-07-10 11:14:43 +08:00
parent 234e098968
commit bd5c882ebb
7 changed files with 150 additions and 2 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

@ -581,3 +581,71 @@ Search LOGO Login Subscribe
opacity: 0;
}
}
/* Card */
.gh-card-image {
position: relative;
aspect-ratio: 16 / 9;
}
.gh-card-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* 6. Header */
.gh-header {
--gap: 40px;
}
/* 6.1. Magazine layout */
.gh-header.is-magazine .gh-header-inner {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: var(--gap);
}
.gh-header.is-magazine .gh-header-inner > div {
display: flex;
flex-direction: column;
gap: var(--gap);
grid-row: 1;
}
.gh-header.is-magazine .gh-header-left {
grid-column: 1;
}
.gh-header.is-magazine .gh-header-inner > .gh-card {
grid-column: 2;
}
.gh-header.is-magazine .gh-header-right {
grid-column: 3;
}
.gh-header.is-magazine .gh-header-inner > div .gh-card-excerpt {
display: none;
}
/* 6.2. Highlight layout */
.gh-header.is-highlight .gh-header-inner {
display: grid;
grid-template-columns: 3fr 1fr;
gap: var(--gap);
}
.gh-header.is-highlight .gh-card:first-child {
grid-row: span 3;
}
.gh-header.is-highlight .gh-card:not(:first-child) .gh-card-excerpt {
display: none;
}

View File

@ -23,6 +23,7 @@
<div class="gh-viewport">
{{> "components/navigation" navigationLayout=@custom.navigation_layout}}
{{> "components/header" headerStyle="Search"}}
{{{body}}}

View File

@ -93,6 +93,17 @@
"Stacked"
],
"default": "Logo in the middle"
},
"header_style": {
"type": "select",
"options": [
"Magazine",
"Highlight",
"Landing",
"Search"
],
"default": "Magazine",
"group": "homepage"
}
}
},

View File

@ -0,0 +1,46 @@
<section class="gh-header is-{{#match headerStyle "Magazine"}}magazine{{else match headerStyle "Highlight"}}highlight{{else}}classic{{/match}} gh-outer">
<div class="gh-header-inner gh-inner">
{{!-- Magazine layout --}}
{{#match headerStyle "Magazine"}}
{{#foreach posts limit="7"}}
{{#match @number 2}}
<div class="gh-header-left">
{{/match}}
{{#match @number 5}}
<div class="gh-header-right">
{{/match}}
{{> "loop"}}
{{#match @number 4}}
</div>
{{/match}}
{{#match @number 7}}
</div>
{{/match}}
{{/foreach}}
{{/match}}
{{!-- Highlight layout --}}
{{#match headerStyle "Highlight"}}
{{#foreach posts limit="4"}}
{{> "loop"}}
{{/foreach}}
{{/match}}
{{!-- Landing layout --}}
{{#match headerStyle "Landing"}}
<h1>Founded by Australian journalist Claire Lehmann, Quillette publishes high quality long reads on diverse topics, daily.</h1>
<form>
<input type="email">
<button type="submit">Subscribe</button>
</form>
{{/match}}
{{!-- Search layout --}}
{{#match headerStyle "Search"}}
<h1>Founded by Australian journalist Claire Lehmann, Quillette publishes high quality long reads on diverse topics, daily.</h1>
<div>Search</div>
{{/match}}
</div>
</section>

22
partials/loop.hbs Normal file
View File

@ -0,0 +1,22 @@
<article class="gh-card {{post_class}}">
<a class="gh-card-link" href="{{url}}">
{{#if feature_image}}
<figure class="gh-card-image">
<img
srcset="{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 720w,
{{img_url feature_image size="l"}} 960w,
{{img_url feature_image size="xl"}} 1200w,
{{img_url feature_image size="xxl"}} 2000w"
sizes="(max-width: 1200px) 100vw, 1200px"
src="{{img_url feature_image size="m"}}"
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
>
</figure>
{{/if}}
<div class="gh-card-wrapper">
<h2 class="gh-card-title">{{title}}</h2>
<p class="gh-card-excerpt">{{excerpt}}</p>
</div>
</a>
</article>