mirror of
https://github.com/ZetaKebab/kesper.git
synced 2025-07-01 17:37:37 +00:00
Add comments support (#893)
* Added comments to theme
* Cleanup
* Updated spacing and typography
* Removed bottom border
* Added comment counter
* Updated theme name and post template
* Added search support
* Compiled css for search
* Removed the border and brackets for comment count
* Moved the comments helper into the content block so it gets the same paddings at narrow viewports
* Package version bump
* Updated comments helper in post template
* Final tweaks for the comments support
* Revert the package info
* Update {{comment_count}} helper usage
The helper now outputs a span wrapper by default, so we won't have to add a wrapper in the theme
Co-authored-by: Peter Zimon <peter.zimon@gmail.com>
Co-authored-by: Sanne de Vries <sannedv@protonmail.com>
Co-authored-by: James Morris <moreofmorris@users.noreply.github.com>
This commit is contained in:
Sodbileg Gansukh
3
assets/built/portal.min.js
vendored
Normal file
3
assets/built/portal.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -15,6 +15,7 @@ production stylesheet in assets/built/screen.css
|
||||
7.2. Members Subscribe Form
|
||||
7.4. Related Posts
|
||||
7.5. Koenig Styles
|
||||
7.6 Comments
|
||||
8. Author Template
|
||||
9. Error Template
|
||||
11. Site Footer
|
||||
@ -416,6 +417,35 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* Search
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-search {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.gh-search:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.gh-search {
|
||||
position: fixed;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Search
|
||||
/* ---------------------------------------------------------- */
|
||||
@ -830,12 +860,27 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
|
||||
.post-card-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 12px;
|
||||
padding: 0;
|
||||
font-size: 1.3rem;
|
||||
color: var(--color-secondary-text);
|
||||
}
|
||||
|
||||
.post-card-meta > * {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.post-card-meta > * + *:not(script)::before {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
content: "";
|
||||
background-color: var(--color-secondary-text);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.post-card-meta .sep {
|
||||
margin: 0 4px;
|
||||
}
|
||||
@ -1595,6 +1640,43 @@ iframe.instagram-media + script + :not([id]) {
|
||||
}
|
||||
}
|
||||
|
||||
/* 7.6. Comments
|
||||
/* ---------------------------------------------------------- */
|
||||
.comments {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 60px 0 44px;
|
||||
}
|
||||
|
||||
|
||||
.comments-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 32px;
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.comments h2 {
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
font-weight: 800;
|
||||
font-size: 3.4rem;
|
||||
}
|
||||
|
||||
.comments .comment-count {
|
||||
color: var(--color-midgrey);
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.comments #ghost-comments-root {
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
|
||||
/* 8. Author Template
|
||||
/* ---------------------------------------------------------- */
|
||||
@ -2004,48 +2086,48 @@ html.dark-mode .footer-cta-title {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
background: var(--color-darkmode);
|
||||
}
|
||||
|
||||
|
||||
html.auto-color img {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
|
||||
html.auto-color kbd {
|
||||
background: color-mod(var(--color-darkmode) l(+5%));
|
||||
}
|
||||
|
||||
|
||||
html.auto-color figcaption a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .gh-head {
|
||||
background: var(--color-darkmode);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .gh-burger-box {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .site-header-content {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .post-card-image {
|
||||
background: var(--color-darkmode);
|
||||
}
|
||||
|
||||
|
||||
html.auto-color :is(.post-card-tags, .post-card-meta, .article-tag a, .byline-meta-content) {
|
||||
color: color-mod(var(--color-secondary-text) l(-22%));
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .post-card-featured {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .post-card-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .post-card-excerpt {
|
||||
color: var(--color-secondary-text);
|
||||
}
|
||||
@ -2061,11 +2143,11 @@ html.dark-mode .footer-cta-title {
|
||||
html.auto-color .article-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .article-excerpt {
|
||||
color: var(--color-secondary-text);
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .post-full-image {
|
||||
background-color: color-mod(var(--color-darkmode) l(+8%));
|
||||
}
|
||||
@ -2074,107 +2156,107 @@ html.dark-mode .footer-cta-title {
|
||||
border-color: var(--color-darkmode);
|
||||
background-color: color-mod(var(--color-darkmode) l(+8%));
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .author-profile-image {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .author-profile-image path {
|
||||
fill: var(--color-darkmode);
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .article-byline-meta .author-name a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .no-image .author-social-link a {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .gh-content > [id] {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .gh-content pre {
|
||||
background: color-mod(var(--color-darkgrey) l(-8%));
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .gh-content :not(pre) > code {
|
||||
background: color-mod(var(--color-darkgrey) l(+6%));
|
||||
border-color: color-mod(var(--color-darkmode) l(+8%));
|
||||
color: var(--color-wash);
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .gh-content a:not(.kg-btn):not(.kg-nft-card-container):not(.kg-product-card-button):not(.kg-header-card-button) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .gh-content strong {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .gh-content em {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .gh-content code {
|
||||
color: #fff;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
|
||||
html.auto-color hr {
|
||||
border-top-color: color-mod(var(--color-darkmode) l(+8%));
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .gh-content hr:after {
|
||||
background: color-mod(var(--color-darkmode) l(+8%));
|
||||
box-shadow: var(--color-darkmode) 0 0 0 5px;
|
||||
}
|
||||
|
||||
|
||||
html.auto-color figcaption {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .gh-content table td:first-child {
|
||||
background-image: linear-gradient(to right, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .gh-content table td:last-child {
|
||||
background-image: linear-gradient(to left, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .gh-content table th {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
background-color: color-mod(var(--color-darkmode) l(+8%));
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .gh-content table th,
|
||||
html.auto-color .gh-content table td {
|
||||
border: color-mod(var(--color-darkmode) l(+8%)) 1px solid;
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .gh-content input {
|
||||
color: color-mod(var(--color-midgrey) l(-30%));
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .site-archive-header .no-image {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
background: var(--color-darkmode);
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .kg-header-card.kg-style-dark {
|
||||
background: color-mod(var(--color-darkgrey) l(-5%));
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .kg-header-card.kg-style-light {
|
||||
background: color-mod(var(--color-darkgrey) l(+5%));
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .kg-header-card h2.kg-header-card-header,
|
||||
html.auto-color .kg-header-card h3.kg-header-card-subheader {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
html.auto-color .footer-cta-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user