/** * Failed to minify the file using clean-css v5.3.3. Serving the original version. * Original file: /npm/fiko@0.15.2/package/fiko.css * * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files */ @charset "UTF-8"; /*! * FIKO 🐸 v0.15.2 * 2024 CSS FRAMEWORK LIBRARY * Copyright 2023-2024 Toybreaker * MIT License | https: //github.com/toybreaker/fiko * * WHY? TLDR: * DYNAMIC SIZING: via svh, svw, rem, ch... * FIXED SIZING: px * FOLLOWS SEMANTIC HTML * ALMOST CLASSLESS, NON-VERBOSE & CLEAN! */ /* 🐲 LAYER ORDER */ @layer reset, root, base, roles, containers, components, classes, animations, tests; /* 🐲 RESET */ @layer reset { /* THIS LAYER SHOULD STAY FREE OF CSS VARIABLES */ /* The New CSS Reset */ *:where( :not( html, iframe, canvas, img, svg, video, audio ):not(svg *, symbol *) ) { all: unset; display: revert; } *, *::before, *::after { box-sizing: border-box; } ::before, ::after { /* Add text decoration inheritance in all browsers: */ text-decoration: inherit; /* Add vertical alignment inheritance in all browsers: */ vertical-align: inherit; } /* Reapply the pointer cursor for anchor tags: */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers): */ ol, ul, menu { list-style: none; } /* Manage how images exceed their container: */ img { max-inline-size: 100%; max-block-size: 100%; } /* Removes spacing between cells in tables: */ table { border-collapse: collapse; } /* Safari: Fix user-select:none on the text input bug */ input, textarea { -webkit-user-select: auto; } /* Safari: Revert 'white-space' property for textarea elements */ textarea { white-space: revert; } /* Minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* Preformatted text - use only for this feature */ :where(pre) { all: revert; } /*Reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* Remove default dot (•) sign */ ::marker { content: initial; } /* Fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /*Revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */ :where([contenteditable]:not([contenteditable='false'])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* Apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable='true']) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } html { height: 100svh; font-size: 100%; -webkit-text-size-adjust: 100%; /* maybe needed ?! */ -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; > * { font-size: unset; } } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin: 0; font-size: inherit; font-weight: inherit; } ::-webkit-file-upload-button { /* Correct the inability to style clickable types in iOS and Safari. */ -webkit-appearance: button; /* Change font properties to `inherit` in Safari. */ font: inherit; } /* remove the gray background on active links in IE 10. */ pre { font-family: monospace, monospace; font-size: 1em; } } /* 🐲 ROOT */ @layer root { /* ROOT IS DEVIDED IN 3 SECTIONS: MODE-INDIPENDENT * 1. all variables 'var(--cur...)' needing light/dark versions. * 2. light/dark declarations. * 3. variables which stay same in both light/dark modes. */ /* ROOT SECTION 1 */ :root { /* ICONS FIRST, cos there're referred in ROOT SECTION 2 [data-theme...] */ --icon-chevron-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --icon-chevron-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --icon-plus-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E %3Cpath fill='black' d='M14 7.31H8.69V2H7.31v5.31H2v1.38h5.31V14h1.38V8.69H14V7.31z'/%3E %3C/svg%3E"); --icon-plus-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E %3Cpath fill='white' d='M14 7.31H8.69V2H7.31v5.31H2v1.38h5.31V14h1.38V8.69H14V7.31z'/%3E %3C/svg%3E"); --icon-minus-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E %3Cpath fill='black' d='M2 7.3h12v1.4H2z'/%3E %3C/svg%3E"); --icon-minus-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E %3Cpath fill='white' d='M2 7.3h12v1.4H2z'/%3E %3C/svg%3E"); /* COLOURS FOR LIGHT/DARK MODES */ /* '--alpha' CAN BE REDECLARED AS NEEDED: */ --alpha: 1; /* ^NOTE: '--alpha' operate on the base B&W colors. * It will cascade down to all colours declarations. * Re-declare it carefully and maybe only deep up the tree, * like inside the specific element in need of changes */ --color-white: rgba(255, 255, 255, var(--alpha)); --color-black: rgba(0, 0, 0, var(--alpha)); } /* ROOT SECTION 2 */ /* INITIALS ASSUMING LIGHT THEME */ [data-theme='light'] { /* Set the CURRENT colours: */ --currentBGcolor: var(--color-white); --currentTXTcolor: var(--color-black); --curV: var(--icon-chevron-black); --curPlus: var(--icon-plus-black); --curMinus: var(--icon-minus-black); /* Seems that the following is needed to make it work?!? */ background-color: var(--currentBGcolor); color: var(--currentTXTcolor); } /* DATA-THEME IS SET TO DARK */ [data-theme='dark'] { /* Set the CURRENT colours: */ --currentBGcolor: var(--color-black); --currentTXTcolor: var(--color-white); --curV: var(--icon-chevron-white); --curPlus: var(--icon-plus-white); --curMinus: var(--icon-minus-white); /* Seems that the following is needed to make it work?!? */ background-color: var(--currentBGcolor); color: var(--currentTXTcolor); } /* SECTION 3 */ :root { /* MODE-INDIPENDENT CONSTANT COLOURS */ /* When elements need consistency, not switching colors. */ --color-light: var(--color-white); --color-dark: var(--color-black); --transparent: 50%; --currentCOLtransparent: color-mix( in srgb, currentColor, transparent var(--transparent) ); /* DYNAMIC / RELATIVE SIZED spacing & borders */ --spaceLR: 3.3svw; /* LEFT RIGHT */ --spaceTB: 1.8svh; /* TOP BOTTOM */ --radius: clamp(6.66px, 1svw, 8px); /* RADIUS */ --lineHeight: 1.55; /* LINE HEIGHT */ --lineHeightHeadings: 1.1; /* COMPACTED LINE HEIGHT FOR HEADINGS*/ --borderSize: clamp(1.5px, 1svw, 2px); /* BORDER SIZE */ --gap: calc((var(--spaceLR) + var(--spaceTB)) / 3); --transition: 0.2s ease-in-out; /* TYPOGRAPHY */ /* SET */ --font-family-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* ^NOTE: THIS NEEDS BE SET FIRST */ /* THEN APPLY IT */ --font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, var(--font-family-emoji); --font-family-monospace: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace, var(--font-family-emoji); /* VARIABLE BASE FONT SIZE */ --font-size: clamp(1rem, 1.1rem + 0.418svw, 1.8rem); --font-weight: 300; --font-weight-bold: 500; /* LONG TEXT LINES ARE HARD TO READ */ --reading: 60ch; --modal-overlay-backdrop-filter: var( --currentCOLtransparent ); /* breakpoints, boostrap++ */ --xs: 0; --sm: 576px; --md: 768px; --lg: 992px; --xl: 1200px; --x2l: 1440px; --x3l: 1920px; --x4l: 2560px; /* end root */ /* MORE ICONS */ /* They all use 'currentColor' so they'll take the stroke from parent */ --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='currentColor' stroke-width='2' /%3E%3C/g%3E%3C/svg%3E"); } } /* 🐲 BASE */ @layer base { html { font-size: 16px; text-rendering: optimizeLegibility; overflow-wrap: break-word; scroll-behavior: smooth; line-height: var(--lineHeight); } body { min-height: 100svh; font-size: var(--font-size); font-family: var(--font-family); font-weight: var(--font-weight); @media (max-width: 576px) { word-break: keep-all; text-wrap: wrap; } } small { font-size: 0.825em; line-height: var(--lineHeight); } main { display: block; } /* TYPOGRAPHY */ b, strong { font-weight: var(--font-weight-bold); } sub, sup { position: relative; font-size: 0.75em; line-height: 0; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } cite { font-style: italic; } address, blockquote, dl, ol, p, pre, table, ul { margin-block-start: 0; margin-block-end: var(--spaceTB); color: var(--currentTXTcolor); font-style: normal; font-weight: var(--font-weight); } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: var(--currentTXTcolor); font-weight: var(--font-weight); font-size: var(--font-size); line-height: var(--lineHeightHeadings); font-family: var(--font-family); margin-inline: auto; margin-block: 0 var(--spaceTB); min-width: 100%; max-width: var(--reading); word-break: keep-all; /* fallback */ word-break: auto-phrase; } @supports (text-wrap: balance) { h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { /* IMPROVE READABILITY | performance heavy */ text-wrap: balance; /* https://www.youtube.com/watch?v=L9ihWHngk9E */ } } h1, .h1 { font-size: calc(var(--font-size) * 1.75); } h2, .h2 { font-size: calc(var(--font-size) * 1.55); } h3, .h3 { font-size: calc(var(--font-size) * 1.45); } h4, .h4 { font-size: calc(var(--font-size) * 1.25); } h5, .h5 { font-size: calc(var(--font-size) * 1.15); } h6, .h6 { font-size: calc(var(--font-size) * 1.1); } :where( article, address, blockquote, dl, figure, form, ol, p, pre, table, ul ) ~ :is( h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 ) { margin-block-start: var(--spaceTB); } p { margin-block-end: var(--spaceTB); } em { font-style: italic; } hgroup { margin-block: var(--spaceTB); } hgroup > * { margin-block-start: 0; margin-block-end: 0; } :where(ol, ul) li { margin-block-end: calc(var(--spaceTB) * 0.25); } :where(dl, ol, ul) :where(dl, ol, ul) { margin-inline: var(--spaceLR) 0; margin-block-start: calc(var(--spaceTB) * 0.25); margin-block-end: 0; } :where(a:not([role='button'])), [role='link'] { text-decoration: underline; text-underline-offset: 0.125em; text-decoration-color: currentColor; &:hover { opacity: 0.85; } } /* LIST */ ul, ol { list-style: inside; } ol { list-style: inside; list-style-type: revert; } mark { padding-block: 0.125rem; padding-inline: 0.25rem; background-color: orange; color: var(--currentTXTcolor); vertical-align: baseline; } blockquote { max-width: var(--reading); display: block; margin-block: calc(var(--spaceTB) * 4); margin-inline: auto; padding-block: var(--spaceTB); padding-inline: var(--spaceLR); border-right: none; border-inline-start: var(--borderSize) solid color-mix(in srgb, currentColor, transparent 50%); border-inline-end: none; } blockquote footer { margin-block-start: calc(var(--spaceTB) * 0.5); color: var(--currentTXTcolor); overflow-x: hidden; max-width: 100%; } abbr[title] { border-bottom: 1px dotted currentColor; text-decoration: none; cursor: help; } ins { color: var(--currentCOLtransparent); text-decoration: none; } del { color: var(--currentCOLtransparent); } ::-moz-selection { background-color: var(--currentCOLtransparent); } ::selection { background-color: var(--currentCOLtransparent); } /* CODE */ pre, code, kbd, samp { font-size: 0.875em; font-family: var(--font-family-monospace); } pre code { font-size: inherit; font-family: inherit; } pre { -ms-overflow-style: scrollbar; overflow: auto; } pre, code, kbd { --code-background-color: rgba(133, 133, 133, 0.5); border-radius: var(--radius); background-color: var(--code-background-color); color: var(--currentTXTcolor); font-weight: var(--font-weight); line-height: initial; border-radius: 3px; } code, kbd { display: inline; padding: calc(var(--spaceLR) / 12) calc(var(--spaceLR) / 6); } pre { display: block; margin-block-end: var(--spaceTB); overflow-x: auto; } pre > code { display: block; padding: var(--spaceTB) var(--spaceLR); background: none; line-height: var(--lineHeight); } kbd { background-color: var(--code-background-color); color: var(--code-background-color); vertical-align: baseline; } [hidden], template { display: none !important; } canvas { display: inline-block; } /* LOADING */ /* USE ([aria-busy=true]) */ [aria-busy='true']:not( input, select, textarea, html )::before { display: inline-block; width: 1em; height: 1em; background-image: var(--icon-loading); background-size: 1rem auto; background-repeat: no-repeat; content: ''; vertical-align: -0.125em; } [aria-busy='true']:not(input, select, textarea, html):not( :empty )::before { -webkit-margin-end: calc(var(--spaceTB) * 0.5); margin-inline-end: calc(var(--spaceTB) * 0.5); } [aria-busy='true']:not( input, select, textarea, html ):empty { text-align: center; } button[aria-busy='true'], [type='submit'][aria-busy='true'], [type='button'][aria-busy='true'], [type='reset'][aria-busy='true'], [role='button'][aria-busy='true'], a[aria-busy='true'] { pointer-events: none; } /* ACCESSIBILITY & USER INTERACTION */ [aria-controls] { cursor: pointer; } [aria-disabled='true'], [disabled] { cursor: not-allowed; } [aria-hidden='false'][hidden] { display: initial; } [aria-hidden='false'][hidden]:not(:focus) { clip: rect(0, 0, 0, 0); position: absolute; } a, area, button, input, label, select, summary, textarea, [tabindex] { -ms-touch-action: manipulation; } [dir='rtl'] { direction: rtl; } a[href] { min-height: 42px; line-height: 42px; } p { max-width: var(--reading); margin-inline: auto; } } /* 🐲 ROLES */ @layer roles { /* Group ([role="group"], [role="search"]) */ form[role='search'], form[role='group'] { width: 100%; } [role='search'] > *:first-child { border-top-left-radius: 5rem; border-bottom-left-radius: 5rem; } [role='search'] > *:last-child { border-top-right-radius: 5rem; border-bottom-right-radius: 5rem; } [role='search'], [role='group'] { display: inline-flex; position: relative; margin-block-end: var(--spaceTB); border-radius: var(--radius); vertical-align: middle; } [role='search'] > *, [role='search'] input:not([type='checkbox'], [type='radio']), [role='search'] select, [role='group'] > *, [role='group'] input:not([type='checkbox'], [type='radio']), [role='group'] select { position: relative; flex: 1 1 auto; margin-block-end: 0; } [role='search'] > *:not(:first-child), [role='search'] input:not([type='checkbox'], [type='radio']):not( :first-child ), [role='search'] select:not(:first-child), [role='group'] > *:not(:first-child), [role='group'] input:not([type='checkbox'], [type='radio']):not( :first-child ), [role='group'] select:not(:first-child) { margin-inline-start: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } [role='search'] > *:not(:last-child), [role='search'] input:not([type='checkbox'], [type='radio']):not( :last-child ), [role='search'] select:not(:last-child), [role='group'] > *:not(:last-child), [role='group'] input:not([type='checkbox'], [type='radio']):not( :last-child ), [role='group'] select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } [role='search'] > *:focus, [role='search'] input:not([type='checkbox'], [type='radio']):focus, [role='search'] select:focus, [role='group'] > *:focus, [role='group'] input:not([type='checkbox'], [type='radio']):focus, [role='group'] select:focus { z-index: 2; } [role='search'] button:not(:first-child), [role='search'] [type='submit']:not(:first-child), [role='search'] [type='reset']:not(:first-child), [role='search'] [type='button']:not(:first-child), [role='search'] [role='button']:not(:first-child), [role='search'] input:not([type='checkbox'], [type='radio']):not( :first-child ), [role='search'] select:not(:first-child), [role='group'] button:not(:first-child), [role='group'] [type='submit']:not(:first-child), [role='group'] [type='reset']:not(:first-child), [role='group'] [type='button']:not(:first-child), [role='group'] [role='button']:not(:first-child), [role='group'] input:not([type='checkbox'], [type='radio']):not( :first-child ), [role='group'] select:not(:first-child) { margin-inline-start: var(--spaceLR); } [role='search'] button, [role='search'] [type='submit'], [role='search'] [type='reset'], [role='search'] [type='button'], [role='search'] [role='button'], [role='group'] button, [role='group'] [type='submit'], [role='group'] [type='reset'], [role='group'] [type='button'], [role='group'] [role='button'] { width: auto; } /* LOADING ([aria-busy=true]) */ [aria-busy='true']:not( input, select, textarea, html )::before { display: inline-block; width: 1em; height: 1em; background-image: var(--icon-loading); background-size: 1rem auto; background-repeat: no-repeat; content: ''; vertical-align: -0.125em; } [aria-busy='true']:not(input, select, textarea, html):not( :empty )::before { -webkit-margin-end: calc(var(--spaceTB) * 0.5); margin-inline-end: calc(var(--spaceTB) * 0.5); } [aria-busy='true']:not( input, select, textarea, html ):empty { text-align: center; } button[aria-busy='true'], [type='submit'][aria-busy='true'], [type='button'][aria-busy='true'], [type='reset'][aria-busy='true'], [role='button'][aria-busy='true'], a[aria-busy='true'] { pointer-events: none; } } /* 🐲 CONTAINERS */ @layer containers { header:not(.invert), nav, section, footer { /* background-color: var(--currentBGcolor); */ color: var(--currentTXTcolor); } /* NAV */ /* :where(nav li)::before { float: left; content: ''; } */ nav, nav ul { padding-inline: calc(var(--spaceLR) * 2); gap: var(--gap); margin: 0; } nav { width: 100%; } nav ol, nav ul { align-items: center; margin-block-end: 0; padding: 0; list-style: none; } nav ol:first-of-type, nav ul:first-of-type { margin-inline-start: var(--spaceLR); } nav ol:last-of-type, nav ul:last-of-type { margin-inline-end: var(--spaceLR); } nav li { display: inline-block; margin: 0; } nav li :where(a, [role='link']) { display: inline-block; border-radius: var(--radius); } /* no underline in the following cases */ nav li :where(a, [role='link']):not(:hover), a:has(.card), a:has(h1, h2, h3, h4, h5, h6, svg) { text-decoration: none; } nav li button, nav li [role='button'], nav li input:not( [type='checkbox'], [type='radio'], [type='range'], [type='file'] ), nav li select { height: auto; margin-inline: inherit; margin-block-end: 0; padding: calc(var(--spaceTB) / 1.6) calc(var(--spaceLR)); border: var(--borderSize) solid var(--currentTXTcolor); } nav[aria-label='breadcrumb'] { align-items: center; justify-content: flex-start; } nav[aria-label='breadcrumb'] ul li:not(:first-child) { -webkit-margin-start: var(--spaceLR); margin-inline-start: var(--spaceLR); } nav[aria-label='breadcrumb'] ul li:not(:last-child)::after { position: absolute; width: calc(var(--spaceLR) * 2); -webkit-margin-start: calc(var(--spaceLR) / 2); margin-inline-start: calc(var(--spaceLR) / 2); content: var(--nav-breadcrumb-divider); color: var(--currentCOLtransparent); text-align: center; text-decoration: none; } nav[aria-label='breadcrumb'] a[aria-current] { background-color: transparent; color: inherit; text-decoration: none; pointer-events: none; } /* TABLE */ :where(table) { width: 100%; border-collapse: collapse; border-spacing: 0; text-indent: 0; } th, td { padding: calc(var(--spaceTB) / 2) var(--spaceLR); width: fit-content; border-bottom: var(--currentCOLtransparent) solid var(--borderSize); background-color: var(--currentBGcolor); color: var(--currentTXTcolor); font-weight: var(--font-weight); text-align: left; text-align: start; } tfoot th, tfoot td { border-top: var(--currentCOLtransparent) solid var(--borderSize); border-bottom: 0; font-weight: 500; } th[scope='row'] { white-space: nowrap; } table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd) td { background-color: color-mix( in srgb, currentColor, transparent 90% ); } img { height: auto; border-style: none; vertical-align: middle; object-fit: cover; } :where(svg:not([fill])) { fill: currentColor; } /* maybe also stroke */ :where(svg:not([stroke])) { stroke: currentColor; } svg:not(:root) { overflow: hidden; } aside { nav, ol, ul, li { display: block; } li { padding: calc(var(--spaceTB) * 0.5) var(--spaceLR); } li a { display: block; } li [role='button'] { margin: inherit; } } section { margin-block-end: var(--spaceTB); } /* GRID | Minimal grid system with auto-layout columns */ .grid { --cellwidth: 250px; gap: var(--gap); display: grid; grid-auto-flow: dense; grid-template-columns: repeat( auto-fit, minmax(min(100%, var(--cellwidth)), 1fr) ); > header { grid-area: head; text-align: left; grid-column: 1 / -1; } > footer { grid-area: foot; text-align: left; } > .hero { grid-area: img; grid-row: 1 / -1; object-fit: cover; height: fit-content; } > .body { grid-area: middle; } } /* TO DO: MAKE THE GRID BEHAVE USING CQ */ .grid_container { container-type: inline-size; } @container (min-width: 500px) { .grid { grid-auto-flow: row; /* grid-template-areas: 'img head' 'img middle' 'img foot'; */ } } /* HORIZONTAL scroller (

) */ figure { display: block; margin: 0; padding: 0; overflow-x: auto; /* For big images lets limit the size/scroll: */ img { max-inline-size: 200%; } figcaption { padding-block: var(--spaceTB); padding-inline: var(--spaceLR); color: var(--currentCOLtransparent); } figcaption::first-letter { text-transform: uppercase; } } /* MODAL (