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

Responsive improvements

Browse source 
More reliable spacing using vmin for vertical rhythm, which automatically prevents issues at larger viewport sizes when using vw
This commit is contained in:
John O'Nolan 2019-11-17 16:45:16 +07:00
parent 94c51eaf42
commit ab990b71f1
7 changed files with 32 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

56
assets/css/components/content.css
View file

@ -2,6 +2,7 @@
/* Content grid
/* ---------------------------------------------------------- */
.gh-canvas {
display: grid;
grid-template-columns:
@ -43,11 +44,11 @@
[full-start]
4vw
[wide-start]
auto
0
[main-start]
auto
[main-end]
auto
0
[wide-end]
4vw
[full-end]
@ -72,18 +73,7 @@
/* ---------------------------------------------------------- */
.gh-content > * + * {
margin-top: 4vw;
}
@media (min-width: 600px) {
.gh-content > * + * {
margin-top: 3vw;
}
}
@media (min-width: 1100px) {
.gh-content > * + * {
margin-top: 4.2rem;
}
margin-top: 4vmin;
}
.gh-content > [id] + * {
@ -117,11 +107,11 @@
}
.gh-content hr {
margin-top: 5vw;
margin-top: 6vmin;
}
.gh-content hr + * {
margin-top: 5vw !important;
margin-top: 6vmin !important;
}
.gh-content blockquote {
@ -158,30 +148,11 @@
/* ---------------------------------------------------------- */
:not(.kg-card):not([id]) + .kg-card {
margin-top: 6vw;
margin-top: 6vmin;
}
.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;
}
margin-top: 6vmin;
}
.kg-card figcaption {
@ -415,14 +386,3 @@
.gh-content tbody tr:last-child {
border-bottom: 1px solid rgba(0,0,0,.1);
}
/* Third Party
/* ---------------------------------------------------------- */
.kg-card iframe[src*="spotify.com"] {
width: 100%;
height: 25vw;
min-height: 200px;
max-height: 400px;
}

35
assets/css/screen.css
View file

@ -45,6 +45,14 @@ html,
padding: 0 4vw;
}
.gh-article {
padding: 8vmin 0;
}
.gh-postfeed {
padding: 8vmin 0;
}
.gh-container {
width: 100%;
max-width: 1200px;
@ -74,8 +82,8 @@ html,
/* Index
/* ---------------------------------------------------------- */
.gh-postcard {
margin: 0 auto 6vw;
.gh-postcard:not(:first-child) {
margin: 8vmin auto 0;
}
.gh-postcard-link {
@ -87,7 +95,7 @@ html,
width: 100%;
max-height: 700px;
object-fit: cover;
margin-bottom: 2vw;
margin-bottom: 4vmin;
}
.gh-postcard-meta {
@ -124,8 +132,7 @@ html,
/* ---------------------------------------------------------- */
.gh-header {
margin: 4vw 0 0;
padding: 0 0 4vw 0;
padding: 0 0 8vmin 0;
text-align: center;
}
@ -141,7 +148,7 @@ html,
.gh-feature-image {
grid-column: wide-start / wide-end;
width: 100%;
margin: 4vw 0 0;
margin: 8vmin 0 0;
}
.gh-post-footer {
@ -153,13 +160,13 @@ html,
/* ---------------------------------------------------------- */
.gh-readmore {
padding: 4vw;
padding: 8vmin 4vw;
font-size: 2.6rem;
}
.gh-readmore .gh-container {
display: grid;
grid-gap: 4vw;
grid-gap: 8vmin;
grid-template-columns: 1fr 1fr;
}
@ -241,12 +248,12 @@ html,
.gh-error-stack {
max-width: 600px;
margin: 0 auto 0;
padding: 4vw 0;
padding: 8vmin 0;
text-align: left;
}
.gh-error-stack-list {
margin: 2vw 0 0;
margin: 4vmin 0 0;
font-size: 1.4rem;
}
@ -270,7 +277,7 @@ html,
display: flex;
align-items: center;
justify-content: center;
padding: 4vw;
padding: 8vmin 4vw;
}
.gh-foot .gh-container {
@ -297,7 +304,7 @@ html,
}
.gh-foot-menu .nav li {
margin: 0 0.75vw;
margin: 0 1.5vmin;
padding: 0;
}
@ -319,8 +326,4 @@ html,
.gh-foot-menu .nav {
font-size: 1.6rem;
}
.gh-foot-menu .nav li {
margin: 0 1rem;
padding: 0;
}
}