simon/ghost-theme-sd.ai
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki 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
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

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 {

7
partials/components/header-content.hbs
View File

@ -16,7 +16,12 @@
{{!-- Highlight layout --}}
{{#match headerStyle "Highlight"}}
<div class="gh-header-left">
{{#foreach posts limit="4"}}
{{#foreach posts limit="1"}}
{{> "post-card"}}
{{/foreach}}
</div>
<div class="gh-header-middle">
{{#foreach posts from="2" limit="3"}}
{{> "post-card"}}
{{/foreach}}
</div>