mirror of
https://github.com/ViViDboarder/Vivid-Casper.git
synced 2024-12-22 11:37:38 +00:00
Settings cleanup
This commit is contained in:
Sodbileg Gansukh
parent
994a2287a2
commit
5424c465fb
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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);
|
||||
|
||||
@ -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}}
|
||||
|
||||
@ -4,6 +4,7 @@ into the {body} of the default.hbs template --}}
|
||||
|
||||
<div class="site-header-content outer{{#match @custom.about_section "Vertical"}} vertical{{/match}}">
|
||||
|
||||
{{#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 --}}
|
||||
@ -17,6 +18,7 @@ into the {body} of the default.hbs template --}}
|
||||
alt="{{@site.title}}"
|
||||
/>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{#match @custom.about_section "!=" "None"}}
|
||||
<section class="site-header-inner inner">
|
||||
@ -27,7 +29,13 @@ into the {body} of the default.hbs template --}}
|
||||
{{/if}}
|
||||
<div class="site-header-wrapper">
|
||||
{{#match @custom.about_section "Horizontal"}}
|
||||
{{#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}}
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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}}">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user