/* Components: the recurring LBS details. Used by templates, block styles/patterns and by the lbs-core plugin's blocks and Elementor widgets, which all print this same markup. */ /* The red rule under a heading (37 x 3). */ .lbs-rule, .is-style-lbs-rule { position: relative; padding-bottom: var(--lbs-space-4); margin-bottom: var(--lbs-space-4); } .lbs-rule::after, .is-style-lbs-rule::after { content: ''; position: absolute; left: 0; bottom: 0; width: var(--lbs-rule-w); height: var(--lbs-rule-h); background: var(--lbs-red); } .has-text-align-center.is-style-lbs-rule::after { left: calc(50% - var(--lbs-rule-w) / 2); } /* Lead paragraph: the opening paragraph of a page, larger (22/32; 20 on phones, through the fluid size). */ .is-style-lbs-lead { font-size: var(--lbs-fs-lg); line-height: var(--lbs-lh-lead); } /* "+ See more" */ .lbs-see-more, .lbs-see-more > a, .is-style-lbs-see-more a { font-weight: 500; text-decoration: none; } .lbs-see-more:not(li)::before, li.lbs-see-more > a::before, .is-style-lbs-see-more a::before { content: '+'; margin-right: 4px; color: var(--lbs-red); font-weight: 700; } /* The paragraph style's link is black and turns red on hover, like the LBS widget's and the old shortcode's (Kristinn, 2026-10-09), not red like a link in running text. */ .is-style-lbs-see-more a { color: inherit; } .is-style-lbs-see-more a:is(:hover, :focus-visible) { color: var(--lbs-red); } /* Buttons (Vefstaðall 7.5). The main button is red with white text, 2px frame, 6px corners, 16px bold, 44px tall, darker red on hover. The Button block (and the File block's button) take that look from theme.json (styles.elements.button); these rules give it to the theme's .lbs-button links, the search box's button and the submit buttons of plain forms in content (":is" so they outweigh base.css's reset of every button). */ .lbs-button, .lbs-search__button, :where(.entry-content, .comment-respond, .lbs-prose, .widget, .lbs-form) :is(input[type="submit"], button[type="submit"]:not([class])) { display: inline-block; padding: var(--lbs-space-2) var(--lbs-space-4); border: 2px solid var(--lbs-red); border-radius: var(--lbs-radius-control); background: var(--lbs-red); color: var(--lbs-white); font-family: inherit; font-size: var(--lbs-fs-sm); font-weight: 700; line-height: var(--lbs-lh-ui); text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--lbs-transition), color var(--lbs-transition), border-color var(--lbs-transition); } .lbs-button:is(:hover, :focus-visible), .lbs-search__button:is(:hover, :focus-visible), :where(.entry-content, .comment-respond, .lbs-prose, .widget, .lbs-form) :is(input[type="submit"], button[type="submit"]:not([class])):is(:hover, :focus-visible) { background: var(--lbs-red-dark); border-color: var(--lbs-red-dark); color: var(--lbs-white); } /* A button that cannot be used: grey, with a hairline frame (better, though, to let the visitor try and say what is missing). */ :is(.lbs-button, .lbs-search__button, .wp-block-button__link, :where(.entry-content, .comment-respond, .lbs-prose, .widget, .lbs-form) :is(input[type="submit"], button[type="submit"])):is(:disabled, [aria-disabled="true"]) { border-color: var(--lbs-border); background: var(--lbs-disabled-surface); color: var(--lbs-disabled-text); text-decoration: none; cursor: not-allowed; } /* The second button: white, red frame and red text; the Button block's "Outline" style. Colours an editor picked for the button itself win. */ .wp-block-button.is-style-outline > .wp-block-button__link, .lbs-button--secondary { padding: var(--lbs-space-2) var(--lbs-space-4); border: 2px solid var(--lbs-red); } .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background), .lbs-button--secondary { background: var(--lbs-white); } .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color), .lbs-button--secondary { color: var(--lbs-red); } .wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus-visible), .lbs-button--secondary:is(:hover, :focus-visible) { border-color: var(--lbs-red-dark); text-decoration: underline; } .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):is(:hover, :focus-visible), .lbs-button--secondary:is(:hover, :focus-visible) { background: var(--lbs-white); } .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):is(:hover, :focus-visible), .lbs-button--secondary:is(:hover, :focus-visible) { color: var(--lbs-red-dark); } /* On red and dark surfaces every button is white with black text (red on red would vanish). ":root" lets these outweigh the second-button rules above. */ :root :is(.has-accent-background-color, .has-accent-dark-background-color, .has-dark-background-color) :is(.wp-block-button__link:not(.has-background, .has-text-color), .lbs-button), :root :is(.has-accent-background-color, .has-accent-dark-background-color, .has-dark-background-color) :is(.wp-block-button__link:not(.has-background, .has-text-color), .lbs-button):is(:hover, :focus-visible) { border-color: var(--lbs-white); background: var(--lbs-white); color: var(--lbs-text); } :root :is(.has-accent-background-color, .has-accent-dark-background-color, .has-dark-background-color) :is(.wp-block-button__link:not(.has-background, .has-text-color), .lbs-button):is(:hover, :focus-visible) { text-decoration: underline; } /* Search results: a plain list in the reading column, one hairline between items. */ .lbs-search-page > * { max-width: var(--lbs-content); margin-inline: auto; } .lbs-results__count { margin: var(--lbs-space-5) 0 0; color: var(--lbs-muted); font-size: var(--lbs-fs-xs); } .lbs-results { list-style: none; margin-block: 0; padding: 0; } .lbs-results > li { padding-block: var(--lbs-space-5); border-top: 1px solid var(--lbs-border); } .lbs-result__title { margin: 0 0 var(--lbs-space-2); font-size: var(--lbs-fs-lg); font-weight: 500; } .lbs-result__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } .lbs-result .lbs-entry__meta { margin-bottom: var(--lbs-space-2); } .lbs-result__extract > :last-child { margin-bottom: 0; } .lbs-result__label { margin: 0 0 var(--lbs-space-1); color: var(--lbs-muted); font-size: var(--lbs-fs-xs); } .lbs-results__none { margin-top: var(--lbs-space-5); } /* With a plugin's additions (search.php): the page is wide; answers, side column and results share a grid. Below 992px one column in reading order. From 992px the side column sits on the right beside answers and results; the second row takes any extra height, so a tall side column never opens a gap under the answers. */ .lbs-search-page--extras > * { max-width: none; } .lbs-search-page--extras .lbs-page-header { max-width: var(--lbs-content); margin-inline: 0; } .lbs-search-layout { display: grid; gap: var(--lbs-space-5); margin-top: var(--lbs-space-5); } .lbs-search-layout > * { min-width: 0; } .lbs-search-layout__lead > :first-child, .lbs-search-layout__aside > :first-child { margin-top: 0; } .lbs-search-layout__results > .lbs-results__count:first-child { margin-top: 0; } @media (min-width: 992px) { .lbs-search-layout--aside { grid-template-columns: minmax(0, 1fr) minmax(16rem, 19rem); grid-template-rows: auto 1fr; column-gap: var(--lbs-space-7); align-items: start; } .lbs-search-layout--aside > .lbs-search-layout__lead { grid-column: 1; grid-row: 1; } .lbs-search-layout--aside > .lbs-search-layout__aside { grid-column: 2; grid-row: 1 / span 2; } .lbs-search-layout--aside > .lbs-search-layout__results { grid-column: 1; grid-row: 2; } .lbs-search-layout--aside > .lbs-search-layout__results:nth-child(2) { grid-row: 1 / span 2; } } /* The search across the library's websites (lbs-core inc/search-ui.php): the sites beside the results, each a link with its count, the chosen one in bold with a red edge; a notice when only this site could be searched; the link under a site's own results to the same words on every site. Matched words in an excerpt are bold, not coloured. */ .lbs-search-sites__title { margin: 0 0 var(--lbs-space-3); font-size: var(--lbs-fs-lg); line-height: var(--lbs-lh-heading); } .lbs-search-sites__list { list-style: none; margin: 0; padding: 0; } .lbs-search-sites__list a { display: flex; justify-content: space-between; gap: var(--lbs-space-3); padding: var(--lbs-space-2) var(--lbs-space-3); border-left: 3px solid transparent; color: var(--lbs-text); text-decoration: none; } .lbs-search-sites__list a:is(:hover, :focus-visible) { text-decoration: underline; } .lbs-search-sites__list a[aria-current] { border-left-color: var(--lbs-red); font-weight: 700; } .lbs-search-sites__count { color: var(--lbs-muted); font-variant-numeric: tabular-nums; } .lbs-search-notice { margin: 0; padding: var(--lbs-space-3) var(--lbs-space-4); border-left: 3px solid var(--lbs-red); background: var(--lbs-panel); } .lbs-search-all { margin: var(--lbs-space-5) 0 0; padding-top: var(--lbs-space-4); border-top: 1px solid var(--lbs-border); font-weight: 500; } .lbs-result__extract mark { background: none; color: inherit; font-weight: 700; } /* The reading column, except beside a side column from 992px, where the main column fills its track (option B of the design: otherwise a 200px gap opens between the results and the side column). */ .lbs-search-layout__lead, .lbs-search-layout__results { max-width: var(--lbs-content); } @media (min-width: 992px) { .lbs-search-layout--aside > :is(.lbs-search-layout__lead, .lbs-search-layout__results) { max-width: none; } } /* Cards */ .lbs-card-list { display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .lbs-card { display: flex; flex-direction: column; padding: 28px; background: var(--lbs-white); border: 1px solid var(--lbs-border-soft); transition: border-color var(--lbs-transition), box-shadow var(--lbs-transition); } .lbs-card:hover { border-color: var(--lbs-red); } /* A card in the post list is a flex item, whose least width was its longest word: a title such as "heiðursdoktorsnafnbót" at enlarged text pushed it wider than a phone. min-width 0 keeps the card to its column and the word wraps (body already breaks long words), so the page never scrolls sideways (WCAG 1.4.10). */ .lbs-card { min-width: 0; overflow-wrap: break-word; } .lbs-card__title { font-size: var(--lbs-fs-xl); } .lbs-card__body { flex: 1 1 auto; } .lbs-card__body > :last-child { margin-bottom: 0; } /* Four cards per row (lbs-core "columns" 4, and the "Icon link cards" pattern): one column on phones, two from 576px, four from 992px. */ .lbs-card-list--cols-4 { grid-template-columns: minmax(0, 1fr); } @media (min-width: 576px) { .lbs-card-list--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 992px) { .lbs-card-list--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* A short row centred (opt-in, the class "lbs-card-list--center" on the list's Group; not on a Query Loop's post template, whose cards are list items, and not together with --cols-4, which it would override): from 768px the cards are at most about a third of the wide column (22rem, ~352px) and stand in the middle instead of at the left, e.g. two cards on a page whose other blocks span the wide column (Kristinn, 2026-10-14: landsbokasafn.is "Dægurprent"). A wrapping row, not the grid: a grid with auto-fit counts its columns at their widest, so two cards went one under the other at 768px. A card starts at 300px as in the grid and as many share a line as fit; below 768px a card on its own line is as wide as the column, as in the grid. */ .lbs-card-list--center:not(.lbs-card-list--cols-4) { display: flex; flex-wrap: wrap; justify-content: center; } .lbs-card-list--center:not(.lbs-card-list--cols-4) > .lbs-card { flex: 1 1 min(100%, 300px); } @media (min-width: 768px) { .lbs-card-list--center:not(.lbs-card-list--cols-4) > .lbs-card { max-width: 22rem; } } /* The "Logo" image style: the picture whole at one height, never cropped, at the start of its line (a logo on a card, the "Cards with logos" pattern). A logo too wide for its box keeps its shape and gets lower. */ .wp-block-image.is-style-lbs-logo img { display: block; width: auto; max-width: 100%; height: var(--lbs-logo-height); object-fit: contain; object-position: left center; } .lbs-card > .wp-block-image.is-style-lbs-logo { margin-bottom: var(--lbs-space-2); } /* LBS icons (the lbs-core icon set) in cards and icon items. An Icon block anywhere gets the same size and red from theme.json (styles.blocks core/icon); here the colour sits on the wrapper so that it can darken when the card or item is hovered. A colour or width chosen on one Icon block is printed on its svg and still wins. */ :is(.lbs-card__icon, .lbs-icon-item__icon) { line-height: 0; color: var(--lbs-red); transition: color var(--lbs-transition); } :is(.lbs-card__icon, .lbs-icon-item__icon) svg { width: var(--lbs-icon-size); height: var(--lbs-icon-size); color: inherit; fill: currentColor; } .lbs-card__icon { margin-bottom: var(--lbs-space-3); } /* Whole card or item as one link (lbs-core link "card", icon items, and the patterns built from blocks): the title's link stretches over the box, so there is one link per card, named by its title, and its focus ring is drawn around the whole box. The arrow after a link card's title is decoration; the empty alternative text after the slash keeps it out of what screen readers read. A link card has the control corner, as the image tile and the wide tile do (square for content, rounded for what you operate: Kristinn, 2026-10-12); a card without a link stays square. The focus ring and a picture at the top of the card follow the corner. */ .lbs-card--link, .lbs-icon-item { position: relative; } .lbs-card--link { border-radius: var(--lbs-radius-control); } .lbs-card--link .lbs-card__title a::before { border-radius: var(--lbs-radius-control); } .lbs-card--link > .lbs-card__image:first-child img { border-radius: calc(var(--lbs-radius-control) - 1px) calc(var(--lbs-radius-control) - 1px) 0 0; } :is(.lbs-card--link .lbs-card__title, .lbs-icon-item__title) a::before { content: ''; position: absolute; inset: -1px; } :is(.lbs-card--link .lbs-card__title, .lbs-icon-item__title) a:focus-visible { outline: none; } :is(.lbs-card--link .lbs-card__title, .lbs-icon-item__title) a:focus-visible::before { outline: var(--lbs-focus-ring) solid var(--lbs-focus); outline-offset: 2px; } .lbs-card--link .lbs-card__title { margin-bottom: var(--lbs-space-3); font-size: var(--lbs-fs-lg); } .lbs-card--link .lbs-card__title a { color: inherit; } /* The symbol after a link card's or wide tile's title says where the link leads (Kristinn, 2026-10-15; design canvas "Link destination symbols", PDF option B): an arrow, a page on this site; an arrow up to the right, another site; an arrow onto a line, a PDF. It replaced the text arrow "→" in the same places and nowhere else ("+ Sjá meira" and other links have none). Masks in the link colour, drawn as lines (the stroke colour in the drawing only makes the mask opaque); the alternative text after the slash keeps the symbol out of what screen readers read, as the arrow was. The no-break space keeps the symbol on the line of the title's last word, and the mask sits in the padding after it. Another site: an address that starts with http(s):// or //; this site's own addresses are taken back out by a rule that inc/assets.php prints, as only PHP knows the site's address (lbs_link_symbol_css()). A PDF wins over both. Mail and phone links keep the arrow. */ :root, .editor-styles-wrapper { --lbs-icon-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E"); --lbs-icon-link-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E"); --lbs-icon-link-pdf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E"); } :is(.lbs-card--link .lbs-card__title, .lbs-tile-wide__title) a { --lbs-link-icon: var(--lbs-icon-link); } :is(.lbs-card--link .lbs-card__title, .lbs-tile-wide__title) a:is([href^="http://" i], [href^="https://" i], [href^="//"]) { --lbs-link-icon: var(--lbs-icon-link-external); } :is(.lbs-card--link .lbs-card__title, .lbs-tile-wide__title) a[href]:is([href$=".pdf" i], [href*=".pdf?" i], [href*=".pdf#" i]) { --lbs-link-icon: var(--lbs-icon-link-pdf); } /* A browser without masks (Chrome before 120, Safari before 15.4) keeps the text arrow for all three: without the @supports it would show a red block. */ :is(.lbs-card--link .lbs-card__title, .lbs-tile-wide__title) a::after { content: '\00a0\2192'; content: '\00a0\2192' / ''; color: var(--lbs-red); } @supports (mask-image: none) { :is(.lbs-card--link .lbs-card__title, .lbs-tile-wide__title) a::after { content: '\00a0'; content: '\00a0' / ''; padding-right: 0.9em; background-color: var(--lbs-red); /* Lowered from the middle of the line box to the middle of the lowercase letters (Kristinn, 2026-10-15): in DINish the box's middle is 0.4em above the baseline, the lowercase middle 0.26em. */ mask: var(--lbs-link-icon) right calc(50% + 0.14em) / 0.9em 0.9em no-repeat; } } .lbs-card--link:is(:hover, :focus-within) { border-color: var(--lbs-red); } :is(.lbs-card--link, .lbs-icon-item:has(.lbs-icon-item__title a)):hover :is(.lbs-card__icon, .lbs-icon-item__icon) { color: var(--lbs-red-dark); } /* Icon items: icon, title and a short line, side by side from 768px (the front page's panel for new students). The list is lbs-core's markup; the "Icon items" pattern builds the same from Groups. */ .lbs-icon-items { display: grid; gap: var(--lbs-space-6) var(--lbs-space-5); padding: 0; list-style: none; } ul.lbs-icon-items { margin-inline: 0; } @media (min-width: 768px) { .lbs-icon-items { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } } .lbs-icon-item { display: flex; flex-direction: column; gap: var(--lbs-space-2); } .lbs-icon-item:is(li, .wp-block-group) > * { margin: 0; } .lbs-icon-item__title { font-size: var(--lbs-fs-md); font-weight: 700; } .lbs-icon-item__title a { color: inherit; text-decoration: none; } .lbs-icon-item__title a:hover { color: var(--lbs-red); } .lbs-icon-item__text { color: var(--lbs-muted); font-size: var(--lbs-fs-xs); line-height: 1.45; } /* Panel */ .lbs-panel, .is-style-lbs-panel { padding: 43px 28px 30px; background: var(--lbs-panel); } .lbs-panel > :last-child, .is-style-lbs-panel > :last-child { margin-bottom: 0; } /* The service answer (Vefstaðall 8.1): grey ground, 4px red line on the left, square corners. The Group style "Service answer" (slug lbs-notice, earlier "Notice (red edge)") and lbs-core's notice part without a kind. */ .lbs-notice, .is-style-lbs-notice { padding: var(--lbs-space-4) var(--lbs-space-5); background: var(--lbs-panel); border-left: 4px solid var(--lbs-red); } /* Notices (7.7), four kinds: a pale ground, a 4px line on the left and an icon in the kind's colour; the text stays black, the corners square. The Group styles "Notice: information / success / warning / error" and lbs-core's notice part with a kind (lbs-notice--info ...). The patterns supply the bold first line that starts with the kind's word ("Upplýsingar:", "Tókst:", "Athugið:", "Villa:"): written in the content, so it follows the page's language. The icons are lbs-core's circle-i, circle-check, triangle-exclamation and octagon-cross (built outlines), copied here so that the theme does not depend on the plugin; they are masks, coloured by the line colour, and form errors use one too (forms.css). */ :root, .editor-styles-wrapper { --lbs-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.75 12A8.75 8.75 0 0 1 12 20.75A8.75 8.75 0 0 1 3.25 12A8.75 8.75 0 0 1 12 3.25A8.75 8.75 0 0 1 20.75 12ZM19.25 12A7.25 7.25 0 0 0 12 4.75A7.25 7.25 0 0 0 4.75 12A7.25 7.25 0 0 0 12 19.25A7.25 7.25 0 0 0 19.25 12ZM11.25 7.25L12.75 7.25L12.75 8.75L11.25 8.75ZM11.25 10.5L12.75 10.5L12.75 16.75L11.25 16.75Z'/%3E%3C/svg%3E"); --lbs-icon-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.75 12A8.75 8.75 0 0 1 12 20.75A8.75 8.75 0 0 1 3.25 12A8.75 8.75 0 0 1 12 3.25A8.75 8.75 0 0 1 20.75 12ZM19.25 12A7.25 7.25 0 0 0 12 4.75A7.25 7.25 0 0 0 4.75 12A7.25 7.25 0 0 0 12 19.25A7.25 7.25 0 0 0 19.25 12ZM7.47 12.78L8.53 11.72L11.28 14.47L10.22 15.53ZM11.293 15.518L10.207 14.482L15.457 8.982L16.543 10.018ZM10.75 15L11.293 15.518L10.762 16.073L10.22 15.53Z'/%3E%3C/svg%3E"); --lbs-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.224L22.035 20L1.965 20ZM12 5.276L4.535 18.5L19.465 18.5ZM11.25 9.25L12.75 9.25L12.75 14.25L11.25 14.25ZM11.25 15.75L12.75 15.75L12.75 17.25L11.25 17.25Z'/%3E%3C/svg%3E"); --lbs-icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.439 3.25L15.561 3.25L20.75 8.439L20.75 15.561L15.561 20.75L8.439 20.75L3.25 15.561L3.25 8.439ZM9.061 4.75L4.75 9.061L4.75 14.939L9.061 19.25L14.939 19.25L19.25 14.939L19.25 9.061L14.939 4.75ZM8.97 10.03L10.03 8.97L15.03 13.97L13.97 15.03ZM13.97 8.97L15.03 10.03L10.03 15.03L8.97 13.97Z'/%3E%3C/svg%3E"); } :is(.is-style-lbs-notice-info, .lbs-notice--info) { --lbs-notice-line: var(--lbs-border-strong); --lbs-notice-ground: var(--lbs-panel); --lbs-notice-icon: var(--lbs-icon-info); } :is(.is-style-lbs-notice-success, .lbs-notice--success) { --lbs-notice-line: var(--lbs-success); --lbs-notice-ground: var(--lbs-success-surface); --lbs-notice-icon: var(--lbs-icon-success); } :is(.is-style-lbs-notice-warning, .lbs-notice--warning) { --lbs-notice-line: var(--lbs-warning); --lbs-notice-ground: var(--lbs-warning-surface); --lbs-notice-icon: var(--lbs-icon-warning); } :is(.is-style-lbs-notice-error, .lbs-notice--error) { --lbs-notice-line: var(--lbs-error); --lbs-notice-ground: var(--lbs-error-surface); --lbs-notice-icon: var(--lbs-icon-error); } :is(.is-style-lbs-notice-info, .is-style-lbs-notice-success, .is-style-lbs-notice-warning, .is-style-lbs-notice-error, .lbs-notice--info, .lbs-notice--success, .lbs-notice--warning, .lbs-notice--error) { position: relative; padding: var(--lbs-space-4) var(--lbs-space-5) var(--lbs-space-4) calc(var(--lbs-space-5) + 24px + var(--lbs-space-3)); border-left: 4px solid var(--lbs-notice-line); background: var(--lbs-notice-ground); color: var(--lbs-text); } :is(.is-style-lbs-notice-info, .is-style-lbs-notice-success, .is-style-lbs-notice-warning, .is-style-lbs-notice-error, .lbs-notice--info, .lbs-notice--success, .lbs-notice--warning, .lbs-notice--error)::before { content: ""; position: absolute; top: calc(var(--lbs-space-4) + (var(--lbs-lh-body) * 1em - 24px) / 2); left: var(--lbs-space-5); width: 24px; height: 24px; background: var(--lbs-notice-line); mask: var(--lbs-notice-icon) center / 24px no-repeat; } :is(.lbs-notice, .is-style-lbs-notice, .is-style-lbs-notice-info, .is-style-lbs-notice-success, .is-style-lbs-notice-warning, .is-style-lbs-notice-error, .lbs-notice--info, .lbs-notice--success, .lbs-notice--warning, .lbs-notice--error) > * { margin-block: 0; } /* The bold first line and the text under it read as one: a small step between the parts. */ :is(.lbs-notice, .is-style-lbs-notice, .is-style-lbs-notice-info, .is-style-lbs-notice-success, .is-style-lbs-notice-warning, .is-style-lbs-notice-error, .lbs-notice--info, .lbs-notice--success, .lbs-notice--warning, .lbs-notice--error) > :not(:first-child) { margin-top: var(--lbs-space-2); } /* Meta line */ .lbs-entry__meta { color: var(--lbs-muted); font-size: var(--lbs-fs-xs); margin-bottom: var(--lbs-space-4); } /* Breadcrumb */ .lbs-crumb { font-size: var(--lbs-fs-xs); color: var(--lbs-muted); margin-bottom: var(--lbs-space-4); } .lbs-crumb a { text-decoration: underline; } /* Inside a card built from blocks, WordPress's gap between blocks is too loose. */ .lbs-card:is(.wp-block-group, .wp-block-column) > * { margin-block: 0; } .lbs-card:is(.wp-block-group, .wp-block-column) > * + * { margin-block-start: var(--lbs-space-3); } .lbs-card:is(.wp-block-group, .wp-block-column) > .is-style-lbs-rule { margin-bottom: var(--lbs-space-2); } /* A picture at the top of such a card (lbs-core's converter puts the post's featured image there) sits flush with the frame, as on lbs-core's own card; the rule above would otherwise keep it 28px down. */ .lbs-card:is(.wp-block-group, .wp-block-column) > .lbs-card__image { margin-top: -28px; } .lbs-card:is(.wp-block-group, .wp-block-column) > .lbs-card__image + * { margin-block-start: var(--lbs-space-5); } /* Block-editor equivalents: the same components built from standard blocks (see patterns/). */ .wp-block-columns.lbs-cards { gap: 28px; } /* Groups used as grids (the "Icon link cards" and "Icon items" patterns): no block margins, the grid's gap spaces them. */ .wp-block-group:is(.lbs-card-list, .lbs-icon-items) > * { margin-block: 0; } .wp-block-post-template.lbs-card-list { gap: 28px; } .wp-block-post-template.lbs-card-list > li { display: flex; min-width: 0; margin-block: 0; } .wp-block-post-template.lbs-card-list .lbs-card { flex: 1 1 auto; } .lbs-card .wp-block-post-title a { text-decoration: none; } .lbs-card .wp-block-post-excerpt__more-link { font-weight: 500; text-decoration: none; } .lbs-card .wp-block-post-excerpt__more-link::before { content: '+'; margin-right: 4px; color: var(--lbs-red); font-weight: 700; } /* List, "Plain list" style: no bullets and no left padding; a list nested inside it keeps an indent (and no bullets either) so that entries and their details read as a register. */ .wp-block-list.is-style-lbs-plain { list-style: none; padding-left: 0; } .wp-block-list.is-style-lbs-plain :is(ul, ol) { list-style: none; padding-left: var(--lbs-space-5); } /* Query Loop, "Compact list" style: an index of many short entries (a period's poems). One line per entry: title on the left, excerpt (the first line of a poem) on the right, in body-size text with hairlines between the rows; below 576px the excerpt drops under the title. The Post Title should be set to a paragraph (level 0) so that a long list does not become a hundred headings. */ .wp-block-query.is-style-lbs-compact-list .wp-block-post-template { margin: 0; padding: 0; gap: 0; list-style: none; } .wp-block-query.is-style-lbs-compact-list .wp-block-post-template > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--lbs-space-4); align-items: baseline; margin: 0; padding: var(--lbs-space-1) 0; border-bottom: 1px solid var(--lbs-border); } .wp-block-query.is-style-lbs-compact-list .wp-block-post-template > li > * { margin: 0; } .wp-block-query.is-style-lbs-compact-list .wp-block-post-template > li > .wp-block-group { display: contents; } .wp-block-query.is-style-lbs-compact-list .wp-block-post-title { font-size: var(--lbs-fs-sm); font-weight: 500; line-height: inherit; } .wp-block-query.is-style-lbs-compact-list .wp-block-post-title a { text-decoration: none; } .wp-block-query.is-style-lbs-compact-list .wp-block-post-title a:hover, .wp-block-query.is-style-lbs-compact-list .wp-block-post-title a:focus-visible { text-decoration: underline; } .wp-block-query.is-style-lbs-compact-list .wp-block-post-excerpt { font-size: var(--lbs-fs-sm); color: var(--lbs-muted); } .wp-block-query.is-style-lbs-compact-list .wp-block-post-excerpt__excerpt { margin: 0; } .wp-block-query.is-style-lbs-compact-list .wp-block-post-excerpt__more-text { display: none; } @media (max-width: 575.98px) { .wp-block-query.is-style-lbs-compact-list .wp-block-post-template > li { grid-template-columns: minmax(0, 1fr); } .wp-block-query.is-style-lbs-compact-list .wp-block-post-excerpt { font-size: var(--lbs-fs-xs); } } /* Query Loop, "Timeline" style: a chronology of child pages with pictures (leikminjasafn's Annáll, 2026-10-07). A red line down the left with a ring per entry; the picture whole, in its own proportions, in a 200px column (at most 260px tall); title and extract beside it, the text no wider than the reading column, so the block sets its own width and needs no alignment. Below 768px: title, picture, extract under each other. The whole entry is one link (the title's link stretched over it). Post template: Post Title (heading, linked), Post Featured Image (not linked), Post Excerpt, placed by class, so their order in the template does not matter. WordPress prints object-fit:cover on the picture, so the size is set without object-fit (both limits, nothing cut). The line is a border, not a background, so it stays in forced-colours mode. */ .wp-block-query.is-style-lbs-timeline { --lbs-timeline-pic: 200px; --lbs-timeline-gap: var(--lbs-space-5); --lbs-timeline-rail: var(--lbs-space-6); --lbs-timeline-width: calc(var(--lbs-content) + var(--lbs-timeline-pic) + var(--lbs-timeline-gap) + var(--lbs-timeline-rail)); } .wp-block-query.is-style-lbs-timeline:not(.alignfull) { max-width: var(--lbs-timeline-width); margin-inline: auto; } .lbs-full > .wp-block-query.is-style-lbs-timeline:not(.alignfull) { max-width: min(var(--lbs-timeline-width), var(--lbs-container-inner)); } .wp-block-query.is-style-lbs-timeline .wp-block-post-template { position: relative; margin: 0; padding: 0 0 0 var(--lbs-timeline-rail); list-style: none; } .wp-block-query.is-style-lbs-timeline .wp-block-post-template::before { content: ""; position: absolute; top: 0; bottom: 0; left: 7px; border-left: 2px solid var(--lbs-red); } .wp-block-query.is-style-lbs-timeline .wp-block-post-template > li { position: relative; display: grid; grid-template-columns: var(--lbs-timeline-pic) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--lbs-timeline-gap); margin: 0; padding: var(--lbs-space-5) 0; } .wp-block-query.is-style-lbs-timeline .wp-block-post-template > li::before { content: ""; position: absolute; top: calc(var(--lbs-space-5) + 0.35em); left: calc(-1 * var(--lbs-timeline-rail)); box-sizing: border-box; width: 16px; height: 16px; border: 3px solid var(--lbs-red); border-radius: 50%; background: var(--lbs-white); } .wp-block-query.is-style-lbs-timeline .wp-block-post-template > li > * { margin: 0; } .wp-block-query.is-style-lbs-timeline .wp-block-post-title { grid-column: 2; grid-row: 1; font-size: var(--lbs-fs-lg); } .wp-block-query.is-style-lbs-timeline .wp-block-post-featured-image { grid-column: 1; grid-row: 1 / span 2; } .wp-block-query.is-style-lbs-timeline .wp-block-post-featured-image img { width: auto; height: auto; max-width: 100%; max-height: 260px; } .wp-block-query.is-style-lbs-timeline li > .wp-block-post-excerpt { grid-column: 2; grid-row: 2; margin-top: var(--lbs-space-2); } .wp-block-query.is-style-lbs-timeline li:not(.has-post-thumbnail) > :is(.wp-block-post-title, .wp-block-post-excerpt) { grid-column: 1 / -1; max-width: var(--lbs-content); } .wp-block-query.is-style-lbs-timeline .wp-block-post-excerpt__excerpt { margin: 0; } .wp-block-query.is-style-lbs-timeline .wp-block-post-excerpt__more-text { display: none; } .wp-block-query.is-style-lbs-timeline .wp-block-post-title a { text-decoration: none; } .wp-block-query.is-style-lbs-timeline .wp-block-post-title a::before { content: ""; position: absolute; inset: 0; } .wp-block-query.is-style-lbs-timeline .wp-block-post-title a:focus-visible { outline: none; } .wp-block-query.is-style-lbs-timeline .wp-block-post-title a:focus-visible::before { outline: var(--lbs-focus-ring) solid var(--lbs-focus); outline-offset: 2px; } .wp-block-query.is-style-lbs-timeline li:hover .wp-block-post-title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } @media (max-width: 767.98px) { .wp-block-query.is-style-lbs-timeline { --lbs-timeline-rail: var(--lbs-space-5); } .wp-block-query.is-style-lbs-timeline .wp-block-post-template > li { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .wp-block-query.is-style-lbs-timeline .wp-block-post-template > li > * { grid-column: 1; grid-row: auto; } .wp-block-query.is-style-lbs-timeline li > .wp-block-post-featured-image { order: 2; margin-top: var(--lbs-space-3); } .wp-block-query.is-style-lbs-timeline .wp-block-post-featured-image img { max-height: 220px; } .wp-block-query.is-style-lbs-timeline .wp-block-post-excerpt { order: 3; } } /* Query Loop, "List with small picture" style: the latest posts as rows, the same look as lbs-core's [lbs_posts layout="list"] (.lbs-post-rows, further down), which it replaces on block pages. A square picture on the left (80px, 104px from 576px), cut from the middle, then date, title and a short excerpt, hairlines between. A post without a featured image has no picture column (the block prints nothing; in the editor its placeholder keeps the column). The title's link covers the row, as on a link card. Post template (patterns/post-rows.php): Post Featured Image (not linked, size medium, no aspect ratio: the square is cut here) and a Group "lbs-post-rows__text" holding Post Date, Post Title (linked) and Post Excerpt (22 words, no "read more"). */ .wp-block-query.is-style-lbs-post-rows .wp-block-post-template { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--lbs-border); } .wp-block-query.is-style-lbs-post-rows .wp-block-post-template > li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lbs-space-4); align-items: start; margin: 0; padding-block: var(--lbs-space-4); border-top: 1px solid var(--lbs-border); } .wp-block-query.is-style-lbs-post-rows .wp-block-post-template > li:has(> .wp-block-post-featured-image) { grid-template-columns: 5rem minmax(0, 1fr); } @media (min-width: 576px) { .wp-block-query.is-style-lbs-post-rows .wp-block-post-template > li:has(> .wp-block-post-featured-image) { grid-template-columns: 6.5rem minmax(0, 1fr); } } .wp-block-query.is-style-lbs-post-rows .wp-block-post-template > li > * { margin: 0; } .wp-block-query.is-style-lbs-post-rows .wp-block-post-featured-image { grid-column: 1; grid-row: 1; } .wp-block-query.is-style-lbs-post-rows .wp-block-post-featured-image img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; } .wp-block-query.is-style-lbs-post-rows .lbs-post-rows__text > * { margin: 0; } .wp-block-query.is-style-lbs-post-rows .lbs-post-rows__text > * + * { margin-top: var(--lbs-space-1); } .wp-block-query.is-style-lbs-post-rows .wp-block-post-date { color: var(--lbs-muted); font-size: var(--lbs-fs-xs); } .wp-block-query.is-style-lbs-post-rows .wp-block-post-title { font-size: var(--lbs-fs-md); font-weight: 700; line-height: var(--lbs-lh-heading); } .wp-block-query.is-style-lbs-post-rows .wp-block-post-title a { color: inherit; text-decoration: none; } .wp-block-query.is-style-lbs-post-rows .wp-block-post-title a::before { content: ""; position: absolute; inset: 0; } .wp-block-query.is-style-lbs-post-rows .wp-block-post-title a:focus-visible { outline: none; } .wp-block-query.is-style-lbs-post-rows .wp-block-post-title a:focus-visible::before { outline: var(--lbs-focus-ring) solid var(--lbs-focus); outline-offset: 2px; } .wp-block-query.is-style-lbs-post-rows li:hover .wp-block-post-title a { color: var(--lbs-red); } .wp-block-query.is-style-lbs-post-rows .wp-block-post-excerpt { color: var(--lbs-muted); font-size: var(--lbs-fs-xs); line-height: 1.45; } .wp-block-query.is-style-lbs-post-rows .wp-block-post-excerpt__excerpt { margin: 0; } .wp-block-query.is-style-lbs-post-rows .wp-block-post-excerpt__more-text { display: none; } /* The core Search block, dressed as the LBS search box (forms.css): its label, a field and the main button, stacked when narrower than 26rem. The "button inside" setting looks the same. Search blocks made before 1 Oct 2026 hide their label and have a magnifier on the button until an editor switches on "Show label" and off "Use button with icon". The field is always white, so its text colour is fixed too: inside a Cover block the inherited text colour is white, which made typed text invisible (and the placeholder too, in Firefox). */ .wp-block-search { --lbs-search-r: var(--lbs-radius-control); container-type: inline-size; } /* Label and box share the box's greatest width, centred: in the reading column they fill it, on a wide band (the "Search box on a grey band" pattern) they stand in the middle with the label over the box. */ .wp-block-search > * { max-width: var(--lbs-search-width); margin-inline: auto; } .wp-block-search .wp-block-search__label { display: block; margin-bottom: var(--lbs-space-1); font-weight: 700; } .wp-block-search .wp-block-search__inside-wrapper { gap: var(--lbs-space-2); padding: 0; border: 0; background: none; } .wp-block-search .wp-block-search__input { height: var(--lbs-target); padding: 0 var(--lbs-space-4); border: 1px solid var(--lbs-border-strong); border-radius: var(--lbs-search-r); background: var(--lbs-white); color: var(--lbs-text); font-size: var(--lbs-fs-sm); } .wp-block-search .wp-block-search__input::placeholder { color: var(--lbs-muted); opacity: 1; } /* The house focus ring (base.css), which WordPress's own rule for "button inside" takes away from the field (":where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input:focus"). */ .wp-block-search .wp-block-search__input:focus-visible { outline: var(--lbs-focus-ring) solid var(--lbs-focus); outline-offset: 2px; } .wp-block-search .wp-block-search__button { flex: none; margin: 0; padding-inline: var(--lbs-space-5); border-radius: var(--lbs-search-r); } .wp-block-search .wp-block-search__button svg { width: 24px; height: 24px; fill: currentColor; } @container (width < 26rem) { .wp-block-search .wp-block-search__inside-wrapper { flex-direction: column; } } /* On a Cover block's picture the label and box stand on a white panel, never straight on the photo (Vefstaðall 9.1), as on the picture strip; the Cover's white text does not reach them. */ .wp-block-cover .wp-block-search { padding: var(--lbs-space-4) var(--lbs-space-5); background: var(--lbs-white); color: var(--lbs-text); } @media (max-width: 575.98px) { .wp-block-cover .wp-block-search { padding: var(--lbs-space-4); } } .lbs-search-hero { padding-block: var(--lbs-space-8); } /* Picture strip ("LBS layout" box, lbs_picture_strip()): a picture edge to edge under the header, optionally with the search box on it. --lbs-strip-h is the editor's height (the ceiling in "shape" mode), --lbs-strip-ratio the picture's own proportions. */ .lbs-strip { position: relative; display: grid; place-items: center; padding-inline: var(--lbs-gutter); margin-bottom: var(--lbs-space-7); overflow: hidden; } .lbs-strip--fixed { height: var(--lbs-strip-h); } /* The explicit width keeps the strip edge to edge when the ceiling applies: with an auto width the browser would narrow the strip to keep the picture's shape. */ .lbs-strip--shape { width: 100%; aspect-ratio: var(--lbs-strip-ratio); max-height: var(--lbs-strip-h); } .lbs-strip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .lbs-strip--top .lbs-strip__img { object-position: center top; } .lbs-strip--bottom .lbs-strip__img { object-position: center bottom; } /* The search box sits on a white panel, its label with it: no text straight on a picture (Vefstaðall 9.1). A strip with the search box grows where the picture alone would be lower than the panel needs (phones, "shape" mode, large text): its height becomes a floor and nothing is cut off. */ .lbs-strip__search { position: relative; width: 100%; max-width: var(--lbs-search-width); } .lbs-strip__search .lbs-search-form { max-width: none; padding: var(--lbs-space-4) var(--lbs-space-5); background: var(--lbs-white); } .lbs-strip--search { padding-block: var(--lbs-space-5); overflow: visible; } .lbs-strip--search.lbs-strip--fixed { height: auto; min-height: var(--lbs-strip-h); } .lbs-has-strip .lbs-main { padding-top: 0; } /* In the full-width template the strip is spaced like the first block of the page body. */ .lbs-main--full > .lbs-strip { margin-bottom: var(--lbs-space-5); } @media (max-width: 767.98px) { .lbs-strip { margin-bottom: var(--lbs-space-5); } } @media (max-width: 575.98px) { .lbs-strip--fixed { height: calc(var(--lbs-strip-h) * 2 / 3); } .lbs-strip--search.lbs-strip--fixed { height: auto; min-height: calc(var(--lbs-strip-h) * 2 / 3); } .lbs-strip__search .lbs-search-form { padding: var(--lbs-space-4); } } /* Signature picture: the block style "Signature picture" on the Media & Text block, and the lbs-core component .lbs-signature (Elementor widget "LBS signature picture"): one look, so every rule names both. The text starts under the logo; the picture fills the other half out to the edge of the screen and fades into the page on the text side, and the text may run on into the faintest part of that fade. The picture's height follows its width between a floor and a ceiling, never the height of the window, so a tall or narrow window cannot crop it to a sliver; the focal point decides which part stays in view. Below 992px the picture goes above the text, full width, and the title starts on its faded bottom edge. The block: two of its own settings are overruled, the media width slider (the columns are fixed here) and whether the picture fills its box (it always does); the "div." adds just enough weight to beat the block's own stylesheet wherever WordPress prints it. */ :is(div.wp-block-media-text.is-style-lbs-signature, .lbs-signature) { /* Picture height: a share of the block's width, between a floor and a ceiling. Below 992px the picture is the full width, so it is kept flat, and never more than 40% of the window's height (a phone held sideways); editors can make it lower or taller there (presets below). Beside the text it is also as tall as the text. */ --lbs-sig-h: 33cqw; --lbs-sig-h-min: min(10rem, 40vh); --lbs-sig-h-max: min(18rem, 40vh); --lbs-sig-fade: clamp(3rem, 10cqw, 6rem); --lbs-sig-overlap: calc(var(--lbs-sig-fade) * 0.4); /* how far the text may reach into the fade */ --lbs-sig-fade-to: to top; container-type: inline-size; } div.wp-block-media-text.is-style-lbs-signature { margin-bottom: var(--lbs-space-7); } /* The component reaches the edges of the screen by itself, wherever it sits in an Elementor layout. */ .lbs-signature { display: grid; width: 100vw; margin-inline: calc(50% - 50vw); } :is(div.wp-block-media-text.is-style-lbs-signature, .lbs-signature) > :is(.wp-block-media-text__content, .lbs-signature__text) { position: relative; z-index: 1; padding: var(--lbs-space-7) 0 var(--lbs-space-8); /* a step less above: the header is right there */ } /* Block only (in Elementor the widgets' own settings do this): the same rhythm as between the blocks of the page. The title is an ordinary H1, the same size as everywhere else (Kristinn, 2026-09-28). */ div.wp-block-media-text.is-style-lbs-signature > .wp-block-media-text__content > * { margin-block: 0 var(--lbs-space-5); } div.wp-block-media-text.is-style-lbs-signature > .wp-block-media-text__content > :last-child { margin-bottom: 0; } div.wp-block-media-text.is-style-lbs-signature .wp-block-search > * { margin-inline: 0; } :is(div.wp-block-media-text.is-style-lbs-signature, .lbs-signature) > :is(.wp-block-media-text__media, .lbs-signature__media) { position: relative; align-self: stretch; height: auto; min-height: clamp(var(--lbs-sig-h-min), var(--lbs-sig-h), var(--lbs-sig-h-max)); margin: 0; } :is(div.wp-block-media-text.is-style-lbs-signature, .lbs-signature) > :is(.wp-block-media-text__media, .lbs-signature__media) :is(img, video) { /* The fade eases in: under its first 40%, where the text may reach, the picture shows at a tenth of its strength or less. Even over black that keeps AA contrast (4.5:1) for the body text and for red links. A mask uses only the alpha of its colours, so any token will do. */ --lbs-sig-mask: linear-gradient( var(--lbs-sig-fade-to), transparent, color-mix(in srgb, var(--lbs-text) 10%, transparent) calc(var(--lbs-sig-fade) * 0.4), color-mix(in srgb, var(--lbs-text) 28%, transparent) calc(var(--lbs-sig-fade) * 0.6), color-mix(in srgb, var(--lbs-text) 57%, transparent) calc(var(--lbs-sig-fade) * 0.8), var(--lbs-text) var(--lbs-sig-fade) ); position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; -webkit-mask-image: var(--lbs-sig-mask); mask-image: var(--lbs-sig-mask); } @media (min-width: 992px) { /* Columns: the picture, the text, the margin; mirrored for the picture on the right. The margin is the header's, so the text starts under the logo, and the picture takes exactly half the width. max() keeps a gutter if the block is narrower than the screen (not set to full width). */ :is(div.wp-block-media-text.is-style-lbs-signature, .lbs-signature) { --lbs-sig-edge: max(var(--lbs-gutter), (100% - var(--lbs-wide)) / 2); --lbs-sig-h: 37.5cqw; /* the picture is half the width: a 4:3 box */ --lbs-sig-h-min: 20rem; --lbs-sig-h-max: 40rem; --lbs-sig-fade: clamp(6rem, 20cqw, 20rem); --lbs-sig-fade-to: to left; grid-template-columns: minmax(0, 1fr) calc(50% - var(--lbs-sig-edge)) var(--lbs-sig-edge) !important; } :is(div.wp-block-media-text.is-style-lbs-signature.has-media-on-the-right, .lbs-signature--media-right) { --lbs-sig-fade-to: to right; grid-template-columns: var(--lbs-sig-edge) calc(50% - var(--lbs-sig-edge)) minmax(0, 1fr) !important; } /* The text reaches over the start of the picture, but never wider than the reading column. */ :is(div.wp-block-media-text.is-style-lbs-signature, .lbs-signature) > :is(.wp-block-media-text__content, .lbs-signature__text) { grid-column: 2; grid-row: 1; max-width: var(--lbs-content); margin-left: calc(-1 * var(--lbs-sig-overlap)); } :is(div.wp-block-media-text.is-style-lbs-signature, .lbs-signature) > :is(.wp-block-media-text__media, .lbs-signature__media) { grid-column: 1; grid-row: 1; } :is(div.wp-block-media-text.is-style-lbs-signature.has-media-on-the-right, .lbs-signature--media-right) > :is(.wp-block-media-text__content, .lbs-signature__text) { margin-left: 0; margin-right: calc(-1 * var(--lbs-sig-overlap)); } :is(div.wp-block-media-text.is-style-lbs-signature.has-media-on-the-right, .lbs-signature--media-right) > :is(.wp-block-media-text__media, .lbs-signature__media) { grid-column: 3; } /* "Picture height on wide screens" (set like the narrow-screen choice below): the shape of the picture's box, in even steps from 2:1 (Very low) through 8:5, 4:3 (Medium, above) and 8:7 to square (Very tall), each between its own floor and ceiling. "As tall as the text" has no floor at all. Longer text still makes any of them taller. */ :is(div.wp-block-media-text.is-style-lbs-signature, .lbs-signature).lbs-sig-wide-text { --lbs-sig-h: 0px; --lbs-sig-h-min: 0px; } :is(div.wp-block-media-text.is-style-lbs-signature, .lbs-signature).lbs-sig-wide-very-low { --lbs-sig-h: 25cqw; --lbs-sig-h-min: 14rem; --lbs-sig-h-max: 28rem; } :is(div.wp-block-media-text.is-style-lbs-signature, .lbs-signature).lbs-sig-wide-low { --lbs-sig-h: 31.25cqw; --lbs-sig-h-min: 17rem; --lbs-sig-h-max: 34rem; } :is(div.wp-block-media-text.is-style-lbs-signature, .lbs-signature).lbs-sig-wide-tall { --lbs-sig-h: 43.75cqw; --lbs-sig-h-min: 22rem; --lbs-sig-h-max: 44rem; } :is(div.wp-block-media-text.is-style-lbs-signature, .lbs-signature).lbs-sig-wide-very-tall { --lbs-sig-h: 50cqw; --lbs-sig-h-min: 24rem; --lbs-sig-h-max: 48rem; } } @media (max-width: 991.98px) { :is(div.wp-block-media-text.is-style-lbs-signature, .lbs-signature) { grid-template-columns: 100% !important; } /* "Picture height on narrow screens" (block: side panel, assets/js/signature-editor.js; Elementor: the widget's settings). Minimal also shortens the fade, which would otherwise cover half of so low a picture. */ :is(div.wp-block-media-text.is-style-lbs-signature, .lbs-signature).lbs-sig-narrow-minimal { --lbs-sig-h: 18cqw; --lbs-sig-h-min: min(6rem, 40vh); --lbs-sig-h-max: min(10rem, 40vh); --lbs-sig-fade: clamp(2rem, 6cqw, 3rem); } :is(div.wp-block-media-text.is-style-lbs-signature, .lbs-signature).lbs-sig-narrow-low { --lbs-sig-h: 25cqw; --lbs-sig-h-min: min(8rem, 40vh); --lbs-sig-h-max: min(14rem, 40vh); } :is(div.wp-block-media-text.is-style-lbs-signature, .lbs-signature).lbs-sig-narrow-tall { --lbs-sig-h: 50cqw; --lbs-sig-h-min: min(12rem, 40vh); --lbs-sig-h-max: min(24rem, 40vh); } :is(div.wp-block-media-text.is-style-lbs-signature, .lbs-signature) > :is(.wp-block-media-text__media, .lbs-signature__media) { grid-column: 1; grid-row: 1; } /* The title starts on the faded bottom edge of the picture; the text lines up with the logo (layout.css; the block editor, which does not load that file, gets the fallback). */ :is(div.wp-block-media-text.is-style-lbs-signature, .lbs-signature) > :is(.wp-block-media-text__content, .lbs-signature__text) { grid-column: 1; grid-row: 2; width: min(var(--lbs-content), var(--lbs-container-inner, 100% - 2 * var(--lbs-gutter))); margin: calc(-1 * var(--lbs-sig-overlap)) auto 0; padding: 0; } /* The Elementor widget: the space below that the block gets from its own margin (above), so that what follows (on landsbokasafn.is, the grey newcomers' panel) does not touch the search box. */ /* (div … class twice: the shared rule above, which sets padding 0, weighs one element and three classes.) */ div.lbs-signature > div.lbs-signature__text.lbs-signature__text { padding-bottom: var(--lbs-space-7); } } /* Components printed by the lbs-core plugin (blocks and Elementor widgets) */ .lbs-card__image { margin: -28px -28px var(--lbs-space-5); } .lbs-card__image img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .lbs-card__title a { text-decoration: none; } .lbs-post-list .lbs-see-more-wrap { margin: var(--lbs-space-5) 0 0; } .lbs-see-more-wrap { margin-bottom: 0; } .lbs-section-heading { margin-top: 0; } /* The red band under the header (lbs-core inc/announcements.php, printed at the theme's lbs_header_notices hook): the announcement on the left, today's opening hours on the right, even when alone. Below 768px the two stack, the announcement first, and the hours sit on the left. "has-accent-background-color" gives the white focus ring of red surfaces (base.css). The thin band is an every-page announcement. */ .lbs-band { background: var(--lbs-red); color: var(--lbs-white); font-size: var(--lbs-fs-sm); line-height: var(--lbs-lh-ui); } .lbs-band__inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--lbs-space-2) var(--lbs-space-6); padding-block: var(--lbs-space-3); } .lbs-band--thin .lbs-band__inner { padding-block: var(--lbs-space-2); } .lbs-band .lbs-band__notice { flex: 1 1 24rem; margin: 0; } .lbs-band .lbs-band__notice strong { font-weight: 700; } .lbs-band .lbs-band__hours { flex: 0 1 auto; margin: 0; font-weight: 700; } @media (min-width: 768px) { .lbs-band .lbs-band__hours { margin-left: auto; text-align: right; } } .lbs-band a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } .lbs-band a:hover { color: inherit; text-decoration-thickness: 2px; } .lbs-hours__link { white-space: nowrap; } /* Latest posts as a list with a small picture (lbs-core layout "list"; the front page's news and exhibitions): one row per post, the picture a square on the left, then date, title and a short excerpt, hairlines between. The title's link covers the row, as on a link card. */ .lbs-post-rows { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--lbs-border); } .lbs-post-row { position: relative; display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--lbs-space-4); align-items: start; margin: 0; padding-block: var(--lbs-space-4); border-top: 1px solid var(--lbs-border); } @media (min-width: 576px) { .lbs-post-row { grid-template-columns: 6.5rem minmax(0, 1fr); } } .lbs-post-row--no-image { grid-template-columns: minmax(0, 1fr); } .lbs-post-row__image img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; } .lbs-post-row__text > * { margin: 0; } .lbs-post-row__text > * + * { margin-top: var(--lbs-space-1); } .lbs-post-row__title { font-size: var(--lbs-fs-md); font-weight: 700; line-height: var(--lbs-lh-heading); } .lbs-post-row__title a { color: inherit; text-decoration: none; } .lbs-post-row__title a::before { content: ''; position: absolute; inset: 0; } .lbs-post-row__title a:focus-visible { outline: none; } .lbs-post-row__title a:focus-visible::before { outline: var(--lbs-focus-ring) solid var(--lbs-focus); outline-offset: 2px; } .lbs-post-row:hover .lbs-post-row__title a { color: var(--lbs-red); } .lbs-post-row__excerpt { color: var(--lbs-muted); font-size: var(--lbs-fs-xs); line-height: 1.45; } /* Feature band (lbs-core; front page inventory F6): a dark band from edge to edge of the screen with the newest post of a category. Picture and text side by side from 768px, the picture above below it. The picture is shown whole ("contain" on the dark ground, so no visible bars): a treasure is an object and must not be cropped. The small line over the heading is white: red text on this ground is 2.8:1. Two classes in each heading and text rule so that Elementor's kit (".elementor-kit-N h2", one class and an element) cannot turn them black. */ .lbs-feature-band { width: 100vw; margin-inline: calc(50% - 50vw); padding-block: var(--lbs-space-8); background: var(--lbs-dark); color: var(--lbs-white); } .lbs-feature-band__inner { display: grid; grid-template-columns: minmax(0, 1fr); /* a long word at large text sizes must not widen the column */ gap: var(--lbs-space-6); max-width: calc(var(--lbs-wide) + 2 * var(--lbs-gutter)); margin-inline: auto; padding-inline: var(--lbs-gutter); } @media (min-width: 768px) { .lbs-feature-band__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--lbs-space-8); } .lbs-feature-band--no-image .lbs-feature-band__inner { grid-template-columns: minmax(0, var(--lbs-content)); } } .lbs-feature-band__media { margin: 0; } .lbs-feature-band__media img { display: block; width: 100%; height: auto; max-height: 28rem; object-fit: contain; } .lbs-feature-band .lbs-feature-band__text > * { margin: 0; color: inherit; overflow-wrap: break-word; } .lbs-feature-band .lbs-feature-band__eyebrow { margin-bottom: var(--lbs-space-2); font-size: var(--lbs-fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .lbs-feature-band .lbs-feature-band__heading { margin-bottom: var(--lbs-space-4); } .lbs-feature-band .lbs-feature-band__intro > * { margin: 0 0 var(--lbs-space-3); } .lbs-feature-band .lbs-feature-band__intro > :last-child { margin-bottom: 0; } .lbs-feature-band .lbs-feature-band__rule { display: block; width: var(--lbs-rule-w); height: var(--lbs-rule-h); margin-block: var(--lbs-space-5); background: var(--lbs-red); } .lbs-feature-band .lbs-feature-band__title { margin-bottom: var(--lbs-space-2); font-size: var(--lbs-fs-lg); } .lbs-feature-band .lbs-feature-band__excerpt { margin-bottom: var(--lbs-space-5); } /* A band showing a category's newest post may have a "+ See more" link beside the button, to the page that lists the category (Kristinn, 2026-10-13, option 1 of the design canvas). White and underlined on the dark ground: the house "+" is red, 2.8:1 here. The row wraps, so on a narrow screen the link goes under the button. */ .lbs-feature-band .lbs-feature-band__action--more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lbs-space-2) var(--lbs-space-6); } .lbs-feature-band .lbs-feature-band__more { padding-block: var(--lbs-space-2); color: var(--lbs-white); font-size: var(--lbs-fs-sm); font-weight: 700; line-height: var(--lbs-lh-ui); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } /* The "+" is not underlined (an inline block takes no part in its parent's underline), as the house link's. */ .lbs-feature-band .lbs-feature-band__more::before { content: '+'; display: inline-block; margin-right: 4px; } .lbs-feature-band .lbs-feature-band__more:is(:hover, :focus-visible) { text-decoration-thickness: 2px; } /* Chat with staff (lbs-core inc/chat.php): a button at the foot of the screen, on the right, and the panel that opens in its place. Not modal: the page stays usable beside it. compat-elementor.css restates the buttons for Elementor pages, whose kit restyles every button. */ .lbs-chat__open[hidden], .lbs-chat__panel[hidden] { display: none; } .lbs-chat__open { position: fixed; right: 0; bottom: var(--lbs-space-5); z-index: 90; display: flex; align-items: center; gap: var(--lbs-space-3); min-height: var(--lbs-target); padding: var(--lbs-space-2) var(--lbs-space-4); border: 1px solid var(--lbs-border-strong); border-right: 0; border-radius: var(--lbs-radius-control) 0 0 var(--lbs-radius-control); background: var(--lbs-white); color: var(--lbs-red); font-family: inherit; font-size: var(--lbs-fs-sm); font-weight: 700; line-height: var(--lbs-lh-ui); box-shadow: 0 2px 8px color-mix(in srgb, var(--lbs-text) 18%, transparent); cursor: pointer; } .lbs-chat__open:is(:hover, :focus-visible) { background: var(--lbs-red); color: var(--lbs-white); } .lbs-chat__icon { flex: none; width: 1.5rem; height: 1.5rem; fill: currentColor; } @media (max-width: 575.98px) { .lbs-chat__open { bottom: var(--lbs-space-3); padding-inline: var(--lbs-space-3); font-size: var(--lbs-fs-xs); } } .lbs-chat__panel { position: fixed; right: 0; bottom: 0; z-index: 100; display: flex; flex-direction: column; width: min(24rem, 100vw); height: min(36rem, 85vh); border: 1px solid var(--lbs-border-strong); background: var(--lbs-white); box-shadow: 0 2px 12px color-mix(in srgb, var(--lbs-text) 22%, transparent); } .lbs-chat__head { display: flex; align-items: center; justify-content: space-between; gap: var(--lbs-space-3); padding: var(--lbs-space-1) var(--lbs-space-1) var(--lbs-space-1) var(--lbs-space-4); background: var(--lbs-red); color: var(--lbs-white); } .lbs-chat__head .lbs-chat__title { margin: 0; color: inherit; font-size: var(--lbs-fs-md); line-height: var(--lbs-lh-ui); } .lbs-chat__close { min-width: var(--lbs-target); min-height: var(--lbs-target); padding: 0; border: 0; border-radius: var(--lbs-radius-control); background: transparent; color: inherit; font-family: inherit; font-size: 1.75rem; line-height: 1; cursor: pointer; } .lbs-chat__close:hover { background: var(--lbs-red-dark); } .lbs-chat__note { margin: var(--lbs-space-3) var(--lbs-space-4) 0; font-size: var(--lbs-fs-xs); } .lbs-chat__frame { flex: 1 1 auto; min-height: 0; padding: var(--lbs-space-3); } /* LibraryH3lp gives its frame a size of its own; the panel decides. */ .lbs-chat__frame iframe { display: block; width: 100% !important; height: 100% !important; border: 0; } /* Routing pointers (Vefstaðall 8.2, pattern "Routing pointers"): where the answer is in another system, up to four pointers side by side, each the system's name as a link and one line on what is found there, under a 2px red line; one under another when the row is narrower than 30rem (two columns of 14.25rem and the gap between them need exactly that, so the grid itself decides, wherever it sits). */ .lbs-pointers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.25rem), 1fr)); gap: var(--lbs-space-5); } .lbs-pointers .lbs-pointer { margin: 0; padding-top: var(--lbs-space-3); border-top: 2px solid var(--lbs-red); } .lbs-pointer > * { margin-block: 0; } .lbs-pointer > * + * { margin-top: var(--lbs-space-1); } .lbs-pointer > :first-child { font-weight: 700; } /* Destination list (8.3): a List block style. The places in order of use, each its name as a link and a line on what is there (editors write the link, Shift+Enter, the line), hairlines between. */ .wp-block-list.is-style-lbs-destinations { list-style: none; padding-left: 0; border-top: 1px solid var(--lbs-border); } .wp-block-list.is-style-lbs-destinations > li { margin: 0; padding-block: var(--lbs-space-3); border-bottom: 1px solid var(--lbs-border); color: var(--lbs-muted); } .wp-block-list.is-style-lbs-destinations > li > a:first-child { font-weight: 700; } /* Banners: wide picture links, two side by side, title and caption centred over the picture on a white panel of their own, never straight on the photo (Vefstaðall 9.1); a small "Open website" line, on white too, appears along the bottom edge on hover and the box lifts a little (lbs-core, LBS banners). Nothing changes size in the flow, so the neighbour stays as it is. */ .lbs-banners { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); } .lbs-banner { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 137px; padding: var(--lbs-space-3) var(--lbs-space-4) var(--lbs-space-5); border: 1px solid var(--lbs-border-soft); background: var(--lbs-white); color: var(--lbs-text); text-align: center; text-decoration: none; overflow: hidden; transition: transform var(--lbs-transition), box-shadow var(--lbs-transition), border-color var(--lbs-transition); } .lbs-banner__image { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; } .lbs-banner__text { position: relative; z-index: 1; padding: var(--lbs-space-2) var(--lbs-space-4); background: var(--lbs-white); } .lbs-banner__title { display: block; font-size: var(--lbs-fs-xl); line-height: var(--lbs-lh-tight); font-weight: 500; color: var(--lbs-red); } .lbs-banner__caption { display: block; margin-top: var(--lbs-space-1); font-size: var(--lbs-fs-md); } .lbs-banner__more { position: absolute; z-index: 1; left: 50%; bottom: 4px; padding: var(--lbs-space-1) var(--lbs-space-3) 0; font-size: var(--lbs-fs-sm); font-weight: 500; border-top: 1px solid var(--lbs-border); background: var(--lbs-white); opacity: 0; transform: translate(-50%, 8px); transition: opacity var(--lbs-transition), transform var(--lbs-transition); } .lbs-banner:hover, .lbs-banner:focus-visible { z-index: 1; color: var(--lbs-text); border-color: var(--lbs-red); box-shadow: 0 12px 24px rgb(0 0 0 / 0.1); transform: scale(1.02); } .lbs-banner:hover .lbs-banner__more, .lbs-banner:focus-visible .lbs-banner__more { opacity: 1; transform: translate(-50%, 0); } /* Image tiles ("reitir"): the row of picture links used on LBS front pages (Safnkostur, Kvennafrí…). A tile is one link and is drawn as something you operate: a thin frame round the picture and round the label under it, with the control corner. On hover or keyboard focus the label turns red with white text, and the line between picture and label with it; the picture does not move. (Until 2026-10-02 the picture zoomed under an overlay: a white frame, a magnifier and the LBS mark.) A tile can be 2–4 columns wide (lbs-core "width"); on screens with fewer columns it fills the row. Tiles keep their order, so a tile spanning several columns that does not fit moves to the next row. The row is 4 columns from 992px unless it has the "lbs-tiles--cols-3" class (lbs-core "columns"), which keeps it at 3. */ .lbs-tiles { --lbs-tile-gap: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 35px var(--lbs-tile-gap); margin-block: 0 var(--lbs-space-7); padding: 0; list-style: none; } .lbs-tiles > li { display: flex; margin: 0; } @media (min-width: 768px) { .lbs-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 992px) { .lbs-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 55px; } } @media (max-width: 575.98px) { .lbs-tiles { --lbs-tile-gap: 16px; row-gap: 24px; } } /* Three-column variant: stays at 3 from 768px up, never grows to 4 at 992px. */ @media (min-width: 992px) { .lbs-tiles.lbs-tiles--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 55px; } } .lbs-tile { display: flex; width: 100%; overflow: hidden; border-radius: var(--lbs-radius-control); color: inherit; text-decoration: none; } /* The tile fills its cell and the label takes what is left, so the labels in one row end level, also when one of them needs two lines. */ .lbs-tile figure { display: flex; flex-direction: column; width: 100%; margin: 0; } /* The frame runs all round the picture, so a picture with a white ground keeps its shape on the white page and against the white label. */ .lbs-tile__img { position: relative; overflow: hidden; aspect-ratio: 17 / 16; border: 1px solid var(--lbs-border-soft); border-radius: var(--lbs-radius-control) var(--lbs-radius-control) 0 0; background: var(--lbs-text); transition: border-color var(--lbs-transition); } .lbs-tile__img img { display: block; width: 100%; height: 100%; object-fit: cover; } /* The label's own frame is its sides and foot; the line above it is the picture's. */ .lbs-tile__label { display: flex; flex: 1 0 auto; align-items: center; justify-content: center; margin: 0; padding: 14px 17px 13px; border: 1px solid var(--lbs-border-soft); border-top: 0; border-radius: 0 0 var(--lbs-radius-control) var(--lbs-radius-control); background: var(--lbs-white); color: var(--lbs-text); font-size: var(--lbs-fs-md); font-weight: 500; line-height: 24px; text-align: center; transition: background-color var(--lbs-transition), border-color var(--lbs-transition), color var(--lbs-transition); } .lbs-tile:hover .lbs-tile__img, .lbs-tile:focus-visible .lbs-tile__img { border-bottom-color: var(--lbs-red); } .lbs-tile:hover .lbs-tile__label, .lbs-tile:focus-visible .lbs-tile__label { border-color: var(--lbs-red); background: var(--lbs-red); color: var(--lbs-white); } @media (max-width: 575.98px) { .lbs-tile__label { padding: 10px 12px; font-size: var(--lbs-fs-sm); } } /* The wide tile (lbs-core lbs_core_render_tile_wide(), block "LBS wide tile"): the image tile across the wide column, with a title and a line or two of text beside the picture. One frame with the control corner round picture and text, and the tile's hover and keyboard focus: the text side fills red with white text, and the frame and the line beside the picture turn red; the picture does not move. As on a link card, the title's link covers the whole tile, so the picture is part of the link and the focus ring is drawn round the whole tile. Picture above the text on narrow screens, beside it from 768px. No overflow:hidden: it would cut off the focus ring, so the picture and the text side round their own corners. The looks (lbs-core: text side, picture height, text width; the defaults have no class): - picture height: small 180px, medium 250px, large 350px (280px on narrow screens); beside the text a minimum (a longer text makes the tile taller), above it the height itself; "minimal" is as tall as the text beside it and small above it - text on the left: the picture moves to the right from 768px; above the text on narrow screens as always - text width: two fifths of the tile, or a third or a quarter from 992px (narrower, a quarter of the column would leave the text too little room) */ .lbs-tile-wide { --lbs-tile-wide-inner: calc(var(--lbs-radius-control) - 1px); --lbs-tile-wide-picture: 250px; --lbs-tile-wide-pic-fr: 3fr; /* picture : text = 3 : 2 */ --lbs-tile-wide-text-fr: 2fr; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--lbs-border-soft); border-radius: var(--lbs-radius-control); background: var(--lbs-white); color: var(--lbs-text); transition: border-color var(--lbs-transition); } .lbs-tile-wide + .lbs-tile-wide { margin-top: 28px; } .lbs-tile-wide--h-minimal, .lbs-tile-wide--h-small { --lbs-tile-wide-picture: 180px; } .lbs-tile-wide--h-large { --lbs-tile-wide-picture: 350px; } /* Above the text on narrow screens, large stays lower, so the picture does not fill a phone's first screen (Kristinn, 2026-10-12; the signature picture caps its narrow heights likewise). */ @media (max-width: 767.98px) { .lbs-tile-wide--h-large { --lbs-tile-wide-picture: 280px; } } .lbs-tile-wide__img { position: relative; overflow: hidden; height: var(--lbs-tile-wide-picture); border-bottom: 1px solid var(--lbs-border-soft); border-radius: var(--lbs-tile-wide-inner) var(--lbs-tile-wide-inner) 0 0; background: var(--lbs-text); transition: border-color var(--lbs-transition); } .lbs-tile-wide__img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } .lbs-tile-wide__body { padding: 28px; border-radius: 0 0 var(--lbs-tile-wide-inner) var(--lbs-tile-wide-inner); transition: background-color var(--lbs-transition), color var(--lbs-transition); } .lbs-tile-wide__title { margin: 0 0 var(--lbs-space-3); font-size: var(--lbs-fs-lg); } .lbs-tile-wide__title a { color: inherit; text-decoration: none; } .lbs-tile-wide__title a::before { content: ''; position: absolute; inset: -1px; border-radius: var(--lbs-radius-control); } .lbs-tile-wide__title a::after { transition: background-color var(--lbs-transition), color var(--lbs-transition); } /* the symbol: with the link card's, above */ .lbs-tile-wide__title a:focus-visible { outline: none; } .lbs-tile-wide__title a:focus-visible::before { outline: var(--lbs-focus-ring) solid var(--lbs-focus); outline-offset: 2px; } .lbs-tile-wide__text > * { margin: 0; } .lbs-tile-wide__text > * + * { margin-top: var(--lbs-space-3); } /* Only a tile whose title is a link turns red: in the block editor the title is a text field, and typing there must not turn the tile red. */ .lbs-tile-wide:has(.lbs-tile-wide__title a):is(:hover, :focus-within), .lbs-tile-wide:has(.lbs-tile-wide__title a):is(:hover, :focus-within) .lbs-tile-wide__img { border-color: var(--lbs-red); } .lbs-tile-wide:has(.lbs-tile-wide__title a):is(:hover, :focus-within) .lbs-tile-wide__body { background: var(--lbs-red); color: var(--lbs-white); } .lbs-tile-wide:has(.lbs-tile-wide__title a):is(:hover, :focus-within) .lbs-tile-wide__title a::after { background-color: var(--lbs-white); color: var(--lbs-white); } /* High-contrast modes would paint the symbol's ground, and so the symbol, in the page colour: it takes the link colour of the mode instead, hovered or not. */ @media (forced-colors: active) { @supports (mask-image: none) { :is(.lbs-card--link .lbs-card__title, .lbs-tile-wide__title) a::after, .lbs-tile-wide:has(.lbs-tile-wide__title a):is(:hover, :focus-within) .lbs-tile-wide__title a::after { forced-color-adjust: none; background-color: LinkText; } } } @media (min-width: 768px) { .lbs-tile-wide { grid-template-columns: minmax(0, var(--lbs-tile-wide-pic-fr)) minmax(0, var(--lbs-tile-wide-text-fr)); } .lbs-tile-wide__img { height: auto; min-height: var(--lbs-tile-wide-picture); border-right: 1px solid var(--lbs-border-soft); border-bottom: 0; border-radius: var(--lbs-tile-wide-inner) 0 0 var(--lbs-tile-wide-inner); } .lbs-tile-wide__body { border-radius: 0 var(--lbs-tile-wide-inner) var(--lbs-tile-wide-inner) 0; } .lbs-tile-wide--h-minimal .lbs-tile-wide__img { min-height: 0; } /* Text on the left: the text's column first, the picture after it with the dividing line on its left. */ .lbs-tile-wide--text-left { grid-template-columns: minmax(0, var(--lbs-tile-wide-text-fr)) minmax(0, var(--lbs-tile-wide-pic-fr)); } .lbs-tile-wide--text-left .lbs-tile-wide__img { order: 2; border-right: 0; border-left: 1px solid var(--lbs-border-soft); border-radius: 0 var(--lbs-tile-wide-inner) var(--lbs-tile-wide-inner) 0; } .lbs-tile-wide--text-left .lbs-tile-wide__body { border-radius: var(--lbs-tile-wide-inner) 0 0 var(--lbs-tile-wide-inner); } } @media (min-width: 992px) { .lbs-tile-wide--text-third { --lbs-tile-wide-pic-fr: 2fr; --lbs-tile-wide-text-fr: 1fr; } .lbs-tile-wide--text-quarter { --lbs-tile-wide-pic-fr: 3fr; --lbs-tile-wide-text-fr: 1fr; } } @media (max-width: 575.98px) { .lbs-tile-wide__body { padding: 20px; } } /* Tiles spanning several columns (lbs-core "width"; not the wide tile above): --lbs-tile-span is the number of columns, capped at what the row has. */ .lbs-tiles__item--w2, .lbs-tiles__item--w3, .lbs-tiles__item--w4 { --lbs-tile-span: 2; grid-column: span var(--lbs-tile-span); } @media (min-width: 768px) { .lbs-tiles__item--w3, .lbs-tiles__item--w4 { --lbs-tile-span: 3; } } @media (min-width: 992px) { .lbs-tiles__item--w4 { --lbs-tile-span: 4; } } /* In the 3-column variant a "w3"/"w4" tile only ever fills the row (3), never 4. */ @media (min-width: 768px) { .lbs-tiles--cols-3 .lbs-tiles__item--w3, .lbs-tiles--cols-3 .lbs-tiles__item--w4 { --lbs-tile-span: 3; } } /* A wide picture is as tall as a normal one, so the row stays level. The figure repeats the row's columns and gap; an empty ::before in its first column has the normal 17:16 shape and sets the height, and the picture stretches across all the columns. The img is taken out of the flow so that its own height cannot stretch the row. These rules stay below the plain tile's: they weigh the same as ".lbs-tile figure". */ :is(.lbs-tiles__item--w2, .lbs-tiles__item--w3, .lbs-tiles__item--w4) figure { display: grid; grid-template-columns: repeat(var(--lbs-tile-span), minmax(0, 1fr)); grid-template-rows: auto 1fr; gap: 0 var(--lbs-tile-gap); } :is(.lbs-tiles__item--w2, .lbs-tiles__item--w3, .lbs-tiles__item--w4) figure::before { content: ''; grid-area: 1 / 1; aspect-ratio: 17 / 16; } :is(.lbs-tiles__item--w2, .lbs-tiles__item--w3, .lbs-tiles__item--w4) .lbs-tile__img { grid-area: 1 / 1 / 2 / -1; aspect-ratio: auto; } :is(.lbs-tiles__item--w2, .lbs-tiles__item--w3, .lbs-tiles__item--w4) .lbs-tile__img img { position: absolute; inset: 0; } :is(.lbs-tiles__item--w2, .lbs-tiles__item--w3, .lbs-tiles__item--w4) .lbs-tile__label { grid-column: 1 / -1; } /* Book tiles: a denser grid of title-page scans (links to baekur.is and the like). */ .lbs-books { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lbs-space-6) var(--lbs-space-4); margin-block: 0 var(--lbs-space-7); padding: 0; list-style: none; } .lbs-books > li { margin: 0; } @media (min-width: 768px) { .lbs-books { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 992px) { .lbs-books { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1200px) { .lbs-books { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .lbs-book { font-size: var(--lbs-fs-xs); line-height: var(--lbs-lh-tight); } .lbs-book__link { display: block; color: inherit; text-decoration: none; } .lbs-book__img { display: block; aspect-ratio: 2 / 3; margin-bottom: var(--lbs-space-2); overflow: hidden; border: 1px solid var(--lbs-border-soft); background: var(--lbs-panel); transition: border-color var(--lbs-transition); } .lbs-book__img img { display: block; width: 100%; height: 100%; object-fit: cover; } .lbs-book__title { display: block; font-size: var(--lbs-fs-sm); font-weight: 500; line-height: var(--lbs-lh-tight); transition: color var(--lbs-transition); } .lbs-book__meta, .lbs-book__authors { display: block; margin-top: var(--lbs-space-1); color: var(--lbs-muted); } .lbs-book__link:hover .lbs-book__title, .lbs-book__link:focus-visible .lbs-book__title { color: var(--lbs-red); } .lbs-book__link:hover .lbs-book__img, .lbs-book__link:focus-visible .lbs-book__img { border-color: var(--lbs-red); } .lbs-post-list__empty { color: var(--lbs-muted); } /* Section menu beside the content ("LBS layout" box, lbs_section_menu()): the section's page tree, a grey panel that is a closed disclosure below 992px and a sticky column from 992px up. */ .lbs-section-menu__box { background: var(--lbs-panel); border: 1px solid var(--lbs-border); padding: var(--lbs-space-3) var(--lbs-space-4); margin-bottom: var(--lbs-space-5); font-size: var(--lbs-fs-sm); line-height: var(--lbs-lh-tight); } .lbs-section-menu__summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--lbs-space-2); } .lbs-section-menu__summary::-webkit-details-marker { display: none; } .lbs-section-menu__summary::after { content: ''; flex-shrink: 0; width: 8px; height: 8px; border-right: 2px solid var(--lbs-red); border-bottom: 2px solid var(--lbs-red); transform: rotate(45deg); } [open] > .lbs-section-menu__summary::after { transform: rotate(-135deg); } .lbs-section-menu__root { font-weight: 400; color: var(--lbs-muted); } .lbs-section-menu__summary:focus-visible { outline: var(--lbs-focus-ring) solid var(--lbs-focus); outline-offset: 2px; } .lbs-section-menu__list, .lbs-section-menu .children { list-style: none; margin: 0; padding: 0; } .lbs-section-menu .children { padding-left: var(--lbs-space-4); } .lbs-section-menu li { margin-block: var(--lbs-space-1); } .lbs-section-menu a { color: var(--lbs-text); text-decoration: none; } .lbs-section-menu a:hover, .lbs-section-menu a:focus-visible { color: var(--lbs-red); text-decoration: underline; } .lbs-section-menu .current_page_ancestor > a { font-weight: 600; } .lbs-section-menu .current_page_item > a { color: var(--lbs-red); font-weight: 600; } /* Site-wide page tree (Customize > LBS > Pages): only the branch of the page being read is open. */ .lbs-section-menu--branch .children { display: none; } .lbs-section-menu--branch .current_page_item > .children, .lbs-section-menu--branch .current_page_ancestor > .children { display: block; } @media (min-width: 992px) { .lbs-section-menu { position: sticky; top: var(--lbs-space-4); max-height: calc(100vh - 2 * var(--lbs-space-4)); overflow-y: auto; } .lbs-section-menu--js .lbs-section-menu__box { margin-bottom: 0; } .lbs-section-menu--js .lbs-section-menu__summary { display: none; } } /* WordPress's enlarged picture view: the picture's caption at the foot of the view (lbs-core adds it, inc/lightbox.php; WordPress shows none). A long caption may cover the foot of a tall picture. */ .wp-lightbox-overlay .lbs-lightbox-caption { position: absolute; z-index: 2000001; /* the picture's own layer; later in the page, so above it, and below the buttons */ bottom: 0; left: 50%; transform: translateX(-50%); box-sizing: border-box; width: min(48rem, 100%); margin: 0; padding: var(--lbs-space-2) 4rem calc(var(--lbs-space-2) + env(safe-area-inset-bottom)); /* clear of the next/previous buttons where they sit in the bottom corners */ background: color-mix(in srgb, var(--lbs-white) 92%, transparent); color: var(--lbs-text); font-size: var(--lbs-fs-sm); line-height: var(--lbs-lh-tight); text-align: center; cursor: auto; } /* No caption: the (empty) element stays for screen readers but takes no room. */ .wp-lightbox-overlay .lbs-lightbox-caption:empty { padding: 0; background: none; } /* Phones: above the row of next/previous buttons, the whole width, and never more than about a third of the screen (a longer caption scrolls). */ @media (max-width: 575.98px) { .wp-lightbox-overlay .lbs-lightbox-caption { bottom: calc(3.5rem + env(safe-area-inset-bottom)); max-height: 30vh; overflow-y: auto; padding: var(--lbs-space-2) var(--lbs-space-3); } } /* YouTube videos that load on click (lbs-core inc/video.php, Settings › LBS › Videos): the video's picture fills the player's box, with a red play button in its middle; a click puts the player in its place, which WordPress's own rules then size. In the responsive 16:9 embed WordPress keeps the box's height with a ::before, so the picture lies over it; an embed without a ratio gets one. */ .lbs-video { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--lbs-dark); } .wp-block-embed:not(.wp-has-aspect-ratio) .lbs-video { position: relative; aspect-ratio: 16 / 9; } .lbs-video__poster { display: block; width: 100%; height: 100%; object-fit: cover; } .lbs-video__play { position: absolute; top: 50%; left: 50%; width: 4.5rem; height: 3.25rem; border-radius: var(--lbs-radius-control); background: var(--lbs-red); transform: translate(-50%, -50%); transition: background-color var(--lbs-transition); } /* The triangle, drawn with borders (no icon font, no picture). */ .lbs-video__play::after { content: ""; position: absolute; top: 50%; left: 50%; border-style: solid; border-width: 0.75rem 0 0.75rem 1.25rem; border-color: transparent transparent transparent var(--lbs-white); transform: translate(-40%, -50%); } .lbs-video:hover .lbs-video__play, .lbs-video:focus-visible .lbs-video__play { background: var(--lbs-red-dark); } /* High-contrast modes would turn the triangle's see-through borders into a solid square. */ @media (forced-colors: active) { .lbs-video__play { forced-color-adjust: none; } } /* The player the click puts there has no frame (WordPress's own player says so with the old frameborder attribute). */ .wp-block-embed__wrapper > iframe { border: 0; } /* The line saying the video plays from YouTube. */ .lbs-video__note { margin: var(--lbs-space-2) 0 0; color: var(--lbs-muted); font-size: var(--lbs-fs-xs); }