💅 CSS comb and built

no issue
This commit is contained in:
Aileen Nowak 2017-11-20 13:42:32 +08:00
parent 4ff4b4c7f8
commit 990f712209
4 changed files with 51 additions and 49 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -36,8 +36,8 @@ body {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-size: cover;
background-position: center center; background-position: center center;
background-size: cover;
border-radius: 100%; border-radius: 100%;
} }
@ -70,9 +70,9 @@ body {
/* Centered content container blocks */ /* Centered content container blocks */
.inner { .inner {
width: 100%;
max-width: 1040px;
margin: 0 auto; margin: 0 auto;
max-width: 1040px;
width: 100%;
} }
/* Usage: /* Usage:
@ -149,9 +149,9 @@ body {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 10vw 4vw;
min-height: 200px; min-height: 200px;
max-height: 450px; max-height: 450px;
padding: 10vw 4vw;
text-align: center; text-align: center;
} }
@ -196,8 +196,8 @@ body {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
height: 40px;
overflow-y: hidden; overflow-y: hidden;
height: 40px;
font-size: 1.2rem; font-size: 1.2rem;
} }
@ -206,11 +206,12 @@ body {
align-items: center; align-items: center;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
-webkit-overflow-scrolling: touch;
margin-right: 10px; margin-right: 10px;
padding-bottom: 80px; padding-bottom: 80px;
letter-spacing: 0.4px; letter-spacing: 0.4px;
white-space: nowrap; white-space: nowrap;
-webkit-overflow-scrolling: touch;
-ms-overflow-scrolling: touch; -ms-overflow-scrolling: touch;
} }
@ -348,8 +349,8 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
} }
.rss-button svg { .rss-button svg {
height: 2.1rem;
margin-bottom: 1px; margin-bottom: 1px;
height: 2.1rem;
fill: #fff; fill: #fff;
} }
@ -383,9 +384,9 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
flex: 1 1 300px; flex: 1 1 300px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 300px;
overflow: hidden; overflow: hidden;
margin: 0 20px 40px; margin: 0 20px 40px;
min-height: 300px;
background: #fff center center; background: #fff center center;
background-size: cover; background-size: cover;
border-radius: 5px; border-radius: 5px;
@ -455,9 +456,9 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
} }
.author-profile-image { .author-profile-image {
margin-right: 5px;
width: 25px; width: 25px;
height: 25px; height: 25px;
margin-right: 5px;
border-radius: 100%; border-radius: 100%;
object-fit: cover; object-fit: cover;
@ -549,9 +550,9 @@ The first (most recent) post in the list is styled to be bigger than the others
/* ^ Required to make .post-full-content:before/after z-index stacking work */ /* ^ Required to make .post-full-content:before/after z-index stacking work */
.post-full-header { .post-full-header {
max-width: 1040px;
margin: 0 auto; margin: 0 auto;
padding: 6vw 3vw 3vw; padding: 6vw 3vw 3vw;
max-width: 1040px;
text-align: center; text-align: center;
} }
@media (max-width: 500px) { @media (max-width: 500px) {
@ -585,8 +586,8 @@ The first (most recent) post in the list is styled to be bigger than the others
} }
.post-full-image { .post-full-image {
height: 800px;
margin: 0 -10vw -165px; margin: 0 -10vw -165px;
height: 800px;
background: var(--lightgrey) center center; background: var(--lightgrey) center center;
background-size: cover; background-size: cover;
border-radius: 5px; border-radius: 5px;
@ -594,8 +595,8 @@ The first (most recent) post in the list is styled to be bigger than the others
@media (max-width: 1170px) { @media (max-width: 1170px) {
.post-full-image { .post-full-image {
height: 600px;
margin: 0 -4vw -100px; margin: 0 -4vw -100px;
height: 600px;
border-radius: 0; border-radius: 0;
} }
} }
@ -608,9 +609,9 @@ The first (most recent) post in the list is styled to be bigger than the others
.post-full-content { .post-full-content {
position: relative; position: relative;
min-height: 230px;
margin: 0 auto; margin: 0 auto;
padding: 70px 100px 0; padding: 70px 100px 0;
min-height: 230px;
font-family: Georgia, serif; font-family: Georgia, serif;
font-size: 2.2rem; font-size: 2.2rem;
line-height: 1.6em; line-height: 1.6em;
@ -729,8 +730,8 @@ The first (most recent) post in the list is styled to be bigger than the others
.post-full-content img, .post-full-content img,
.post-full-content video { .post-full-content video {
display: block; display: block;
max-width: 1040px;
margin: 1.5em auto; margin: 1.5em auto;
max-width: 1040px;
} }
@media (max-width: 1040px) { @media (max-width: 1040px) {
.post-full-content img, .post-full-content img,
@ -749,8 +750,8 @@ Usage (In Ghost edtior):
*/ */
.post-full-content img[src$="#full"] { .post-full-content img[src$="#full"] {
width: 100vw;
max-width: none; max-width: none;
width: 100vw;
} }
@ -801,10 +802,10 @@ Usage (In Ghost editor):
} }
.post-full-content pre { .post-full-content pre {
max-width: 100%;
overflow-x: auto; overflow-x: auto;
margin: 1.5em 0 3em; margin: 1.5em 0 3em;
padding: 20px; padding: 20px;
max-width: 100%;
border: color(var(--darkgrey) l(-10%)) 1px solid; border: color(var(--darkgrey) l(-10%)) 1px solid;
color: var(--whitegrey); color: var(--whitegrey);
font-size: 1.4rem; font-size: 1.4rem;
@ -834,9 +835,9 @@ Usage (In Ghost editor):
top: -15px; top: -15px;
left: 50%; left: 50%;
display: block; display: block;
margin-left: -10px;
width: 1px; width: 1px;
height: 30px; height: 30px;
margin-left: -10px;
background: color(var(--lightgrey) l(+10%)); background: color(var(--lightgrey) l(+10%));
box-shadow: #fff 0 0 0 5px; box-shadow: #fff 0 0 0 5px;
transform: rotate(45deg); transform: rotate(45deg);
@ -909,8 +910,8 @@ Usage (In Ghost editor):
} }
@media (min-width: 1180px) { @media (min-width: 1180px) {
.post-full-content h5 { .post-full-content h5 {
width: 100vw;
max-width: 1060px; max-width: 1060px;
width: 100vw;
} }
} }
@media (max-width: 500px) { @media (max-width: 500px) {
@ -961,8 +962,8 @@ Usage (In Ghost editor):
font-size: 2.9rem; font-size: 2.9rem;
} }
.post-full-image { .post-full-image {
height: 350px;
margin-bottom: 4vw; margin-bottom: 4vw;
height: 350px;
} }
.post-full-content { .post-full-content {
padding: 0; padding: 0;
@ -976,24 +977,24 @@ Usage (In Ghost editor):
/* Tables */ /* Tables */
.post-full-content table { .post-full-content table {
display: inline-block; display: inline-block;
width: auto;
max-width: 100%;
overflow-x: auto; overflow-x: auto;
margin: 0.5em 0 2.5em; margin: 0.5em 0 2.5em;
max-width: 100%;
width: auto;
border-spacing: 0; border-spacing: 0;
border-collapse: collapse; border-collapse: collapse;
vertical-align: top;
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; font-size: 1.6rem;
white-space: nowrap; white-space: nowrap;
vertical-align: top;
} }
.post-full-content table { .post-full-content table {
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-size: 10px 100%, 10px 100%;
background-attachment: scroll, scroll;
background-repeat: no-repeat;
-webkit-overflow-scrolling: touch; -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-attachment: scroll, scroll;
background-size: 10px 100%, 10px 100%;
background-repeat: no-repeat;
} }
.post-full-content table td:first-child { .post-full-content table td:first-child {
@ -1004,8 +1005,8 @@ Usage (In Ghost editor):
.post-full-content table td:last-child { .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-size: 20px 100%;
background-position: 100% 0; background-position: 100% 0;
background-size: 20px 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
@ -1059,8 +1060,8 @@ Usage (In Ghost editor):
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
max-width: 420px;
margin: 0 auto; margin: 0 auto;
max-width: 420px;
} }
.subscribe-form .form-group { .subscribe-form .form-group {
@ -1069,8 +1070,8 @@ Usage (In Ghost editor):
.subscribe-email { .subscribe-email {
display: block; display: block;
width: 100%;
padding: 10px; padding: 10px;
width: 100%;
border: color(var(--lightgrey) l(+7%)) 1px solid; border: color(var(--lightgrey) l(+7%)) 1px solid;
color: var(--midgrey); color: var(--midgrey);
font-size: 1.8rem; font-size: 1.8rem;
@ -1090,9 +1091,9 @@ Usage (In Ghost editor):
.subscribe-form button { .subscribe-form button {
display: inline-block; display: inline-block;
height: 41px;
margin: 0 0 0 10px; margin: 0 0 0 10px;
padding: 0 20px; padding: 0 20px;
height: 41px;
outline: none; outline: none;
color: #fff; color: #fff;
font-size: 1.5rem; font-size: 1.5rem;
@ -1134,8 +1135,8 @@ Usage (In Ghost editor):
width: 100%; width: 100%;
} }
.subscribe-form button { .subscribe-form button {
width: 100%;
margin: 10px 0 0 0; margin: 10px 0 0 0;
width: 100%;
} }
} }
@ -1147,9 +1148,9 @@ Usage (In Ghost editor):
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
max-width: 840px;
margin: 0 auto; margin: 0 auto;
padding: 3vw 0 6vw 0; padding: 3vw 0 6vw 0;
max-width: 840px;
} }
.author-card { .author-card {
@ -1158,9 +1159,9 @@ Usage (In Ghost editor):
} }
.author-card .author-profile-image { .author-card .author-profile-image {
margin-right: 15px;
width: 60px; width: 60px;
height: 60px; height: 60px;
margin-right: 15px;
} }
.author-card-name { .author-card-name {
@ -1212,8 +1213,8 @@ Usage (In Ghost editor):
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.post-full-comments { .post-full-comments {
max-width: 840px;
margin: 0 auto; margin: 0 auto;
max-width: 840px;
} }
@ -1298,8 +1299,9 @@ Usage (In Ghost editor):
.read-next-divider svg { .read-next-divider svg {
width: 40px; width: 40px;
stroke: #fff;
fill: transparent; fill: transparent;
stroke: #fff;
stroke-width: 0.5px; stroke-width: 0.5px;
stroke-opacity: 0.65; stroke-opacity: 0.65;
} }
@ -1317,8 +1319,8 @@ Usage (In Ghost editor):
flex-direction: column; flex-direction: column;
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
list-style: none;
text-align: center; text-align: center;
list-style: none;
} }
.read-next-card-content li { .read-next-card-content li {
@ -1334,9 +1336,9 @@ Usage (In Ghost editor):
display: block; display: block;
padding: 20px 0; padding: 20px 0;
border-bottom: rgba(255,255,255,0.3) 1px solid; border-bottom: rgba(255,255,255,0.3) 1px solid;
vertical-align: top;
color: #fff; color: #fff;
font-weight: 500; font-weight: 500;
vertical-align: top;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
} }
@ -1407,8 +1409,8 @@ Usage (In Ghost editor):
} }
.floating-header-logo img { .floating-header-logo img {
max-height: 20px;
margin: 0 10px 0 0; margin: 0 10px 0 0;
max-height: 20px;
} }
.floating-header-divider { .floating-header-divider {
@ -1459,9 +1461,9 @@ Usage (In Ghost editor):
} }
.floating-header-share-label svg { .floating-header-share-label svg {
margin: 0 5px 0 10px;
width: 18px; width: 18px;
height: 18px; height: 18px;
margin: 0 5px 0 10px;
stroke: rgba(0,0,0,0.7); stroke: rgba(0,0,0,0.7);
transform: rotate(90deg); transform: rotate(90deg);
} }
@ -1571,17 +1573,17 @@ Usage (In Ghost editor):
.site-header-content .author-profile-image { .site-header-content .author-profile-image {
z-index: 10; z-index: 10;
flex-shrink: 0; flex-shrink: 0;
margin: 0 0 20px 0;
width: 100px; width: 100px;
height: 100px; height: 100px;
margin: 0 0 20px 0;
box-shadow: rgba(255,255,255,0.1) 0 0 0 6px; box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
} }
.site-header-content .author-bio { .site-header-content .author-bio {
z-index: 10; z-index: 10;
flex-shrink: 0; flex-shrink: 0;
max-width: 600px;
margin: 5px 0 10px 0; margin: 5px 0 10px 0;
max-width: 600px;
font-size: 2rem; font-size: 2rem;
line-height: 1.3em; line-height: 1.3em;
font-weight: 300; font-weight: 300;
@ -1733,8 +1735,8 @@ Usage (In Ghost editor):
} }
.subscribe-overlay-description { .subscribe-overlay-description {
max-width: 650px;
margin: 0 auto 50px; margin: 0 auto 50px;
max-width: 650px;
font-family: Georgia, serif; font-family: Georgia, serif;
font-size: 3rem; font-size: 3rem;
line-height: 1.3em; line-height: 1.3em;
@ -1746,8 +1748,8 @@ Usage (In Ghost editor):
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
max-width: 500px;
margin: 0 auto; margin: 0 auto;
max-width: 500px;
} }
.subscribe-overlay .form-group { .subscribe-overlay .form-group {
@ -1756,8 +1758,8 @@ Usage (In Ghost editor):
.subscribe-overlay .subscribe-email { .subscribe-overlay .subscribe-email {
display: block; display: block;
width: 100%;
padding: 14px 20px; padding: 14px 20px;
width: 100%;
border: none; border: none;
color: var(--midgrey); color: var(--midgrey);
font-size: 2rem; font-size: 2rem;
@ -1778,9 +1780,9 @@ Usage (In Ghost editor):
.subscribe-overlay button { .subscribe-overlay button {
display: inline-block; display: inline-block;
height: 52px;
margin: 0 0 0 15px; margin: 0 0 0 15px;
padding: 0 25px; padding: 0 25px;
height: 52px;
outline: none; outline: none;
color: #fff; color: #fff;
font-size: 1.7rem; font-size: 1.7rem;
@ -1858,9 +1860,9 @@ Usage (In Ghost editor):
.site-footer-content { .site-footer-content {
display: flex; display: flex;
flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-wrap: wrap;
color: rgba(255,255,255,0.7); color: rgba(255,255,255,0.7);
font-size: 1.3rem; font-size: 1.3rem;
} }