From 32a3298adadd2e3b1390f050600771012621a88c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9o=20Marchal?= Date: Sun, 14 Jul 2024 17:52:43 +0200 Subject: [PATCH] Redesign theme style --- assets/css/global.css | 2 + assets/css/screen.css | 172 ++++++++++++++++++++++++++++++------------ 2 files changed, 124 insertions(+), 50 deletions(-) diff --git a/assets/css/global.css b/assets/css/global.css index 291b72e..799199a 100644 --- a/assets/css/global.css +++ b/assets/css/global.css @@ -126,6 +126,8 @@ a { a:active, a:hover { outline: 0; + text-decoration: underline; + opacity: initial; } b, strong { diff --git a/assets/css/screen.css b/assets/css/screen.css index ab5a12a..20362bb 100644 --- a/assets/css/screen.css +++ b/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; - inset: 0; - width: 100%; - height: 100%; - background: var(--color-lightgrey) no-repeat center center; - object-fit: cover; + border-radius: 0px; + border-style: none; + border-width: 0px; + height: max(15vw, 30vh); + object-fit: contain; } .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-bottom: 140px; + padding-top: 10px; + 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); - text-decoration: none; + color: #fff; + 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; } }