Header settings cleanup

This commit is contained in:
Sodbileg Gansukh 2022-05-19 20:33:24 +08:00
parent 5424c465fb
commit 21c6f59a61
6 changed files with 41 additions and 59 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

@ -110,40 +110,47 @@ production stylesheet in assets/built/screen.css
position: relative; position: relative;
z-index: 100; z-index: 100;
display: flex; display: flex;
align-items: flex-end; align-items: center;
padding-top: 64px; padding-top: 6.4vmin;
padding-bottom: 6.4vmin; padding-bottom: 6.4vmin;
color: var(--color-darkgrey); color: var(--color-darkgrey);
} }
.site-header-content.vertical {
align-items: center;
padding-top: 84px;
padding-bottom: 32px;
}
.has-cover-image .site-header-content { .has-cover-image .site-header-content {
min-height: 600px; min-height: 600px;
padding-top: 104px; padding-top: 10vmin;
background-color: var(--ghost-accent-color); background-color: var(--ghost-accent-color);
color: #fff; color: #fff;
} }
body:not(.has-cover-image) .site-header-content:not(.vertical) { body:not(.has-cover-image) .site-header-content:not(.left-aligned) {
padding-top: 104px; padding-bottom: 3.2vmin;
padding-bottom: 24px; }
.site-header-content.left-aligned {
padding-top: 10vmin;
padding-bottom: 0;
}
.has-cover-image .site-header-content.left-aligned {
align-items: flex-end;
padding-bottom: 6.4vmin;
}
.site-header-content.no-content {
display: none;
} }
.site-header-inner { .site-header-inner {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
gap: 24px; gap: 24px;
} }
.site-header-content.vertical .site-header-inner { .site-header-content.left-aligned .site-header-inner {
flex-direction: column; align-items: flex-start;
text-align: center;
} }
.site-logo { .site-logo {
@ -177,21 +184,11 @@ body:not(.has-cover-image) .site-header-content:not(.vertical) {
.site-description { .site-description {
z-index: 10; z-index: 10;
margin-top: 8px;
max-width: 560px; max-width: 560px;
font-size: 2rem; font-size: 2rem;
line-height: 1.3; line-height: 1.3;
} }
.site-header-content.vertical .site-description {
margin: 0 auto;
padding-bottom: 32px;
}
.site-header-content.vertical .site-title + .site-description {
margin-top: 20px;
}
@media (max-width: 767px) { @media (max-width: 767px) {
.site-header-content { .site-header-content {
padding-bottom: 36px; padding-bottom: 36px;

View File

@ -18,7 +18,7 @@
{{ghost_head}} {{ghost_head}}
</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 @custom.show_publication_cover}} has-cover-image{{/if}}{{#is "home"}}{{#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 @custom.show_publication_cover}} has-cover-image{{/if}}{{#is "home"}}{{#match @custom.header_style "!=" "Hidden"}}{{#if @custom.site_logo_in_main_navigation}} no-logo{{/if}}{{/match}}{{/is}}">
<div class="viewport"> <div class="viewport">
<header id="gh-head" class="gh-head outer"> <header id="gh-head" class="gh-head outer">

View File

@ -2,7 +2,7 @@
{{!-- The tag above means: insert everything in this file {{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}} into the {body} of the default.hbs template --}}
<div class="site-header-content outer{{#match @custom.about_section "Vertical"}} vertical{{/match}}"> <div class="site-header-content outer{{#match @custom.header_style "Left aligned"}} left-aligned{{/match}}{{#unless @custom.show_publication_cover}}{{#match @custom.header_style "Hidden"}}{{/match}} no-content{{/unless}}">
{{#if @custom.show_publication_cover}} {{#if @custom.show_publication_cover}}
{{#if @site.cover_image}} {{#if @site.cover_image}}
@ -20,34 +20,19 @@ into the {body} of the default.hbs template --}}
{{/if}} {{/if}}
{{/if}} {{/if}}
{{#match @custom.about_section "!=" "None"}} {{#match @custom.header_style "!=" "Hidden"}}
<section class="site-header-inner inner"> <div class="site-header-inner inner">
{{#if @custom.include_logo_in_about_section}} {{#if @custom.site_logo_in_main_navigation}}
{{#if @site.logo}} {{#if @site.logo}}
<img class="site-logo" src="{{@site.logo}}" alt="{{@site.title}}"> <img class="site-logo" src="{{@site.logo}}" alt="{{@site.title}}">
{{else}}
<h1 class="site-title">{{@site.title}}</h1>
{{/if}} {{/if}}
{{/if}} {{/if}}
<div class="site-header-wrapper"> {{#if @site.description}}
{{#match @custom.about_section "Horizontal"}} <p class="site-description">{{@site.description}}</p>
{{#if @site.logo}} {{/if}}
<h1 class="site-title">{{@site.title}}</h1> </div>
{{else}}
{{#if @custom.include_logo_in_about_section}}
<h1 class="site-title">{{@site.title}}</h1>
{{/if}}
{{/if}}
{{else}}
{{#if @custom.include_logo_in_about_section}}
{{#unless @site.logo}}
<h1 class="site-title">{{@site.title}}</h1>
{{/unless}}
{{/if}}
{{/match}}
{{#if @site.description}}
<p class="site-description">{{@site.description}}</p>
{{/if}}
</div>
</section>
{{/match}} {{/match}}
</div> </div>

View File

@ -110,17 +110,17 @@
"default": true, "default": true,
"group": "homepage" "group": "homepage"
}, },
"about_section": { "header_style": {
"type": "select", "type": "select",
"options": [ "options": [
"Vertical", "Center aligned",
"Horizontal", "Left aligned",
"None" "Hidden"
], ],
"default": "Vertical", "default": "Center aligned",
"group": "homepage" "group": "homepage"
}, },
"include_logo_in_about_section": { "site_logo_in_main_navigation": {
"type": "boolean", "type": "boolean",
"default": true, "default": true,
"group": "homepage" "group": "homepage"