icd/casper-modified-ghost-theme
icd/casper-modified-ghost-theme
2
0
Fork 0
Code Issues 3 Pull Requests Projects Releases Wiki Activity

Improve paragraphs in home page

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/built/screen.css
View File

File diff suppressed because one or more lines are too long

2
assets/built/screen.css.map
View File

File diff suppressed because one or more lines are too long

175
assets/css/screen.css
View File

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