/* ========================================================================== SKJ blog stylesheet — blog index (/blog/) + single post pages (Phase B) Transliterated from the live site's own code. Loaded AFTER css/site.css; holds only what the blog pages need beyond the shared shell. NOTE on sources: the live blog index is a native Neve posts page (body class "blog", "elementor-default") — it links NO Elementor page CSS (no wp-content/uploads/elementor/css/post-.css), so every value below comes from: [N] Neve theme style-legacy.min.css v3.4.7 (capture/assets/wp-content/themes/neve/assets/css/style-legacy.min.css) [C] Neve customizer inline CSS (id="neve-style-inline-css") captured in of capture/html/blog.html + capture/html/fertilizing-your-lawn.html [CH] SKJ child theme style.css (capture/assets/wp-content/themes/skj/style.css) [W] WP 6.9 core block styles (capture/assets/wp-includes/...) Neve var values used inline here [C]: --nv-primary-accent #005496, --nv-text-color #393939, --nv-light-bg #ededed, --nv-site-bg #ffffff. FONTS (critical for Phase B): the live blog index + post pages load NO webfonts (capture/html/blog.html + fertilizing-your-lawn.html link no Google Fonts). The "Poppins"/"Libre Baskerville" family names below and in site.css therefore resolve to system sans-serif on these pages — that IS the live rendering (see baselines). Do NOT add a Google Fonts link to any blog page. ========================================================================== */ /* ========================================================================== 1. Content grid (Neve .container/.row/.col) Source: [N] grid rules; [C] container max-widths + 70/30 split ========================================================================== */ /* [N] html rule — Neve sets font smoothing on for the whole document; without it every glyph rasterizes differently vs live (verified by pixel diff: all body text lit up despite identical geometry). site.css's html rule doesn't carry it (M1 frozen), so blog pages set it here. */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .container { /* [N] */ width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; max-width: 748px; /* [C] */ } .row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } /* [N] */ .col, .col-sm-12, .col-md-12, .col-12 { /* [N] */ position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px; } .col { flex-basis: auto; flex-grow: 1; max-width: 100%; margin-left: auto; margin-right: auto; } /* [N] */ .col-12 { flex: 0 0 100%; max-width: 100%; } /* [N] */ .neve-main { flex: 1 auto; min-height: 1px; } /* [N] */ .archive-container { padding-top: 20px; } /* [N] */ @media (min-width: 576px) { .container { max-width: 992px; } /* [C] */ .col-sm-12 { flex: 0 0 100%; max-width: 100%; } /* [N] */ } @media (min-width: 769px) { .col-md-12 { flex: 0 0 100%; max-width: 100%; } /* [N] */ } @media (min-width: 960px) { .container { max-width: 1170px; } /* [C] */ .archive-container { padding-top: 30px; } /* [N] */ .neve-main > .container > .row { flex-wrap: nowrap; } /* [N] */ .neve-main > .container .col { max-width: 70%; } /* [N] — posts column */ .neve-main > .archive-container .nv-index-posts.col { max-width: 70%; } /* [C] */ .neve-main > .archive-container .nv-sidebar-wrap { max-width: 30%; } /* [C] */ .neve-main > .single-post-container .nv-single-post-wrap.col { max-width: 70%; } /* [C] */ .neve-main > .single-post-container .nv-sidebar-wrap { max-width: 30%; } /* [C] */ } /* ========================================================================== 2. Blog index — page title ("Blog" h1 with bottom rule) Source: [N] .nv-page-title-wrap.nv-big-title ========================================================================== */ .nv-page-title-wrap.nv-big-title .nv-page-title { /* [N] */ padding-bottom: 10px; border-bottom: 1px solid #ededed; /* --nv-light-bg */ margin-bottom: 20px; } .nv-page-title-wrap.nv-big-title .nv-page-title h1 { /* [N] */ line-height: 1.3em; margin-bottom: 0; } /* ========================================================================== 3. Blog index — post cards (Neve .layout-grid, one per row) Live markup: article.layout-grid > .article-content-col > .content > (.nv-post-thumbnail-wrap + h2.blog-entry-title + ul.nv-meta-list + .excerpt-wrap). Source: [N] posts-layout rules ========================================================================== */ .nv-index-posts .posts-wrapper { display: flex; flex-wrap: wrap; box-sizing: content-box; } /* [N] */ .posts-wrapper > article { margin-bottom: 30px; } /* [N] */ .layout-grid, .layout-grid > .article-content-col { display: flex; } /* [N] */ .article-content-col { width: 100%; } /* [N] */ .article-content-col .content { /* [N] */ width: 100%; padding-bottom: 30px; border-bottom: 1px solid #ededed; /* --nv-light-bg */ display: flex; flex-direction: column; } .layout-grid .content > * { margin: 0 0 10px; } /* [N] */ .layout-grid .content > :last-child { margin-bottom: 0; } /* [N] */ .layout-grid .content > :first-child { margin-top: 0; } /* [N] */ .layout-grid .content > .blog-entry-title { margin-bottom: 0; } /* [N] */ .layout-grid .content .nv-meta-list { margin-top: 5px; } /* [N] */ .layout-grid .content .excerpt-wrap > :last-child { margin-bottom: 0; } /* [N] */ .nv-post-thumbnail-wrap a { transition: all 0.3s ease; } /* [N] */ .nv-post-thumbnail-wrap a:hover { opacity: 0.95; } /* [N] */ .nv-post-thumbnail-wrap img { height: auto; } /* [N] */ .blog-entry-title { word-wrap: break-word; } /* [N] */ .entry-title { word-wrap: break-word; } /* [N] */ .entry-title a { color: #393939; } /* [N] --nv-text-color */ .entry-title a:focus, .entry-title a:hover { /* [N] */ opacity: 0.9; color: #393939; } .excerpt-wrap::after, .nv-content-wrap::after { /* [N] clearfix (floated images) */ content: ""; clear: both; display: table; } @media (min-width: 960px) { .nv-index-posts:not(:only-child) { padding-right: 40px; } /* [N] — later 40px rule wins over the earlier 15px one in style-legacy source order */ .nv-index-posts, .nv-single-post-wrap { margin-bottom: 40px; } /* [N] */ } /* ========================================================================== 4. Meta list ("Category / Date") — shared by index cards + post pages Source: [N] .nv-meta-list; [C] "/" separator; [CH] link color; span.blog-cat-link = category archive link stripped to TEXT (archives are out of scope — links would 404). Color kept identical to the live link. ========================================================================== */ .nv-meta-list { padding-bottom: 10px; width: 100%; } /* [N] */ .nv-meta-list li, .nv-meta-list span { display: inline; } /* [N] */ .nv-meta-list li:not(:last-child)::after { /* [N] padding + [C] content:"/" */ content: "/"; padding: 0 5px; } .nv-meta-list li { /* [N] */ color: #393939; /* --nv-text-color */ opacity: 0.7; font-size: 0.85em; } .nv-meta-list .posted-on:not(.nv-show-updated) .updated { display: none; } /* [N] */ /* span.blog-cat-link inherits the meta-list text color — JB M5 walkthrough: blue (#005496, live link color) read as a clickable link that goes nowhere (archives are out of scope). Plain text = honest affordance. */ /* ========================================================================== 5. Sidebar (Recent Posts / Archives / Categories widgets) Source: [N] .nv-sidebar-wrap + .widget rules; [CH] widget-title font. Archives + Categories items are TEXT (span.blog-cat-link) — date/category archive routes don't exist on the static site; links would 404. Recent Posts links stay live (post routes exist). ========================================================================== */ .nv-sidebar-wrap { margin-bottom: 40px; } /* [N] */ .single .nv-sidebar-wrap, .page .nv-sidebar-wrap, .single-post-container .nv-sidebar-wrap { margin-top: 30px; } /* [N] — .single/.page are the live body classes; the .single-post-container structural selector keeps the rule working on static post pages regardless of body class */ .widget { /* [N] */ word-break: break-word; padding-bottom: 20px; margin-bottom: 20px; } .widget:last-child { border: none; margin: 0; padding: 0; } /* [N] */ .widget p.widget-title { /* [N] size/margin + [CH] font */ margin: 0 0 10px; font-family: "Libre Baskerville", Sans-serif; font-weight: 600; font-size: 1.25em; color: #313131; } .widget ul { padding: 0; } /* [N] (site.css resets list-style) */ .widget ul ul { padding-left: 10px; border-left: 1px solid #ededed; } /* [N] */ .widget ul li { margin-top: 5px; } /* [N] */ /* .widget .blog-cat-link: no color override — inherits body text color. Stripped archive/category spans kept the live link blue (#005496) for pixel parity, but JB's M5 walkthrough flagged them as "links that don't work". Text that can't be clicked must not look clickable. */ @media (min-width: 960px) { .nv-sidebar-wrap.nv-right { /* [N] */ border-left: 1px solid #ededed; /* --nv-light-bg */ padding-left: 40px; } } /* ========================================================================== 6. Single post — header, featured image, content wrapper (Phase B) Source: [N] .nv-single-post-wrap rules; [C] .single-post-container .title. Live markup: article.nv-single-post-wrap.col > (.entry-header > .nv-title-meta-wrap > h1.title.entry-title + ul.nv-meta-list) + .nv-thumb-wrap + .nv-content-wrap.entry-content + #comments ========================================================================== */ .nv-single-post-wrap .entry-header, .nv-single-post-wrap .nv-content-wrap, .nv-single-post-wrap .nv-thumb-wrap { margin-bottom: 20px; } /* [N] */ .nv-single-post-wrap .entry-header:first-child, .nv-single-post-wrap .nv-content-wrap:first-child, .nv-single-post-wrap .nv-thumb-wrap:first-child { margin-top: 30px; } /* [N] */ .single-post-container .title { margin-bottom: 0; } /* [C] */ @media (min-width: 960px) { .nv-single-post-wrap:not(:only-child) { padding-right: 40px; } /* [N] */ } /* ========================================================================== 7. Article typography (.neve-main scope) Sources: [N] heading scale + content link/list/dt rules; [CH] body font. NOTE: live paragraphs carry NO bottom margin (Neve resets p to margin:0; block spacing comes from list/heading margins) — so site.css's "p { margin: 0 0 20px }" is re-zeroed inside .neve-main for parity. Heading scale [N]: mobile <769px h1 1.5em / h2 1.3em / h3 1.1em / h4 1em / h5 .75em / h6 .75em; >=769px h1 2em / h2 1.75em / h3 1.5em / h4 1.25em / h5 1em / h6 1em; line-height 1.68421; margin-bottom .8rem; weight 600. ========================================================================== */ .neve-main p { margin: 0; } /* [N] p reset (overrides site.css) */ .neve-main .nv-content-wrap p { margin: 0 0 20px; } /* [N] live Neve bare p { margin-bottom: 20px } — verified via live computed styles (M3b exemplar finding); needed at content tail before #comments border-top */ .neve-main h1, .neve-main h2, .neve-main h3, .neve-main h4, .neve-main h5, .neve-main h6 { /* [N] */ line-height: 1.68421; margin: 0 0 0.8rem; font-weight: 600; } .neve-main h1 { font-size: 1.5em; } /* [N] */ .neve-main h2 { font-size: 1.3em; } /* [N] */ .neve-main h3 { font-size: 1.1em; } /* [N] */ .neve-main h4 { font-size: 1em; } /* [N] */ .neve-main h5 { font-size: 0.75em; } /* [N] */ .neve-main h6 { font-size: 0.75em; } /* [N] */ @media (min-width: 769px) { .neve-main h1 { font-size: 2em; } /* [N] */ .neve-main h2 { font-size: 1.75em; } /* [N] */ .neve-main h3 { font-size: 1.5em; } /* [N] */ .neve-main h4 { font-size: 1.25em; } /* [N] */ .neve-main h5 { font-size: 1em; } /* [N] */ .neve-main h6 { font-size: 1em; } /* [N] */ } /* Content links are underlined on live (index excerpts are NOT — .excerpt-wrap is outside .nv-content-wrap) */ .nv-content-wrap a:not(.button):not(.wp-block-file__button) { text-decoration: underline; } /* [N] */ .nv-content-wrap a:not(.button):not(.wp-block-file__button):hover { text-decoration: none; } /* [N] */ /* Lists (site.css globally zeroes list-style + padding; restore Neve's) */ .nv-content-wrap ul, .excerpt-wrap ul { list-style-type: circle; } /* [N] */ .nv-content-wrap ol, .excerpt-wrap ol { list-style-type: decimal; } /* [N] */ .nv-content-wrap > ol, .nv-content-wrap > ul, .excerpt-wrap > ol, .excerpt-wrap > ul { margin: 20px 0; } /* [N] */ .nv-content-wrap ol, .nv-content-wrap ul, .excerpt-wrap ol, .excerpt-wrap ul { padding-left: 20px; } /* [N] */ .nv-content-wrap ol li, .nv-content-wrap ul li, .excerpt-wrap ol li, .excerpt-wrap ul li { margin-top: 10px; } /* [N] */ .nv-content-wrap dt, .excerpt-wrap dt { font-weight: 600; display: block; } /* [N] */ /* Blockquote + table ([N] — none in the 8 live posts; provided for Phase B) */ .nv-content-wrap blockquote { margin: 40px 0; } /* [N] */ .nv-content-wrap blockquote p { font-size: 1.1em; } /* [N] */ .nv-content-wrap blockquote cite { /* [N] */ padding-top: 20px; display: block; color: #676767; font-style: normal; font-size: 0.95em; } .nv-content-wrap blockquote::before, .nv-content-wrap blockquote::after { /* [N] */ height: 3px; width: 60px; background-color: #c9c9c9; content: " "; display: block; } .nv-content-wrap blockquote::before { margin: 0 auto 40px; } /* [N] */ .nv-content-wrap blockquote::after { margin: 40px auto 0; } /* [N] */ .nv-content-wrap blockquote > * { margin-bottom: 0; } /* [N] */ .nv-content-wrap table { width: 100%; margin: 20px 0; border-collapse: collapse; } /* [N] */ .nv-content-wrap table td, .nv-content-wrap table th { /* [N] */ padding: 10px; border-bottom: 1px solid #ededed; } /* ========================================================================== 8. Content images + WP alignment classes (Phase B) Sources: [N] .alignleft/.alignright/.aligncenter/.wp-caption rules; [W] .wp-block-image/figcaption behavior. The 8 live posts have NO content images; these map the standard WP classes Phase B may encounter. ========================================================================== */ .nv-content-wrap img { max-width: 100%; height: auto; } /* matches site.css img; restated so floated/resized content images never overflow the column */ .alignleft { float: left; margin: 16px 16px 16px 0; } /* [N] */ .alignright { float: right; margin: 16px 0 16px 16px; } /* [N] */ .aligncenter { display: block; text-align: center; margin: 0 auto; } /* [N] */ .wp-caption { max-width: 100%; } /* [N] */ .wp-caption-text { /* [N] */ text-align: center; font-size: 0.8em; font-weight: 500; } .nv-content-wrap figure { margin: 0; } /* [N] figure reset */ .nv-content-wrap .wp-block-image img { display: block; max-width: 100%; height: auto; } /* [W] */ /* ========================================================================== 9. Comments area (Phase B) Source: [N] #comments / .comments-area / .comment-form rules. All 8 live posts render an EMPTY comments area (
) — the border-top below still renders on live, so it stays. List/form styles are provided for completeness; Phase B DROPS any live #respond reply form (dead on a static site, per spec). ========================================================================== */ #comments { /* [N] */ border-top: 1px solid #ededed; /* --nv-light-bg */ margin-top: 10px; } .comments-area a { text-decoration: none; } /* [N] */ .comments-area a:hover { text-decoration: underline; } /* [N] */ #comments ol { list-style: none; } /* [N] */ #comments ol > ol { padding-left: 10px; } /* [N] */ #comments .nv-content-wrap ol { list-style-type: decimal; } /* [N] */ #comments .nv-comments-list > li { padding: 10px 0 0; } /* [N] */ #comments .children > li { margin-top: 20px; padding-top: 20px; } /* [N] */ .nv-comments-title-wrap { margin: 40px 0 60px; } /* [N] */ .nv-comment-article { padding-bottom: 20px; border-bottom: 1px solid #ededed; } /* [N] */ .nv-comment-header { /* [N] */ display: flex; align-items: center; text-transform: none; font-style: normal; font-size: 0.85em; margin-bottom: 20px; } .nv-comment-header .comment-author { display: flex; flex-direction: column; } /* [N] */ .nv-comment-avatar { margin-right: 20px; } /* [N] */ .nv-comment-avatar > img { float: left; border-radius: 50%; } /* [N] */ .comment-author .author { font-weight: 700; text-transform: uppercase; } /* [N] */ .nv-comment-content a { text-decoration: underline; } /* [N] */ .nv-comment-content a:hover { text-decoration: none; } /* [N] */ #comments .edit-reply { /* [N] */ margin-top: 20px; display: flex; justify-content: space-between; font-size: 0.85em; } #comments .edit-reply .nv-reply-link { margin-left: auto; } /* [N] */ .pingback { border-bottom: 1px solid #ededed; } /* [N] */ .pingback .edit-link { display: block; font-size: 0.85em; margin-top: 20px; } /* [N] */ /* Reply form ([N] + [C] button colors) — Phase B drops #respond per spec; kept here so a static comment list + any future form render like live */ #comments .comment-respond { margin: 40px 0; } /* [N] */ #comments .comment-reply-title { margin-bottom: 5px; } /* [N] */ #comments .comment-reply-title small { float: right; } /* [N] */ .comment-form { display: grid; grid-column-gap: 20px; grid-row-gap: 10px; } /* [N] */ .comment-form > p:not(.comment-notes) { margin-bottom: 0; } /* [N] */ .comment-form label { display: inline-block; } /* [N] */ .comment-form-cookies-consent { display: flex; align-items: center; } /* [N] */ .comment-form-cookies-consent input { margin-right: 10px; } /* [N] */ .comment-form-cookies-consent label { margin-bottom: 0; } /* [N] */ #comments input:not([type="submit"]):not([type="checkbox"]), #comments textarea { /* [N] base input style, scoped */ display: inline-block; width: 100%; font-size: 14px; padding: 7px 12px; border: 1px solid #dddddd; border-radius: 3px; color: #393939; background-color: #ffffff; outline: 0; -webkit-appearance: none; appearance: none; transition: all 0.3s ease; box-sizing: border-box; } #comments textarea { max-width: 100%; min-width: 100%; } /* [N] */ #comments input[type="submit"] { /* [N] base + [C] brand colors */ font-size: 0.8em; font-weight: 600; padding: 8px 12px; text-align: center; text-transform: uppercase; line-height: normal; color: #ffffff; background-color: #005496; /* [C] */ border: none; border-radius: 3px; /* [C] */ cursor: pointer; transition: all 0.15s ease-in-out; } #comments input[type="submit"]:hover { background-color: #005496; color: #ffffff; opacity: 0.9; } /* [C] */ .comment-form .form-submit { margin-top: 10px; } /* [N] */ @media (min-width: 769px) { #comments .comment-form { grid-template-columns: repeat(3, 1fr); } /* [N] */ #comments .comment-form > :not(.comment-form-author):not(.comment-form-url):not(.comment-form-email) { grid-column: span 3; } /* [N] */ #comments .form-submit { align-items: center; justify-content: flex-end; display: flex; margin-top: 0; } /* [N] */ }