vividboarder/Vivid-Casper
1
0
Fork 0
mirror of https://github.com/ViViDboarder/Vivid-Casper.git synced 2024-12-22 11:37:38 +00:00
Code Issues Releases Wiki Activity

Header option

Browse Source
This commit is contained in:
Sodbileg Gansukh 2022-05-14 13:23:02 +08:00
parent 5672c0b6c8
commit 4c8ccde081
6 changed files with 79 additions and 56 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

89
assets/css/screen.css
View File

@ -110,22 +110,40 @@ production stylesheet in assets/built/screen.css
z-index: 100; z-index: 100;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
height: 600px; padding-top: 64px;
min-height: 200px;
padding-top: 104px;
padding-bottom: 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; color: #fff;
} }
body:not(.has-cover-image) .site-header-content:not(.vertical) {
padding-top: 104px;
padding-bottom: 24px;
}
.site-header-inner { .site-header-inner {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 24px;
}
.site-header-content.vertical .site-header-inner {
flex-direction: column;
text-align: center;
} }
.site-icon { .site-icon {
flex-shrink: 0; flex-shrink: 0;
margin-right: 24px;
width: 120px; width: 120px;
height: 120px; height: 120px;
} }
@ -162,18 +180,24 @@ production stylesheet in assets/built/screen.css
padding-bottom: 32px; padding-bottom: 32px;
font-size: 1.6rem; font-size: 1.6rem;
line-height: 1.3em; line-height: 1.3em;
}
.has-cover-image .gh-head {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 2000;
color: #fff; color: #fff;
background: var(--ghost-accent-color);
} }
.gh-head a { .gh-head a {
color: inherit;
text-decoration: none; text-decoration: none;
} }
.gh-head-inner { .gh-head-inner {
display: grid; display: grid;
grid-gap: 2.5vmin; grid-gap: 32px;
grid-template-columns: auto auto 1fr; grid-template-columns: auto auto 1fr;
grid-auto-flow: row dense; grid-auto-flow: row dense;
} }
@ -194,12 +218,15 @@ production stylesheet in assets/built/screen.css
.gh-head-logo { .gh-head-logo {
display: block; display: block;
padding: 10px 0; padding: 10px 0;
font-weight: 700; font-weight: 800;
font-size: 2rem; font-size: 2.6rem;
line-height: 1.2em;
letter-spacing: -0.02em; letter-spacing: -0.02em;
} }
.home-template .gh-head-logo {
display: none;
}
.gh-head-logo img { .gh-head-logo img {
max-height: 26px; max-height: 26px;
} }
@ -214,6 +241,10 @@ production stylesheet in assets/built/screen.css
font-weight: 500; font-weight: 500;
} }
.home-template .gh-head-menu {
margin-left: -32px;
}
.gh-head-menu .nav { .gh-head-menu .nav {
display: inline-flex; display: inline-flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -230,7 +261,11 @@ production stylesheet in assets/built/screen.css
.gh-head-menu .nav a { .gh-head-menu .nav a {
display: inline-block; 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 { .gh-head-menu .nav a:hover {
@ -294,12 +329,17 @@ a.gh-head-button {
align-items: center; align-items: center;
padding: 8px 16px; padding: 8px 16px;
height: 40px; height: 40px;
color: var(--button-text-color, var(--color-darkgrey));
font-weight: 600; font-weight: 600;
letter-spacing: -0.015em; letter-spacing: -0.01em;
font-size: 1.5rem; font-size: 1.5rem;
background: var(--button-bg-color, #fff);
border-radius: 6px; 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 { .home-template.gh-head-open .gh-head {
background: var(--ghost-accent-color); 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 /* 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 { .post-card-large .post-card-primary-tag {
margin-bottom: 14px; margin-bottom: 12px;
} }
.post-card-large .post-card-title { .post-card-large .post-card-title {

4
default.hbs
View File

@ -27,10 +27,10 @@
{{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}}"> <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"> <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"> <nav class="gh-head-inner inner">
<div class="gh-head-brand"> <div class="gh-head-brand">

28
index.hbs
View File

@ -2,8 +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 --}}
{{#match @custom.publication_cover_style "!=" "None"}} <div class="site-header-content outer{{#match @custom.identity "Vertical"}} vertical{{/match}}">
<div class="site-header-content outer{{#match @custom.publication_cover_style "Large"}} large{{/match}}">
{{#if @site.cover_image}} {{#if @site.cover_image}}
{{!-- This is a responsive image, it loads different sizes depending on device {{!-- 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" {{img_url @site.cover_image size="xl"}} 2000w"
sizes="100vw" sizes="100vw"
src="{{img_url @site.cover_image size="xl"}}" src="{{img_url @site.cover_image size="xl"}}"
alt="" alt="{{@site.title}}"
/> />
{{/if}} {{/if}}
<section class="site-header-inner inner"> {{#match @custom.identity "!=" "None"}}
{{#if @site.icon}} <section class="site-header-inner inner">
<img class="site-icon" src="{{@site.icon}}" alt="{{@site.title}}"> {{#if @site.icon}}
{{/if}} <img class="site-icon" src="{{@site.icon}}" alt="{{@site.title}}">
<div class="site-header-wrapper"> {{/if}}
<h1 class="site-title">{{@site.title}}</h1> <div class="site-header-wrapper">
<p class="site-description">{{@site.description}}</p> {{#match @custom.identity "Horizontal"}}
</div> <h1 class="site-title">{{@site.title}}</h1>
</section> {{/match}}
<p class="site-description">{{@site.description}}</p>
</div>
</section>
{{/match}}
</div> </div>
{{/match}}
{{!-- The main content area --}} {{!-- The main content area --}}
<main id="site-main" class="site-main outer"> <main id="site-main" class="site-main outer">

10
package.json
View File

@ -105,14 +105,14 @@
], ],
"default": "Elegant serif" "default": "Elegant serif"
}, },
"publication_cover_style": { "identity": {
"type": "select", "type": "select",
"options": [ "options": [
"None", "Horizontal",
"Medium", "Vertical",
"Large" "None"
], ],
"default": "Medium", "default": "Horizontal",
"group": "homepage" "group": "homepage"
}, },
"feed_layout": { "feed_layout": {