/** Shopify CDN: Minification failed Line 60:39 Expected ":" **/ /* ============================================================ BLOG TYPOGRAPHY — Koko Face Yoga ------------------------------------------------------------ Applies to every blog post. Targets elements, not per-post classes, so all 100+ articles are covered with no HTML changes and new posts inherit the styling automatically. Install — layout/theme.liquid, immediately after custom-file.css: {{ 'blog-typography.css' | asset_url | stylesheet_tag }} Tuning: --blog-rhythm one value controls every vertical gap --blog-h3 / --blog-h4 / --blog-text the type scale --blog-img-ratio crop ratio for uniform image heights ============================================================ */ .article-template__content { /* ---- Mobile / base ---- rem units: Dawn sets html { font-size: 62.5% }, so 1rem = 10px. Verify the computed font-size on before trusting this; if it is 16px, every value here is off by 1.6x. */ --blog-rhythm: 1rem; --blog-rhythm-lg: 2rem; /* Type scale: smaller on mobile, scaling up at 750px. */ --blog-h3: 2rem; --blog-h4: 1.8rem; --blog-text: 1.4rem; --blog-li: 1.4rem; /* Image crop ratio — see "Uniform image heights" below */ --blog-img-ratio: 3/4; --blog-video-ratio: 16/9; } /* ---------- Vertical rhythm ---------- Every child starts at zero margin, then each element after the first gets one rhythm unit of space above it. Result: identical gaps everywhere, no margin collapsing to reason about, and no change to the layout model (so app-injected widgets inside the article body keep behaving normally). */ .article-template__content > * { margin-top: 0; margin-bottom: 0; } .article-template__content > * + * { margin-top: var(--blog-rhythm); } /* Headings get extra space above so section breaks read as breaks */ .article-template__content > h2, .article-template__content > h3 { margin-top: var(--blog-rhythm-lg);-lg } .article-template__content > *:first-child { margin-top: 0; } /* ---------- Headings ---------- */ .article-template__content h3 { font-size: var(--blog-h3); font-weight: 600; line-height: 1em; } /* h4 = bold sub-labels that were previously or */ .article-template__content h4 { font-size: var(--blog-h4); font-weight: 600; line-height: 1em; } /* ---------- Body copy ---------- */ .article-template__content p{ text-align: left; font-size: var(--blog-text); line-height: .8em; } .article-template__content li { font-size: var(--blog-li); line-height: .8em; text-align: left; } /* ---------- Images ---------- Covers all three markup patterns pasted content produces: bare , in a
, and sharing a

with text. */ .article-template__content img { display: block; width: 100%; height: auto; margin-inline: auto; /* Uniform image heights: every image crops to the same ratio so mixed portrait/landscape source files line up down the page. object-fit needs a constrained box to do anything — that is why it had no effect in the original CSS. */ aspect-ratio: var(--blog-img-ratio); object-fit: cover; object-position: center; } .article-template__content iframe { display: block; width: 100%; height: auto; margin-inline: auto; margin-bottom: 1.4rem; /* Uniform image heights: every image crops to the same ratio so mixed portrait/landscape source files line up down the page. object-fit needs a constrained box to do anything — that is why it had no effect in the original CSS. */ aspect-ratio: var(--blog-video-ratio); object-position: center; } /* Opt-out for images that must not be cropped — diagrams, infographics, before/after grids, anything where the edges carry information. Add class="img-uncropped" to the in the post HTML. */ .article-template__content img.img-uncropped { aspect-ratio: auto; object-fit: fill; width: auto; max-width: 100%; } /* Wrapper div around an image — strip phantom leading */ .article-template__content > div:has(> img) { line-height: 0; } /* Image sharing a paragraph with body text. `display: block` leaves line-box leading below the image that margin cannot remove, so add matching space instead of fighting it. Scales with the type size, unlike a fixed negative margin. */ .article-template__content p > img:first-child { margin-bottom: 1.1em; } /* ---------- Lists ---------- */ .article-template__content ul, .article-template__content ol { padding-left: 1.2rem; } /* .article-template__content li + li { margin-top: .8em; } */ /* ---------- Desktop ---------- */ @media only screen and (min-width: 750px) { .article-template__content { /* Rhythm is unchanged from mobile (2rem / 3.2rem). Add it back here only if the gaps should differ by breakpoint. */ --blog-h3: 2.2rem; /* 22px */ --blog-h4: 2.2rem; /* 22px */ --blog-text: 2rem; /* 20px */ --blog-li: 2rem; } }