Minor things

This commit is contained in:
Sodbileg Gansukh 2023-07-10 15:09:26 +08:00
parent c5a1fce9d9
commit 6d7e0ec42d
5 changed files with 130 additions and 48 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

@ -134,7 +134,6 @@ a:hover {
}
.gh-outer {
position: relative;
padding: 0 max(4vmin, 20px);
}
@ -620,6 +619,22 @@ Search LOGO Login Subscribe
/* 6. Header */
.gh-header {
position: relative;
}
.gh-header-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.gh-header-inner {
position: relative;
}
/* 6.1. Magazine layout */
.gh-header.is-magazine .gh-header-inner {
@ -667,8 +682,32 @@ Search LOGO Login Subscribe
display: none;
}
/* 6.3. Classic layout */
.gh-header.is-classic {
display: flex;
min-height: 480px;
}
.gh-header.is-classic .gh-header-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
margin: auto;
max-width: 720px;
}
.gh-header.is-classic.has-image .gh-header-inner {
color: #fff;
}
/* 7. Featured posts */
.gh-featured {
margin-top: 64px;
}
.gh-featured-feed {
display: grid;
grid-template-columns: repeat(4, 1fr);
@ -692,6 +731,10 @@ Search LOGO Login Subscribe
/* 8. Container */
.gh-container {
margin-top: 64px;
}
.gh-container-inner {
display: grid;
grid-template-columns: repeat(16, 1fr);
@ -729,6 +772,7 @@ Search LOGO Login Subscribe
.gh-container.is-list .gh-card-link {
display: flex;
align-items: flex-start;
gap: 24px;
}
@ -750,13 +794,30 @@ Search LOGO Login Subscribe
display: none;
}
/* 10. Footer */
/* 10. Sidebar */
.gh-about {
position: sticky;
top: 40px;
display: flex;
flex-direction: column;
align-items: center;
padding: 48px 24px;
background-color: var(--color-lighter-gray);
}
.gh-about-icon {
width: 80px;
height: 80px;
}
/* 11. Footer */
.gh-footer {
margin-top: 80px;
}
/* 10.1. Footer bar */
/* 11.1. Footer bar */
.gh-footer-bar {
display: grid;
@ -775,7 +836,7 @@ Search LOGO Login Subscribe
text-align: right;
}
/* 10.2. Footer signup */
/* 11.2. Footer signup */
.gh-footer-signup {
display: flex;

View File

@ -108,11 +108,17 @@
"Magazine",
"Highlight",
"Landing",
"Search"
"Search",
"Off"
],
"default": "Magazine",
"group": "homepage"
},
"use_publication_cover_as_background": {
"type": "boolean",
"default": false,
"group": "homepage"
},
"show_featured": {
"type": "boolean",
"default": true,

View File

@ -1,4 +1,17 @@
<section class="gh-header is-{{#match headerStyle "Magazine"}}magazine{{else match headerStyle "Highlight"}}highlight{{else}}classic{{/match}} gh-outer">
{{#match headerStyle "!=" "Off"}}
<section class="gh-header is-{{#match headerStyle "Magazine"}}magazine{{else match headerStyle "Highlight"}}highlight{{else}}classic{{/match}}{{#if @custom.use_publication_cover_as_background}} has-image{{/if}} gh-outer">
{{!-- Background image --}}
{{#if @custom.use_publication_cover_as_background}}
{{#match headerStyle "!=" "Magazine"}}
{{#match headerStyle "!=" "Highlight"}}
{{#if @site.cover_image}}
<img class="gh-header-image" src="{{@site.cover_image}}" alt="{{@site.title}}">
{{/if}}
{{/match}}
{{/match}}
{{/if}}
<div class="gh-header-inner gh-inner">
{{!-- Magazine layout --}}
@ -31,16 +44,18 @@
{{#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>
<input type="email" placeholder="jamie@example.com">
<button class="gh-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>
<button data-ghost-search>{{> "icons/search"}}Search</button>
{{/match}}
</div>
</section>
{{/match}}