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,
background: linear-gradient(to right,
color(var(--darkgrey) l(-5%) a(0)) 0%,
color(var(--darkgrey) l(-5%)) 100%
);
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 {
@ -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%;
@ -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;
@ -1281,9 +1290,11 @@ Usage (In Ghost editor):
line-height: 1.25em;
font-weight: 600;
}
.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 {
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 {
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 {
margin-top: 0.7em;
}
.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,
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) 75%) 0 center,
radial-gradient(ellipse at right,
rgba(0, 0, 0, 0.2) 0%,
rgba(0, 0, 0, 0) 75%
)
100% center;
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,
background-image: linear-gradient(to right,
rgba(255, 255, 255, 1) 50%,
rgba(255, 255, 255, 0) 100%
);
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,
background-image: linear-gradient(to left,
rgba(255, 255, 255, 1) 50%,
rgba(255, 255, 255, 0) 100%
);
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%)),
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%))
);
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;
}
@ -2340,6 +2345,7 @@ Usage (In Ghost editor):
}
@media (max-width: 500px) {
.post-full-content .kg-width-wide,
.post-full-content .kg-width-full {
margin-right: -5vw;
@ -2489,6 +2495,7 @@ Usage (In Ghost editor):
}
@media (max-width: 700px) {
.author-location,
.author-stats,
.author-stats+.author-social-link:first-of-type:before {
@ -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%)),
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%))
);
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,
background-image: linear-gradient(to right,
var(--darkmode) 50%,
color(var(--darkmode) a(0%)) 100%
);
color(var(--darkmode) a(0%)) 100%);
}
.post-full-content table td:last-child {
background-image: linear-gradient(
to left,
background-image: linear-gradient(to left,
var(--darkmode) 50%,
color(var(--darkmode) a(0%)) 100%
);
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 {