style(blog): strengthen accent treatments
This commit is contained in:
4 files changed
+12
-5
No files matched your search
@@ -27,7 +27,7 @@ const readMore = { en: 'Read More', es: 'Leer Más', ar: 'اقرأ المزيد'
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.author-byline { color: inherit; text-decoration: none; }
|
||||
.author-byline { color: var(--color-accent-strong); font-weight: 600; text-decoration: none; }
|
||||
.author-byline:hover { text-decoration: underline; }
|
||||
.author-byline:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
|
||||
.blog-card-meta { align-items: center; display: flex; font-size: .78rem; gap: .75rem; }
|
||||
|
||||
@@ -32,7 +32,7 @@ const schema = blogPostingSchema(entry, publication, authors, site.url);
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.author-byline { color: inherit; text-decoration: none; }
|
||||
.author-byline { color: var(--color-accent-strong); font-weight: 600; text-decoration: none; }
|
||||
.author-byline:hover { text-decoration: underline; }
|
||||
.author-byline:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
|
||||
.article-header { padding-block: 4.5rem 0; text-align: left; }
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
.prose h2, .prose h3 { margin-top: 1.75em; }
|
||||
.prose img { border-radius: var(--radius-md); margin-block: var(--space-lg); }
|
||||
.prose a { overflow-wrap: anywhere; text-decoration: none; }
|
||||
.prose :is(p, li, td) a:not(.content-button) { color: var(--color-primary); text-decoration: underline; text-underline-offset: .15em; }
|
||||
.prose :is(p, li, td) a:not(.content-button):is(:hover, :focus-visible) { color: var(--color-primary-dark); }
|
||||
.prose :is(p, li, td) a:not(.content-button) { color: var(--color-accent-strong); text-decoration: underline; text-underline-offset: .15em; }
|
||||
.prose :is(p, li, td) a:not(.content-button):is(:hover, :focus-visible) { color: var(--color-accent); }
|
||||
.blog-post-body blockquote { background: var(--color-tint); border: 0; border-radius: 16px; color: var(--color-primary); margin: 0 auto 2.5rem; max-width: 767px; padding: 45px; position: relative; z-index: 0; }
|
||||
.blog-post-body blockquote::before { background-image: url('/assets/images/blockquote.svg'); content: ""; display: block; height: 41px; inset-inline-start: 6px; position: absolute; top: 22px; width: 50px; z-index: -1; }
|
||||
.blog-post-body blockquote p { color: var(--color-primary); margin: 0 0 1.55rem; }
|
||||
|
||||
@@ -17,7 +17,7 @@ a:hover, a:active { color: var(--color-accent); }
|
||||
|
||||
.eyebrow {
|
||||
margin: 0;
|
||||
color: var(--color-primary);
|
||||
color: var(--color-accent-strong);
|
||||
font-family: var(--font-accent);
|
||||
font-size: 2rem;
|
||||
}
|
||||
@@ -26,6 +26,13 @@ a:hover, a:active { color: var(--color-accent); }
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
.blog-card .text-link,
|
||||
.blog-card .text-link:visited {
|
||||
text-decoration-color: var(--color-accent-strong);
|
||||
text-decoration-thickness: .15em;
|
||||
text-underline-offset: .5em;
|
||||
}
|
||||
|
||||
.prose :where(ul, ol) {
|
||||
margin-block: 0 1.5rem;
|
||||
padding-inline-start: 2.5rem;
|
||||
|
||||
Reference in new issue
Block a user