keb/kesper
1
0
Fork 0
mirror of https://github.com/ZetaKebab/kesper.git synced 2025-07-04 19:07:37 +00:00
Code Issues Actions Packages Projects 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
Download Patch File Download Diff File Expand all files Collapse all files

89
assets/css/screen.css
View File

@ -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 {