Improve paragraphs in home page

assets/css/screen.css

@@ -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-header-background:not(.responsive-header-img) .site-nav-left-wrapper:after,
-    .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-header-background:not(.responsive-header-img) .site-nav-left-wrapper:after,
-    .site-nav-left-wrapper:after,
 .site-nav-main .site-nav-left-wrapper:after {
     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%)) 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(
+    background: radial-gradient(ellipse at left,
-                ellipse at left,
             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) 75%
+            rgba(0, 0, 0, 0) 75%) 100% center;
-            )
-            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(
+    background-image: linear-gradient(to right,
-        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(
+    background-image: linear-gradient(to left,
-        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(
+    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;
 }
 
@@ -1793,12 +1802,10 @@ Usage (In Ghost editor):
     line-height: 39px;
     font-weight: 400;
     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%)) 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(
+    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;
 }
 
@@ -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(
+    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%)) 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(
+        background-image: linear-gradient(to right,
-            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(
+        background-image: linear-gradient(to left,
-            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(
+        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 {