Improve paragraphs in home page
This commit is contained in:
Arkadiusz Wieczorek
parent
683772dce6
commit
7da889adfe
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -91,6 +91,7 @@ body {
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
@media (min-width: 900px) {
|
||||
|
||||
.home-template .post-feed,
|
||||
.tag-template .post-feed,
|
||||
.author-template .post-feed {
|
||||
@ -298,8 +299,7 @@ body {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.site-header-background:not(.responsive-header-img)
|
||||
.site-nav-left-wrapper:after,
|
||||
.site-header-background:not(.responsive-header-img) .site-nav-left-wrapper:after,
|
||||
.site-nav-main .site-nav-left-wrapper:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -309,15 +309,12 @@ body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.site-header-background:not(.responsive-header-img)
|
||||
.site-nav-left-wrapper:after,
|
||||
.site-header-background:not(.responsive-header-img) .site-nav-left-wrapper:after,
|
||||
.site-nav-main .site-nav-left-wrapper:after {
|
||||
right: 0;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
color(var(--darkgrey) l(-5%) a(0)) 0%,
|
||||
color(var(--darkgrey) l(-5%)) 100%
|
||||
);
|
||||
background: linear-gradient(to right,
|
||||
color(var(--darkgrey) l(-5%) a(0)) 0%,
|
||||
color(var(--darkgrey) l(-5%)) 100%);
|
||||
}
|
||||
|
||||
.site-nav-left {
|
||||
@ -534,6 +531,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
|
||||
.social-link__large path {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.social-link__large:hover,
|
||||
.social-link__large:hover svg,
|
||||
.social-link__large:hover path {
|
||||
@ -558,7 +556,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.site-nav-right .nav + .subscribe-button {
|
||||
.site-nav-right .nav+.subscribe-button {
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
@ -697,6 +695,8 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
|
||||
|
||||
.post-card-excerpt p {
|
||||
margin-bottom: 1em;
|
||||
hyphens: auto;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.post-card-meta {
|
||||
@ -899,6 +899,8 @@ make sure this only happens on large viewports / desktop-ish devices.
|
||||
margin-bottom: 1.5em;
|
||||
font-size: 1.8rem;
|
||||
line-height: 1.5em;
|
||||
hyphens: auto;
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1041,12 +1043,14 @@ make sure this only happens on large viewports / desktop-ish devices.
|
||||
padding: 0 11vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.post-full-content {
|
||||
padding: 0 5vw;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.post-full-custom-excerpt {
|
||||
font-size: 1.9rem;
|
||||
@ -1080,7 +1084,9 @@ make sure this only happens on large viewports / desktop-ish devices.
|
||||
margin: 0 0 1.5em 0;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
|
||||
.post-full-content p,
|
||||
.post-full-content ul,
|
||||
.post-full-content ol,
|
||||
@ -1134,7 +1140,9 @@ make sure this only happens on large viewports / desktop-ish devices.
|
||||
max-width: 1040px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 1040px) {
|
||||
|
||||
.post-full-content img,
|
||||
.post-full-content video {
|
||||
width: 100%;
|
||||
@ -1162,7 +1170,7 @@ Usage (In Ghost editor):
|
||||
<small>Your image caption</small>
|
||||
|
||||
*/
|
||||
.post-full-content img + br + small {
|
||||
.post-full-content img+br+small {
|
||||
display: block;
|
||||
margin-top: -3em;
|
||||
margin-bottom: 1.5em;
|
||||
@ -1179,6 +1187,7 @@ Usage (In Ghost editor):
|
||||
padding: 0 1.5em;
|
||||
border-left: #3eb0ef 3px solid;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.post-full-content blockquote {
|
||||
padding: 0 1.3em;
|
||||
@ -1260,7 +1269,7 @@ Usage (In Ghost editor):
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.post-full-content hr + p {
|
||||
.post-full-content hr+p {
|
||||
margin-top: 1.2em;
|
||||
}
|
||||
|
||||
@ -1281,9 +1290,11 @@ Usage (In Ghost editor):
|
||||
line-height: 1.25em;
|
||||
font-weight: 600;
|
||||
}
|
||||
.post-full-content p + h1 {
|
||||
|
||||
.post-full-content p+h1 {
|
||||
margin-top: 0.8em;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.post-full-content h1 {
|
||||
font-size: 3.2rem;
|
||||
@ -1297,9 +1308,11 @@ Usage (In Ghost editor):
|
||||
line-height: 1.25em;
|
||||
font-weight: 600;
|
||||
}
|
||||
.post-full-content p + h2 {
|
||||
|
||||
.post-full-content p+h2 {
|
||||
margin-top: 0.8em;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.post-full-content h2 {
|
||||
margin-bottom: 0.3em;
|
||||
@ -1314,9 +1327,11 @@ Usage (In Ghost editor):
|
||||
line-height: 1.3em;
|
||||
font-weight: 600;
|
||||
}
|
||||
.post-full-content h2 + h3 {
|
||||
|
||||
.post-full-content h2+h3 {
|
||||
margin-top: 0.7em;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.post-full-content h3 {
|
||||
margin-bottom: 0.3em;
|
||||
@ -1330,12 +1345,15 @@ Usage (In Ghost editor):
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.post-full-content h2 + h4 {
|
||||
|
||||
.post-full-content h2+h4 {
|
||||
margin-top: 0.7em;
|
||||
}
|
||||
.post-full-content h3 + h4 {
|
||||
|
||||
.post-full-content h3+h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.post-full-content h4 {
|
||||
margin-bottom: 0.3em;
|
||||
@ -1355,12 +1373,14 @@ Usage (In Ghost editor):
|
||||
line-height: 1.35em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 1180px) {
|
||||
.post-full-content h5 {
|
||||
max-width: 1060px;
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.post-full-content h5 {
|
||||
margin-bottom: 1em;
|
||||
@ -1376,6 +1396,7 @@ Usage (In Ghost editor):
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.post-full-content h6 {
|
||||
font-size: 1.8rem;
|
||||
@ -1466,39 +1487,29 @@ Usage (In Ghost editor):
|
||||
|
||||
.post-full-content table {
|
||||
-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: 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 {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
rgba(255, 255, 255, 1) 50%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
background-image: linear-gradient(to right,
|
||||
rgba(255, 255, 255, 1) 50%,
|
||||
rgba(255, 255, 255, 0) 100%);
|
||||
background-size: 20px 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.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-position: 100% 0;
|
||||
background-size: 20px 100%;
|
||||
background-repeat: no-repeat;
|
||||
@ -1723,10 +1734,8 @@ Usage (In Ghost editor):
|
||||
padding: 6.5vw 7vw 8vw;
|
||||
border: color(var(--lightgrey) l(+10%)) 1px solid;
|
||||
text-align: center;
|
||||
background: linear-gradient(
|
||||
color(var(--whitegrey) l(+6%)),
|
||||
color(var(--whitegrey) l(+4%))
|
||||
);
|
||||
background: linear-gradient(color(var(--whitegrey) l(+6%)),
|
||||
color(var(--whitegrey) l(+4%)));
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@ -1793,12 +1802,10 @@ Usage (In Ghost editor):
|
||||
line-height: 39px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
background: linear-gradient(
|
||||
color(var(--blue) whiteness(+7%)),
|
||||
color(var(--blue) lightness(-7%) saturation(-10%)) 60%,
|
||||
color(var(--blue) lightness(-7%) saturation(-10%)) 90%,
|
||||
color(var(--blue) lightness(-4%) saturation(-10%))
|
||||
);
|
||||
background: linear-gradient(color(var(--blue) whiteness(+7%)),
|
||||
color(var(--blue) lightness(-7%) saturation(-10%)) 60%,
|
||||
color(var(--blue) lightness(-7%) saturation(-10%)) 90%,
|
||||
color(var(--blue) lightness(-4%) saturation(-10%)));
|
||||
border-radius: 5px;
|
||||
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
@ -1951,10 +1958,8 @@ Usage (In Ghost editor):
|
||||
overflow: hidden;
|
||||
margin: 0 25px 50px;
|
||||
padding: 25px;
|
||||
background: linear-gradient(
|
||||
color(var(--darkgrey) l(+2%)),
|
||||
color(var(--darkgrey) l(-5%))
|
||||
);
|
||||
background: linear-gradient(color(var(--darkgrey) l(+2%)),
|
||||
color(var(--darkgrey) l(-5%)));
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@ -2113,7 +2118,7 @@ Usage (In Ghost editor):
|
||||
}
|
||||
|
||||
/* Preventing full-width image overlap with post image. */
|
||||
.post-full-image + .post-full-content .kg-content *:first-child .kg-image {
|
||||
.post-full-image+.post-full-content .kg-content *:first-child .kg-image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -2129,10 +2134,10 @@ Usage (In Ghost editor):
|
||||
margin: 0.8em 0 2.3em;
|
||||
}
|
||||
|
||||
.post-full-content h1 + figure,
|
||||
.post-full-content h2 + figure,
|
||||
.post-full-content h3 + figure,
|
||||
.post-full-content h4 + figure {
|
||||
.post-full-content h1+figure,
|
||||
.post-full-content h2+figure,
|
||||
.post-full-content h3+figure,
|
||||
.post-full-content h4+figure {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
@ -2200,10 +2205,10 @@ Usage (In Ghost editor):
|
||||
margin: 0 0 0 0.75em;
|
||||
}
|
||||
|
||||
.kg-gallery-card + .kg-image-card.kg-width-wide,
|
||||
.kg-gallery-card + .kg-gallery-card,
|
||||
.kg-image-card.kg-width-wide + .kg-gallery-card,
|
||||
.kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {
|
||||
.kg-gallery-card+.kg-image-card.kg-width-wide,
|
||||
.kg-gallery-card+.kg-gallery-card,
|
||||
.kg-image-card.kg-width-wide+.kg-gallery-card,
|
||||
.kg-image-card.kg-width-wide+.kg-image-card.kg-width-wide {
|
||||
margin: -2.25em 0 3em;
|
||||
}
|
||||
|
||||
@ -2220,7 +2225,7 @@ Usage (In Ghost editor):
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.kg-card + .kg-bookmark-card {
|
||||
.kg-card+.kg-bookmark-card {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@ -2331,15 +2336,16 @@ Usage (In Ghost editor):
|
||||
margin: 0.2em 0 1.3em;
|
||||
}
|
||||
|
||||
.post-full-content h1 + figure,
|
||||
.post-full-content h2 + figure,
|
||||
.post-full-content h3 + figure,
|
||||
.post-full-content h4 + figure {
|
||||
.post-full-content h1+figure,
|
||||
.post-full-content h2+figure,
|
||||
.post-full-content h3+figure,
|
||||
.post-full-content h4+figure {
|
||||
margin-top: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
|
||||
.post-full-content .kg-width-wide,
|
||||
.post-full-content .kg-width-full {
|
||||
margin-right: -5vw;
|
||||
@ -2472,9 +2478,9 @@ Usage (In Ghost editor):
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.author-location + .author-stats:before,
|
||||
.author-stats + .author-social-link:before,
|
||||
.author-social-link + .author-social-link:before {
|
||||
.author-location+.author-stats:before,
|
||||
.author-stats+.author-social-link:before,
|
||||
.author-social-link+.author-social-link:before {
|
||||
content: "\2022";
|
||||
display: inline-block;
|
||||
margin: 0 12px;
|
||||
@ -2482,16 +2488,17 @@ Usage (In Ghost editor):
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.no-image .author-location + .author-stats:before,
|
||||
.no-image .author-stats + .author-social-link:before,
|
||||
.no-image .author-social-link + .author-social-link:before {
|
||||
.no-image .author-location+.author-stats:before,
|
||||
.no-image .author-stats+.author-social-link:before,
|
||||
.no-image .author-social-link+.author-social-link:before {
|
||||
color: var(--midgrey);
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
|
||||
.author-location,
|
||||
.author-stats,
|
||||
.author-stats + .author-social-link:first-of-type:before {
|
||||
.author-stats+.author-social-link:first-of-type:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -2526,9 +2533,9 @@ Usage (In Ghost editor):
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.author-location + .author-stats:before,
|
||||
.author-stats + .author-social-link:before,
|
||||
.author-social-link + .author-social-link:before {
|
||||
.author-location+.author-stats:before,
|
||||
.author-stats+.author-social-link:before,
|
||||
.author-social-link+.author-social-link:before {
|
||||
display: inline;
|
||||
margin: 0 6px;
|
||||
}
|
||||
@ -2593,12 +2600,15 @@ Usage (In Ghost editor):
|
||||
.error-content {
|
||||
padding-top: 24vw;
|
||||
}
|
||||
|
||||
.error-code {
|
||||
font-size: 11.2rem;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
padding-bottom: 16vw;
|
||||
}
|
||||
|
||||
.error-description {
|
||||
margin: 5px 0 0 0;
|
||||
font-size: 1.8rem;
|
||||
@ -2609,6 +2619,7 @@ Usage (In Ghost editor):
|
||||
.error-content {
|
||||
padding-top: 28vw;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
padding-bottom: 14vw;
|
||||
}
|
||||
@ -2798,12 +2809,10 @@ Usage (In Ghost editor):
|
||||
line-height: 38px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
background: linear-gradient(
|
||||
color(var(--blue) whiteness(+7%)),
|
||||
color(var(--blue) lightness(-7%) saturation(-10%)) 60%,
|
||||
color(var(--blue) lightness(-7%) saturation(-10%)) 90%,
|
||||
color(var(--blue) lightness(-4%) saturation(-10%))
|
||||
);
|
||||
background: linear-gradient(color(var(--blue) whiteness(+7%)),
|
||||
color(var(--blue) lightness(-7%) saturation(-10%)) 60%,
|
||||
color(var(--blue) lightness(-7%) saturation(-10%)) 90%,
|
||||
color(var(--blue) lightness(-4%) saturation(-10%)));
|
||||
border-radius: 8px;
|
||||
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
@ -3061,19 +3070,15 @@ Usage (In Ghost editor):
|
||||
}
|
||||
|
||||
.post-full-content table td:first-child {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
var(--darkmode) 50%,
|
||||
color(var(--darkmode) a(0%)) 100%
|
||||
);
|
||||
background-image: linear-gradient(to right,
|
||||
var(--darkmode) 50%,
|
||||
color(var(--darkmode) a(0%)) 100%);
|
||||
}
|
||||
|
||||
.post-full-content table td:last-child {
|
||||
background-image: linear-gradient(
|
||||
to left,
|
||||
var(--darkmode) 50%,
|
||||
color(var(--darkmode) a(0%)) 100%
|
||||
);
|
||||
background-image: linear-gradient(to left,
|
||||
var(--darkmode) 50%,
|
||||
color(var(--darkmode) a(0%)) 100%);
|
||||
}
|
||||
|
||||
.post-full-content table th {
|
||||
@ -3119,10 +3124,8 @@ Usage (In Ghost editor):
|
||||
|
||||
.subscribe-form {
|
||||
border: none;
|
||||
background: linear-gradient(
|
||||
color(var(--darkmode) l(-6%)),
|
||||
color(var(--darkmode) l(-3%))
|
||||
);
|
||||
background: linear-gradient(color(var(--darkmode) l(-6%)),
|
||||
color(var(--darkmode) l(-3%)));
|
||||
}
|
||||
|
||||
.subscribe-form-title {
|
||||
@ -3155,4 +3158,4 @@ Usage (In Ghost editor):
|
||||
.subscribe-form .success .message-success {
|
||||
color: color(var(--green) l(+5%) s(-5%));
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user