davejansen/Ghost-Theme-Source
1
0
Fork 0
Code Issues Pull Requests 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
Download Patch File Download Diff File Expand all files Collapse all files

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;