/* * Content area: blog, docs, glossary, search, 404, vs pages, Tool template. * Spots where core block markup differs from the old hand-coded templates. */ /* ------------------------------------------------------------------ * BLOG LIST (Query Loop). Each post was
; now it's the * loop's
  • , which also gets the "post" class. ".content li" indented it. * ------------------------------------------------------------------ */ .twocol .content .wp-block-post-template > li { margin-left: 0; } .wp-block-post-title.post-title a { display: inline; text-decoration: underline; } .post--content .wp-block-buttons { margin: 0 0 15px 0; } /* Pagination: core puts the numbers in their own div. */ .wp-block-query-pagination.pagination { display: block; margin-top: 30px; text-align: center; } .wp-block-query-pagination.pagination .wp-block-query-pagination-numbers { display: inline; } .wp-block-query-pagination.pagination a { background: none; border-radius: 0; font-size: inherit; font-weight: inherit; } /* undo Ollie's pill links */ /* Blog sidebar: "All posts" is its own list, joined onto the Categories block's list. */ .sidebar--link-list ul.blog-all-posts { margin-bottom: 0; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .sidebar--link-list ul.blog-all-posts + ul { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; } .sidebar--link-list ul.blog-all-posts + ul > li:first-child { border-top: var(--border-light); } .sidebar--link-list li.current-cat { background: var(--light); } .sidebar--link-list li.current-cat a { color: var(--strong); } /* Free tools: "Coming soon" item has no link. */ .sidebar--tools li:not(:has(a)) { display: block; padding: 14px 18px; } .sidebar--tools li:not(:has(a)) strong { color: var(--medium); } .sidebar--tools li:not(:has(a)) em { display: inline-block; font-style: normal; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; background: var(--accent-alt); color: var(--white); padding: 3px 8px; border-radius: var(--radius-sm); margin-top: 8px; } /* Core makes Post Content a flow-root box, which stops the last paragraph's margin collapsing into the next section like it did without the wrapper. */ .twocol .content > .wp-block-post-content { display: block; } /* ------------------------------------------------------------------ * SINGLE POST * ------------------------------------------------------------------ */ /* Author box: the photo is an Image block, the bio a paragraph, and the two social links are paragraphs whose link text is for screen readers (icon is a mask). */ #author-box > .wp-block-image { margin: 0; flex-shrink: 0; } #author-box > .wp-block-image img { vertical-align: baseline; } /* old sat on the text baseline when stacked on mobile */ #author-box--content > p { font-size: inherit; margin: 0; } #author-box--links > p { margin: 0; line-height: 0; } #author-box--links > p a { display: block; width: 26px; height: 26px; font-size: 0; color: transparent; background-color: var(--medium); -webkit-mask: var(--cb-icon) center / contain no-repeat; mask: var(--cb-icon) center / contain no-repeat; } #author-box--links > p a:hover { background-color: var(--accent-alt); } #author-box--links .author-box--linkedin { --cb-icon: url(../../../images/ui/linkedin.svg); } #author-box--links .author-box--x { --cb-icon: url(../../../images/ui/x.svg); } /* Previous / next links: core puts each link (and its « » arrow) in a div. */ #post--next-prev > div { font: inherit; } #post--next-prev .post-navigation-link-next { margin-left: auto; text-align: right; } #post--next-prev .wp-block-post-navigation-link__arrow-previous { margin-right: 0.25em; color: var(--accent); } #post--next-prev .wp-block-post-navigation-link__arrow-next { margin-left: 0.25em; color: var(--accent); } /* ------------------------------------------------------------------ * DOC LISTS (search results, doc category): a Query Loop whose list has the * old id "doc-category--list". Each title is a

    inside the

  • , and blog * posts in the results get the "post" class, which theme.css turns into a card row. * ------------------------------------------------------------------ */ #doc-category--list > li.post { display: list-item; margin: 0; } #doc-category--list > li > .wp-block-post-title, .sidebar--link-list .wp-block-post-template > li > .wp-block-post-title { margin: 0; font: inherit; color: inherit; } #doc-category--list:not(.sidebar--link-list) > li > .wp-block-post-title a { text-decoration: underline; } #doc-category--list:not(.sidebar--link-list) { margin-bottom: 15px; } /* core zeroes the list margin */ #doc-category--list.sidebar--link-list { margin-bottom: 40px; } /* ------------------------------------------------------------------ * 404 (templates/404.html): the old 404.php was a bare page with its own * inline styles and no site stylesheet, header or footer. Same look here. * ------------------------------------------------------------------ */ html:has(body.error404), body.error404 { height: 100%; } body.error404 { margin: 0; padding: 0; background: url(../../../images/city.svg) bottom center / 150% auto no-repeat; text-align: center; } body.error404 .wp-site-blocks { height: 100%; } body.error404 #wrapper { max-width: 600px; width: 100%; box-sizing: border-box; margin: 0 auto; padding: 40px; position: relative; top: 50%; transform: translateY(-70%); } body.error404 #wrapper h1, body.error404 #wrapper p, body.error404 #wrapper a { font-family: canada-type-gibson; color: #333; letter-spacing: normal; text-transform: none; font-weight: normal; } body.error404 #wrapper h1 { font-size: 20px; line-height: normal; font-family: input-sans, monospace; font-weight: bold; margin: 50px 0 0.67em; } body.error404 #wrapper p { font-size: 16px; line-height: 1.45; margin: 1em 0; } body.error404 #wrapper img { vertical-align: top; } /* old page ran in "almost standards" mode: no gap under an image-only line */ /* ------------------------------------------------------------------ * VS PAGES (templates/single-vs.html) * ------------------------------------------------------------------ */ /* Logos are Image blocks (figure), the "vs" divider and name are paragraphs. */ .vs-matchup--side > .wp-block-image { margin: 0; } .vs-matchup--side > .wp-block-image img { display: block; } p.vs-matchup--divider, p.vs-matchup--name { margin: 0; } /* Button rows: blocks.css sets a 10px gap on every Buttons block; these rows had 16px. */ .wp-block-buttons.hero--cta, .wp-block-buttons.vs-table--links { gap: var(--space-4); } /* "Link with arrow" paragraphs have no margin; this one had a top margin. */ p.is-style-link-arrow.vs-agency--link { margin: var(--space-6) 0 0; } /* ------------------------------------------------------------------ * POST CONTENT on normal pages, posts and docs. theme.json sets a content * width (860px), so "constrained" Groups inside a page's content (e.g. the * About page) got narrower. The old theme had no content width, so those * Groups ran full width. Undo it inside post content only. * ------------------------------------------------------------------ */ .content > .wp-block-post-content { --wp--style--global--content-size: none; --wp--style--global--wide-size: none; }