GenZmeY/casper-i18n
1
0
Fork 0
mirror of https://github.com/GenZmeY/casper-i18n.git synced 2024-11-10 02:28:02 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Add custom settings

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/built/screen.css
View File

File diff suppressed because one or more lines are too long

2
assets/built/screen.css.map
View File

File diff suppressed because one or more lines are too long

313
assets/css/screen.css
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.auto-color img {
opacity: 0.9;
}
html.dark-mode .subscribe-form p {
color: rgba(255, 255, 255, 0.7);
}
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-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.auto-color .post-card-byline-content a {
color: rgba(255, 255, 255, 0.75);
}
html.dark-mode .subscribe-email:focus {
border-color: color-mod(var(--color-darkmode) l(+25%));
}
html.auto-color .post-card-byline-content a:hover {
color: #fff;
}
html.dark-mode .subscribe-form button {
opacity: 0.9;
}
html.auto-color .post-card-image {
background: var(--color-darkmode);
}
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-title {
color: rgba(255, 255, 255, 0.85);
}
html.dark-mode .subscribe-form .success .message-success {
color: color-mod(var(--color-green) l(+5%) s(-5%));
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);
}
}
/*

15
default.hbs
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">

48
index.hbs
View File

@ -2,35 +2,37 @@
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}
<div class="site-header-content">
{{#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 --}}
<img class="site-header-cover"
srcset="{{img_url @site.cover_image size="s"}} 300w,
{{img_url @site.cover_image size="m"}} 600w,
{{img_url @site.cover_image size="l"}} 1000w,
{{img_url @site.cover_image size="xl"}} 2000w"
sizes="100vw"
src="{{img_url @site.cover_image size="xl"}}"
alt=""
/>
{{/if}}
<h1 class="site-title">
{{#if @site.logo}}
<img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" />
{{else}}
{{@site.title}}
{{#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 --}}
<img class="site-header-cover"
srcset="{{img_url @site.cover_image size="s"}} 300w,
{{img_url @site.cover_image size="m"}} 600w,
{{img_url @site.cover_image size="l"}} 1000w,
{{img_url @site.cover_image size="xl"}} 2000w"
sizes="100vw"
src="{{img_url @site.cover_image size="xl"}}"
alt=""
/>
{{/if}}
</h1>
<p>{{@site.description}}</p>
</div>
<h1 class="site-title">
{{#if @site.logo}}
<img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" />
{{else}}
{{@site.title}}
{{/if}}
</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 --}}

60
package.json
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": {

2
partials/post-card.hbs
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}}">

32
post.hbs
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">
<div class="inner">
<h2>Sign up for more like this.</h2>
<a class="footer-cta-button" href="#/portal">
<div>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}}
{{#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">
{{#if @custom.email_signup_text}}<h2>{{@custom.email_signup_text}}</h2>{{/if}}
<a class="footer-cta-button" href="#/portal">
<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>
{{/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}}