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
Download Patch File Download Diff File Expand all files Collapse all files
assets/built/screen.css
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/built/screen.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/css/screen.css
+19 -22
View File
@@ -930,54 +930,55 @@ Search LOGO Login Subscribe
.gh-header.is-highlight .gh-header-left { .gh-header.is-highlight .gh-header-left {
position: relative; position: relative;
display: grid; grid-column: span 8;
grid-template-columns: repeat(12, 1fr);
gap: var(--grid-gap);
grid-column: span 12;
} }
.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-column: span 8;
grid-row: span 3; 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; gap: 28px;
} }
.gh-header.is-highlight .gh-header-left .gh-card:first-child .gh-card-image { .gh-header.is-highlight .gh-header-left .gh-card .gh-card-image {
aspect-ratio: 16 / 10; 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; display: block;
margin-bottom: 12px; 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); font-size: clamp(2.4rem, 2.73vw + 1.31rem, 4.8rem);
line-height: 1; line-height: 1;
letter-spacing: -0.022em; 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; margin-top: 20px;
font-size: 1.8rem; 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; margin-top: 14px;
} }
.gh-header.is-highlight .gh-header-left .gh-card:not(:first-child) { .gh-header.is-highlight .gh-header-middle {
grid-column: 9 / -1; 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; 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; display: none;
} }
@@ -995,7 +996,8 @@ Search LOGO Login Subscribe
flex-direction: column; 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; position: absolute;
top: 0; top: 0;
right: calc(var(--grid-gap) / -2); right: calc(var(--grid-gap) / -2);
@@ -1015,11 +1017,6 @@ Search LOGO Login Subscribe
background-color: var(--color-border); 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 */ /* 8.3. Classic layout */
.gh-header.is-classic { .gh-header.is-classic {
partials/components/header-content.hbs
+6 -1
View File
@@ -16,7 +16,12 @@
{{!-- Highlight layout --}} {{!-- Highlight layout --}}
{{#match headerStyle "Highlight"}} {{#match headerStyle "Highlight"}}
<div class="gh-header-left"> <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"}} {{> "post-card"}}
{{/foreach}} {{/foreach}}
</div> </div>