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

111
assets/css/screen.css
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 {