simon/ghost-theme-sd.ai
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Minor things

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

69
assets/css/screen.css
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;

8
package.json
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,

97
partials/components/header.hbs
View File

@ -1,46 +1,61 @@
<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">
{{#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}}
{{!-- 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}}
<div class="gh-header-inner gh-inner">
{{!-- Highlight layout --}}
{{#match headerStyle "Highlight"}}
{{#foreach posts limit="4"}}
{{> "loop"}}
{{/foreach}}
{{/match}}
{{!-- 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}}
{{!-- 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}}
{{!-- Highlight layout --}}
{{#match headerStyle "Highlight"}}
{{#foreach posts limit="4"}}
{{> "loop"}}
{{/foreach}}
{{/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}}
{{!-- 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" placeholder="jamie@example.com">
<button class="gh-button" type="submit">Subscribe</button>
</form>
{{/match}}
</div>
</section>
{{!-- Search layout --}}
{{#match headerStyle "Search"}}
<h1>Founded by Australian journalist Claire Lehmann, Quillette publishes high quality long reads on diverse topics, daily.</h1>
<button data-ghost-search>{{> "icons/search"}}Search</button>
{{/match}}
</div>
</section>
{{/match}}