mirror of
https://github.com/ZetaKebab/kesper.git
synced 2025-07-01 17:37:37 +00:00
And so the lord said unto Moses, let us obliterate this CSS
This commit is contained in:
John O'Nolan
@ -423,7 +423,7 @@ h1 {
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
h1 {
|
||||
font-size: 2.4rem;
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -434,7 +434,7 @@ h2 {
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
h2 {
|
||||
font-size: 2.6rem;
|
||||
font-size: 2.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -15,7 +15,6 @@ production stylesheet in assets/built/screen.css
|
||||
7. Single Post
|
||||
7.1. Post Byline
|
||||
7.2. Members Subscribe Form
|
||||
7.3. Comments
|
||||
7.4. Related Posts
|
||||
7.5. Koenig Styles
|
||||
8. Author Template
|
||||
@ -41,7 +40,7 @@ production stylesheet in assets/built/screen.css
|
||||
--color-midgrey: #738a94;
|
||||
--color-lightgrey: #c5d2d9;
|
||||
--color-wash: #e5eff5;
|
||||
--color-darkmode: #1a1c20;
|
||||
--color-darkmode: #151719;
|
||||
|
||||
/*
|
||||
An accent color is also set by Ghost itself in
|
||||
@ -64,17 +63,12 @@ production stylesheet in assets/built/screen.css
|
||||
/* 2. Layout - Page building blocks
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.site-wrapper {
|
||||
.viewport {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.site-main {
|
||||
z-index: 100;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* Full width page blocks */
|
||||
.outer {
|
||||
position: relative;
|
||||
@ -102,9 +96,8 @@ production stylesheet in assets/built/screen.css
|
||||
/* 4. Site Header
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.site-header-background {
|
||||
.site-header {
|
||||
position: relative;
|
||||
padding-bottom: 12px;
|
||||
color: #fff;
|
||||
background: var(--ghost-accent-color);
|
||||
}
|
||||
@ -191,10 +184,12 @@ production stylesheet in assets/built/screen.css
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.site-home-header .site-header-content {
|
||||
padding: 5vw 3vw 6vw;
|
||||
.site-header-content {
|
||||
padding: 18vmin 4vmin;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
background: var(--ghost-accent-color);
|
||||
}
|
||||
|
||||
|
||||
@ -232,228 +227,127 @@ production stylesheet in assets/built/screen.css
|
||||
/* 5. Site Navigation
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.site-nav-main {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
.gh-head {
|
||||
padding: 1vmin 4vmin;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.3em;
|
||||
color: #fff;
|
||||
background: var(--ghost-accent-color);
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
overflow: hidden;
|
||||
height: 68px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.site-nav-left-wrapper {
|
||||
position: relative;
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.site-nav-left {
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
margin-right: 10px;
|
||||
padding: 10px 0 80px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
|
||||
-ms-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.site-nav-left .nav li:last-of-type {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
/* Site Nav Hack Explanation (above):
|
||||
|
||||
What's happening above is .site-nav-left is set to overflow-x and
|
||||
allow sideways scrolling, so that when there isn't enough space for
|
||||
all nav items (either due to lots of nav items, or a small viewport),
|
||||
you can still scroll side-to-side to reach them. Also, there is a
|
||||
small gradient on the left and right side covering the menu so that
|
||||
the menu goes offscreen smoothly.
|
||||
|
||||
The knock-on effect of this is ugly browser-scroll bars at the bottom,
|
||||
so 80px of padding-bottom and a 40px fixed height parent (.site-nav)
|
||||
hides that entirely. Slightly hacky code. But nice clean end-result.
|
||||
|
||||
*/
|
||||
|
||||
.site-nav-logo {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
flex-shrink: 0;
|
||||
display: inline-block;
|
||||
margin-right: 32px;
|
||||
padding: 12px 0;
|
||||
color: #fff;
|
||||
font-size: 1.7rem;
|
||||
line-height: 1.8rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.site-nav-logo:hover {
|
||||
.gh-head a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.site-nav-logo img {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 21px;
|
||||
.gh-head-inner {
|
||||
display: grid;
|
||||
grid-gap: 2.5vmin;
|
||||
grid-template-columns: auto auto 1fr;
|
||||
grid-auto-flow: row dense;
|
||||
}
|
||||
|
||||
.site-home-header .site-nav-logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.site-nav-content {
|
||||
position: relative;
|
||||
align-self: flex-start;
|
||||
}
|
||||
/* Brand
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.nav {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
.gh-head-brand {
|
||||
display: flex;
|
||||
margin: 0 0 0 -12px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
transition: all 1.0s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
max-width: 200px;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.nav li {
|
||||
.gh-head-logo {
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
font-weight: 700;
|
||||
font-size: 2rem;
|
||||
line-height: 1.2em;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.gh-head-logo img {
|
||||
max-height: 40px;
|
||||
}
|
||||
|
||||
|
||||
/* Primary Navigation
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-head-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gh-head-menu .nav {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav li a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 12px 12px;
|
||||
color: #fff;
|
||||
opacity: 0.75;
|
||||
.gh-head-menu .nav li {
|
||||
margin: 0 2.5vmin 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav li a:hover {
|
||||
text-decoration: none;
|
||||
.gh-head-menu .nav a {
|
||||
display: inline-block;
|
||||
padding: 5px 0;
|
||||
opacity: 0.8
|
||||
}
|
||||
|
||||
.gh-head-menu .nav a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.nav-post-title-active .nav {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transform: translateY(-175%);
|
||||
}
|
||||
|
||||
.nav-post-title {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
color: #fff;
|
||||
font-size: 1.7rem;
|
||||
font-weight: 400;
|
||||
opacity: 0;
|
||||
transition: all 1.0s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
transform: translateY(175%);
|
||||
}
|
||||
/* Secondary Navigation
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.nav-post-title.dash {
|
||||
left: -25px;
|
||||
}
|
||||
|
||||
.nav-post-title.dash:before {
|
||||
content: "– ";
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.nav-post-title-active .nav-post-title {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.site-nav-right {
|
||||
flex: 0 1 auto;
|
||||
.gh-head-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
height: 64px;
|
||||
list-style: none;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.site-nav-right .nav {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.site-nav-right .nav a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.site-nav-right .nav a:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.site-nav-right .nav li:last-of-type a {
|
||||
margin-right: -12px;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
.gh-head-actions-list {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
.gh-head-actions-list a:not([class]) {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
opacity: 0.8;
|
||||
margin: 0 0 0 1.5vmin;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
opacity: 1.0;
|
||||
.gh-social a {
|
||||
margin: 0 1.5vmin 0 0;
|
||||
opacity: 0.8
|
||||
}
|
||||
.gh-social a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.social-link svg {
|
||||
height: 1.8rem;
|
||||
.gh-social svg {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.social-link-fb svg {
|
||||
height: 1.6rem;
|
||||
}
|
||||
|
||||
.social-link-wb svg {
|
||||
height: 1.6rem;
|
||||
}
|
||||
|
||||
.social-link-wb svg path {
|
||||
stroke: #fff;
|
||||
}
|
||||
|
||||
.social-link-rss svg {
|
||||
height: 1.9rem;
|
||||
}
|
||||
|
||||
.subscribe-button {
|
||||
a.gh-head-button {
|
||||
display: block;
|
||||
margin: 0 0 0 10px;
|
||||
padding: 8px 15px;
|
||||
color: var(--color-darkgrey);
|
||||
font-weight: 500;
|
||||
@ -464,59 +358,212 @@ hides that entirely. Slightly hacky code. But nice clean end-result.
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.site-nav-right .nav + .subscribe-button {
|
||||
margin-left: 24px;
|
||||
|
||||
/* Mobile Menu Trigger
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-burger {
|
||||
position: relative;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rss-button {
|
||||
padding: 10px 8px;
|
||||
opacity: 0.8;
|
||||
.gh-burger-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
}
|
||||
|
||||
.rss-button:hover {
|
||||
opacity: 1;
|
||||
.gh-burger-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.rss-button svg {
|
||||
margin-bottom: 1px;
|
||||
height: 2.1rem;
|
||||
fill: #fff;
|
||||
.gh-burger-box::before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: currentcolor;
|
||||
transition: transform 300ms cubic-bezier(.2,.6,.3,1), width 300ms cubic-bezier(.2,.6,.3,1);
|
||||
will-change: transform, width;
|
||||
}
|
||||
|
||||
/* Special behaviors for home navigation */
|
||||
|
||||
.home-template .site-nav-main {
|
||||
z-index: 100;
|
||||
.gh-burger-inner::before,
|
||||
.gh-burger-inner::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: currentcolor;
|
||||
transition: transform 250ms cubic-bezier(.2,.7,.3,1), width 250ms cubic-bezier(.2,.7,.3,1);
|
||||
will-change: transform, width;
|
||||
}
|
||||
|
||||
.home-template .site-nav-main .site-nav {
|
||||
opacity: 0;
|
||||
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
|
||||
.gh-burger-inner::before {
|
||||
transform: translatey(-6px);
|
||||
}
|
||||
.gh-burger-inner::after {
|
||||
transform: translatey(6px);
|
||||
}
|
||||
|
||||
.home-template .site-nav-main .fixed-nav-active {
|
||||
opacity: 1;
|
||||
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.05s;
|
||||
body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::before {
|
||||
transform: translatey(-8px);
|
||||
}
|
||||
body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
|
||||
transform: translatey(8px);
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.site-home-header .site-nav {
|
||||
margin-left: -5vw;
|
||||
.gh-head-open .gh-burger-box::before {
|
||||
width: 0;
|
||||
transform: translatex(19px);
|
||||
transition: transform 200ms cubic-bezier(.2,.7,.3,1), width 200ms cubic-bezier(.2,.7,.3,1);
|
||||
}
|
||||
|
||||
.gh-head-open .gh-burger-inner::before {
|
||||
width: 26px;
|
||||
transform: translatex(6px) rotate(135deg);
|
||||
}
|
||||
|
||||
.gh-head-open .gh-burger-inner::after {
|
||||
width: 26px;
|
||||
transform: translatex(6px) rotate(-135deg);
|
||||
}
|
||||
|
||||
|
||||
/* Mobile Menu
|
||||
/* ---------------------------------------------------------- */
|
||||
/* IDs needed to ensure sufficient specificity */
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.gh-burger {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.site-nav-main {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
#gh-head {
|
||||
transition: all 0.4s ease-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.site-nav-left {
|
||||
margin-right: 0;
|
||||
padding-left: 5vw;
|
||||
#gh-head .gh-head-inner {
|
||||
height: 100%;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.site-nav-right {
|
||||
#gh-head .gh-head-brand {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
grid-column-start: auto;
|
||||
max-width: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
user-select: none;
|
||||
}
|
||||
.home-template #gh-head .gh-head-brand {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
#gh-head .gh-head-logo {
|
||||
font-size: 2rem;
|
||||
}
|
||||
#gh-head .gh-head-logo img {
|
||||
max-height: 40px;
|
||||
}
|
||||
#gh-head .gh-head-menu {
|
||||
align-self: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin: 0 0 10vh 0;
|
||||
font-weight: 300;
|
||||
font-size: 3.6rem;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
#gh-head .gh-head-menu .nav li {
|
||||
margin: 5px 0;
|
||||
}
|
||||
#gh-head .gh-head-menu .nav a {
|
||||
padding: 8px 0;
|
||||
}
|
||||
#gh-head .gh-head-menu .nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
#gh-head .gh-head-actions {
|
||||
padding: 20px 0;
|
||||
justify-content: center;
|
||||
text-align: left;
|
||||
}
|
||||
#gh-head .gh-head-actions a {
|
||||
margin: 0 10px;
|
||||
}
|
||||
/* Hide collapsed content */
|
||||
#gh-head .gh-head-actions,
|
||||
#gh-head .gh-head-menu {
|
||||
display: none;
|
||||
}
|
||||
/* Open the menu */
|
||||
.gh-head-open {
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
.gh-head-open #gh-head {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 9999999;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.gh-head-open #gh-head .gh-head-inner {
|
||||
grid-template-rows: auto 1fr auto;
|
||||
}
|
||||
.gh-head-open #gh-head .gh-head-actions,
|
||||
.gh-head-open #gh-head .gh-head-menu {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
#gh-head .gh-head-menu {
|
||||
font-size: 6vmin;
|
||||
}
|
||||
}
|
||||
|
||||
.home-template .gh-head {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.home-template .gh-head.has-cover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.home-template.gh-head-open .gh-head {
|
||||
background: var(--ghost-accent-color);
|
||||
}
|
||||
|
||||
.home-template .gh-head-logo {
|
||||
display: none;
|
||||
}
|
||||
.home-template .gh-head-menu {
|
||||
margin-left: -2.5vmin;
|
||||
}
|
||||
|
||||
|
||||
@ -796,8 +843,7 @@ make sure this only happens on large viewports / desktop-ish devices.
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.article {
|
||||
padding: calc(68px + 8vmin) 0 8vmin;
|
||||
/* Add 68px to account for sticky navbar */
|
||||
padding: 8vmin 0;
|
||||
}
|
||||
|
||||
.article-header {
|
||||
@ -839,10 +885,9 @@ make sure this only happens on large viewports / desktop-ish devices.
|
||||
margin: 6vmin 0 0;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
@media (max-width: 600px) {
|
||||
.article-excerpt {
|
||||
font-size: 1.9rem;
|
||||
line-height: 1.5em;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -993,7 +1038,7 @@ is the very first element in the post content */
|
||||
.gh-content ul,
|
||||
.gh-content dl,
|
||||
.gh-content p {
|
||||
font-size: 1.8rem;
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.gh-content blockquote::before {
|
||||
@ -1216,7 +1261,9 @@ Ghost editor. */
|
||||
grid-column: main-start / main-end;
|
||||
}
|
||||
|
||||
|
||||
.article-comments {
|
||||
margin: 6vmin 0 0 0;
|
||||
}
|
||||
|
||||
/* -----old------ */
|
||||
|
||||
@ -1356,33 +1403,44 @@ Ghost editor. */
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.author-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.article-byline {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.article-byline-meta {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.article-byline-meta h4 {
|
||||
margin-bottom: 2px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 7.3. Comments
|
||||
/* 7.3. Subscribe
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.post-full-comments {
|
||||
margin: 0 auto;
|
||||
max-width: 840px;
|
||||
.footer-cta {
|
||||
position: relative;
|
||||
padding: 9vmin 4vmin 10vmin;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
background: var(--ghost-accent-color);
|
||||
}
|
||||
|
||||
.footer-cta h2 {
|
||||
margin: 0 0 30px;
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
.footer-cta-button {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
padding: 5px 5px 5px 15px;
|
||||
font-size: 1.8rem;
|
||||
color: var(--color-midgrey);
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.footer-cta-button span {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
background: var(--ghost-accent-color);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
@ -1673,7 +1731,7 @@ Ghost editor. */
|
||||
position: relative;
|
||||
margin: 40px 0 0 0;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 120px;
|
||||
padding-bottom: 140px;
|
||||
color: #fff;
|
||||
background: color-mod(var(--color-darkgrey) l(-5%));
|
||||
}
|
||||
@ -1748,6 +1806,7 @@ 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);
|
||||
}
|
||||
|
||||
html.dark-mode img {
|
||||
|
||||
Reference in New Issue
Block a user