Browse Source

Disable dark mode

master
angristan 8 months ago
parent
commit
65ebef438a
6 changed files with 108 additions and 150 deletions
  1. +1
    -66
      README.md
  2. +1
    -1
      assets/built/global.css.map
  3. +1
    -1
      assets/built/screen.css
  4. +1
    -1
      assets/built/screen.css.map
  5. +3
    -2
      assets/css/global.css
  6. +101
    -79
      assets/css/screen.css

+ 1
- 66
README.md View File

@@ -1,18 +1,10 @@
# Casper

<<<<<<< HEAD
[![pipeline status](https://gitlab.com/angristan/Casper-XYZ/badges/master/pipeline.svg)](https://gitlab.com/angristan/Casper-XYZ/pipelines)
=======
The default theme for [Ghost](http://github.com/tryghost/ghost/). This is the latest development version of Casper! If you're just looking to download the latest release, head over to the [releases](https://github.com/TryGhost/Casper/releases) page.
>>>>>>> upstream/master

This is the [Ghost](https://github.com/tryghost/ghost/) theme of [angristan.xyz](https://angristan.xyz), based on [Casper](https://github.com/TryGhost/Casper).

<<<<<<< HEAD
For more information regarding how to use the theme with Ghost, please refer to the [original README](https://github.com/TryGhost/Casper)
=======
![screenshot-desktop](https://user-images.githubusercontent.com/353959/66987533-40eae100-f0c1-11e9-822e-cbaf38fb8e3f.png)
>>>>>>> upstream/master

## Fork

@@ -20,7 +12,6 @@ I keep my fork up-to-date with the upstream.

List of the modifications made in this fork:

<<<<<<< HEAD
* [Custom CSS (lots of stuff, commented)](https://github.com/Angristan/Casper-XYZ/blob/master/assets/css/custom.css)
* [Removed share buttons in the header](https://github.com/Angristan/Casper-XYZ/commit/b4530b973a71bcdfce82c02572525171a5fa9159)
* [Replaced Feedly links by original RSS links](https://github.com/Angristan/Casper-XYZ/commit/c618bc702969c217b6f48277244b6bf04b4e46bd)
@@ -33,13 +24,10 @@ List of the modifications made in this fork:
* [Use GitLab-like font for code blocks instead of ugly monospace](https://github.com/angristan/Casper-XYZ/blob/master/assets/css/custom.css#L163)
* [Replaced estimated reading time on posts list by the release date](https://github.com/angristan/Casper-XYZ/pull/4)
* [Backported AMP template to theme for customisation (Google Analytics and Matomo)](https://github.com/angristan/Casper-XYZ/blob/master/amp.hbs)
=======
This theme has lots of code comments to help explain what's going on just by reading the code. Once you feel comfortable with how everything works, we also have full [theme API documentation](https://ghost.org/docs/api/handlebars-themes/) which explains every possible Handlebars helper and template.
>>>>>>> upstream/master
* Disable dark mode

### Hardcoded stuff

<<<<<<< HEAD
I try to make the theme reusable as possible, but I still have to hardcode some stuff.

* [Isso comments block](https://github.com/Angristan/Casper-XYZ/blob/master/post.hbs#L71)
@@ -47,63 +35,10 @@ I try to make the theme reusable as possible, but I still have to hardcode some
* [Vultr affiliate link](https://github.com/angristan/Casper-XYZ/blob/master/default.hbs#L32)

### External assets embedded
=======
- `default.hbs` - The parent template file, which includes your global header/footer
- `index.hbs` - The main template to generate a list of posts, usually the home page
- `post.hbs` - The template used to render individual posts
- `page.hbs` - Used for individual pages
- `tag.hbs` - Used for tag archives, eg. "all posts tagged with `news`"
- `author.hbs` - Used for author archives, eg. "all posts written by Jamie"

One neat trick is that you can also create custom one-off templates by adding the slug of a page to a template file. For example:

- `page-about.hbs` - Custom template for an `/about/` page
- `tag-news.hbs` - Custom template for `/tag/news/` archive
- `author-ali.hbs` - Custom template for `/author/ali/` archive
>>>>>>> upstream/master

Here are the assets that I downloaded and included in the repo as I don't want to make call to 3rd-party services:

* [jQuery](https://github.com/jquery/jquery)
* [Source Sans Pro font from Google Fonts](https://fonts.google.com/specimen/Source+Sans+Pro)

<<<<<<< HEAD
They are all under their respective licence.
=======
Casper styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need [Node](https://nodejs.org/), [Yarn](https://yarnpkg.com/) and [Gulp](https://gulpjs.com) installed globally. After that, from the theme's root directory:

```bash
# install dependencies
yarn install

# run development server
yarn dev
```

Now you can edit `/assets/css/` files, which will be compiled to `/assets/built/` automatically.

The `zip` Gulp task packages the theme files into `dist/<theme-name>.zip`, which you can then upload to your site.

```bash
# create .zip file
yarn zip
```

# PostCSS Features Used

- Autoprefixer - Don't worry about writing browser prefixes of any kind, it's all done automatically with support for the latest 2 major versions of every browser.
- Variables - Simple pure CSS variables
- [Color Function](https://github.com/postcss/postcss-color-function)


# SVG Icons

Casper uses inline SVG icons, included via Handlebars partials. You can find all icons inside `/partials/icons`. To use an icon just include the name of the relevant file, eg. To include the SVG icon in `/partials/icons/rss.hbs` - use `{{> "icons/rss"}}`.

You can add your own SVG icons in the same manner.


# Copyright & License

Copyright (c) 2013-2019 Ghost Foundation - Released under the [MIT license](LICENSE).
>>>>>>> upstream/master

+ 1
- 1
assets/built/global.css.map
File diff suppressed because it is too large
View File


+ 1
- 1
assets/built/screen.css
File diff suppressed because it is too large
View File


+ 1
- 1
assets/built/screen.css.map
File diff suppressed because it is too large
View File


+ 3
- 2
assets/css/global.css View File

@@ -8,7 +8,7 @@
--purple: #ad26b4;
--yellow: #fecd35;
--red: #f05230;
--darkgrey: #15171A;
--darkgrey: #15171a;
--midgrey: #738a94;
--lightgrey: #c5d2d9;
--whitegrey: #e5eff5;
@@ -282,7 +282,8 @@ html {
body {
overflow-x: hidden;
color: color(var(--midgrey) l(-30%));
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-size: 1.6rem;
line-height: 1.6em;
font-weight: 400;


+ 101
- 79
assets/css/screen.css View File

@@ -26,7 +26,6 @@ production stylesheet in assets/built/screen.css

*/


/* 1. Global - Set up the things
/* ---------------------------------------------------------- */
@import "global.css";
@@ -50,7 +49,6 @@ body {
text-indent: -9999px;
}


/* 2. Layout - Page building blocks
/* ---------------------------------------------------------- */

@@ -105,7 +103,6 @@ body {
}
}


/* 4. Site Header
/* ---------------------------------------------------------- */

@@ -127,7 +124,7 @@ body {
left: 0;
z-index: 10;
display: block;
background: rgba(0,0,0,0.18);
background: rgba(0, 0, 0, 0.18);
}

.site-header-background:after {
@@ -140,7 +137,7 @@ body {
z-index: 10;
display: block;
height: 140px;
background: linear-gradient(rgba(0,0,0,0.15),rgba(0,0,0,0));
background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
}

.site-header-background.no-image:before,
@@ -163,7 +160,7 @@ body {
z-index: 10;
margin: 0 0 0 -2px;
padding: 0;
font-size: 5.0rem;
font-size: 5rem;
line-height: 1em;
font-weight: 600;
}
@@ -207,7 +204,6 @@ body {
font-weight: 300;
}


/* 4.2 Archive header (tag and author post lists)
/* ---------------------------------------------------------- */

@@ -224,21 +220,19 @@ body {
padding-bottom: 0;
color: var(--darkgrey);
background: #fff;
opacity: 1.0;
opacity: 1;
}

.site-archive-header .no-image .site-description {
color: var(--midgrey);
opacity: 1.0;
opacity: 1;
}


.site-archive-header .no-image .site-header-content {
padding: 5vw 0 10px;
border-bottom: 1px solid color(var(--lightgrey) l(+12%));
}


/* Special header styles for smaller screens */

@media (max-width: 900px) {
@@ -261,7 +255,6 @@ body {
}
}


/* 5. Site Navigation
/* ---------------------------------------------------------- */

@@ -316,7 +309,11 @@ body {
.site-header-background:not(.responsive-header-img) .site-nav:after,
.site-nav-main .site-nav:after {
right: 0;
background: linear-gradient(to right, color(var(--darkgrey) l(-5%) a(0)) 0%,color(var(--darkgrey) l(-5%)) 100%);
background: linear-gradient(
to right,
color(var(--darkgrey) l(-5%) a(0)) 0%,
color(var(--darkgrey) l(-5%)) 100%
);
}

.nav li:last-of-type {
@@ -373,7 +370,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
margin: 0 0 0 -12px;
padding: 0;
list-style: none;
transition: all 1.0s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.nav li {
@@ -428,7 +425,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
font-weight: 400;
text-transform: none;
opacity: 0;
transition: all 1.0s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
transform: translateY(175%);
}

@@ -465,7 +462,6 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
padding-right: 20px;
}


.social-link {
display: inline-block;
margin: 0;
@@ -474,7 +470,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
}

.social-link:hover {
opacity: 1.0;
opacity: 1;
}

.social-link svg {
@@ -564,7 +560,6 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
}
}


/* 6. Post Feed
/* ---------------------------------------------------------- */

@@ -725,7 +720,8 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
white-space: nowrap;
background: var(--darkgrey);
border-radius: 3px;
box-shadow: rgba(39,44,49,0.08) 0 12px 26px, rgba(39, 44, 49, 0.03) 1px 3px 8px;
box-shadow: rgba(39, 44, 49, 0.08) 0 12px 26px,
rgba(39, 44, 49, 0.03) 1px 3px 8px;
opacity: 0;
transition: all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transform: translateY(6px);
@@ -733,7 +729,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
}

.author-list-item:hover .author-name-tooltip {
opacity: 1.0;
opacity: 1;
transform: translateY(0px);
}

@@ -861,7 +857,6 @@ make sure this only happens on large viewports / desktop-ish devices.
}
}


/* Adjust some margins for smaller screens */
@media (max-width: 1170px) {
.post-card {
@@ -889,7 +884,6 @@ make sure this only happens on large viewports / desktop-ish devices.
}
}


/* 7. Single Post
/* ---------------------------------------------------------- */

@@ -986,7 +980,7 @@ make sure this only happens on large viewports / desktop-ish devices.
padding: 0 170px 6vw;
min-height: 230px;
font-family: Georgia, serif;
font-size: 2.0rem;
font-size: 2rem;
line-height: 1.6em;
background: #fff;
}
@@ -1096,7 +1090,6 @@ make sure this only happens on large viewports / desktop-ish devices.
}
}


/* Full bleed images (#full)
Super neat trick courtesy of @JoelDrapper

@@ -1110,7 +1103,6 @@ Usage (In Ghost edtior):
width: 100vw;
}


/* Image captions

Usage (In Ghost editor):
@@ -1126,7 +1118,6 @@ Usage (In Ghost editor):
text-align: center;
}


/* Override third party iframe styles */
.post-full-content iframe {
margin: 0 auto !important;
@@ -1159,7 +1150,7 @@ Usage (In Ghost editor):
padding: 0 5px 2px;
font-size: 0.8em;
line-height: 1em;
font-weight: 400!important;
font-weight: 400 !important;
background: var(--whitegrey);
border-radius: 3px;
}
@@ -1229,7 +1220,8 @@ Usage (In Ghost editor):
.post-full-content h5,
.post-full-content h6 {
color: color(var(--darkgrey) l(-5%));
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.post-full-content h1 {
@@ -1307,7 +1299,7 @@ Usage (In Ghost editor):
padding: 0.4em 1em 0.9em;
border: 0;
color: var(--blue);
font-family: Georgia,serif;
font-family: Georgia, serif;
font-size: 3.2rem;
line-height: 1.35em;
text-align: center;
@@ -1330,7 +1322,7 @@ Usage (In Ghost editor):

.post-full-content h6 {
margin: 0.5em 0 0.2em 0;
font-size: 2.0rem;
font-size: 2rem;
font-weight: 700;
}
@media (max-width: 800px) {
@@ -1413,7 +1405,8 @@ Usage (In Ghost editor):
width: auto;
border-spacing: 0;
border-collapse: collapse;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-size: 1.6rem;
white-space: nowrap;
vertical-align: top;
@@ -1421,20 +1414,39 @@ Usage (In Ghost editor):

.post-full-content table {
-webkit-overflow-scrolling: touch;
background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
background: radial-gradient(
ellipse at left,
rgba(0, 0, 0, 0.2) 0%,
rgba(0, 0, 0, 0) 75%
)
0 center,
radial-gradient(
ellipse at right,
rgba(0, 0, 0, 0.2) 0%,
rgba(0, 0, 0, 0) 75%
)
100% center;
background-attachment: scroll, scroll;
background-size: 10px 100%, 10px 100%;
background-repeat: no-repeat;
}

.post-full-content table td:first-child {
background-image: linear-gradient(to right, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
background-image: linear-gradient(
to right,
rgba(255, 255, 255, 1) 50%,
rgba(255, 255, 255, 0) 100%
);
background-size: 20px 100%;
background-repeat: no-repeat;
}

.post-full-content table td:last-child {
background-image: linear-gradient(to left, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
background-image: linear-gradient(
to left,
rgba(255, 255, 255, 1) 50%,
rgba(255, 255, 255, 0) 100%
);
background-position: 100% 0;
background-size: 20px 100%;
background-repeat: no-repeat;
@@ -1456,7 +1468,6 @@ Usage (In Ghost editor):
border: color(var(--whitegrey) l(-1%) s(-5%)) 1px solid;
}


/* 7.1. Post Byline
/* ---------------------------------------------------------- */

@@ -1485,7 +1496,7 @@ Usage (In Ghost editor):
font-size: 1.2rem;
line-height: 1.2em;
letter-spacing: 0.2px;
text-transform: uppercase;;
text-transform: uppercase;
}

.post-full-byline-meta h4 {
@@ -1533,7 +1544,8 @@ Usage (In Ghost editor):
line-height: 1.5em;
background: white;
border-radius: 3px;
box-shadow: rgba(39,44,49,0.08) 0 12px 26px, rgba(39, 44, 49, 0.06) 1px 3px 8px;
box-shadow: rgba(39, 44, 49, 0.08) 0 12px 26px,
rgba(39, 44, 49, 0.06) 1px 3px 8px;
opacity: 0;
transition: all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transform: scale(0.98) translateY(15px);
@@ -1555,7 +1567,7 @@ Usage (In Ghost editor):
}

.author-list-item .author-card.hovered {
opacity: 1.0;
opacity: 1;
transform: scale(1) translateY(0px);
pointer-events: auto;
}
@@ -1644,7 +1656,6 @@ Usage (In Ghost editor):
}
}


/* 7.2. Members Subscribe Form
/* ---------------------------------------------------------- */
.subscribe-form {
@@ -1652,7 +1663,10 @@ Usage (In Ghost editor):
padding: 6.5vw 7vw 8vw;
border: color(var(--lightgrey) l(+10%)) 1px solid;
text-align: center;
background: linear-gradient(color(var(--whitegrey) l(+6%)), color(var(--whitegrey) l(+4%)));
background: linear-gradient(
color(var(--whitegrey) l(+6%)),
color(var(--whitegrey) l(+4%))
);
border-radius: 3px;
}

@@ -1720,10 +1734,10 @@ Usage (In Ghost editor):
font-weight: 400;
text-align: center;
background: linear-gradient(
color(var(--blue) whiteness(+7%)),
color(var(--blue) lightness(-7%) saturation(-10%)) 60%,
color(var(--blue) lightness(-7%) saturation(-10%)) 90%,
color(var(--blue) lightness(-4%) saturation(-10%))
color(var(--blue) whiteness(+7%)),
color(var(--blue) lightness(-7%) saturation(-10%)) 60%,
color(var(--blue) lightness(-7%) saturation(-10%)) 90%,
color(var(--blue) lightness(-4%) saturation(-10%))
);
border-radius: 5px;

@@ -1780,7 +1794,6 @@ Usage (In Ghost editor):
display: block;
}


@media (max-width: 650px) {
.subscribe-form-title {
font-size: 2.4rem;
@@ -1807,7 +1820,6 @@ Usage (In Ghost editor):
}
}


/* 7.3. Comments
/* ---------------------------------------------------------- */

@@ -1816,7 +1828,6 @@ Usage (In Ghost editor):
max-width: 840px;
}


/* 7.4. Related posts
/* ---------------------------------------------------------- */

@@ -1853,7 +1864,7 @@ Usage (In Ghost editor):
}

.read-next .post-card:hover .post-card-image {
opacity: 1.0;
opacity: 1;
}

.read-next .post-card-excerpt {
@@ -1880,7 +1891,10 @@ Usage (In Ghost editor):
overflow: hidden;
margin: 0 25px 50px;
padding: 25px;
background: linear-gradient(color(var(--darkgrey) l(+2%)), color(var(--darkgrey) l(-5%)));
background: linear-gradient(
color(var(--darkgrey) l(+2%)),
color(var(--darkgrey) l(-5%))
);
border-radius: 3px;
}

@@ -2024,7 +2038,6 @@ Usage (In Ghost editor):
}
}


/* 7.5. Koenig Styles
/* ---------------------------------------------------------- */

@@ -2067,12 +2080,13 @@ Usage (In Ghost editor):
}

.post-full-content figcaption {
margin: 1.0em 0 0;
margin: 1em 0 0;
color: color(var(--midgrey) l(-10%));
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-size: 75%;
line-height: 1.5em;
text-align: center;;
text-align: center;
}

.kg-width-full figcaption {
@@ -2090,7 +2104,6 @@ Usage (In Ghost editor):
margin: 0;
}


@media (max-width: 1040px) {
.post-full-content .kg-width-full .kg-image {
width: 100vw;
@@ -2154,7 +2167,8 @@ Usage (In Ghost editor):
display: flex;
min-height: 148px;
color: var(--darkgrey);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
text-decoration: none;
border-radius: 3px;
box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.09);
@@ -2333,7 +2347,7 @@ Usage (In Ghost editor):
margin: 5px 0 0;
width: 110px;
height: 110px;
box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
box-shadow: rgba(255, 255, 255, 0.1) 0 0 0 6px;
}

.author-header-content .author-bio {
@@ -2341,7 +2355,7 @@ Usage (In Ghost editor):
flex-shrink: 0;
margin: 6px 0 -6px;
max-width: 46em;
font-size: 2.0rem;
font-size: 2rem;
line-height: 1.4em;
font-weight: 400;
opacity: 0.8;
@@ -2365,12 +2379,12 @@ Usage (In Ghost editor):

.no-image .author-header-content .author-bio {
color: var(--midgrey);
opacity: 1.0;
opacity: 1;
}

.no-image .author-header-content .author-meta {
color: var(--midgrey);
opacity: 1.0;
opacity: 1;
}

.author-social-link a {
@@ -2442,7 +2456,6 @@ Usage (In Ghost editor):
}
}


/* 9. Error Template
/* ---------------------------------------------------------- */

@@ -2523,7 +2536,6 @@ Usage (In Ghost editor):
}
}


/* 10. Subscribe Message and Overlay
/* ---------------------------------------------------------- */

@@ -2601,7 +2613,7 @@ Usage (In Ghost editor):
display: flex;
justify-content: center;
align-items: center;
background: rgba(9,10,11,0.97);
background: rgba(9, 10, 11, 0.97);
opacity: 0;
transition: opacity 0.2s ease-in;
pointer-events: none;
@@ -2706,10 +2718,10 @@ Usage (In Ghost editor):
font-weight: 400;
text-align: center;
background: linear-gradient(
color(var(--blue) whiteness(+7%)),
color(var(--blue) lightness(-7%) saturation(-10%)) 60%,
color(var(--blue) lightness(-7%) saturation(-10%)) 90%,
color(var(--blue) lightness(-4%) saturation(-10%))
color(var(--blue) whiteness(+7%)),
color(var(--blue) lightness(-7%) saturation(-10%)) 60%,
color(var(--blue) lightness(-7%) saturation(-10%)) 90%,
color(var(--blue) lightness(-4%) saturation(-10%))
);
border-radius: 8px;

@@ -2725,7 +2737,6 @@ Usage (In Ghost editor):
top: 5px;
}


/* 11. Site Footer
/* ---------------------------------------------------------- */

@@ -2742,16 +2753,16 @@ Usage (In Ghost editor):
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
color: rgba(255,255,255,0.7);
color: rgba(255, 255, 255, 0.7);
font-size: 1.3rem;
}

.site-footer-content a {
color: rgba(255,255,255,0.7);
color: rgba(255, 255, 255, 0.7);
}

.site-footer-content a:hover {
color: rgba(255,255,255,1);
color: rgba(255, 255, 255, 1);
text-decoration: none;
}

@@ -2790,10 +2801,10 @@ Usage (In Ghost editor):
}
}


/* 12. Dark Mode
/* ---------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark-disabled) {
/* DISABLED!! */
body {
color: rgba(255, 255, 255, 0.75);
background: var(--darkmode);
@@ -2804,7 +2815,7 @@ Usage (In Ghost editor):
}

.site-header-background:before {
background: rgba(0,0,0,0.6);
background: rgba(0, 0, 0, 0.6);
}

.post-feed {
@@ -2881,7 +2892,7 @@ Usage (In Ghost editor):

.author-list-item .author-card {
background: color(var(--darkmode) l(+4%));
box-shadow: 0 12px 26px rgba(0,0,0,0.4);
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4);
}

.author-list-item .author-card:before {
@@ -2927,11 +2938,19 @@ Usage (In Ghost editor):
}

.post-full-content table td:first-child {
background-image: linear-gradient(to right, var(--darkmode) 50%, color(var(--darkmode) a(0%)) 100%);
background-image: linear-gradient(
to right,
var(--darkmode) 50%,
color(var(--darkmode) a(0%)) 100%
);
}

.post-full-content table td:last-child {
background-image: linear-gradient(to left, var(--darkmode) 50%, color(var(--darkmode) a(0%)) 100%);
background-image: linear-gradient(
to left,
var(--darkmode) 50%,
color(var(--darkmode) a(0%)) 100%
);
}

.post-full-content table th {
@@ -2947,7 +2966,7 @@ Usage (In Ghost editor):
.post-full-content .kg-bookmark-container,
.post-full-content .kg-bookmark-container:hover {
color: rgba(255, 255, 255, 0.75);
box-shadow: 0 0 1px rgba(255,255,255,0.9);
box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
}

.kg-bookmark-title {
@@ -2972,12 +2991,15 @@ Usage (In Ghost editor):
}

.site-header-content .author-profile-image {
box-shadow: 0 0 0 6px hsla(0,0%,100%,0.04);
box-shadow: 0 0 0 6px hsla(0, 0%, 100%, 0.04);
}

.subscribe-form {
border: none;
background: linear-gradient(color(var(--darkmode) l(-6%)), color(var(--darkmode) l(-3%)));
background: linear-gradient(
color(var(--darkmode) l(-6%)),
color(var(--darkmode) l(-3%))
);
}

.subscribe-form-title {


Loading…
Cancel
Save