Post template
This commit is contained in:
Sodbileg Gansukh
parent
b30af5107a
commit
4739b08e25
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -51,6 +51,7 @@
|
||||
--font-serif: "EB Garamond", Georgia, Times, serif;
|
||||
--font-slab: "Roboto Slab", Georgia, Times, serif;
|
||||
--font-mono: Menlo, Courier, monospace;
|
||||
--container-width: 1280px;
|
||||
--container-gap: clamp(24px, 1.7032rem + 1.9355vw, 48px);
|
||||
--grid-gap: 40px;
|
||||
}
|
||||
@ -175,20 +176,44 @@ a:hover {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.gh-content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.gh-outer {
|
||||
padding: 0 max(4vmin, 20px);
|
||||
}
|
||||
|
||||
.gh-inner {
|
||||
margin: 0 auto;
|
||||
max-width: 1280px;
|
||||
max-width: var(--container-width);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gh-canvas,
|
||||
.kg-width-full.kg-content-wide {
|
||||
--main: min(var(--content-width, 720px), 100% - var(--container-gap) * 2);
|
||||
--wide: minmax(0, calc((var(--container-width, 1200px) - var(--content-width, 720px)) / 2));
|
||||
--full: minmax(var(--container-gap), 1fr);
|
||||
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
[full-start] var(--full)
|
||||
[wide-start] var(--wide)
|
||||
[main-start] var(--main) [main-end]
|
||||
var(--wide) [wide-end]
|
||||
var(--full) [full-end];
|
||||
}
|
||||
|
||||
.gh-canvas > * {
|
||||
grid-column: main;
|
||||
}
|
||||
|
||||
.kg-width-wide,
|
||||
.kg-content-wide > div {
|
||||
grid-column: wide;
|
||||
}
|
||||
|
||||
.kg-width-full {
|
||||
grid-column: full;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
|
||||
.has-sans-title [data-title] {
|
||||
@ -296,8 +321,8 @@ a:hover {
|
||||
}
|
||||
|
||||
.gh-search {
|
||||
margin-right: -6px;
|
||||
margin-left: -6px;
|
||||
margin-right: -2px;
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
.gh-search span {
|
||||
@ -1221,6 +1246,400 @@ Search LOGO Login Subscribe
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
/* 10. Article */
|
||||
|
||||
.gh-article {
|
||||
--container-width: 1120px;
|
||||
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.gh-article-header {
|
||||
margin: 48px 0;
|
||||
}
|
||||
|
||||
.gh-article-tag {
|
||||
margin-bottom: 12px;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.01em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ghost-accent-color);
|
||||
}
|
||||
|
||||
.gh-article-title {
|
||||
font-size: calc(clamp(3.2rem, 1.59vw + 2.56rem, 4.6rem));
|
||||
font-weight: 750;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.022em;
|
||||
}
|
||||
|
||||
.gh-article-excerpt {
|
||||
margin-top: 16px;
|
||||
font-size: 2rem;
|
||||
line-height: 1.45;
|
||||
letter-spacing: -0.017em;
|
||||
}
|
||||
|
||||
.gh-article-image {
|
||||
grid-column: wide;
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.gh-article-image img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 11. Content */
|
||||
|
||||
/* Content refers to styling all page and post content that is
|
||||
created within the Ghost editor. The main content handles
|
||||
headings, text, images and lists. We deal with cards lower down. */
|
||||
|
||||
.gh-content {
|
||||
font-size: calc(var(--content-font-size, 1.7rem) * var(--font-multiplier, 1));
|
||||
letter-spacing: var(--content-letter-spacing, 0);
|
||||
}
|
||||
|
||||
/* Default vertical spacing */
|
||||
.gh-content > * + * {
|
||||
margin-top: calc(1.6em * var(--content-spacing-multiplier, 1));
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* [id] represents all headings h1-h6, reset all margins */
|
||||
.gh-content > [id] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gh-content > .kg-card + [id] {
|
||||
margin-top: calc(2em * var(--content-spacing-multiplier, 1)) !important;
|
||||
}
|
||||
|
||||
.gh-content > *:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
/* Add back a top margin to all headings, unless a heading
|
||||
is the very first element in the post content */
|
||||
.gh-content > [id]:not(:first-child) {
|
||||
margin-top: calc(1.6em * var(--content-spacing-multiplier, 1));
|
||||
}
|
||||
|
||||
/* Add a small margin between a heading and anything after it */
|
||||
.gh-content > [id] + * {
|
||||
margin-top: calc(1em * var(--content-spacing-multiplier, 1));
|
||||
}
|
||||
|
||||
/* A larger margin before/after HRs and blockquotes */
|
||||
.gh-content > :is(hr, blockquote, iframe) {
|
||||
position: relative;
|
||||
margin-top: calc(2.8em * var(--content-spacing-multiplier, 1)) !important;
|
||||
}
|
||||
|
||||
.gh-content > :is(hr, blockquote, iframe) + * {
|
||||
margin-top: calc(2.8em * var(--content-spacing-multiplier, 1)) !important;
|
||||
}
|
||||
|
||||
/* Now the content typography styles */
|
||||
.gh-content h2 {
|
||||
font-size: calc(1.8em * var(--font-multiplier, 1));
|
||||
}
|
||||
|
||||
.gh-content h3 {
|
||||
font-size: calc(1.2em * var(--font-multiplier, 1));
|
||||
}
|
||||
|
||||
.gh-content a {
|
||||
color: var(--ghost-accent-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.gh-content .kg-callout-card .kg-callout-text,
|
||||
.gh-content .kg-toggle-card .kg-toggle-content > :is(ul, ol, p) {
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.is-font-serif .gh-content > blockquote,
|
||||
.is-font-serif .gh-content > ol,
|
||||
.is-font-serif .gh-content > ul,
|
||||
.is-font-serif .gh-content > dl,
|
||||
.is-font-serif .gh-content > p,
|
||||
.is-font-serif .gh-content .kg-callout-text,
|
||||
.is-font-serif .gh-content .kg-toggle-content > ol,
|
||||
.is-font-serif .gh-content .kg-toggle-content > ul,
|
||||
.is-font-serif .gh-content .kg-toggle-content > p {
|
||||
font-family: var(--font-serif);
|
||||
}
|
||||
|
||||
.gh-content :is(ul, ol) {
|
||||
padding-left: 2.8rem;
|
||||
}
|
||||
|
||||
.gh-content :is(li + li, li :is(ul, ol)) {
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
|
||||
.gh-content ol ol li {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
|
||||
.gh-content ol ol ol li {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
|
||||
.gh-content hr {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: var(--color-light-gray);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.gh-content table:not(.gist table) {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
font-family: var(--font-sans);
|
||||
font-size: 1.6rem;
|
||||
white-space: nowrap;
|
||||
vertical-align: top;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: scroll, scroll;
|
||||
background-size: 10px 100%, 10px 100%;
|
||||
}
|
||||
|
||||
.gh-content table:not(.gist table) td:first-child {
|
||||
background-image: linear-gradient(to right, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20px 100%;
|
||||
}
|
||||
|
||||
.gh-content table:not(.gist table) td:last-child {
|
||||
background-image: linear-gradient(to left, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 100% 0;
|
||||
background-size: 20px 100%;
|
||||
}
|
||||
|
||||
.gh-content table:not(.gist table) th {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-darkgrey);
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2px;
|
||||
background-color: var(--color-white);
|
||||
}
|
||||
|
||||
.gh-content table:not(.gist table) th,
|
||||
.gh-content table:not(.gist table) td {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--color-light-gray);
|
||||
}
|
||||
|
||||
/* 11. Cards */
|
||||
|
||||
/* Add extra margin before/after any cards,
|
||||
except for when immediately preceeded by a heading */
|
||||
|
||||
.gh-content :not(.kg-card):not(table):not([id]) + :is(.kg-card, table) {
|
||||
margin-top: calc(2.8em * var(--content-spacing-multiplier, 1));
|
||||
}
|
||||
|
||||
.gh-content :is(.kg-card, table) + :not(.kg-card):not(table):not([id]) {
|
||||
margin-top: calc(2.8em * var(--content-spacing-multiplier, 1));
|
||||
}
|
||||
|
||||
.gh-content :not(.kg-card):not([id]) + .kg-card.kg-width-full {
|
||||
margin-top: calc(4em * var(--content-spacing-multiplier, 1));
|
||||
}
|
||||
|
||||
.gh-content .kg-card.kg-width-full + :not(.kg-card):not([id]) {
|
||||
margin-top: calc(4em * var(--content-spacing-multiplier, 1));
|
||||
}
|
||||
|
||||
/* Image
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.kg-image {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* Embed
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.kg-embed-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Gallery
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.kg-image[width][height],
|
||||
.kg-gallery-image {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.kg-image-card a:hover,
|
||||
.kg-gallery-image a:hover {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Toggle
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.kg-card.kg-toggle-card .kg-toggle-heading-text {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.has-serif-title .kg-toggle-card .kg-toggle-heading-text {
|
||||
font-family: var(--font-serif);
|
||||
}
|
||||
|
||||
/* Callout
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.kg-callout-card.kg-card {
|
||||
border-radius: 0.25em;
|
||||
}
|
||||
|
||||
.kg-callout-card-accent a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Blockquote
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
blockquote:not([class]) {
|
||||
padding-left: 2rem;
|
||||
border-left: 4px solid var(--ghost-accent-color);
|
||||
}
|
||||
|
||||
blockquote.kg-blockquote-alt {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
color: var(--color-secondary-text);
|
||||
}
|
||||
|
||||
/* Button
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.kg-card.kg-button-card .kg-btn {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Header
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.has-serif-title .kg-card.kg-header-card h2.kg-header-card-header {
|
||||
font-family: var(--font-serif);
|
||||
}
|
||||
|
||||
.has-serif-body .kg-header-card h3.kg-header-card-subheader {
|
||||
font-family: var(--font-serif);
|
||||
}
|
||||
|
||||
/* Bookmark
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.kg-bookmark-card .kg-bookmark-container {
|
||||
border-radius: 0.25em !important;
|
||||
}
|
||||
|
||||
.kg-bookmark-card .kg-bookmark-content {
|
||||
padding: 1.15em;
|
||||
}
|
||||
|
||||
.kg-bookmark-card .kg-bookmark-title {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.kg-bookmark-card .kg-bookmark-description {
|
||||
max-height: none;
|
||||
margin-top: 0.3em;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.kg-bookmark-card .kg-bookmark-metadata {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.kg-bookmark-card .kg-bookmark-thumbnail img {
|
||||
border-radius: 0 0.2em 0.2em 0;
|
||||
}
|
||||
|
||||
/* Product
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.kg-product-card.kg-card .kg-product-card-image {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.kg-product-card.kg-card a.kg-product-card-button {
|
||||
height: 2.8em;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.is-font-serif .kg-product-card.kg-card .kg-product-card-title,
|
||||
.is-font-serif .kg-product-card.kg-card .kg-product-card-description :is(p, ul, ol),
|
||||
.is-font-serif .kg-product-card.kg-card .kg-product-card-button {
|
||||
font-family: var(--font-serif);
|
||||
}
|
||||
|
||||
/* File
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.kg-file-card.kg-card .kg-file-card-container {
|
||||
padding: 0.6em;
|
||||
}
|
||||
|
||||
.kg-file-card.kg-card .kg-file-card-contents {
|
||||
margin: 4px 8px 6px;
|
||||
}
|
||||
|
||||
.kg-file-card.kg-card .kg-file-card-metadata {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.kg-file-card.kg-card .kg-file-card-filesize::before {
|
||||
margin-right: 6px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
/* Caption
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
figcaption {
|
||||
margin-top: 12px;
|
||||
font-size: calc(1.4rem * var(--font-multiplier, 1));
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.kg-card.kg-width-full figcaption {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
figcaption a {
|
||||
color: var(--ghost-accent-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 11. Comments */
|
||||
|
||||
.gh-comments {
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
/* 11. Footer */
|
||||
|
||||
.gh-footer {
|
||||
|
||||
@ -46,13 +46,11 @@
|
||||
<div class="gh-viewport">
|
||||
|
||||
{{> "components/navigation" navigationLayout=@custom.navigation_layout}}
|
||||
{{> "components/header" headerStyle=@custom.header_style}}
|
||||
{{> "components/featured" showFeatured=@custom.show_featured}}
|
||||
{{> "components/post-list" postListStyle=@custom.post_list_style}}
|
||||
|
||||
{{{body}}}
|
||||
|
||||
{{> "components/footer"}}
|
||||
|
||||
{{{body}}}
|
||||
|
||||
</div>
|
||||
|
||||
{{!-- Scripts - handle responsive videos, infinite scroll, and navigation dropdowns --}}
|
||||
|
||||
@ -1,2 +1,6 @@
|
||||
{{!< default}}
|
||||
{{!-- The tag above means: insert everything in this file into the body of the default.hbs template --}}
|
||||
{{!-- The tag above means: insert everything in this file into the body of the default.hbs template --}}
|
||||
|
||||
{{> "components/header" headerStyle=@custom.header_style}}
|
||||
{{> "components/featured" showFeatured=@custom.show_featured}}
|
||||
{{> "components/post-list" postListStyle=@custom.post_list_style}}
|
||||
17
partials/feature-image.hbs
Normal file
17
partials/feature-image.hbs
Normal file
@ -0,0 +1,17 @@
|
||||
{{#if feature_image}}
|
||||
<figure class="gh-article-image">
|
||||
<img
|
||||
srcset="{{img_url feature_image size="s"}} 300w,
|
||||
{{img_url feature_image size="m"}} 720w,
|
||||
{{img_url feature_image size="l"}} 960w,
|
||||
{{img_url feature_image size="xl"}} 1200w,
|
||||
{{img_url feature_image size="xxl"}} 2000w"
|
||||
sizes="(max-width: 1200px) 100vw, 1200px"
|
||||
src="{{img_url feature_image size="xl"}}"
|
||||
alt="{{title}}"
|
||||
>
|
||||
{{#if feature_image_caption}}
|
||||
<figcaption>{{feature_image_caption}}</figcaption>
|
||||
{{/if}}
|
||||
</figure>
|
||||
{{/if}}
|
||||
35
post.hbs
35
post.hbs
@ -0,0 +1,35 @@
|
||||
{{!< default}}
|
||||
|
||||
{{#post}}
|
||||
|
||||
<main class="gh-main">
|
||||
|
||||
<article class="gh-article {{post_class}}">
|
||||
|
||||
<header class="gh-article-header gh-canvas">
|
||||
{{#if primary_tag}}
|
||||
<a class="gh-article-tag" href="{{primary_tag.url}}">{{primary_tag.name}}</a>
|
||||
{{/if}}
|
||||
<h1 class="gh-article-title">{{title}}</h1>
|
||||
{{!-- {{> "post-meta"}} --}}
|
||||
{{#if custom_excerpt}}
|
||||
<p class="gh-article-excerpt">{{custom_excerpt}}</p>
|
||||
{{/if}}
|
||||
{{> "feature-image"}}
|
||||
</header>
|
||||
|
||||
<section class="gh-content gh-canvas">
|
||||
{{content}}
|
||||
</section>
|
||||
|
||||
</article>
|
||||
|
||||
{{#if comments}}
|
||||
<div class="gh-comments gh-canvas">
|
||||
{{comments}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
</main>
|
||||
|
||||
{{/post}}
|
||||
Loading…
Reference in New Issue
Block a user