style(blog): strengthen accent treatments

This commit is contained in:
DeCentN2Madness committed 2026-11-06 13:35:41 -07:00
1 parent 8c19266760
commit 96288b1eb8
4 files changed
+12 -5

No files matched your search

+1 -1
View File
@@ -27,7 +27,7 @@ const readMore = { en: 'Read More', es: 'Leer Más', ar: 'اقرأ المزيد'
</article> </article>
<style> <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:hover { text-decoration: underline; }
.author-byline:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; } .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; } .blog-card-meta { align-items: center; display: flex; font-size: .78rem; gap: .75rem; }
+1 -1
View File
@@ -32,7 +32,7 @@ const schema = blogPostingSchema(entry, publication, authors, site.url);
</BaseLayout> </BaseLayout>
<style> <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:hover { text-decoration: underline; }
.author-byline:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; } .author-byline:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.article-header { padding-block: 4.5rem 0; text-align: left; } .article-header { padding-block: 4.5rem 0; text-align: left; }
+2 -2
View File
@@ -2,8 +2,8 @@
.prose h2, .prose h3 { margin-top: 1.75em; } .prose h2, .prose h3 { margin-top: 1.75em; }
.prose img { border-radius: var(--radius-md); margin-block: var(--space-lg); } .prose img { border-radius: var(--radius-md); margin-block: var(--space-lg); }
.prose a { overflow-wrap: anywhere; text-decoration: none; } .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) { 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-primary-dark); } .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 { 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::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; } .blog-post-body blockquote p { color: var(--color-primary); margin: 0 0 1.55rem; }
+8 -1
View File
@@ -17,7 +17,7 @@ a:hover, a:active { color: var(--color-accent); }
.eyebrow { .eyebrow {
margin: 0; margin: 0;
color: var(--color-primary); color: var(--color-accent-strong);
font-family: var(--font-accent); font-family: var(--font-accent);
font-size: 2rem; font-size: 2rem;
} }
@@ -26,6 +26,13 @@ a:hover, a:active { color: var(--color-accent); }
margin-block-start: 0; 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) { .prose :where(ul, ol) {
margin-block: 0 1.5rem; margin-block: 0 1.5rem;
padding-inline-start: 2.5rem; padding-inline-start: 2.5rem;