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

Header styles

Browse Source
This commit is contained in:
Sodbileg Gansukh
2023-07-10 11:14:43 +08:00
parent 234e098968
commit bd5c882ebb
7 changed files with 150 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
assets/css/screen.css
View File

@@ -580,4 +580,72 @@ Search LOGO Login Subscribe
.is-navigation-open#gh-main {
opacity: 0;
}
}
/* Card */
.gh-card-image {
position: relative;
aspect-ratio: 16 / 9;
}
.gh-card-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* 6. Header */
.gh-header {
--gap: 40px;
}
/* 6.1. Magazine layout */
.gh-header.is-magazine .gh-header-inner {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: var(--gap);
}
.gh-header.is-magazine .gh-header-inner > div {
display: flex;
flex-direction: column;
gap: var(--gap);
grid-row: 1;
}
.gh-header.is-magazine .gh-header-left {
grid-column: 1;
}
.gh-header.is-magazine .gh-header-inner > .gh-card {
grid-column: 2;
}
.gh-header.is-magazine .gh-header-right {
grid-column: 3;
}
.gh-header.is-magazine .gh-header-inner > div .gh-card-excerpt {
display: none;
}
/* 6.2. Highlight layout */
.gh-header.is-highlight .gh-header-inner {
display: grid;
grid-template-columns: 3fr 1fr;
gap: var(--gap);
}
.gh-header.is-highlight .gh-card:first-child {
grid-row: span 3;
}
.gh-header.is-highlight .gh-card:not(:first-child) .gh-card-excerpt {
display: none;
}