Improve paragraphs in home page

This commit is contained in:
Arkadiusz Wieczorek 2023-08-22 12:17:53 +02:00
parent 683772dce6
commit 7da889adfe
3 changed files with 103 additions and 100 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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 {