simon/ghost-theme-sd.ai
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Color settings

Browse Source
This commit is contained in:
Sodbileg Gansukh 2023-07-10 15:44:09 +08:00
parent 6d7e0ec42d
commit 259d1e49dd
10 changed files with 116 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/built/casper.js
View File

File diff suppressed because one or more lines are too long

2
assets/built/casper.js.map
View File

File diff suppressed because one or more lines are too long

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

104
assets/css/screen.css
View File

@ -18,6 +18,13 @@
--grid-gap: 40px;
}
:root.has-light-text {
--color-lighter-gray: rgba(0, 0, 0, 0.1);
--color-darker-gray: #fff;
--color-secondary-text: rgba(255, 255, 255, 0.64);
--color-border: rgba(255, 255, 255, 0.2);
}
/* 2. Resets */
*, *::before, *::after {
@ -65,6 +72,8 @@ h1, h2, h3, h4, h5, h6 {
body {
font-family: var(--font-sans);
font-size: 1.6rem;
background-color: var(--background-color);
color: var(--color-primary-text);
}
a {
@ -147,6 +156,11 @@ a:hover {
.gh-navigation {
height: 100px;
color: var(--color-darker-gray);
}
.gh-navigation :is(.gh-navigation-logo, a:not(.gh-button), .gh-icon-button) {
color: inherit;
}
.gh-navigation-inner {
@ -257,6 +271,18 @@ a:hover {
}
}
/* 5.1. Accent color */
.gh-navigation.has-accent-color {
background-color: var(--ghost-accent-color);
color: #fff;
}
.gh-navigation.has-accent-color .gh-button {
background-color: #fff;
color: #15171a;
}
/* 5.1. Navigation variants */
/*
@ -265,12 +291,12 @@ LOGO Home About Collection Author Portal Login Subscribe
======================================================================
*/
.is-navigation-left-logo .gh-navigation-inner {
.is-left-logo .gh-navigation-inner {
grid-template-columns: auto 1fr auto;
}
@media (min-width: 992px) {
.is-navigation-left-logo .gh-navigation-menu {
.is-left-logo .gh-navigation-menu {
margin-right: 64px;
margin-left: 16px;
}
@ -282,20 +308,20 @@ Home About Collection LOGO Login Subscribe
======================================================================
*/
.is-navigation-middle-logo .gh-navigation-inner {
.is-middle-logo .gh-navigation-inner {
grid-template-columns: 1fr auto 1fr;
}
.is-navigation-middle-logo .gh-navigation-brand {
.is-middle-logo .gh-navigation-brand {
grid-column-start: 2;
}
.is-navigation-middle-logo .gh-navigation-actions {
.is-middle-logo .gh-navigation-actions {
gap: 28px;
}
@media (min-width: 992px) {
.is-navigation-middle-logo .gh-navigation-menu {
.is-middle-logo .gh-navigation-menu {
margin-right: 64px;
}
}
@ -307,16 +333,16 @@ Search LOGO Login Subscribe
======================================================================
*/
.is-navigation-stacked.gh-navigation {
.is-stacked.gh-navigation {
position: relative;
height: auto;
}
.is-navigation-stacked .gh-navigation-inner {
.is-stacked .gh-navigation-inner {
grid-template-columns: 1fr auto 1fr;
}
.is-navigation-stacked .gh-navigation-brand {
.is-stacked .gh-navigation-brand {
display: flex;
grid-row-start: 1;
grid-column-start: 2;
@ -324,17 +350,17 @@ Search LOGO Login Subscribe
}
@media (min-width: 992px) {
.is-navigation-stacked .gh-navigation-inner {
.is-stacked .gh-navigation-inner {
padding: 0;
}
.is-navigation-stacked .gh-navigation-brand {
.is-stacked .gh-navigation-brand {
display: flex;
align-items: center;
height: 80px;
}
.is-navigation-stacked .gh-navigation-menu {
.is-stacked .gh-navigation-menu {
grid-row-start: 2;
grid-column: 1 / 4;
justify-content: center;
@ -342,8 +368,8 @@ Search LOGO Login Subscribe
margin: 0 48px;
}
.is-navigation-stacked .gh-navigation-menu::before,
.is-navigation-stacked .gh-navigation-menu::after {
.is-stacked .gh-navigation-menu::before,
.is-stacked .gh-navigation-menu::after {
position: absolute;
top: 80px;
left: 0;
@ -353,11 +379,11 @@ Search LOGO Login Subscribe
background-color: var(--color-border);
}
.is-navigation-stacked .gh-navigation-menu::after {
.is-stacked .gh-navigation-menu::after {
top: 136px;
}
.is-navigation-stacked .gh-navigation-actions {
.is-stacked .gh-navigation-actions {
grid-row-start: 1;
grid-column: 1 / 4;
justify-content: space-between;
@ -384,7 +410,7 @@ Search LOGO Login Subscribe
transform: translate3d(0, 6px, 0);
}
.is-navigation-middle-logo .gh-dropdown {
.is-middle-logo .gh-dropdown {
right: auto;
left: -24px;
}
@ -434,11 +460,11 @@ Search LOGO Login Subscribe
display: none;
}
.is-navigation-open .gh-burger svg:first-child {
.is-open .gh-burger svg:first-child {
display: none;
}
.is-navigation-open .gh-burger svg:last-child {
.is-open .gh-burger svg:last-child {
display: block;
}
@ -526,7 +552,7 @@ Search LOGO Login Subscribe
transition: opacity 0.4s;
}
.is-navigation-open#gh-navigation {
.is-open#gh-navigation {
position: fixed;
inset: 0;
z-index: 3999999;
@ -535,25 +561,25 @@ Search LOGO Login Subscribe
-webkit-overflow-scrolling: touch;
}
.is-navigation-open#gh-navigation .gh-navigation-menu,
.is-navigation-open#gh-navigation .gh-navigation-actions {
.is-open#gh-navigation .gh-navigation-menu,
.is-open#gh-navigation .gh-navigation-actions {
position: static;
visibility: visible;
opacity: 1;
}
.is-navigation-open#gh-navigation .nav {
.is-open#gh-navigation .nav {
display: flex;
flex-direction: column;
}
.is-navigation-open#gh-navigation .nav li {
.is-open#gh-navigation .nav li {
opacity: 1;
transition: transform 0.2s, opacity 0.2s;
transform: translateY(0);
}
.is-navigation-open#gh-navigation .gh-navigation-actions {
.is-open#gh-navigation .gh-navigation-actions {
position: sticky;
right: 0;
bottom: 0;
@ -566,18 +592,18 @@ Search LOGO Login Subscribe
background-color: var(--color-white);
}
.is-navigation-open#gh-navigation :is(.gh-button, a[data-portal="signin"]) {
.is-open#gh-navigation :is(.gh-button, a[data-portal="signin"]) {
opacity: 1;
transition: transform 0.4s, opacity 0.4s;
transition-delay: 0.2s;
transform: translateY(0);
}
.is-navigation-open#gh-navigation a[data-portal="signin"] {
.is-open#gh-navigation a[data-portal="signin"] {
transition-delay: 0.4s;
}
.is-navigation-open#gh-main {
.is-open#gh-main {
opacity: 0;
}
}
@ -621,6 +647,7 @@ Search LOGO Login Subscribe
.gh-header {
position: relative;
margin: 40px;
}
.gh-header-image {
@ -815,9 +842,26 @@ Search LOGO Login Subscribe
.gh-footer {
margin-top: 80px;
color: var(--color-darker-gray);
}
/* 11.1. Footer bar */
.gh-footer a:not(.gh-button) {
color: inherit;
}
/* 11.1 Accent color */
.gh-footer.has-accent-color {
background-color: var(--ghost-accent-color);
color: #fff;
}
.gh-footer.has-accent-color .gh-button {
background-color: #fff;
color: #15171a;
}
/* 11.2. Footer bar */
.gh-footer-bar {
display: grid;
@ -836,7 +880,7 @@ Search LOGO Login Subscribe
text-align: right;
}
/* 11.2. Footer signup */
/* 11.3. Footer signup */
.gh-footer-signup {
display: flex;

6
assets/js/casper.js
View File

@ -93,10 +93,10 @@
if (!burger) return;
burger.addEventListener('click', function () {
if (!navigation.classList.contains('is-navigation-open')) {
navigation.classList.add('is-navigation-open');
if (!navigation.classList.contains('is-open')) {
navigation.classList.add('is-open');
} else {
navigation.classList.remove('is-navigation-open');
navigation.classList.remove('is-open');
}
});
})();

21
default.hbs
View File

@ -14,6 +14,27 @@
{{!-- 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"}}">
{{!-- Custom background color --}}
<style>
:root {
--background-color: {{@custom.page_background_color}}
}
</style>
<script>
/* The script for calculating the color contrast has been taken from
https://gomakethings.com/dynamically-changing-the-text-color-based-on-background-color-contrast-with-vanilla-js/ */
var accentColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color');
accentColor = accentColor.trim().slice(1);
var r = parseInt(accentColor.substr(0, 2), 16);
var g = parseInt(accentColor.substr(2, 2), 16);
var b = parseInt(accentColor.substr(4, 2), 16);
var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
var textColor = (yiq >= 128) ? 'dark' : 'light';
document.documentElement.className = `has-${textColor}-text`;
</script>
{{!-- This tag outputs all your advanced SEO meta, structured data, and other important settings, it should always be the last tag before the closing head tag --}}
{{ghost_head}}

12
package.json
View File

@ -94,6 +94,18 @@
],
"default": "Logo in the middle"
},
"page_background_color": {
"type": "color",
"default": "#ffffff"
},
"header_and_footer_color": {
"type": "select",
"options": [
"Background color",
"Accent color"
],
"default": "Background color"
},
"footer_signup_header": {
"type": "text",
"default": "Stay in the loop"

2
partials/components/footer.hbs
View File

@ -1,4 +1,4 @@
<footer class="gh-footer gh-outer">
<footer class="gh-footer{{#match @custom.header_and_footer_color "Accent color"}} has-accent-color{{/match}} gh-outer">
<div class="gh-footer-inner gh-inner">
<div class="gh-footer-bar">

2
partials/components/navigation.hbs
View File

@ -1,4 +1,4 @@
<header id="gh-navigation" class="gh-navigation gh-outer is-navigation-{{#match navigationLayout "Logo on the left"}}left-logo{{else match navigationLayout "Stacked"}}stacked{{else}}middle-logo{{/match}}">
<header id="gh-navigation" class="gh-navigation is-{{#match navigationLayout "Logo on the left"}}left-logo{{else match navigationLayout "Stacked"}}stacked{{else}}middle-logo{{/match}}{{#match @custom.header_and_footer_color "Accent color"}} has-accent-color{{/match}} gh-outer">
<div class="gh-navigation-inner gh-inner">
<div class="gh-navigation-brand">