Merge changes, adjustments to bookmark card for gscan tests

This commit is contained in:
David Darnes 2019-11-12 13:54:39 +00:00
commit 056d76fd1f
13 changed files with 522 additions and 481 deletions

View file

@ -1,9 +1,4 @@
/* Main
/* ---------------------------------------------------------- */
.gh-main {
margin-bottom: 2rem;
}
/* Content grid
/* ---------------------------------------------------------- */
@ -11,28 +6,50 @@
display: grid;
grid-template-columns:
[full-start]
minmax(calc(calc(100% - 970px) / 2), 1fr)
minmax(calc(calc(100% - 1200px) / 2), 1fr)
[wide-start]
1fr
auto
[main-start]
repeat(10, [col-start] 1fr)
720px
[main-end]
1fr
auto
[wide-end]
minmax(calc(calc(100% - 970px) / 2), 1fr)
minmax(calc(calc(100% - 1200px) / 2), 1fr)
[full-end]
;
}
@media (max-width: 600px) {
@media (max-width: 1296px) {
.gh-canvas {
grid-template-columns:
[full-start]
minmax(calc(calc(100% - 720px) / 2), 1fr)
[wide-start main-start]
repeat(10, [col-start] 1fr)
[main-end wide-end]
minmax(calc(calc(100% - 720px) / 2), 1fr)
4vw
[wide-start]
auto
[main-start]
720px
[main-end]
auto
[wide-end]
4vw
[full-end]
;
}
}
@media (max-width: 778px) {
.gh-canvas {
grid-template-columns:
[full-start]
4vw
[wide-start]
auto
[main-start]
auto
[main-end]
auto
[wide-end]
4vw
[full-end]
;
}
@ -42,8 +59,7 @@
grid-column: main-start / main-end;
}
.kg-width-wide,
.gh-canvas > h5 {
.kg-width-wide {
grid-column: wide-start / wide-end;
}
@ -52,6 +68,310 @@
}
/* Content & Typography
/* ---------------------------------------------------------- */
.gh-content > * + * {
margin-top: 4vw;
}
@media (min-width: 600px) {
.gh-content > * + * {
margin-top: 3vw;
}
}
@media (min-width: 1100px) {
.gh-content > * + * {
margin-top: 4.2rem;
}
}
.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.5em;
top: 0;
bottom: 0;
width: 0.3rem;
background: var(--color-primary);
}
@media (max-width: 650px) {
.gh-canvas blockquote,
.gh-canvas ol,
.gh-canvas ul,
.gh-canvas dl,
.gh-canvas p {
font-size: 1.8rem;
}
.gh-content blockquote::before {
left: -4vw;
}
}
/* Cards
/* ---------------------------------------------------------- */
:not(.kg-card):not([id]) + .kg-card {
margin-top: 6vw;
}
.kg-card + :not(.kg-card):not([id]) {
margin-top: 6vw;
}
@media (min-width: 600px) {
: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;
text-align: center;
color: rgba(0,0,0,0.5);
font-weight: 600;
font-size: 1.3rem;
line-height: 1.4em;
}
.kg-card figcaption strong {
color: rgba(0,0,0,0.8);
}
.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;
color: #dc0050;
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;
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,
.kg-bookmark-description {
margin-top: 0.9em;
}
.kg-bookmark-metadata {
display: flex;
align-items: center;
font-weight: 500;
font-size: 1.3rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kg-bookmark-description {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.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-publisher::before {
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
/* ---------------------------------------------------------- */
@ -90,283 +410,8 @@
border-bottom: 1px solid rgba(0,0,0,.1);
}
/* Post header
/* ---------------------------------------------------------- */
.gh-page.no-image {
margin-top: 2rem;
}
.gh-header {
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-card {
width: 100%;
position: relative;
}
.kg-bookmark-container {
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
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,
.kg-bookmark-description {
margin-top: .5em;
}
.kg-bookmark-metadata {
align-items: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kg-bookmark-description {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.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-publisher::before {
content: "•";
margin: 0 .5em;
}
/* Spotify Cards
/* Third Party
/* ---------------------------------------------------------- */
.kg-card iframe[src*="spotify.com"] {

View file

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

View file

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