Add custom settings

This commit is contained in:
Sodbileg Gansukh 2021-11-05 20:14:53 +08:00
parent c63a07e8df
commit ceaa887371
8 changed files with 381 additions and 93 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -161,6 +161,10 @@ production stylesheet in assets/built/screen.css
background: var(--ghost-accent-color);
}
.site-header-content.large {
padding-top: 28vmin;
padding-bottom: 28vmin;
}
/* 5. Site Navigation
@ -301,12 +305,12 @@ production stylesheet in assets/built/screen.css
a.gh-head-button {
display: block;
padding: 8px 15px;
color: var(--color-darkgrey);
color: var(--button-text-color, var(--color-darkgrey));
font-weight: 500;
letter-spacing: -0.015em;
font-size: 1.5rem;
line-height: 1em;
background: #fff;
background: var(--button-bg-color, #fff);
border-radius: 30px;
}
@ -422,7 +426,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
justify-content: space-between;
user-select: none;
}
.home-template #gh-head .gh-head-brand {
.home-template #gh-head.has-cover .gh-head-brand {
justify-content: flex-end;
}
#gh-head .gh-head-menu {
@ -489,7 +493,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
}
}
.home-template .gh-head {
.home-template .gh-head.has-cover {
position: absolute;
top: 0;
right: 0;
@ -505,10 +509,10 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
background: var(--ghost-accent-color);
}
.home-template .gh-head-logo {
.home-template .gh-head.has-cover .gh-head-logo {
display: none;
}
.home-template .gh-head-menu {
.home-template .gh-head.has-cover .gh-head-menu {
margin-left: -2.5vmin;
}
@ -524,6 +528,12 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
padding: 4vmin 0;
}
.post-feed.list {
row-gap: 6vmin;
max-width: 940px;
margin: 2vmin auto 0;
}
@media (max-width: 1000px) {
.post-feed {
grid-template-columns: 1fr 1fr;
@ -602,6 +612,10 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
margin-top: 0;
}
.has-serif-title .post-card-title {
font-family: var(--font-serif);
}
.post-card-content {
flex-grow: 1;
display: flex;
@ -611,6 +625,11 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
.post-card-excerpt {
max-width: 56em;
color: color-mod(var(--color-midgrey) l(-8%));
font-family: var(--font-serif);
}
.has-sans-body .post-card-excerpt {
font-family: var(--font-sans-serif);
}
.post-card-excerpt p {
@ -741,6 +760,15 @@ make sure this only happens on large viewports / desktop-ish devices.
border-top: 0;
}
.post-feed.list .post-card-large {
grid-template-columns: 3fr 5fr;
min-height: auto;
}
.post-feed.list .post-card-large.no-image {
grid-template-columns: 1fr;
}
.post-card-large:not(.no-image) .post-card-header {
margin-top: 0;
}
@ -752,6 +780,18 @@ make sure this only happens on large viewports / desktop-ish devices.
min-height: 380px;
}
.post-feed.list .post-card-large .post-card-image-link {
grid-column: 1 / span 1;
height: max-content;
min-height: auto;
}
.post-feed.list .post-card-large .post-card-image-link::after {
content: "";
display: block;
padding-bottom: 60%;
}
.post-card-large .post-card-image {
position: absolute;
width: 100%;
@ -762,13 +802,21 @@ make sure this only happens on large viewports / desktop-ish devices.
justify-content: center;
}
.post-feed.list .post-card-large .post-card-content {
justify-content: flex-start;
margin-top: -6px;
}
.post-card-large .post-card-title {
margin-top: 0;
font-size: 3.2rem;
}
.post-feed.list .post-card-large .post-card-title {
font-size: 2.4rem;
}
.post-card-large .post-card-excerpt p {
margin-bottom: 1.5em;
font-size: 1.7rem;
line-height: 1.55em;
-webkit-line-clamp: 8;
@ -820,6 +868,10 @@ make sure this only happens on large viewports / desktop-ish devices.
color: color-mod(var(--color-darkgrey) l(-5%));
}
.has-serif-title .article-title {
font-family: var(--font-serif);
}
.article-excerpt {
margin: 0 0 1rem;
font-size: 2rem;
@ -833,6 +885,14 @@ make sure this only happens on large viewports / desktop-ish devices.
margin: 6vmin 0 0;
}
.image-full .article-image {
grid-column: full-start / full-end;
}
.image-small .article-image {
grid-column: main-start / main-end;
}
.gh-canvas .article-image img {
display: block;
margin-left: auto;
@ -908,6 +968,10 @@ headings, text, images and lists. We deal with cards lower down. */
color: var(--color-darkgrey);
}
.has-serif-title .gh-content > [id] {
font-family: var(--font-serif);
}
/* 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) {
@ -948,6 +1012,14 @@ is the very first element in the post content */
line-height: 1.6em;
}
.has-sans-body .gh-content > blockquote,
.has-sans-body .gh-content > ol,
.has-sans-body .gh-content > ul,
.has-sans-body .gh-content > dl,
.has-sans-body .gh-content > p {
font-family: var(--font-sans);
}
.gh-content > ul,
.gh-content > ol,
.gh-content > dl {
@ -1398,18 +1470,28 @@ Ghost editor. */
.footer-cta {
position: relative;
margin-bottom: -40px;
padding: 9vmin 4vmin 10vmin;
color: #fff;
text-align: center;
background: var(--color-darkgrey);
}
.footer-cta.cta-alt {
padding: 2vmin 4vmin 12vmin;
background: transparent;
}
/* Increases the default h2 size by 15%, for small and large screens */
.footer-cta h2 {
margin: 0 0 30px;
font-size: 3.2rem;
}
.footer-cta.cta-alt h2 {
color: var(--color-darkgrey);
}
@media (max-width: 600px) {
.footer-cta h2 {
font-size: 2.65rem;
@ -1430,9 +1512,13 @@ Ghost editor. */
border-radius: 8px;
}
.footer-cta.cta-alt .footer-cta-button {
border: 1px solid var(--color-lightgrey);
}
.footer-cta-button span {
display: inline-block;
padding: 10px 20px;
padding: 10px 15px;
color: #fff;
font-weight: 500;
background: var(--ghost-accent-color);
@ -1446,7 +1532,7 @@ Ghost editor. */
.read-more-wrap {
width: 100%;
padding: 4vmin;
margin: 0 auto -40px;
margin: 40px auto -40px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
background: color-mod(var(--color-darkgrey) l(-5%));
}
@ -1846,20 +1932,20 @@ html.dark-mode .gh-content :not(pre) > code {
color: var(--color-wash);
}
html.dark-mode .post-full-content a {
html.dark-mode .gh-content a {
color: #fff;
box-shadow: inset 0 -1px 0 #fff;
}
html.dark-mode .post-full-content strong {
html.dark-mode .gh-content strong {
color: #fff;
}
html.dark-mode .post-full-content em {
html.dark-mode .gh-content em {
color: #fff;
}
html.dark-mode .post-full-content code {
html.dark-mode .gh-content code {
color: #fff;
background: #000;
}
@ -1868,40 +1954,40 @@ html.dark-mode hr {
border-top-color: color-mod(var(--color-darkmode) l(+8%));
}
html.dark-mode .post-full-content hr:after {
html.dark-mode .gh-content hr:after {
background: color-mod(var(--color-darkmode) l(+8%));
box-shadow: var(--color-darkmode) 0 0 0 5px;
}
html.dark-mode .gh-content figcaption {
html.dark-mode figcaption {
color: rgba(255, 255, 255, 0.6);
}
html.dark-mode .post-full-content table td:first-child {
html.dark-mode .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.dark-mode .post-full-content table td:last-child {
html.dark-mode .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.dark-mode .post-full-content table th {
html.dark-mode .gh-content table th {
color: rgba(255, 255, 255, 0.85);
background-color: color-mod(var(--color-darkmode) l(+8%));
}
html.dark-mode .post-full-content table th,
html.dark-mode .post-full-content table td {
html.dark-mode .gh-content table th,
html.dark-mode .gh-content table td {
border: color-mod(var(--color-darkmode) l(+8%)) 1px solid;
}
html.dark-mode .post-full-content .kg-bookmark-container,
html.dark-mode .post-full-content .kg-bookmark-container:hover {
html.dark-mode .gh-content .kg-bookmark-container,
html.dark-mode .gh-content .kg-bookmark-container:hover {
color: rgba(255, 255, 255, 0.75);
box-shadow: 0 0 1px rgba(255,255,255,0.9);
}
html.dark-mode .post-full-content input {
html.dark-mode .gh-content input {
color: color-mod(var(--color-midgrey) l(-30%));
}
@ -1922,40 +2008,167 @@ html.dark-mode .site-archive-header .no-image {
background: var(--color-darkmode);
}
html.dark-mode .subscribe-form {
border: none;
background: linear-gradient(color-mod(var(--color-darkmode) l(-6%)), color-mod(var(--color-darkmode) l(-3%)));
@media (prefers-color-scheme: dark) {
html.auto-color body {
color: rgba(255, 255, 255, 0.75);
background: var(--color-darkmode);
}
html.dark-mode .subscribe-form-title {
color: rgba(255, 255, 255, 0.9);
}
html.dark-mode .subscribe-form p {
color: rgba(255, 255, 255, 0.7);
}
html.dark-mode .subscribe-email {
border-color: color-mod(var(--color-darkmode) l(+6%));
color: rgba(255, 255, 255, 0.9);
background: color-mod(var(--color-darkmode) l(+3%));
}
html.dark-mode .subscribe-email:focus {
border-color: color-mod(var(--color-darkmode) l(+25%));
}
html.dark-mode .subscribe-form button {
html.auto-color img {
opacity: 0.9;
}
html.dark-mode .subscribe-form .invalid .message-error,
html.dark-mode .subscribe-form .error .message-error {
color: color-mod(var(--color-red) l(+5%) s(-5%));
html.auto-color .post-card,
html.auto-color .post-card:hover {
border-bottom-color: color-mod(var(--color-darkmode) l(+8%));
}
html.dark-mode .subscribe-form .success .message-success {
color: color-mod(var(--color-green) l(+5%) s(-5%));
html.auto-color .post-card-byline-content a {
color: rgba(255, 255, 255, 0.75);
}
html.auto-color .post-card-byline-content a:hover {
color: #fff;
}
html.auto-color .post-card-image {
background: var(--color-darkmode);
}
html.auto-color .post-card-title {
color: rgba(255, 255, 255, 0.85);
}
html.auto-color .post-card-excerpt {
color: color-mod(var(--color-midgrey) l(+10%));
}
html.auto-color .post-full-content {
background: var(--color-darkmode);
}
html.auto-color .article-title {
color: rgba(255, 255, 255, 0.9);
}
html.auto-color .article-excerpt {
color: color-mod(var(--color-midgrey) l(+10%));
}
html.auto-color .post-full-image {
background-color: color-mod(var(--color-darkmode) l(+8%));
}
html.auto-color .article-byline {
border-top-color: color-mod(var(--color-darkmode) l(+15%));
}
html.auto-color .article-byline-meta h4 a {
color: rgba(255, 255, 255, 0.75);
}
html.auto-color .article-byline-meta h4 a:hover {
color: #fff;
}
html.auto-color .no-image .author-social-link a {
color: rgba(255, 255, 255, 0.75);
}
html.auto-color .gh-content h1,
html.auto-color .gh-content h2,
html.auto-color .gh-content h3,
html.auto-color .gh-content h4,
html.auto-color .gh-content h5,
html.auto-color .gh-content h6 {
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 {
color: #fff;
box-shadow: inset 0 -1px 0 #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 .kg-bookmark-container,
html.auto-color .gh-content .kg-bookmark-container:hover {
color: rgba(255, 255, 255, 0.75);
box-shadow: 0 0 1px rgba(255,255,255,0.9);
}
html.auto-color .gh-content input {
color: color-mod(var(--color-midgrey) l(-30%));
}
html.auto-color .kg-bookmark-title {
color: #fff;
}
html.auto-color .kg-bookmark-description {
color: rgba(255, 255, 255, 0.75);
}
html.auto-color .kg-bookmark-metadata {
color: rgba(255, 255, 255, 0.75);
}
html.auto-color .site-archive-header .no-image {
color: rgba(255, 255, 255, 0.9);
background: var(--color-darkmode);
}
}
/*

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="{{@site.locale}}">
<html lang="{{@site.locale}}"{{#match @custom.color_scheme "Dark"}} class="dark-mode"{{/match}}{{#match @custom.color_scheme "Auto"}} class="auto-color"{{/match}}>
<head>
{{!-- Basic meta - advanced meta is output with {ghost_head} below --}}
@ -9,6 +9,15 @@
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
:root {
{{#if @custom.header_button_background}}
--button-bg-color: {{@custom.header_button_background}};
{{/if}}
--button-text-color: {{#match @custom.header_button_text_color "Light"}}#fff{{else}}var(--color-darkgrey){{/match}};
}
</style>
{{!-- Theme assets - use the {asset} helper to reference styles & scripts,
this will take care of caching and cache-busting automatically --}}
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
@ -18,10 +27,10 @@
{{ghost_head}}
</head>
<body class="{{body_class}}">
<body class="{{body_class}}{{#match @custom.title_font "=" "Elegant serif"}} has-serif-title{{/match}}{{#match @custom.body_font "=" "Modern sans-serif"}} has-sans-body{{/match}}">
<div class="viewport">
<header id="gh-head" class="gh-head {{#if @site.cover_image}}has-cover{{/if}}">
<header id="gh-head" class="gh-head{{#match @custom.publication_cover_style "!=" "None"}} has-cover{{/match}}">
<nav class="gh-head-inner inner gh-container">
<div class="gh-head-brand">

View File

@ -2,7 +2,8 @@
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}
<div class="site-header-content">
{{#match @custom.publication_cover_style "!=" "None"}}
<div class="site-header-content{{#match @custom.publication_cover_style "Large"}} large{{/match}}">
{{#if @site.cover_image}}
{{!-- This is a responsive image, it loads different sizes depending on device
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
@ -25,12 +26,13 @@ into the {body} of the default.hbs template --}}
</h1>
<p>{{@site.description}}</p>
</div>
{{/match}}
{{!-- The main content area --}}
<main id="site-main" class="site-main outer">
<div class="inner posts">
<div class="post-feed">
<div class="post-feed{{#match @custom.feed_layout "List"}} list{{/match}}">
{{#foreach posts}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}

View File

@ -87,6 +87,66 @@
"xl": {
"width": 2000
}
},
"custom": {
"title_font": {
"type": "select",
"options": ["Modern sans-serif", "Elegant serif"],
"default": "Modern sans-serif"
},
"body_font": {
"type": "select",
"options": ["Modern sans-serif", "Elegant serif"],
"default": "Elegant serif"
},
"publication_cover_style": {
"type": "select",
"options": ["None", "Medium", "Large"],
"default": "Medium",
"group": "homepage"
},
"feed_layout": {
"type": "select",
"options": ["Dynamic grid", "Simple grid", "List"],
"default": "Dynamic grid",
"group": "homepage"
},
"color_scheme": {
"type": "select",
"options": ["Light", "Dark", "Auto"],
"default": "Light"
},
"header_button_background": {
"type": "color",
"default": "#ffffff"
},
"header_button_text_color": {
"type": "select",
"options": ["Light", "Dark"],
"default": "Dark"
},
"post_image_width": {
"type": "select",
"options": ["Wide", "Full", "Small"],
"default": "Wide",
"group": "post"
},
"email_signup_for_logged_out_visitors": {
"type": "select",
"options": ["Footer", "Bottom of post", "None"],
"default": "Footer",
"group": "post"
},
"email_signup_text": {
"type": "text",
"default": "Sign up for more like this.",
"group": "post"
},
"show_recent_posts": {
"type": "boolean",
"default": true,
"group": "post"
}
}
},
"renovate": {

View File

@ -1,7 +1,7 @@
{{!-- This is a partial file used to generate a post "card"
which templates loop over to generate a list of posts. --}}
<article class="post-card {{post_class}} {{#is "home"}}{{#if feature_image}}{{#has index="0"}}post-card-large{{/has}}{{/if}}{{/is}}">
<article class="post-card {{post_class}} {{#match @custom.feed_layout "!=" "Simple grid"}}{{#is "home"}}{{#match @custom.feed_layout "Dynamic grid"}}{{#has index="0"}}{{#if feature_image}}post-card-large{{/if}}{{/has}}{{else}}post-card-large{{/match}}{{/is}}{{/match}}">
{{#if feature_image}}
<a class="post-card-image-link" href="{{url}}">

View File

@ -8,7 +8,7 @@ into the {body} tag of the default.hbs template --}}
{{!-- Everything inside the #post block pulls data from the post --}}
<main id="site-main" class="site-main">
<article class="article {{post_class}}">
<article class="article {{post_class}} {{#match @custom.post_image_width "Full"}}image-full{{else match @custom.post_image_width "=" "Small"}}image-small{{/match}}">
<header class="article-header gh-canvas">
@ -83,22 +83,25 @@ into the {body} tag of the default.hbs template --}}
</main>
{{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
{{#unless @member}}
<section class="footer-cta">
{{#match @custom.email_signup_for_logged_out_visitors "!=" "None"}}
{{#unless @member}}{{#if access}}
<section class="footer-cta {{#match @custom.email_signup_for_logged_out_visitors "Bottom of post"}}cta-alt{{/match}}">
<div class="inner">
<h2>Sign up for more like this.</h2>
{{#if @custom.email_signup_text}}<h2>{{@custom.email_signup_text}}</h2>{{/if}}
<a class="footer-cta-button" href="#/portal">
<div>Enter your email</div>
<div class="footer-cta-input">Enter your email</div>
<span>Subscribe</span>
</a>
{{!-- ^ This looks like a form element, but it's just a link to Portal,
making the form validation and submission much simpler. --}}
</div>
</section>
{{/unless}}
{{/if}}{{/unless}}
{{/match}}
{{!-- Read more links, just above the footer --}}
{{#if @custom.show_recent_posts}}
<aside class="read-more-wrap">
<div class="read-more inner">
@ -118,5 +121,6 @@ into the {body} tag of the default.hbs template --}}
</div>
</aside>
{{/if}}
{{/post}}