vividboarder
/
Vivid-Casper
mirror of https://github.com/ViViDboarder/Vivid-Casper.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Settings cleanup

This commit is contained in:
Sodbileg Gansukh 2022-05-18 18:35:58 +08:00
parent 994a2287a2
commit 5424c465fb
7 changed files with 77 additions and 73 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

97
assets/css/screen.css
View File

@ -75,7 +75,7 @@ production stylesheet in assets/built/screen.css
/* Full width page blocks */
.outer {
position: relative;
padding: 0 24px;
padding: 0 4vmin;
}
/* Centered content container blocks */
@ -112,7 +112,7 @@ production stylesheet in assets/built/screen.css
display: flex;
align-items: flex-end;
padding-top: 64px;
padding-bottom: 64px;
padding-bottom: 6.4vmin;
color: var(--color-darkgrey);
}
@ -125,6 +125,7 @@ production stylesheet in assets/built/screen.css
.has-cover-image .site-header-content {
min-height: 600px;
padding-top: 104px;
background-color: var(--ghost-accent-color);
color: #fff;
}
@ -171,7 +172,7 @@ body:not(.has-cover-image) .site-header-content:not(.vertical) {
}
.site-header-content.vertical .site-title {
font-size: 10rem;
font-size: 6.4rem;
}
.site-description {
@ -221,14 +222,21 @@ body:not(.has-cover-image) .site-header-content:not(.vertical) {
padding-bottom: 24px;
font-size: 1.6rem;
line-height: 1.3em;
background-color: #fff;
}
.has-cover-image .gh-head {
.has-cover-image:not(.home-template) .gh-head {
background-color: var(--ghost-accent-color);
color: #fff;
}
.home-template.has-cover-image .gh-head {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 2000;
background-color: transparent;
color: #fff;
}
@ -238,7 +246,7 @@ body:not(.has-cover-image) .site-header-content:not(.vertical) {
.gh-head-inner {
display: grid;
grid-gap: 32px;
grid-gap: 40px;
grid-template-columns: auto auto 1fr;
grid-auto-flow: row dense;
}
@ -260,6 +268,7 @@ body:not(.has-cover-image) .site-header-content:not(.vertical) {
font-weight: 800;
font-size: 2.6rem;
letter-spacing: -0.02em;
color: inherit;
}
.has-cover-image .gh-head-logo {
@ -306,10 +315,7 @@ body:not(.has-cover-image) .site-header-content:not(.vertical) {
.gh-head-menu .nav a {
display: inline-block;
line-height: 1.5;
}
.has-cover-image .gh-head-menu .nav a {
color: #fff;
color: inherit;
}
@ -457,7 +463,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
justify-content: space-between;
user-select: none;
}
.no-logo .gh-head-brand {
.no-logo #gh-head .gh-head-brand {
justify-content: flex-end;
}
#gh-head .gh-head-menu {
@ -537,7 +543,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
display: grid;
gap: 64px 48px;
grid-template-columns: repeat(6, 1fr);
padding: 64px 0;
padding: 6.4vmin 0;
}
@media (max-width: 1000px) {
@ -614,6 +620,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
color: var(--color-secondary-text);
font-size: 1.4rem;
font-weight: 600;
letter-spacing: -0.005em;
line-height: 1;
}
@ -621,7 +628,6 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
margin: 0;
font-size: 2.6rem;
font-weight: 800;
transition: color 0.2s ease-in-out;
}
.no-image .post-card-title {
@ -728,6 +734,10 @@ make sure this only happens on large viewports / desktop-ish devices.
grid-column: span 1;
}
.post-card-large.no-image .post-card-content {
grid-column: span 2;
}
.post-card-large .post-card-image {
position: absolute;
width: 100%;
@ -800,10 +810,6 @@ make sure this only happens on large viewports / desktop-ish devices.
padding: 0 0 64px 0;
}
.article .article-header > * {
grid-column: wide-start / wide-end;
}
.article-tag {
margin-bottom: 16px;
font-size: 1.6rem;
@ -815,9 +821,9 @@ make sure this only happens on large viewports / desktop-ish devices.
.article-title {
margin-bottom: 0;
font-size: 6.4rem;
font-size: 5.2rem;
font-weight: 800;
line-height: 1.05;
line-height: 1;
color: var(--color-darkgrey);
}
@ -829,7 +835,7 @@ make sure this only happens on large viewports / desktop-ish devices.
margin-top: 16px;
max-width: 720px;
font-size: 2rem;
line-height: 1.5;
line-height: 1.45;
color: var(--color-darkgrey);
}
@ -912,7 +918,7 @@ headings, text, images and lists. We deal with cards lower down. */
/* Default vertical spacing */
.gh-content > * + * {
margin-top: 4vmin;
margin-top: 3.2vmin;
margin-bottom: 0;
}
@ -941,11 +947,11 @@ is the very first element in the post content */
.gh-content > hr,
.gh-content > blockquote {
position: relative;
margin-top: 6vmin;
margin-top: 4.8vmin;
}
.gh-content > hr + *,
.gh-content > blockquote + * {
margin-top: 6vmin !important;
margin-top: 4.8vmin !important;
}
/* Now the content typography styles */
@ -962,7 +968,7 @@ is the very first element in the post content */
.gh-content > p {
font-family: var(--font-serif);
font-weight: 400;
font-size: 2.1rem;
font-size: 2rem;
line-height: 1.6em;
}
@ -1604,17 +1610,6 @@ iframe.instagram-media + script + :not([id]) {
/* 12. Dark Mode
/* ---------------------------------------------------------- */
/* If you prefer a dark color scheme, you can enable dark mode
by adding the following code to the Head section of "Code Injection"
settings inside: Ghost Admin > Settings > Advanced
<script>document.documentElement.classList.add('dark-mode');</script>
Or you can just edit default.hbs and add the .dark-mode class directly
to the html tag on the very first line of the file.
*/
html.dark-mode body {
color: rgba(255, 255, 255, 0.75);
background: var(--color-darkmode);
@ -1628,16 +1623,16 @@ html.dark-mode kbd {
background: color-mod(var(--color-darkmode) l(+5%));
}
html.dark-mode .post-card,
html.dark-mode .post-card:hover {
border-bottom-color: color-mod(var(--color-darkmode) l(+8%));
html.dark-mode figcaption a {
color: #fff;
}
html.dark-mode .post-card-byline-content a {
color: rgba(255, 255, 255, 0.75);
html.dark-mode .gh-head {
background: var(--color-darkmode);
color: #fff;
}
html.dark-mode .post-card-byline-content a:hover {
html.dark-mode .site-header-content {
color: #fff;
}
@ -1646,23 +1641,19 @@ html.dark-mode .post-card-image {
}
html.dark-mode .post-card-title {
color: rgba(255, 255, 255, 0.85);
color: #fff;
}
html.dark-mode .post-card-excerpt {
color: color-mod(var(--color-midgrey) l(+10%));
}
html.dark-mode .post-full-content {
background: var(--color-darkmode);
color: var(--color-secondary-text);
}
html.dark-mode .article-title {
color: rgba(255, 255, 255, 0.9);
color: #fff;
}
html.dark-mode .article-excerpt {
color: color-mod(var(--color-midgrey) l(+10%));
color: var(--color-secondary-text);
}
html.dark-mode .post-full-image {
@ -1673,11 +1664,7 @@ html.dark-mode .article-byline {
border-top-color: color-mod(var(--color-darkmode) l(+15%));
}
html.dark-mode .article-byline-meta h4 a {
color: rgba(255, 255, 255, 0.75);
}
html.dark-mode .article-byline-meta h4 a:hover {
html.dark-mode .article-byline-meta .author-name a {
color: #fff;
}
@ -1769,6 +1756,10 @@ html.dark-mode .kg-header-card h3.kg-header-card-subheader {
color: #fff;
}
html.dark-mode .footer-cta-title {
color: #fff;
}
@media (prefers-color-scheme: dark) {
html.auto-color body {
color: rgba(255, 255, 255, 0.75);

4
default.hbs
View File

@ -18,14 +18,14 @@
{{ghost_head}}
</head>
<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}}{{#if @site.cover_image}} has-cover-image{{/if}}{{#is "home"}}{{#match @custom.about_section "!=" "None"}}{{#if @custom.include_logo_in_about_section}} no-logo{{/if}}{{/match}}{{/is}}">
<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}}{{#if @custom.show_publication_cover}} has-cover-image{{/if}}{{#is "home"}}{{#match @custom.about_section "!=" "None"}}{{#if @custom.include_logo_in_about_section}} no-logo{{/if}}{{/match}}{{/is}}">
<div class="viewport">
<header id="gh-head" class="gh-head outer">
<nav class="gh-head-inner inner">
<div class="gh-head-brand">
<a class="gh-head-logo" href="{{@site.url}}">
<a class="gh-head-logo{{#unless @site.logo}} no-image{{/unless}}" href="{{@site.url}}">
{{#if @site.logo}}
<img src="{{@site.logo}}" alt="{{@site.title}}" />
{{else}}

34
index.hbs
View File

@ -4,18 +4,20 @@ into the {body} of the default.hbs template --}}
<div class="site-header-content outer{{#match @custom.about_section "Vertical"}} vertical{{/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="{{@site.title}}"
/>
{{#if @custom.show_publication_cover}}
{{#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="{{@site.title}}"
/>
{{/if}}
{{/if}}
{{#match @custom.about_section "!=" "None"}}
@ -27,7 +29,13 @@ into the {body} of the default.hbs template --}}
{{/if}}
<div class="site-header-wrapper">
{{#match @custom.about_section "Horizontal"}}
<h1 class="site-title">{{@site.title}}</h1>
{{#if @site.logo}}
<h1 class="site-title">{{@site.title}}</h1>
{{else}}
{{#if @custom.include_logo_in_about_section}}
<h1 class="site-title">{{@site.title}}</h1>
{{/if}}
{{/if}}
{{else}}
{{#if @custom.include_logo_in_about_section}}
{{#unless @site.logo}}

9
package.json
View File

@ -105,14 +105,19 @@
],
"default": "Elegant serif"
},
"show_publication_cover": {
"type": "boolean",
"default": true,
"group": "homepage"
},
"about_section": {
"type": "select",
"options": [
"Horizontal",
"Vertical",
"Horizontal",
"None"
],
"default": "Horizontal",
"default": "Vertical",
"group": "homepage"
},
"include_logo_in_about_section": {

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}}{{#match @custom.feed_layout "!=" "List"}}{{#is "home"}}{{^is "paged"}}{{#has index="0"}}{{#match @custom.first_post_layout "Large card"}} post-card-large{{/match}}{{#match @custom.first_post_layout "Full-width card"}} post-card-full{{/match}}{{/has}}{{#match @custom.feed_layout "Dynamic grid"}}{{#match @custom.first_post_layout "None"}}{{#has index="0,1"}} dynamic{{/has}}{{else}}{{#has index="1,2"}} dynamic{{/has}}{{/match}}{{/match}}{{/is}}{{/is}}{{else}} post-card-large{{/match}}{{#if @custom.keep_card_thumbnail_ratio}} keep-ratio{{/if}}">
<article class="post-card {{post_class}}{{#match @custom.feed_layout "!=" "List"}}{{#is "home"}}{{^is "paged"}}{{#has index="0"}}{{#match @custom.first_post_layout "Large card"}} post-card-large{{/match}}{{#match @custom.first_post_layout "Full-width card"}} post-card-full{{/match}}{{/has}}{{#match @custom.feed_layout "Dynamic grid"}}{{#match @custom.first_post_layout "None"}}{{#has index="0,1"}} dynamic{{/has}}{{else}}{{#has index="1,2"}} dynamic{{/has}}{{/match}}{{/match}}{{/is}}{{/is}}{{else}}{{#is "home"}} post-card-large{{/is}}{{/match}}{{#if @custom.keep_card_thumbnail_ratio}} keep-ratio{{/if}}">
{{#if feature_image}}
<a class="post-card-image-link" href="{{url}}">