💅 CSS comb and built
no issue
This commit is contained in:
Aileen Nowak
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
|
|
@ -36,8 +36,8 @@ body {
|
|||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -70,9 +70,9 @@ body {
|
|||
|
||||
/* Centered content container blocks */
|
||||
.inner {
|
||||
width: 100%;
|
||||
max-width: 1040px;
|
||||
margin: 0 auto;
|
||||
max-width: 1040px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Usage:
|
||||
|
|
@ -149,9 +149,9 @@ body {
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10vw 4vw;
|
||||
min-height: 200px;
|
||||
max-height: 450px;
|
||||
padding: 10vw 4vw;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -196,8 +196,8 @@ body {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
height: 40px;
|
||||
overflow-y: hidden;
|
||||
height: 40px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
|
|
@ -206,11 +206,12 @@ body {
|
|||
align-items: center;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
margin-right: 10px;
|
||||
padding-bottom: 80px;
|
||||
letter-spacing: 0.4px;
|
||||
white-space: nowrap;
|
||||
-webkit-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 {
|
||||
height: 2.1rem;
|
||||
margin-bottom: 1px;
|
||||
height: 2.1rem;
|
||||
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;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 300px;
|
||||
overflow: hidden;
|
||||
margin: 0 20px 40px;
|
||||
min-height: 300px;
|
||||
background: #fff center center;
|
||||
background-size: cover;
|
||||
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 {
|
||||
margin-right: 5px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-right: 5px;
|
||||
border-radius: 100%;
|
||||
|
||||
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 */
|
||||
|
||||
.post-full-header {
|
||||
max-width: 1040px;
|
||||
margin: 0 auto;
|
||||
padding: 6vw 3vw 3vw;
|
||||
max-width: 1040px;
|
||||
text-align: center;
|
||||
}
|
||||
@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 {
|
||||
height: 800px;
|
||||
margin: 0 -10vw -165px;
|
||||
height: 800px;
|
||||
background: var(--lightgrey) center center;
|
||||
background-size: cover;
|
||||
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) {
|
||||
.post-full-image {
|
||||
height: 600px;
|
||||
margin: 0 -4vw -100px;
|
||||
height: 600px;
|
||||
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 {
|
||||
position: relative;
|
||||
min-height: 230px;
|
||||
margin: 0 auto;
|
||||
padding: 70px 100px 0;
|
||||
min-height: 230px;
|
||||
font-family: Georgia, serif;
|
||||
font-size: 2.2rem;
|
||||
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 video {
|
||||
display: block;
|
||||
max-width: 1040px;
|
||||
margin: 1.5em auto;
|
||||
max-width: 1040px;
|
||||
}
|
||||
@media (max-width: 1040px) {
|
||||
.post-full-content img,
|
||||
|
|
@ -749,8 +750,8 @@ Usage (In Ghost edtior):
|
|||
|
||||
*/
|
||||
.post-full-content img[src$="#full"] {
|
||||
width: 100vw;
|
||||
max-width: none;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -801,10 +802,10 @@ Usage (In Ghost editor):
|
|||
}
|
||||
|
||||
.post-full-content pre {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
margin: 1.5em 0 3em;
|
||||
padding: 20px;
|
||||
max-width: 100%;
|
||||
border: color(var(--darkgrey) l(-10%)) 1px solid;
|
||||
color: var(--whitegrey);
|
||||
font-size: 1.4rem;
|
||||
|
|
@ -834,9 +835,9 @@ Usage (In Ghost editor):
|
|||
top: -15px;
|
||||
left: 50%;
|
||||
display: block;
|
||||
margin-left: -10px;
|
||||
width: 1px;
|
||||
height: 30px;
|
||||
margin-left: -10px;
|
||||
background: color(var(--lightgrey) l(+10%));
|
||||
box-shadow: #fff 0 0 0 5px;
|
||||
transform: rotate(45deg);
|
||||
|
|
@ -909,8 +910,8 @@ Usage (In Ghost editor):
|
|||
}
|
||||
@media (min-width: 1180px) {
|
||||
.post-full-content h5 {
|
||||
width: 100vw;
|
||||
max-width: 1060px;
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
|
|
@ -961,8 +962,8 @@ Usage (In Ghost editor):
|
|||
font-size: 2.9rem;
|
||||
}
|
||||
.post-full-image {
|
||||
height: 350px;
|
||||
margin-bottom: 4vw;
|
||||
height: 350px;
|
||||
}
|
||||
.post-full-content {
|
||||
padding: 0;
|
||||
|
|
@ -976,24 +977,24 @@ Usage (In Ghost editor):
|
|||
/* Tables */
|
||||
.post-full-content table {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
margin: 0.5em 0 2.5em;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
vertical-align: top;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
font-size: 1.6rem;
|
||||
white-space: nowrap;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.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;
|
||||
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 {
|
||||
|
|
@ -1004,8 +1005,8 @@ Usage (In Ghost editor):
|
|||
|
||||
.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-size: 20px 100%;
|
||||
background-position: 100% 0;
|
||||
background-size: 20px 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
|
@ -1059,8 +1060,8 @@ Usage (In Ghost editor):
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.subscribe-form .form-group {
|
||||
|
|
@ -1069,8 +1070,8 @@ Usage (In Ghost editor):
|
|||
|
||||
.subscribe-email {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
border: color(var(--lightgrey) l(+7%)) 1px solid;
|
||||
color: var(--midgrey);
|
||||
font-size: 1.8rem;
|
||||
|
|
@ -1090,9 +1091,9 @@ Usage (In Ghost editor):
|
|||
|
||||
.subscribe-form button {
|
||||
display: inline-block;
|
||||
height: 41px;
|
||||
margin: 0 0 0 10px;
|
||||
padding: 0 20px;
|
||||
height: 41px;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
font-size: 1.5rem;
|
||||
|
|
@ -1134,8 +1135,8 @@ Usage (In Ghost editor):
|
|||
width: 100%;
|
||||
}
|
||||
.subscribe-form button {
|
||||
width: 100%;
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1147,9 +1148,9 @@ Usage (In Ghost editor):
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 840px;
|
||||
margin: 0 auto;
|
||||
padding: 3vw 0 6vw 0;
|
||||
max-width: 840px;
|
||||
}
|
||||
|
||||
.author-card {
|
||||
|
|
@ -1158,9 +1159,9 @@ Usage (In Ghost editor):
|
|||
}
|
||||
|
||||
.author-card .author-profile-image {
|
||||
margin-right: 15px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.author-card-name {
|
||||
|
|
@ -1212,8 +1213,8 @@ Usage (In Ghost editor):
|
|||
/* ---------------------------------------------------------- */
|
||||
|
||||
.post-full-comments {
|
||||
max-width: 840px;
|
||||
margin: 0 auto;
|
||||
max-width: 840px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1298,8 +1299,9 @@ Usage (In Ghost editor):
|
|||
|
||||
.read-next-divider svg {
|
||||
width: 40px;
|
||||
stroke: #fff;
|
||||
fill: transparent;
|
||||
stroke: #fff;
|
||||
|
||||
stroke-width: 0.5px;
|
||||
stroke-opacity: 0.65;
|
||||
}
|
||||
|
|
@ -1317,8 +1319,8 @@ Usage (In Ghost editor):
|
|||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.read-next-card-content li {
|
||||
|
|
@ -1334,9 +1336,9 @@ Usage (In Ghost editor):
|
|||
display: block;
|
||||
padding: 20px 0;
|
||||
border-bottom: rgba(255,255,255,0.3) 1px solid;
|
||||
vertical-align: top;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
vertical-align: top;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
|
|
@ -1407,8 +1409,8 @@ Usage (In Ghost editor):
|
|||
}
|
||||
|
||||
.floating-header-logo img {
|
||||
max-height: 20px;
|
||||
margin: 0 10px 0 0;
|
||||
max-height: 20px;
|
||||
}
|
||||
|
||||
.floating-header-divider {
|
||||
|
|
@ -1459,9 +1461,9 @@ Usage (In Ghost editor):
|
|||
}
|
||||
|
||||
.floating-header-share-label svg {
|
||||
margin: 0 5px 0 10px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: 0 5px 0 10px;
|
||||
stroke: rgba(0,0,0,0.7);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
|
@ -1571,17 +1573,17 @@ Usage (In Ghost editor):
|
|||
.site-header-content .author-profile-image {
|
||||
z-index: 10;
|
||||
flex-shrink: 0;
|
||||
margin: 0 0 20px 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 0 0 20px 0;
|
||||
box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
|
||||
}
|
||||
|
||||
.site-header-content .author-bio {
|
||||
z-index: 10;
|
||||
flex-shrink: 0;
|
||||
max-width: 600px;
|
||||
margin: 5px 0 10px 0;
|
||||
max-width: 600px;
|
||||
font-size: 2rem;
|
||||
line-height: 1.3em;
|
||||
font-weight: 300;
|
||||
|
|
@ -1733,8 +1735,8 @@ Usage (In Ghost editor):
|
|||
}
|
||||
|
||||
.subscribe-overlay-description {
|
||||
max-width: 650px;
|
||||
margin: 0 auto 50px;
|
||||
max-width: 650px;
|
||||
font-family: Georgia, serif;
|
||||
font-size: 3rem;
|
||||
line-height: 1.3em;
|
||||
|
|
@ -1746,8 +1748,8 @@ Usage (In Ghost editor):
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.subscribe-overlay .form-group {
|
||||
|
|
@ -1756,8 +1758,8 @@ Usage (In Ghost editor):
|
|||
|
||||
.subscribe-overlay .subscribe-email {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 14px 20px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
color: var(--midgrey);
|
||||
font-size: 2rem;
|
||||
|
|
@ -1778,9 +1780,9 @@ Usage (In Ghost editor):
|
|||
|
||||
.subscribe-overlay button {
|
||||
display: inline-block;
|
||||
height: 52px;
|
||||
margin: 0 0 0 15px;
|
||||
padding: 0 25px;
|
||||
height: 52px;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
font-size: 1.7rem;
|
||||
|
|
@ -1858,9 +1860,9 @@ Usage (In Ghost editor):
|
|||
|
||||
.site-footer-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
color: rgba(255,255,255,0.7);
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue