peterkrzyzek
/
ghost_leaders_theme
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

Refine content styles

This commit is contained in:
John O'Nolan 2019-11-10 22:16:47 +07:00
parent c01b79fb04
commit a940d2351c
6 changed files with 325 additions and 315 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

568
assets/css/components/content.css
View File

@ -1,9 +1,4 @@
/* Main
/* ---------------------------------------------------------- */
.gh-main {
margin-bottom: 2rem;
}
/* Content grid /* Content grid
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
@ -11,28 +6,42 @@
display: grid; display: grid;
grid-template-columns: grid-template-columns:
[full-start] [full-start]
minmax(calc(calc(100% - 970px) / 2), 1fr) minmax(calc(calc(100% - 1040px) / 2), 1fr)
[wide-start] [wide-start]
1fr 2fr
[main-start] [main-start]
repeat(10, [col-start] 1fr) repeat(10, [col-start] 1fr)
[main-end] [main-end]
1fr 2fr
[wide-end] [wide-end]
minmax(calc(calc(100% - 970px) / 2), 1fr) minmax(calc(calc(100% - 1040px) / 2), 1fr)
[full-end] [full-end]
; ;
} }
@media (max-width: 600px) { @media (max-width: 1000px) {
.gh-canvas { .gh-canvas {
grid-template-columns: grid-template-columns:
[full-start] [full-start]
minmax(calc(calc(100% - 720px) / 2), 1fr) minmax(calc(calc(100% - 700px) / 2), 1fr)
[wide-start main-start] [wide-start main-start]
repeat(10, [col-start] 1fr) repeat(10, [col-start] 1fr)
[main-end wide-end] [main-end wide-end]
minmax(calc(calc(100% - 720px) / 2), 1fr) minmax(calc(calc(100% - 700px) / 2), 1fr)
[full-end]
;
}
}
@media (max-width: 740px) {
.gh-canvas {
grid-template-columns:
[full-start]
4vw
[wide-start main-start]
repeat(10, [col-start] 1fr)
[main-end wide-end]
4vw
[full-end] [full-end]
; ;
} }
@ -42,8 +51,7 @@
grid-column: main-start / main-end; grid-column: main-start / main-end;
} }
.kg-width-wide, .kg-width-wide {
.gh-canvas > h5 {
grid-column: wide-start / wide-end; grid-column: wide-start / wide-end;
} }
@ -52,6 +60,271 @@
} }
/* Content & Typography
/* ---------------------------------------------------------- */
.gh-content > * + * {
margin-top: 3vw;
}
.gh-content > [id] + * {
margin-top: 1.5rem;
}
.gh-content [id] {
margin: 1.5em 0 0;
}
.gh-content [id] + .kg-card,
.gh-content blockquote + .kg-card {
margin-top: 1.5rem;
}
.gh-canvas blockquote,
.gh-canvas ol,
.gh-canvas ul,
.gh-canvas dl,
.gh-canvas p {
font-family: var(--font-serif);
font-weight: 400;
font-size: 2rem;
line-height: 1.6em;
}
.gh-content ul,
.gh-content ol,
.gh-content dl {
padding-left: 1.9em;
}
.gh-content hr {
margin-top: 5vw;
}
.gh-content hr + * {
margin-top: 5vw !important;
}
.gh-content blockquote {
position: relative;
font-style: italic;
}
.gh-content blockquote::before {
content: "";
position: absolute;
left: -1.1em;
top: 0;
bottom: 0;
width: 0.3rem;
background: var(--color-primary);
}
@media (max-width: 740px) {
.gh-canvas blockquote,
.gh-canvas ol,
.gh-canvas ul,
.gh-canvas dl,
.gh-canvas p {
font-size: 1.8rem;
}
}
/* Cards
/* ---------------------------------------------------------- */
:not(.kg-card):not([id]) + .kg-card {
margin-top: 6vw;
}
.kg-card + :not(.kg-card):not([id]) {
margin-top: 6vw;
}
@media (min-width: 1100px) {
:not(.kg-card):not([id]) + .kg-card {
margin-top: 6rem;
}
.kg-card + :not(.kg-card):not([id]) {
margin-top: 6rem;
}
}
.kg-card figcaption {
padding: 1.5rem 1.5rem 0;
font-size: 1.3rem;
line-height: 1.4em;
font-weight: 600;
text-align: center;
opacity: 0.4;
}
.gh-canvas :not(pre) code {
vertical-align: middle;
padding: 0.15em 0.4em 0.15em;
border: #e1eaef 1px solid;
font-weight: 400 !important;
font-size: 0.9em;
line-height: 1em;
background: #f0f6f9;
border-radius: 0.25em;
}
.gh-canvas > pre {
overflow: scroll;
padding: 16px 20px;
background: rgba(255,255,255,0.6);
border-radius: 5px;
box-shadow: 0 2px 6px -2px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.4);
}
.kg-embed-card {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
/* Galleries
/* ---------------------------------------------------------- */
.kg-gallery-card + .kg-gallery-card {
margin-top: 0.75em;
}
.kg-gallery-container {
position: relative;
}
.kg-gallery-row {
display: flex;
flex-direction: row;
justify-content: center;
}
.kg-gallery-image img {
display: block;
margin: 0;
width: 100%;
height: 100%;
}
.kg-gallery-row:not(:first-of-type) {
margin: 0.75em 0 0 0;
}
.kg-gallery-image:not(:first-of-type) {
margin: 0 0 0 0.75em;
}
/* Bookmark Cards
/* ---------------------------------------------------------- */
.kg-bookmark-card,
.kg-bookmark-publisher {
position: relative;
}
.kg-bookmark-container {
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
min-height: 148px;
color: currentColor;
background: rgba(255,255,255,0.6);
font-family: inherit;
text-decoration: none;
border-radius: 5px;
box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.kg-bookmark-content {
flex-basis: 0;
flex-grow: 999;
padding: 20px;
order: 1;
}
.kg-bookmark-title {
font-weight: 600;
font-size: 1.5rem;
}
.kg-bookmark-description {
display: -webkit-box;
max-height: 45px;
margin: 0.6em 0 0 0;
font-size: 1.4rem;
line-height: 1.55em;
overflow: hidden;
opacity: 0.8;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.kg-bookmark-metadata {
display: flex;
align-items: center;
margin-top: 0.9em;
font-weight: 500;
font-size: 1.3rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kg-bookmark-icon {
display: inline-block;
width: 16px;
height: 16px;
vertical-align: text-bottom;
margin-right: .5em;
}
.kg-bookmark-thumbnail {
display: flex;
flex-basis: 24rem;
flex-grow: 1;
}
.kg-bookmark-thumbnail img {
max-width: 100%;
height: auto;
vertical-align: bottom;
object-fit: cover;
}
.kg-bookmark-author::after {
content: "•";
margin: 0 .5em;
}
/* Card captions
/* ---------------------------------------------------------- */
.kg-width-full.kg-card-hascaption {
display: grid;
grid-template-columns: inherit;
}
.kg-width-wide.kg-card-hascaption img {
grid-column: wide-start / wide-end;
}
.kg-width-full.kg-card-hascaption img {
grid-column: 1 / -1;
}
.kg-width-full.kg-card-hascaption figcaption {
grid-column: main-start / main-end;
}
/* Tables /* Tables
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
@ -90,273 +363,8 @@
border-bottom: 1px solid rgba(0,0,0,.1); border-bottom: 1px solid rgba(0,0,0,.1);
} }
/* Post header
/* ---------------------------------------------------------- */
.gh-page.no-image {
margin-top: 2rem;
}
.gh-header { /* Third Party
grid-row-gap: 2rem;
margin-bottom: 1.5em;
}
.gh-title,
.gh-image {
grid-row: 1 / 2;
align-self: end;
}
.gh-excerpt {
grid-row: 2 / 3;
}
.gh-image {
grid-column: full-start / full-end;
width: 100%;
}
.gh-title {
margin-top: 2rem;
}
.gh-image + .gh-title {
color: #fff;
}
.gh-post-footer {
margin: 2rem 0;
}
/* Standard content
/* ---------------------------------------------------------- */
.gh-content [id],
.gh-content table,
.gh-content blockquote {
margin: 0.6em 0 0.3em;
}
.gh-content > [id] + [id]:not(h5) {
margin-top: 0;
}
.gh-content > .kg-card + [id]:not(h5) {
margin-top: 2.3em;
}
.gh-content [id] + .kg-card,
.gh-content table + .kg-card,
.gh-content blockquote + .kg-card,
.gh-content blockquote {
margin-top: 1.5em;
}
.gh-content h5[id] {
display: block;
margin: 2em 0 1.5em;
text-align: center;
line-height: 1.35em;
font-weight: 300;
}
.gh-content hr {
margin: 2em 0;
border-color: currentColor;
opacity: 0.2;
}
.gh-content ul,
.gh-content ol,
.gh-content dl {
padding-left: 1.9em;
}
.gh-content blockquote {
position: relative;
padding-left: 1.5em;
}
.gh-content blockquote::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: .5em;
background: currentColor;
opacity: 0.3;
}
/* Cards
/* ---------------------------------------------------------- */
.kg-gallery-container,
.kg-bookmark-card,
.kg-bookmark-publisher {
position: relative;
}
.gh-content > * + * {
margin-top: 1.5rem;
}
.gh-content > [id] + * {
margin-top: 0;
}
:not(.kg-card):not([id]) + .kg-card,
.gh-post-footer {
margin-top: 7vw;
}
.kg-card + :not(.kg-card):not([id]) {
margin-top: 7vw;
}
.gh-post-footer {
margin-bottom: 7vw;
}
.kg-card figcaption {
padding: 1.5rem 1.5rem 0;
font-size: 1.3rem;
line-height: 1.4em;
font-weight: 600;
text-align: center;
opacity: 0.4;
}
.gh-canvas > pre {
overflow: scroll;
padding: 16px 20px;
border-radius: 5px;
background: rgba(255,255,255,0.6);
box-shadow: 0 2px 6px -2px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.4);
}
.kg-embed-card {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
/* Card captions
/* ---------------------------------------------------------- */
.kg-width-full.kg-card-hascaption {
display: grid;
grid-template-columns: inherit;
}
.kg-width-wide.kg-card-hascaption img {
grid-column: wide-start / wide-end;
}
.kg-width-full.kg-card-hascaption img {
grid-column: 1 / -1;
}
.kg-width-full.kg-card-hascaption figcaption {
grid-column: main-start / main-end;
}
/* Galleries
/* ---------------------------------------------------------- */
.kg-gallery-row {
display: flex;
flex-direction: row;
justify-content: center;
}
.kg-gallery-image img {
display: block;
margin: 0;
width: 100%;
height: 100%;
}
.kg-gallery-row:not(:first-of-type) {
margin: 0.75em 0 0 0;
}
.kg-gallery-image:not(:first-of-type) {
margin: 0 0 0 0.75em;
}
/* Bookmark Cards
/* ---------------------------------------------------------- */
.kg-bookmark-container {
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
min-height: 148px;
color: currentColor;
background: rgba(255,255,255,0.6);
font-family: inherit;
text-decoration: none;
border-radius: 5px;
box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.kg-bookmark-container:hover {
text-decoration: none;
}
.kg-bookmark-content {
flex-basis: 0;
flex-grow: 999;
padding: 20px;
order: 1;
}
.kg-bookmark-title {
font-weight: 600;
}
.kg-bookmark-metadata {
margin-top: .5em;
align-items: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kg-bookmark-description {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.kg-bookmark-icon {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: text-bottom;
margin-right: .5em;
margin-bottom: .05em;
}
.kg-bookmark-thumbnail {
display: flex;
flex-basis: 24rem;
flex-grow: 1;
}
.kg-bookmark-thumbnail img {
max-width: 100%;
height: auto;
vertical-align: bottom;
object-fit: cover;
}
.kg-bookmark-author::after {
content: "•";
margin: 0 .5em;
}
/* Spotify Cards
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.kg-card iframe[src*="spotify.com"] { .kg-card iframe[src*="spotify.com"] {

50
assets/css/components/global.css
View File

@ -37,6 +37,7 @@ ol,
li, li,
dl, dl,
dd, dd,
hr,
pre, pre,
table, table,
video, video,
@ -44,6 +45,7 @@ figure,
figcaption, figcaption,
blockquote { blockquote {
margin: 0; margin: 0;
padding: 0;
} }
ul[class], ul[class],
@ -68,29 +70,10 @@ hr {
position: relative; position: relative;
display: block; display: block;
width: 100%; width: 100%;
margin: 2.5em 0 3.5em;
padding: 0;
height: 1px; height: 1px;
border: 0; border: 0;
border-top: 1px solid color(var(--color-border) l(+10%)); border-top: 1px solid currentcolor;
} opacity: 0.2;
blockquote {
margin: 1.5em 0;
padding: 0 1.6em 0 1.6em;
}
blockquote p {
margin: 0.8em 0;
font-size: 1.2em;
font-weight: 300;
}
blockquote small {
display: inline-block;
margin: 0.8em 0 0.8em 1.5em;
font-size: 0.9em;
opacity: 0.8;
} }
::selection { ::selection {
@ -102,13 +85,22 @@ mark {
background-color: #fdffb6; background-color: #fdffb6;
} }
sup, sub { small {
vertical-align: baseline; font-size: 80%;
position: relative; }
top: -0.4em;
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -0.5em;
} }
sub { sub {
top: 0.4em; bottom: -0.25em;
} }
a:not([class]) { a:not([class]) {
@ -138,7 +130,6 @@ h6 {
} }
h1 { h1 {
margin: 0 0 0.5em 0;
font-size: 5.7rem; font-size: 5.7rem;
font-weight: 800; font-weight: 800;
} }
@ -149,7 +140,6 @@ h1 {
} }
h2 { h2 {
margin: 0 0 0.5em 0;
font-size: 4rem; font-size: 4rem;
} }
@media (max-width: 500px) { @media (max-width: 500px) {
@ -159,7 +149,6 @@ h2 {
} }
h3 { h3 {
margin: 0 0 1em 0;
font-size: 3.2rem; font-size: 3.2rem;
} }
@media (max-width: 500px) { @media (max-width: 500px) {
@ -169,17 +158,14 @@ h3 {
} }
h4 { h4 {
margin: 0 0 1em 0;
font-size: 2.6rem; font-size: 2.6rem;
} }
h5 { h5 {
margin: 0 0 1em 0;
font-size: 2.4rem; font-size: 2.4rem;
} }
h6 { h6 {
margin: 0 0 1em 0;
font-size: 2.2rem; font-size: 2.2rem;
} }

2
assets/css/components/header.css
View File

@ -285,7 +285,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 100; z-index: 900;
overflow-y: scroll; overflow-y: scroll;
} }
.gh-head-open #gh-head .gh-container { .gh-head-open #gh-head .gh-container {

16
assets/css/screen.css
View File

@ -72,6 +72,22 @@ html,
height: 2rem; height: 2rem;
} }
/* Post header
/* ---------------------------------------------------------- */
.gh-excerpt {
grid-row: 2 / 3;
}
.gh-image {
grid-column: full-start / full-end;
width: 100%;
}
.gh-post-footer {
margin: 2rem 0;
}
/* Errors /* Errors
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */