Redesign theme style

assets/css/global.css

@@ -126,6 +126,8 @@ a {
 a:active,
 a:hover {
     outline: 0;
+    text-decoration: underline;
+    opacity: initial;
 }
 b,
 strong {

assets/css/screen.css

@@ -28,6 +28,10 @@ production stylesheet in assets/built/screen.css
 
 /* Import CSS reset and base styles */
 @import "global.css";
+@import "prism.css";
+
+@font-face { font-family:'Mulish'; src:url('../fonts/Mulish-Regular.ttf'); }
+@font-face { font-family:'Mulish'; src:url('../fonts/Mulish-Bold.ttf'); font-weight:bold; }
 
 :root {
 
@@ -54,7 +58,7 @@ production stylesheet in assets/built/screen.css
 
     /* Fonts */
     --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-    --font-serif: Georgia, Times, serif;
+    --font-serif: Mulish, Georgia, Times, serif;
     --font-mono: Menlo, Courier, monospace;
 
 }
@@ -63,6 +67,11 @@ production stylesheet in assets/built/screen.css
 /* 2. Layout - Page building blocks
 /* ---------------------------------------------------------- */
 
+body {
+    font-family: Mulish;
+    background-color: #f5f6f8;
+}
+
 .viewport {
     position: relative;
     display: flex;
@@ -113,16 +122,16 @@ production stylesheet in assets/built/screen.css
     z-index: 100;
     display: flex;
     align-items: center;
-    padding-top: calc(19vmin + 44px);
-    padding-bottom: 19vmin;
     text-align: center;
     color: var(--color-darkgrey);
 }
 
 .has-cover .site-header-content {
-    min-height: 560px;
+    min-height: 90px;
     background-color: var(--ghost-accent-color);
     color: #fff;
+    border-bottom: .1em solid #eff0f3;
+    box-shadow: 0 .4em .4em 0 rgba(0,0,0,.04);
 }
 
 .site-header-content.left-aligned {
@@ -228,15 +237,9 @@ production stylesheet in assets/built/screen.css
     }
 }
 
-@media (max-width: 991px) {
-    .site-header-content {
-        padding-top: calc(19vmin + 32px);
-    }
-}
-
 @media (max-width: 767px) {
     .has-cover .site-header-content {
-        min-height: 240px;
+        min-height: 60px;
     }
     .site-header-inner {
         gap: 16px;
@@ -417,6 +420,10 @@ production stylesheet in assets/built/screen.css
     margin-top: -5px;
 }
 
+a.gh-head-logo.no-image:hover {
+    text-decoration: none;
+}
+
 .has-cover .gh-head-logo {
     color: #fff;
 }
@@ -444,6 +451,7 @@ production stylesheet in assets/built/screen.css
     list-style: none;
     margin: 0;
     padding: 0;
+    font-size: 1.15em;
 }
 
 .gh-head-menu .nav li {
@@ -458,7 +466,7 @@ production stylesheet in assets/built/screen.css
 }
 
 .gh-head-menu .nav a:hover {
-    opacity: 0.9;
+    text-decoration: underline;
 }
 
 .gh-head-menu .nav-more-toggle {
@@ -477,6 +485,10 @@ production stylesheet in assets/built/screen.css
     height: 24px;
 }
 
+.nav-blog a {
+    font-weight:bold;
+}
+
 @media (min-width: 992px) {
     body:not(.is-dropdown-loaded) .gh-head-menu .nav > li {
         opacity: 0;
@@ -842,13 +854,13 @@ production stylesheet in assets/built/screen.css
 .post-feed {
     position: relative;
     display: grid;
-    gap: 4.8vmin 4vmin;
+    gap: 0vmin 4vmin;
     grid-template-columns: repeat(6, 1fr);
-    padding: max(4.8vmin, 36px) 0 0;
+    padding: max(3.8vmin,36px) 0 0;
 }
 
 :is(.tag-template, .author-template) .post-feed {
-    margin-top: 4vmin;
+    margin-top: 0;
 }
 
 @media (max-width: 991px) {
@@ -871,6 +883,7 @@ production stylesheet in assets/built/screen.css
     flex-direction: column;
     background-size: cover;
     word-break: break-word;
+    padding-bottom: 50px;
 }
 
 .post-card-image-link {
@@ -878,12 +891,12 @@ production stylesheet in assets/built/screen.css
     overflow: hidden;
     display: block;
     margin-bottom: 32px;
+    margin-bottom:0;
 }
 
 .post-card-image-link::after {
-    content: "";
     display: block;
-    padding-bottom: 55%;
+    padding-bottom: 0%;
 }
 
 .post-card[class*="post-access-"] .post-card-image-link::after {
@@ -902,16 +915,16 @@ production stylesheet in assets/built/screen.css
 }
 
 .post-card-image {
-    position: absolute;
+    border-radius: 0px;
-    inset: 0;
+    border-style: none;
-    width: 100%;
+    border-width: 0px;
-    height: 100%;
+    height: max(15vw, 30vh);
-    background: var(--color-lightgrey) no-repeat center center;
+    object-fit: contain;
-    object-fit: cover;
 }
 
 .post-card.keep-ratio:not(.post-card-large):not(.post-card-full) .post-card-image {
     position: static;
+    margin: auto;
 }
 
 .post-card-access {
@@ -976,10 +989,11 @@ production stylesheet in assets/built/screen.css
     font-size: 2.6rem;
     font-weight: 800;
     line-height: 1.2;
+    color: #146598;
 }
 
 .post-card-content-link:hover .post-card-title {
-    opacity: 0.9;
+    text-decoration: underline;
 }
 
 .no-image .post-card-title {
@@ -1000,6 +1014,8 @@ production stylesheet in assets/built/screen.css
     flex-grow: 1;
     display: flex;
     flex-direction: column;
+    border-top: 2px solid #146598;
+    padding-top: 5px;
 }
 
 .post-card-excerpt {
@@ -1009,7 +1025,6 @@ production stylesheet in assets/built/screen.css
     max-width: 720px;
     font-size: 1.6rem;
     line-height: 1.5;
-    -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     word-break: break-word;
 }
@@ -1018,10 +1033,6 @@ production stylesheet in assets/built/screen.css
     font-family: var(--font-sans);
 }
 
-.post-card:not(.post-card-large):not(.post-card-full):not(.dynamic):not(.no-image) .post-card-excerpt {
-    -webkit-line-clamp: 2;
-}
-
 :is(.tag-template, .author-template) .post-card-excerpt {
     margin-top: 6px;
 }
@@ -1041,6 +1052,15 @@ production stylesheet in assets/built/screen.css
     color: var(--color-secondary-text);
 }
 
+.post-card-meta time {
+    text-decoration-line: underline;
+    text-decoration-style: wavy;
+    text-underline-offset: 6px;
+    font-size: 1.5rem;
+    color: black;
+    text-decoration-color: #146598;
+}
+
 .post-card-meta > * {
     display: flex;
     align-items: center;
@@ -1222,12 +1242,8 @@ html.no-infinite-scroll .pagination {
     word-break: break-word;
 }
 
-.post-template .article {
-    padding: max(8vmin, 40px) 0 max(8vmin, 64px);
-}
-
 .post-template .article-header {
-    padding: 0 0 max(6.4vmin, 40px);
+    margin: 10px 0px;
 }
 
 .page-template .article-header {
@@ -1244,7 +1260,7 @@ html.no-infinite-scroll .pagination {
 }
 
 .article-title {
-    margin-bottom: 0;
+    margin-bottom: 10px;
     font-size: clamp(3.2rem, 5vw, 5.2rem);
     font-weight: 800;
     line-height: 1.05;
@@ -1266,7 +1282,7 @@ html.no-infinite-scroll .pagination {
 .gh-canvas .article-image {
     grid-column: wide-start / wide-end;
     width: 100%;
-    margin: max(6.4vmin, 40px) 0 0;
+    margin: 35px 0px;
 }
 
 .image-full .article-image {
@@ -1365,7 +1381,7 @@ headings, text, images and lists. We deal with cards lower down. */
 /* Add back a top margin to all headings, unless a heading
 is the very first element in the post content */
 .gh-content > [id]:not(:first-child) {
-    margin: 2em 0 0;
+    margin: 1.5em 0 0;
 }
 
 /* Add a small margin between a heading and anything after it */
@@ -1389,6 +1405,11 @@ is the very first element in the post content */
     color: var(--ghost-accent-color);
     text-decoration: underline;
     word-break: break-word;
+    text-decoration: initial;
+}
+
+.gh-content a:hover {
+    text-decoration: underline;
 }
 
 .gh-content > blockquote:not([class]),
@@ -1396,7 +1417,7 @@ is the very first element in the post content */
 .gh-content > ul,
 .gh-content > dl,
 .gh-content > p {
-    font-family: var(--font-serif);
+    font-family: Mulish;
     font-weight: 400;
     font-size: 2rem;
     line-height: 1.6em;
@@ -1545,10 +1566,10 @@ make sure they look good, and are given a bit of extra spacing. */
 /* Add extra margin before/after any cards,
 except for when immediately preceeded by a heading */
 .gh-content :not(.kg-card):not([id]) + .kg-card {
-    margin-top: 6vmin;
+    margin-top: 0vmin;
 }
 .gh-content .kg-card + :not(.kg-card) {
-    margin-top: 6vmin;
+    margin-top: 0vmin;
 }
 
 /* This keeps small embeds centered */
@@ -1598,13 +1619,21 @@ except for when immediately preceeded by a heading */
     font-family: var(--font-serif);
 }
 
+hr {
+    width: 100px;
+    border-width: 6px 0 0 0;
+    border-style: double;
+    border-color: black;
+    margin: auto;
+    margin-top: 40px;
+}
 
 /* Captions */
 figcaption {
     padding: 1.5rem 1.5rem 0;
     text-align: center;
     color: rgba(0,0,0,0.5);
-    font-size: 1.3rem;
+    font-size: 2rem;
     line-height: 1.4em;
 }
 figcaption strong {
@@ -1727,13 +1756,18 @@ iframe.instagram-media + script + :not([id]) {
 .article-byline {
     display: flex;
     justify-content: space-between;
-    margin: min(24px, 5.6vmin) 0 0;
+    margin-top: 40px;
+    margin-bottom: 40px;
+    border-width: 6px 0 0 0;
+    border-style: double;
 }
 
 .article-byline-content {
     flex-grow: 1;
     display: flex;
     align-items: center;
+    margin-top: 25px;
+    justify-content: space-between;
 }
 
 .article-byline-content .author-list {
@@ -1742,9 +1776,10 @@ iframe.instagram-media + script + :not([id]) {
 }
 
 .article-byline-meta {
-    color: var(--color-secondary-text);
     font-size: 1.4rem;
     line-height: 1.2em;
+    font-size: 1.85rem;
+    color: initial;
 }
 
 .article-byline-meta .author-name {
@@ -1759,6 +1794,13 @@ iframe.instagram-media + script + :not([id]) {
     margin: 0 2px;
 }
 
+.byline-meta-content time {
+    text-decoration-line: underline;
+    text-decoration-style: wavy;
+    text-underline-offset: 6px;
+    text-decoration-color: #146598;
+}
+
 .author-avatar {
     display: block;
     overflow: hidden;
@@ -1775,6 +1817,15 @@ iframe.instagram-media + script + :not([id]) {
 }
 
 @media (max-width: 767px) {
+    .article-byline-content {
+        flex-direction: column;
+        align-items: baseline;
+    }
+
+    .article-byline-meta {
+        margin: 5px 0px;
+    }
+
     .article-byline-content .author-list {
         padding-right: 12px;
     }
@@ -1783,6 +1834,13 @@ iframe.instagram-media + script + :not([id]) {
     }
 }
 
+@media (max-width: 650px) {
+    .article-byline-meta {
+      font-size: 1.6rem;
+      color: initial;
+    }
+}
+
 
 /* 6.2. Subscribe
 /* ---------------------------------------------------------- */
@@ -1971,6 +2029,13 @@ iframe.instagram-media + script + :not([id]) {
     order: 1;
 }
 
+.tag-template .post-card-large .post-card-content {
+    border-top: 0px;
+}
+.tag-template .post-card-large .post-card-content-link:hover .post-card-title {
+    text-decoration: none;
+}
+
 @media (min-width: 1001px) {
     .tag-template .post-card-large .post-card-content:only-child {
         grid-column: span 2;
@@ -2051,10 +2116,11 @@ iframe.instagram-media + script + :not([id]) {
 .site-footer {
     position: relative;
     margin: max(12vmin, 64px) 0 0 0;
-    padding-top: 48px;
+    padding-top: 10px;
-    padding-bottom: 140px;
+    padding-bottom: 10px;
     color: #fff;
-    background: color-mod(var(--color-darkgrey) l(-5%));
+    background: #146598;
+    margin: 0;
 }
 
 .page-template .site-footer {
@@ -2073,15 +2139,21 @@ iframe.instagram-media + script + :not([id]) {
     color: #fff;
     letter-spacing: -0.015em;
     font-weight: 500;
+    font-size: 1.9rem;
+}
+
+.site-footer .copyright a:hover {
+    text-decoration: none;
 }
 
 .site-footer a {
-    color: rgba(255,255,255,0.7);
+    color: #fff;
+  font-size: 1.4rem;
 }
 
 .site-footer a:hover {
-    color: rgba(255,255,255,1);
+    color: #fff;
-    text-decoration: none;
+    text-decoration: underline;
 }
 
 .site-footer-nav ul {
@@ -2131,7 +2203,7 @@ iframe.instagram-media + script + :not([id]) {
         font-size: 1.5rem;
     }
     .site-footer .copyright {
-        margin-bottom: 16px;
+        margin-bottom: 0px;
     }
 }