davejansen/Ghost-Theme-Source
1
0
Fork 0
Code Issues Pull Requests Activity

Added overlay to header with background image

Browse Source
This commit is contained in:
Sodbileg Gansukh
2023-07-31 17:56:50 +08:00
parent be114956d9
commit d06d91ec0d
3 changed files with 36 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
assets/css/screen.css
View File

@@ -826,14 +826,6 @@ Search LOGO Login Subscribe
margin-top: 40px;
}
.gh-header-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.gh-header-inner {
position: relative;
}
@@ -1046,10 +1038,6 @@ Search LOGO Login Subscribe
text-align: center;
}
.gh-header.is-classic.has-image .gh-header-inner {
color: #fff;
}
.gh-header.is-classic .gh-header-title {
font-size: clamp(3.2rem, 3.18vw + 1.93rem, 6rem);
font-weight: 750;
@@ -1113,6 +1101,36 @@ Search LOGO Login Subscribe
color: var(--color-secondary-text);
}
.gh-header.is-classic.has-image {
margin-top: 0;
}
.gh-header.is-classic.has-image::before {
position: absolute;
inset: 0;
content: "";
opacity: 0.3;
background-color: var(--color-black);
transition: opacity 1.5s ease;
}
.gh-header.is-classic.has-image .gh-header-inner {
color: #fff;
}
.gh-header.is-classic.has-image .gh-header-image {
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
}
.gh-header.is-classic.has-image .gh-header-form {
background-color: #fff;
}
/* 9. CTA
/* ---------------------------------------------------------- */
@@ -1205,6 +1223,10 @@ Search LOGO Login Subscribe
margin-top: 100px;
}
.gh-navigation + .gh-featured {
margin-top: 64px;
}
.gh-featured-title {
margin-bottom: 20px;
padding-bottom: 12px;