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

Simpler layout for the highlight header

Browse Source
This commit is contained in:
Sodbileg Gansukh
2023-08-09 22:23:20 +08:00
parent 0ba1291be2
commit abdb00dc81
4 changed files with 27 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
assets/css/screen.css
View File

@@ -930,54 +930,55 @@ Search LOGO Login Subscribe
.gh-header.is-highlight .gh-header-left {
position: relative;
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--grid-gap);
grid-column: span 12;
grid-column: span 8;
}
.gh-header.is-highlight .gh-header-left > .gh-card:first-child {
.gh-header.is-highlight .gh-header-left .gh-card {
grid-column: span 8;
grid-row: span 3;
}
.gh-header.is-highlight .gh-header-left > .gh-card:first-child .gh-card-link {
.gh-header.is-highlight .gh-header-left .gh-card .gh-card-link {
gap: 28px;
}
.gh-header.is-highlight .gh-header-left .gh-card:first-child .gh-card-image {
aspect-ratio: 16 / 10;
.gh-header.is-highlight .gh-header-left .gh-card .gh-card-image {
aspect-ratio: 3 / 2;
}
.gh-header.is-highlight .gh-header-left > .gh-card:first-child .gh-card-tag {
.gh-header.is-highlight .gh-header-left .gh-card .gh-card-tag {
display: block;
margin-bottom: 12px;
}
.gh-header.is-highlight .gh-header-left .gh-card:first-child .gh-card-title {
.gh-header.is-highlight .gh-header-left .gh-card .gh-card-title {
font-size: clamp(2.4rem, 2.73vw + 1.31rem, 4.8rem);
line-height: 1;
letter-spacing: -0.022em;
}
.gh-header.is-highlight .gh-header-left > .gh-card:first-child .gh-card-excerpt {
.gh-header.is-highlight .gh-header-left .gh-card .gh-card-excerpt {
margin-top: 20px;
font-size: 1.8rem;
}
.gh-header.is-highlight .gh-header-left > .gh-card:first-child .gh-card-meta:not(:empty) {
.gh-header.is-highlight .gh-header-left .gh-card .gh-card-meta:not(:empty) {
margin-top: 14px;
}
.gh-header.is-highlight .gh-header-left .gh-card:not(:first-child) {
grid-column: 9 / -1;
.gh-header.is-highlight .gh-header-middle {
position: relative;
display: flex;
flex-direction: column;
gap: var(--grid-gap);
grid-column: 9 / span 4;
}
.gh-header.is-highlight .gh-header-left .gh-card:nth-child(4) .gh-card-image {
.gh-header.is-highlight .gh-header-middle .gh-card:last-child .gh-card-image {
display: none;
}
.gh-header.is-highlight .gh-card:not(:first-child) .gh-card-excerpt {
.gh-header.is-highlight .gh-header-middle .gh-card .gh-card-excerpt {
display: none;
}
@@ -995,7 +996,8 @@ Search LOGO Login Subscribe
flex-direction: column;
}
.gh-header.is-highlight .gh-header-left::after {
.gh-header.is-highlight .gh-header-left::after,
.gh-header.is-highlight .gh-header-middle::after {
position: absolute;
top: 0;
right: calc(var(--grid-gap) / -2);
@@ -1015,11 +1017,6 @@ Search LOGO Login Subscribe
background-color: var(--color-border);
}
.gh-header.is-highlight .gh-header-left > .gh-card:nth-child(2)::before,
.gh-header.is-highlight .gh-featured-feed .gh-card::after {
display: none;
}
/* 8.3. Classic layout */
.gh-header.is-classic {