/* Theme Name: Bricks Child Theme Theme URI: https://bricksbuilder.io/ Description: Use this child theme to extend Bricks. Author: Bricks Author URI: https://bricksbuilder.io/ Template: bricks Version: 1.1 Text Domain: bricks */ /* ---------------------------------------------------------------- read more Collapses the tail of a long block of copy behind a small toggle, the way the old theme's .toggleFollowing did on /our-partners/. Add the class `tmw-readmore` to a Bricks text element and everything after its first paragraph collapses. See tmw_readmore_script() in functions.php. The pill is measured from production's .toggleFollowing.quiet rather than guessed: inline-block, 1px #eaeaea border, 1px 8px padding, #088d94, Work Sans at 0.8385744235em, uppercase, .25px tracking. */ .tmw-readmore__toggle { display: inline-block; margin-top: 0.5rem; padding: 1px 8px; background: none; border: 1px solid #eaeaea; border-radius: 0; color: #088d94; font-family: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Production's rule is 0.8385744235em, which resolves there against a 16px parent and renders at 13.4172px. Bricks sets these text elements to 13.28px, so the same em would land at 11.14px -- noticeably smaller. rem pins it to the 16px root and matches production exactly. */ font-size: 0.8386rem; font-weight: 400; line-height: inherit; text-transform: uppercase; letter-spacing: 0.25px; cursor: pointer; } .tmw-readmore__toggle:hover, .tmw-readmore__toggle:focus-visible { border-color: #088d94; } /* The script sets [hidden] on the collapsed blocks. Bricks gives most elements `display: block`, which beats the user-agent `[hidden] { display: none }` on specificity alone, so it has to be stated here. */ .tmw-readmore [hidden] { display: none !important; } /* ---------------------------------------------------------- toggleFollowing The OLD theme's collapsible section, carried in migrated content as authored: a trigger with class `toggleFollowing`, and the block right after it with `toggle hidden`. 27 of these across five Initiatives (veterans 9, teens-and-young-women 6, first-responders 6, flight-attendants 4, professionals 2) -- 9 as an
with the arrow, 4 as the `quiet` pill. .tmw-readmore above is for pages built natively in Bricks, where the editor adds one class; this is for content that already carries the old classes. The script in functions.php handles both. Values are the old theme's (style.css:1799), not guessed. The arrow was img/triangleDown.svg -- a plain #A0A3AF triangle -- inlined so nothing references the old theme. */ .toggleFollowing { position: relative; border-bottom: 1px solid #d1d1d1; padding-bottom: 6px; margin-bottom: 14px; color: #465d70; cursor: pointer; } .toggleFollowing::after { content: ''; position: absolute; right: 0; top: 7px; width: 10px; height: 10px; background: url("data:image/svg+xml;utf8,") no-repeat right center; background-size: contain; transition: transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); } .toggleFollowing.active::after { transform: rotate(180deg); } /* Inside a light-on-dark wrapper the rule and arrow need to read on teal. */ .has-text-color .toggleFollowing { color: inherit; border-bottom-color: rgba(255, 255, 255, 0.4); } /* The `quiet` variant is the same pill as .tmw-readmore__toggle. */ .toggleFollowing.quiet { display: inline-block; padding: 1px 8px; margin: 0 0 0 0; border: 1px solid #eaeaea; color: #088d94; font-family: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.8386rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.25px; } .toggleFollowing.quiet::after { display: none; } .toggle.hidden { display: none !important; } .toggleFollowing:focus-visible { outline: 2px solid #088d94; outline-offset: 2px; } /* --------------------------------------------- floated images on mobile The old theme stacked every left/right-floated content image to full width at 600px and under (style.css:4062, :4101, :4109). Nothing carried that over, so on the new site all 787 floated images in migrated content (430 blog, 343 magazine, 8 location, 3 initiative, 3 benefit) plus the one in a Location intro field keep floating at phone width with a few words of text wrapping down one side. Same breakpoint as production so the two sites switch at the same width. Production exempted images marked `keepsize` (13 of the 787) and let them stay at their pixel size. That exception is NOT kept: the request that prompted this was for one of them (/catskills-hudson-valley-ny/), and the rest are the same shape -- small teacher portraits beside a few lines. To restore production's behaviour for those 13, add `:not(.keepsize):not(.is-style-keepSize)` to the .wp-block-image selectors. WordPress renders the block two ways depending on its age -- `
` for older posts, `
` for newer -- so both are covered. Core's own rule is `.wp-block-image .alignleft { float:left }`; the Bricks-element prefix out-specifies it. The `` carries its size as an inline style, which only !important beats. Two Bricks elements render block markup: Post Content (.brxe-post-content) for the body, and Rich Text (.brxe-text) wherever a template prints an ACF WYSIWYG field -- the Location intro, for one (/cape-coral-naples/ floats a teacher portrait there). */ @media only screen and (max-width: 600px) { :is(.brxe-post-content, .brxe-text) .wp-block-image .alignleft, :is(.brxe-post-content, .brxe-text) .wp-block-image .alignright, :is(.brxe-post-content, .brxe-text) .wp-block-image.alignleft, :is(.brxe-post-content, .brxe-text) .wp-block-image.alignright { float: none; display: block; width: 100%; margin: 0 0 1.25rem 0; } :is(.brxe-post-content, .brxe-text) .wp-block-image .alignleft img, :is(.brxe-post-content, .brxe-text) .wp-block-image .alignright img, :is(.brxe-post-content, .brxe-text) .wp-block-image.alignleft img, :is(.brxe-post-content, .brxe-text) .wp-block-image.alignright img { display: block; width: 100% !important; height: auto !important; } } /* ----------------------------------------------------------- captions Bricks styles every caption generically -- `figcaption { color: var(--bricks-text-light); font-size: .9em; margin: 1em 0; text-align: center }` -- which is nothing like the old theme, so all 106 captions in migrated content (28 under videos, 52 under images, 26 in the older div-wrapped image markup) read light grey, a size too large, and centred. Values below are measured from production, not chosen. The two kinds are styled differently there and both are reproduced. Videos (old `.video p`, style.css:1056): Merriweather at 0.8386rem, left aligned, near-black, tight to the player, with a small grey caret in the left margin -- img/triangleRight.svg, inlined here so nothing points at the old theme. `rem` not `em` for the same reason as the duration badge: the parent font-size differs between the two sites. */ :is(.brxe-post-content, .brxe-text) .wp-block-embed figcaption { margin-top: 5px; margin-bottom: 1em; padding-left: 15px; background: url("data:image/svg+xml;utf8,") no-repeat 0 5px; background-size: 8px auto; color: #171a25; font-size: 0.8386rem; line-height: 1.8; text-align: left; } /* Images (old `.entryContent .wp-block-image figcaption`): Work Sans at 0.7407rem, centred under the image and held to 80% of its width, so a long caption wraps rather than running the full measure. The line-height is production's own `calc()` -- `em` there resolves against the caption's own font-size, giving 13.78px, not 16.85px. */ :is(.brxe-post-content, .brxe-text) .wp-block-image figcaption { max-width: 80%; margin: 5px auto 0; color: #171a25; font-family: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.7407rem; line-height: calc(0.7407407407em + 5px); text-align: center; } /* ------------------------------------------------ multi-column rows The site's content-rhythm rule -- `.brxe-post-content:not([data-source=bricks]) * + * { margin-block-start: var(--tmw-space-s) }` -- gives every sibling a top margin. Inside a `.wp-block-columns` flex row that lands on the 2nd..nth COLUMN, so each one sits 16px lower than the first: two videos side by side no longer line up (seen on /teens-and-young-women/), and so does every other two-column row. 79 columns across 25 posts are affected (initiatives 64, locations 10, blog 2, benefits 2, magazines 1). The columns block spaces its children with `gap`, so the row needs no margin of its own. Specificity here is (0,3,0) against the rhythm rule's (0,2,0) -- `:not()` counts its argument, which is what makes that rule punch above its weight. */ :is(.brxe-post-content, .brxe-text) .wp-block-columns > .wp-block-column { margin-block-start: 0; } /* ------------------------------------------------- unbreakable strings Bare URLs used as their own link text -- "To register: https://miu-edu- online.zoom.us/webinar/register/WN_...?_x_zm_rtaid=..." in august-2024 -- have no spaces to wrap on. 72 links across the migrated content carry a run of 40+ characters (blog 66, magazines 5, benefits 1; the longest is 277). At phone width one of these pushes the whole page wider than the viewport, so every page with one scrolls sideways. Production overflows too but its wrapper clips the excess; here nothing does. overflow-wrap is inherited, so the two content containers are enough. `anywhere` rather than `break-word` because it also counts toward min-content, which is what keeps a floated or flex sibling from being pushed around by the long string in the first place. */ :is(.brxe-post-content, .brxe-text) { overflow-wrap: anywhere; } /* ----------------------------------------------------------- video duration The teal clock badge on the corner of each thumbnail on /videos/, from the old theme's .videoThumbnailContainer .duration (style.css:1046). The number is not read from Vimeo -- on the old site it was a hand-typed `length` field next to each video, and it is typed here too. Bricks' Video element is a leaf, so the badge cannot live inside it. Add a Basic Text element with class `tmw-video-duration` directly AFTER the Video in the card, and this pulls it up over the video's bottom-left corner. The Video element on /videos/ has a 5px margin-bottom as its gap to the title. A sibling lands below that gap, so the badge is pulled up by its own height PLUS the gap, and puts the gap back beneath itself -- the title sits exactly where it did without the badge. If that spacing ever changes, change --tmw-video-gap to match. The clock is img/CLOCK.svg inlined so nothing references the old theme. */ .tmw-video-duration { --tmw-video-gap: 5px; position: relative; z-index: 3; /* above .bricks-video-overlay (1) and its play icon (2) */ width: fit-content; /* 5px + line-height + 5px = 23.78px, the badge's height on production */ margin: calc(-23.78px - var(--tmw-video-gap)) 0 var(--tmw-video-gap) 0; padding: 5px 10px 5px 28px; background: #088d94 url("data:image/svg+xml;utf8,") no-repeat 9px 6px; background-size: 11px auto; color: #fff; font-family: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Production: 0.7407em of a 16px parent = 11.85px. rem pins it there regardless of what Bricks sets on the card, same reasoning as the pill. */ font-size: 0.7407rem; font-weight: 500; /* Production's own rule. `em` here is the badge's font-size, so this is 8.78px + 5px = 13.78px, not 11.85px + 5px. */ line-height: calc(0.7407407407em + 5px); letter-spacing: -0.15px; text-transform: uppercase; pointer-events: none; /* the click belongs to the video underneath */ }