More theme settings cleanup

This commit is contained in:
Sodbileg Gansukh 2022-05-16 19:33:11 +08:00
parent 98f7f53119
commit 838120323a
8 changed files with 73 additions and 41 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

@ -179,6 +179,10 @@ body:not(.has-cover-image) .site-header-content:not(.vertical) {
padding-bottom: 32px;
}
.site-header-content.vertical .site-title + .site-description {
margin-top: 16px;
}
@media (max-width: 600px) {
.site-description {
max-width: 80vmin;
@ -225,8 +229,7 @@ body:not(.has-cover-image) .site-header-content:not(.vertical) {
display: flex;
align-items: center;
height: 40px;
max-width: 200px;
text-align: center;
max-width: 400px;
word-break: break-all;
}
@ -237,6 +240,10 @@ body:not(.has-cover-image) .site-header-content:not(.vertical) {
letter-spacing: -0.02em;
}
.has-cover-image .gh-head-logo {
color: #fff;
}
.no-logo .gh-head-logo {
display: none;
}
@ -548,6 +555,10 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
padding-bottom: 55%;
}
.post-card.keep-ratio:not(.post-card-large):not(.post-card-full) .post-card-image-link::after {
display: none;
}
.post-card-image {
position: absolute;
inset: 0;
@ -557,6 +568,10 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
object-fit: cover;
}
.post-card.keep-ratio:not(.post-card-large):not(.post-card-full) .post-card-image {
position: static;
}
.post-card-content-link {
position: relative;
display: block;
@ -608,7 +623,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
display: -webkit-box;
overflow-y: hidden;
margin-top: 12px;
max-width: 56em;
max-width: 720px;
line-height: 1.5;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
@ -619,6 +634,10 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
font-family: var(--font-sans);
}
.post-card:not(.post-card-large):not(.post-card-full):not(.dynamic) .post-card-excerpt {
display: none;
}
.post-card-meta {
display: flex;
align-items: center;
@ -724,8 +743,8 @@ make sure this only happens on large viewports / desktop-ish devices.
.post-card-large .post-card-title {
margin-top: 0;
font-size: 4rem;
line-height: 1.05;
font-size: 4.4rem;
line-height: 1;
}
.post-card-large .post-card-excerpt {
@ -751,8 +770,22 @@ make sure this only happens on large viewports / desktop-ish devices.
grid-column: span 6;
}
.post-card-full .post-card-image-link {
margin-bottom: 40px;
}
.post-card-full .post-card-primary-tag {
margin-bottom: 14px;
}
.post-card-full .post-card-title {
font-size: 6.4rem;
line-height: 0.95;
}
.post-card-full .post-card-excerpt {
margin-top: 20px;
font-size: 1.8rem;
}
.post-card.dynamic {

View File

@ -27,7 +27,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}}{{#if @site.cover_image}} has-cover-image{{/if}}{{#is "home"}}{{#match @custom.identity "!=" "None"}}{{#if @custom.include_logo_in_identity}} 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}}{{#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}}">
<div class="viewport">
<header id="gh-head" class="gh-head outer">

View File

@ -2,7 +2,7 @@
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}
<div class="site-header-content outer{{#match @custom.identity "Vertical"}} vertical{{/match}}">
<div class="site-header-content outer{{#match @custom.about_section "Vertical"}} vertical{{/match}}">
{{#if @site.cover_image}}
{{!-- This is a responsive image, it loads different sizes depending on device
@ -18,18 +18,26 @@ into the {body} of the default.hbs template --}}
/>
{{/if}}
{{#match @custom.identity "!=" "None"}}
{{#match @custom.about_section "!=" "None"}}
<section class="site-header-inner inner">
{{#if @custom.include_logo_in_identity}}
{{#if @site.logo}}
<img class="site-logo" src="{{@site.logo}}" alt="{{@site.title}}">
{{/if}}
{{#if @custom.include_logo_in_about_section}}
{{#if @site.logo}}
<img class="site-logo" src="{{@site.logo}}" alt="{{@site.title}}">
{{/if}}
{{/if}}
<div class="site-header-wrapper">
{{#match @custom.identity "Horizontal"}}
{{#match @custom.about_section "Horizontal"}}
<h1 class="site-title">{{@site.title}}</h1>
{{else}}
{{#if @custom.include_logo_in_about_section}}
{{#unless @site.logo}}
<h1 class="site-title">{{@site.title}}</h1>
{{/unless}}
{{/if}}
{{/match}}
<p class="site-description">{{@site.description}}</p>
{{#if @site.description}}
<p class="site-description">{{@site.description}}</p>
{{/if}}
</div>
</section>
{{/match}}
@ -38,16 +46,14 @@ into the {body} of the default.hbs template --}}
{{!-- The main content area --}}
<main id="site-main" class="site-main outer">
<div class="inner posts">
<div class="post-feed{{#match @custom.feed_layout "List"}} list{{/match}}">
{{#foreach posts}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{> "post-card"}}
{{/foreach}}
</div>
<div class="inner posts">
<div class="post-feed{{#match @custom.feed_layout "List"}} list{{/match}}">
{{#foreach posts}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{> "post-card"}}
{{/foreach}}
</div>
</div>
</main>

View File

@ -105,7 +105,7 @@
],
"default": "Elegant serif"
},
"identity": {
"about_section": {
"type": "select",
"options": [
"Horizontal",
@ -115,7 +115,7 @@
"default": "Horizontal",
"group": "homepage"
},
"include_logo_in_identity": {
"include_logo_in_about_section": {
"type": "boolean",
"default": true,
"group": "homepage"
@ -139,6 +139,11 @@
"default": "Dynamic grid",
"group": "homepage"
},
"keep_card_thumbnail_ratio": {
"type": "boolean",
"default": false,
"group": "homepage"
},
"color_scheme": {
"type": "select",
"options": [
@ -158,16 +163,6 @@
"default": "Wide",
"group": "post"
},
"email_signup_for_logged_out_visitors": {
"type": "select",
"options": [
"Footer",
"Bottom of post",
"None"
],
"default": "Footer",
"group": "post"
},
"email_signup_text": {
"type": "text",
"default": "Sign up for more like this.",

View File

@ -1,7 +1,7 @@
{{!-- 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}}{{/is}}{{/is}}{{#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}}">
<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}}">
{{#if feature_image}}
<a class="post-card-image-link" href="{{url}}">

View File

@ -87,7 +87,6 @@ into the {body} tag of the default.hbs template --}}
</main>
{{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
{{#match @custom.email_signup_for_logged_out_visitors "!=" "None"}}
{{#unless @member}}{{#if access}}
<section class="footer-cta outer">
<div class="inner">
@ -101,7 +100,6 @@ into the {body} tag of the default.hbs template --}}
</div>
</section>
{{/if}}{{/unless}}
{{/match}}
{{!-- Read more links, just above the footer --}}