Header option
This commit is contained in:
Sodbileg Gansukh
parent
5672c0b6c8
commit
4c8ccde081
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -110,22 +110,40 @@ production stylesheet in assets/built/screen.css
|
|||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
height: 600px;
|
||||
min-height: 200px;
|
||||
padding-top: 104px;
|
||||
padding-top: 64px;
|
||||
padding-bottom: 64px;
|
||||
color: var(--color-darkgrey);
|
||||
}
|
||||
|
||||
.site-header-content.vertical {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.has-cover-image .site-header-content {
|
||||
min-height: 600px;
|
||||
padding-top: 104px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body:not(.has-cover-image) .site-header-content:not(.vertical) {
|
||||
padding-top: 104px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.site-header-inner {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.site-header-content.vertical .site-header-inner {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.site-icon {
|
||||
flex-shrink: 0;
|
||||
margin-right: 24px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
|
@ -162,18 +180,24 @@ production stylesheet in assets/built/screen.css
|
|||
padding-bottom: 32px;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
.has-cover-image .gh-head {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 2000;
|
||||
color: #fff;
|
||||
background: var(--ghost-accent-color);
|
||||
}
|
||||
|
||||
.gh-head a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.gh-head-inner {
|
||||
display: grid;
|
||||
grid-gap: 2.5vmin;
|
||||
grid-gap: 32px;
|
||||
grid-template-columns: auto auto 1fr;
|
||||
grid-auto-flow: row dense;
|
||||
}
|
||||
|
|
@ -194,12 +218,15 @@ production stylesheet in assets/built/screen.css
|
|||
.gh-head-logo {
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
font-weight: 700;
|
||||
font-size: 2rem;
|
||||
line-height: 1.2em;
|
||||
font-weight: 800;
|
||||
font-size: 2.6rem;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.home-template .gh-head-logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gh-head-logo img {
|
||||
max-height: 26px;
|
||||
}
|
||||
|
|
@ -214,6 +241,10 @@ production stylesheet in assets/built/screen.css
|
|||
font-weight: 500;
|
||||
}
|
||||
|
||||
.home-template .gh-head-menu {
|
||||
margin-left: -32px;
|
||||
}
|
||||
|
||||
.gh-head-menu .nav {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -230,7 +261,11 @@ production stylesheet in assets/built/screen.css
|
|||
|
||||
.gh-head-menu .nav a {
|
||||
display: inline-block;
|
||||
padding: 5px 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.has-cover-image .gh-head-menu .nav a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.gh-head-menu .nav a:hover {
|
||||
|
|
@ -294,12 +329,17 @@ a.gh-head-button {
|
|||
align-items: center;
|
||||
padding: 8px 16px;
|
||||
height: 40px;
|
||||
color: var(--button-text-color, var(--color-darkgrey));
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.015em;
|
||||
letter-spacing: -0.01em;
|
||||
font-size: 1.5rem;
|
||||
background: var(--button-bg-color, #fff);
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
background: var(--ghost-accent-color);
|
||||
}
|
||||
|
||||
.has-cover-image a.gh-head-button {
|
||||
color: var(--color-darkgrey);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -481,29 +521,10 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
|
|||
}
|
||||
}
|
||||
|
||||
.home-template .gh-head.has-cover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.home-template .gh-head.has-cover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.home-template.gh-head-open .gh-head {
|
||||
background: var(--ghost-accent-color);
|
||||
}
|
||||
|
||||
.home-template .gh-head.has-cover .gh-head-logo {
|
||||
display: none;
|
||||
}
|
||||
.home-template .gh-head.has-cover .gh-head-menu {
|
||||
margin-left: -2.5vmin;
|
||||
}
|
||||
|
||||
|
||||
/* 6. Post Feed
|
||||
/* ---------------------------------------------------------- */
|
||||
|
|
@ -806,7 +827,7 @@ make sure this only happens on large viewports / desktop-ish devices.
|
|||
}
|
||||
|
||||
.post-card-large .post-card-primary-tag {
|
||||
margin-bottom: 14px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.post-card-large .post-card-title {
|
||||
|
|
|
|||
|
|
@ -27,10 +27,10 @@
|
|||
{{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}}">
|
||||
<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}}">
|
||||
<div class="viewport">
|
||||
|
||||
<header id="gh-head" class="gh-head outer{{#match @custom.publication_cover_style "!=" "None"}} has-cover{{/match}}">
|
||||
<header id="gh-head" class="gh-head outer">
|
||||
<nav class="gh-head-inner inner">
|
||||
|
||||
<div class="gh-head-brand">
|
||||
|
|
|
|||
28
index.hbs
28
index.hbs
|
|
@ -2,8 +2,7 @@
|
|||
{{!-- The tag above means: insert everything in this file
|
||||
into the {body} of the default.hbs template --}}
|
||||
|
||||
{{#match @custom.publication_cover_style "!=" "None"}}
|
||||
<div class="site-header-content outer{{#match @custom.publication_cover_style "Large"}} large{{/match}}">
|
||||
<div class="site-header-content outer{{#match @custom.identity "Vertical"}} vertical{{/match}}">
|
||||
|
||||
{{#if @site.cover_image}}
|
||||
{{!-- This is a responsive image, it loads different sizes depending on device
|
||||
|
|
@ -15,22 +14,25 @@ into the {body} of the default.hbs template --}}
|
|||
{{img_url @site.cover_image size="xl"}} 2000w"
|
||||
sizes="100vw"
|
||||
src="{{img_url @site.cover_image size="xl"}}"
|
||||
alt=""
|
||||
alt="{{@site.title}}"
|
||||
/>
|
||||
{{/if}}
|
||||
|
||||
<section class="site-header-inner inner">
|
||||
{{#if @site.icon}}
|
||||
<img class="site-icon" src="{{@site.icon}}" alt="{{@site.title}}">
|
||||
{{/if}}
|
||||
<div class="site-header-wrapper">
|
||||
<h1 class="site-title">{{@site.title}}</h1>
|
||||
<p class="site-description">{{@site.description}}</p>
|
||||
</div>
|
||||
</section>
|
||||
{{#match @custom.identity "!=" "None"}}
|
||||
<section class="site-header-inner inner">
|
||||
{{#if @site.icon}}
|
||||
<img class="site-icon" src="{{@site.icon}}" alt="{{@site.title}}">
|
||||
{{/if}}
|
||||
<div class="site-header-wrapper">
|
||||
{{#match @custom.identity "Horizontal"}}
|
||||
<h1 class="site-title">{{@site.title}}</h1>
|
||||
{{/match}}
|
||||
<p class="site-description">{{@site.description}}</p>
|
||||
</div>
|
||||
</section>
|
||||
{{/match}}
|
||||
|
||||
</div>
|
||||
{{/match}}
|
||||
|
||||
{{!-- The main content area --}}
|
||||
<main id="site-main" class="site-main outer">
|
||||
|
|
|
|||
10
package.json
10
package.json
|
|
@ -105,14 +105,14 @@
|
|||
],
|
||||
"default": "Elegant serif"
|
||||
},
|
||||
"publication_cover_style": {
|
||||
"identity": {
|
||||
"type": "select",
|
||||
"options": [
|
||||
"None",
|
||||
"Medium",
|
||||
"Large"
|
||||
"Horizontal",
|
||||
"Vertical",
|
||||
"None"
|
||||
],
|
||||
"default": "Medium",
|
||||
"default": "Horizontal",
|
||||
"group": "homepage"
|
||||
},
|
||||
"feed_layout": {
|
||||
|
|
|
|||
Loading…
Reference in New Issue