diff --git a/www/src/styles/components.css b/www/src/styles/components.css index 68a576e..75220cd 100644 --- a/www/src/styles/components.css +++ b/www/src/styles/components.css @@ -97,8 +97,10 @@ .services-intro .feature-grid { grid-template-columns: .75fr 1.25fr; } .gear-photo { justify-self: center; max-width: 270px; } .gear-photo-right { outline-color: #dce0e5; } -.source-list { padding-left: 1.2rem; } -.source-list li { margin-bottom: .3rem; } +.source-list { margin-block: 0 1.5rem; padding-inline-start: 2.5rem; } +.source-list li { line-height: 1.625; margin: 0; padding-inline-start: .15rem; } +.source-list li::marker { color: var(--color-accent); } +.source-list li > p { margin-block: 0; } .two-column-list { columns: 2; } .benefit-grid { grid-template-columns: 1.1fr .9fr; } .video-card { display: block; position: relative; } diff --git a/www/src/styles/typography.css b/www/src/styles/typography.css index 1c37647..cc74a55 100644 --- a/www/src/styles/typography.css +++ b/www/src/styles/typography.css @@ -11,3 +11,39 @@ a { color: var(--color-primary); } .eyebrow { color: var(--color-secondary); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .lede, .hero-copy { color: var(--color-muted); font-size: 1.25rem; } .script-label { color: var(--color-accent-strong); font-family: var(--font-accent); font-size: 1.5rem; margin: 0 0 .5rem; } + +.prose :where(ul, ol) { + margin-block: 0 1.5rem; + padding-inline-start: 2.5rem; +} + +.prose :where(ul, ol) :where(ul, ol) { + margin-block: .25rem 0; +} + +.prose li { + line-height: 1.625; + margin-block: 0; + padding-inline-start: .15rem; +} + +.prose li > p { + margin-block: 0; +} + +.prose ul > li::marker { + color: var(--color-accent); +} + +.prose ol > li::marker { + color: var(--color-primary); +} + +.blog-post-body :where(ul, ol) { + padding-inline-start: 1.875rem; +} + +.blog-post-body li { + line-height: 1.5; + margin-bottom: .25rem; +}