/* ============================================================================ Orbit Computer Solutions — blog / archive index (GeneratePress) blog-grid.js rebuilds each native post into the Orbit ".post" card markup, so the card look comes from styles.css (exactly matching the static blog page). This file does the grid, the image fill, and the category filter buttons. LOAD: in the after styles.css. Scoped to .blog/.archive. ALSO: turn on archive images in Customize > Layout > Blog > Archives. PAIRS WITH blog-grid.js. ============================================================================ */ /* the card grid, centred like the static page */ .blog .site-main, .archive .site-main, .search-results .site-main{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,32px); align-items:stretch; max-width:1180px; margin-inline:auto; padding-inline:clamp(20px,5vw,40px); } .blog .site-main > article.post, .archive .site-main > article.post, .search-results .site-main > article.post{margin:0} /* breathing room between the dark hero and the content (chips / first cards) */ .blog .content-area, .archive .content-area{padding-top:clamp(40px,5vw,60px)} /* page title + pagination span the row; hide GP's default archive title (the hero replaces it) */ .blog .site-main > .page-header, .archive .site-main > .page-header, .blog .site-main > nav, .archive .site-main > nav, .blog .site-main > .paging-navigation, .archive .site-main > .paging-navigation{grid-column:1 / -1} .blog .site-main > .page-header{display:none} /* the rebuilt thumbnail is an ; make it a block and fill it with the featured image */ .blog .post__thumb, .archive .post__thumb{display:block} .blog .post__thumb img, .archive .post__thumb img{width:100%;height:100%;object-fit:cover;display:block} /* category filter buttons (in-page; they do NOT navigate to a category archive) */ .blog-chips{max-width:1180px;margin:0 auto clamp(28px,4vw,40px);padding-inline:clamp(20px,5vw,40px)} .blog-chips .chip{font-family:inherit;cursor:pointer} .blog-chips .chip.is-active{border-color:var(--green);color:var(--green);background:var(--tint)} /* numbered pagination ( 1 2 3 » ) */ .blog .paging-navigation, .archive .paging-navigation{margin-top:clamp(34px,4vw,52px)} .blog .paging-navigation .nav-links, .archive .paging-navigation .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px} .blog .page-numbers, .archive .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:46px;padding:0 14px;border-radius:9px;border:1px solid var(--line-2);background:#fff;color:var(--ink);font-weight:700;font-size:.95rem;text-decoration:none;transition:border-color .2s,color .2s,background .2s} .blog a.page-numbers:hover, .archive a.page-numbers:hover{border-color:var(--green);color:var(--green)} .blog .page-numbers.current, .archive .page-numbers.current{background:var(--green);border-color:var(--green);color:#fff} .blog .page-numbers.dots, .archive .page-numbers.dots{border-color:transparent;background:transparent;min-width:auto;padding:0 6px} @media (max-width:980px){ .blog .site-main,.archive .site-main,.search-results .site-main{grid-template-columns:1fr 1fr} } @media (max-width:600px){ .blog .site-main,.archive .site-main,.search-results .site-main{grid-template-columns:1fr} }