simon/ghost-theme-sd.ai
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed inconsistent width issue on tag/author templates

Browse Source
This commit is contained in:
Sodbileg Gansukh
2023-08-22 19:04:16 +08:00
parent 4335416f75
commit 1b3d1a6a8f
5 changed files with 67 additions and 48 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
+27 -12
View File
@@ -1534,12 +1534,6 @@ Search LOGO Login Subscribe
} }
} }
@media (max-width: 767px) {
.gh-container-inner {
display: block;
}
}
/* 12. Post list /* 12. Post list
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
@@ -2225,16 +2219,31 @@ figcaption a {
.gh-archive { .gh-archive {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: repeat(16, 1fr);
gap: var(--grid-gap); gap: var(--grid-gap);
margin-block: 80px 24px; margin-block: 80px 24px;
}
.gh-archive.has-image {
margin-top: 48px;
}
.gh-archive-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--grid-gap);
grid-column: 1 / -1;
padding-bottom: clamp(40px, 2.73vw + 29.09px, 64px); padding-bottom: clamp(40px, 2.73vw + 29.09px, 64px);
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
} }
.gh-archive.has-image { .gh-archive.has-image .gh-archive-inner {
align-items: center; align-items: center;
margin-top: 24px; grid-column: 1 / -1;
}
.gh-archive:not(.has-sidebar):not(.has-image) .gh-archive-inner {
grid-column: 3 / span 12;
} }
.gh-archive .gh-article-image { .gh-archive .gh-article-image {
@@ -2246,7 +2255,7 @@ figcaption a {
margin-top: 0; margin-top: 0;
} }
.author-template .gh-archive { .author-template .gh-archive-inner {
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: flex-end; justify-content: flex-end;
@@ -2289,14 +2298,20 @@ figcaption a {
height: 20px; height: 20px;
} }
@media (max-width: 767px) { @media (max-width: 1199px) {
.gh-archive { .gh-archive {
display: block;
}
}
@media (max-width: 767px) {
.gh-archive-inner {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
align-items: flex-start; align-items: flex-start;
} }
.author-template .gh-archive { .author-template .gh-archive-inner {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
} }
author.hbs
+28 -26
View File
@@ -4,35 +4,37 @@
<main class="gh-main gh-outer"> <main class="gh-main gh-outer">
{{#author}} {{#author}}
<section class="gh-archive gh-inner"> <section class="gh-archive{{#if @custom.show_sidebar}} has-sidebar{{/if}} gh-inner">
<div class="gh-archive-wrapper"> <div class="gh-archive-inner">
<h1 class="gh-article-title is-title"> <div class="gh-archive-wrapper">
{{#if website}} <h1 class="gh-article-title is-title">
<a class="gh-author-social-link" href="{{website}}" target="_blank" rel="noopener">{{name}}</a> {{#if website}}
{{else}} <a class="gh-author-social-link" href="{{website}}" target="_blank" rel="noopener">{{name}}</a>
{{name}} {{else}}
{{name}}
{{/if}}
</h1>
{{#if bio}}
<p class="gh-article-excerpt">{{bio}}</p>
{{/if}} {{/if}}
</h1> <footer class="gh-author-meta">
{{#if bio}} <div class="gh-author-social">
<p class="gh-article-excerpt">{{bio}}</p> {{#if facebook}}
<a class="gh-author-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
{{/if}}
{{#if twitter}}
<a class="gh-author-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
{{/if}}
</div>
{{#if location}}
<div class="gh-author-location">{{location}}</div>
{{/if}}
</footer>
</div>
{{#if profile_image}}
<img class="gh-article-image" src="{{img_url profile_image size="s"}}" alt="{{name}}">
{{/if}} {{/if}}
<footer class="gh-author-meta">
<div class="gh-author-social">
{{#if facebook}}
<a class="gh-author-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
{{/if}}
{{#if twitter}}
<a class="gh-author-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
{{/if}}
</div>
{{#if location}}
<div class="gh-author-location">{{location}}</div>
{{/if}}
</footer>
</div> </div>
{{#if profile_image}}
<img class="gh-article-image" src="{{img_url profile_image size="s"}}" alt="{{name}}">
{{/if}}
</section> </section>
{{/author}} {{/author}}
tag.hbs
+10 -8
View File
@@ -4,14 +4,16 @@
<main class="gh-main gh-outer"> <main class="gh-main gh-outer">
{{#tag}} {{#tag}}
<section class="gh-archive{{#if feature_image}} has-image{{/if}} gh-inner"> <section class="gh-archive{{#if feature_image}} has-image{{/if}}{{#if @custom.show_sidebar}} has-sidebar{{/if}} gh-inner">
<header class="gh-archive-wrapper"> <div class="gh-archive-inner">
<h1 class="gh-article-title is-title">{{name}}</h1> <header class="gh-archive-wrapper">
{{#if description}} <h1 class="gh-article-title is-title">{{name}}</h1>
<p class="gh-article-excerpt">{{description}}</p> {{#if description}}
{{/if}} <p class="gh-article-excerpt">{{description}}</p>
</header> {{/if}}
{{> "feature-image"}} </header>
{{> "feature-image"}}
</div>
</section> </section>
{{/tag}} {{/tag}}