kantarciandClaude Opus 5
67b85751cf
Umuts Frage: "Haben wir bilder usw als volles bild startseite? 100% hoehe usw?" Die Teile gab es, die Kombination nicht - und zwei Sachen fehlten wirklich. Abschnittsbreiten: neu "randlos" (ohne Begrenzung, ohne Rand, von Kante zu Kante) und "breit" (1600 px) neben normal und schmal. Vorher war jeder Inhalt auf 1180 px begrenzt; ein Bild von Kante zu Kante war nicht moeglich. Hoeheneinheiten: neu dvh, svh, lvh. 100vh ist auf dem Handy hoeher als der Bildschirm - es meint die Ansicht ohne Adressleiste, und der untere Rand verschwindet darunter. 100dvh ist das, was jemand meint, der "volle Hoehe" sagt. Und eine Vorlage "Vollbild-Hero", die die ganze Kombination auf einen Klick setzt: randlos, 100dvh (mobil 80dvh), Inhalt senkrecht zentriert, Hintergrundbild formatfuellend, dunkle Ueberlagerung damit der Text lesbar bleibt, Ueberschrift, Text, Button. Die Teile waren alle da, aber diese Kombination zu finden war eine Recherche. 328 PHP-Tests / 1329 Assertions, 17 JS-Modelltests. Geprueft: vier Breiten angenommen und eine erfundene abgewiesen, sieben Hoehenangaben mit dvh/svh/lvh und zwei ungueltige, ein randloser Abschnitt mit formatfuellendem Bild, und die Hero-Vorlage Eigenschaft fuer Eigenschaft. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
318 lines
21 KiB
CSS
318 lines
21 KiB
CSS
@charset "UTF-8";
|
||
h1,h2,h3,p,a{overflow-wrap:anywhere;hyphens:auto}
|
||
.block-image{margin:0;max-width:100%}.block-image img{max-width:100%;height:auto}
|
||
:root{color-scheme:light;--paper:#f7f8f4;--ink:#182d2b;--muted:#50625d;--line:#d7dfd7;--mint:#e5f0b6;--accent:#315b49;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
|
||
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-underline-offset:5px}a:hover{text-decoration-thickness:2px}:focus-visible{outline:3px solid #b85c12;outline-offset:6px}main:focus{outline:none}.shell{width:min(1180px,calc(100% - 64px));margin-inline:auto}.site-header{border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:28px;letter-spacing:-1.3px;text-decoration:none}.brand-icon{width:37px;height:37px;background:var(--ink);color:var(--mint);border-radius:10px;display:grid;place-items:center;margin-right:7px;font-size:27px;letter-spacing:-2px}.brand-light{font-weight:400}.site-header nav{display:flex;gap:32px;align-items:center;font-size:14px;font-weight:600}.site-header nav a{text-decoration:none;padding:12px 0}.site-header nav [aria-current=page]{text-decoration:underline}.site-header nav .nav-link{border:1px solid var(--ink);padding:13px 18px;border-radius:7px}.nav-link span{margin-left:18px}.block-section{padding:70px 0}.block-section:first-child{padding:74px 0 82px}.section-inner>.block-text:first-child{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin:0 0 30px}h1,h2,h3{letter-spacing:-.05em;line-height:1.05;margin:0 0 24px}h1{font-size:clamp(48px,6.6vw,84px);font-weight:500;max-width:900px}h2{font-size:clamp(32px,4vw,49px);font-weight:500;max-width:760px}h3{font-size:26px;letter-spacing:-.035em;line-height:1.2}.block-text{font-size:18px;line-height:1.7;max-width:690px;margin:0 0 23px;color:var(--muted);white-space:pre-line}.button{display:inline-flex;align-items:center;gap:32px;min-height:50px;margin-top:9px;padding:15px 21px;background:var(--ink);color:var(--paper);border-radius:7px;text-decoration:none;font-size:14px;font-weight:600}.button:hover{background:#294b41}.block-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:22px;margin-top:38px;background:transparent!important}.block-column{border:1px solid var(--line);border-radius:12px;padding:30px;min-width:0}.block-column .block-text{font-size:15px}.block-column>.block-text:first-child{font-size:12px;font-weight:700;letter-spacing:1px;color:var(--accent);margin-bottom:34px}.tone-mint{background:var(--mint)}.tone-ink{background:var(--ink);color:var(--paper)}.tone-ink .block-text{color:#dae3da}.tone-ink .section-inner>.block-text:first-child{color:var(--mint)}.tone-ink .button{color:var(--ink);background:var(--mint)}.width-narrow>.section-inner{max-width:800px}.site-footer{border-top:1px solid var(--line)}.site-footer p,.site-footer>span{font-size:12px;color:var(--muted)}.site-footer .brand{font-size:22px}.skip-link{position:fixed;left:16px;top:-100px;z-index:10;background:var(--ink);color:white;padding:16px}.skip-link:focus{top:16px}img{display:block;max-width:100%;height:auto;border-radius:12px}.error-page{padding-block:100px}.error-page h1{max-width:800px}
|
||
@media(max-width:650px){.shell{width:calc(100% - 36px)}.site-header nav{width:100%;justify-content:space-between;gap:12px;font-size:12px}.site-header nav .nav-link{padding:10px}.nav-link span{margin-left:6px}.block-section,.block-section:first-child{padding-block:48px}h1{font-size:49px}.block-text{font-size:16px}.block-column{padding:26px}.site-footer{align-items:flex-start;flex-direction:column;gap:10px}.site-footer p{margin:0}.block-row{gap:16px}}
|
||
|
||
/* Menus. Submenus open with details/summary, so the navigation works without JavaScript. */
|
||
.menu-list{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px;margin:0;padding:0}
|
||
.menu-list a{text-decoration:none;padding:6px 2px;display:inline-block}
|
||
.menu-list a:hover,.menu-list summary:hover{text-decoration:underline}
|
||
.menu-list [aria-current=page]{font-weight:700;text-decoration:underline;text-underline-offset:6px}
|
||
.menu-branch>summary{cursor:pointer;padding:6px 2px;list-style:none}
|
||
.menu-branch>summary::after{content:' ▾'}
|
||
.menu-branch[open]>summary::after{content:' ▴'}
|
||
.menu-branch-body{display:grid;gap:2px;padding:6px 0 6px 14px}
|
||
.menu-level-2{flex-direction:column;align-items:flex-start;gap:2px}
|
||
|
||
/* Posts */
|
||
.post-list{list-style:none;margin:0;padding:0;display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
|
||
.post-card{display:flex;flex-direction:column;gap:14px}
|
||
.post-image img{width:100%;height:210px;object-fit:cover;border-radius:10px;display:block}
|
||
.post-card h3{margin:0;font-size:19px;line-height:1.35}
|
||
.post-card h3 a{text-decoration:none}
|
||
.post-card h3 a:hover{text-decoration:underline}
|
||
.post-meta,.post-header{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;font-size:13px;margin:0}
|
||
.post-header{padding-block:22px 0}
|
||
.post-excerpt{margin:0;line-height:1.65}
|
||
.post-terms{display:flex;flex-wrap:wrap;gap:8px;margin:0;font-size:13px}
|
||
.post-empty{padding:26px;border:1px dashed currentColor;border-radius:10px}
|
||
.pagination{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:38px;padding-top:22px;border-top:1px solid currentColor;font-size:14px}
|
||
.post-terms-label{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:10px}
|
||
|
||
/* Blocks introduced with schema v6. No JavaScript: the accordion is details/summary. */
|
||
.block-icon{flex-shrink:0;display:block}
|
||
.block-iconcard{display:grid;gap:12px;padding:26px;border:1px solid currentColor;border-radius:12px}
|
||
.block-iconcard h3{margin:0;font-size:19px;line-height:1.3}
|
||
.block-iconcard h3 a{text-decoration:none}
|
||
.block-iconcard h3 a:hover{text-decoration:underline}
|
||
.block-iconcard p{margin:0;line-height:1.65}
|
||
.block-stat{display:grid;gap:4px;margin:0}
|
||
.block-stat strong{font-size:44px;font-weight:600;line-height:1.05;letter-spacing:-1.5px}
|
||
.block-stat span{font-size:14px;line-height:1.5}
|
||
.block-quote{margin:0;display:grid;gap:14px;padding:28px;border:1px solid currentColor;border-radius:12px}
|
||
.block-quote blockquote{margin:0}
|
||
.block-quote blockquote p{margin:0;font-size:18px;line-height:1.65}
|
||
.block-quote figcaption{font-size:14px;font-weight:600}
|
||
.block-quote figcaption span{font-weight:400;opacity:.75}
|
||
.quote-rating{margin:0;letter-spacing:3px}
|
||
.block-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));align-items:center;gap:24px}
|
||
.block-logos img{max-height:52px;width:auto;margin-inline:auto;display:block}
|
||
.block-cta{display:flex;flex-wrap:wrap;gap:20px 34px;align-items:center;justify-content:space-between;padding:32px;border:1px solid currentColor;border-radius:14px}
|
||
.block-cta h2{margin:0 0 6px;font-size:26px;letter-spacing:-.6px}
|
||
.block-cta p{margin:0;line-height:1.6}
|
||
.block-contact{display:grid;gap:14px;font-style:normal}
|
||
.block-contact span{display:flex;align-items:center;gap:12px;line-height:1.5}
|
||
.block-divider{border:0;border-top:1px solid currentColor;opacity:.35;margin:0}
|
||
.block-spacer{display:block}
|
||
.spacer-small{height:18px}.spacer-medium{height:38px}.spacer-large{height:68px}.spacer-huge{height:110px}
|
||
.block-accordion{display:grid;gap:10px}
|
||
.block-accordionitem{border:1px solid currentColor;border-radius:10px;padding:4px 18px}
|
||
.block-accordionitem>summary{cursor:pointer;padding:15px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:center}
|
||
.block-accordionitem>summary::after{content:'+';font-size:22px;line-height:1}
|
||
.block-accordionitem[open]>summary::after{content:'–'}
|
||
.accordion-body{padding-bottom:16px}
|
||
|
||
/* Tabs. Rendered as an anchor list plus all panels; tabs.js upgrades them to a tab widget. */
|
||
.tabs-nav{list-style:none;display:flex;flex-wrap:wrap;gap:4px;margin:0 0 22px;padding:0;border-bottom:1px solid currentColor}
|
||
.tabs-nav a{display:inline-block;padding:12px 18px;text-decoration:none;border:1px solid transparent;border-bottom:0;border-radius:9px 9px 0 0;margin-bottom:-1px;font-weight:600}
|
||
.tabs-nav a:hover{background:#0000000a}
|
||
.tabs-nav [aria-selected=true]{border-color:currentColor;background:#fff}
|
||
.tabs-ready .tabs-nav a{cursor:pointer}
|
||
.block-tabitem{padding-block:4px}
|
||
.block-tabitem:focus-visible{outline:3px solid #b55b12;outline-offset:4px}
|
||
.tabs-heading{margin:0 0 12px;font-size:17px}
|
||
|
||
/* Forms. Server rendered, no JavaScript; every message sits at its field. */
|
||
.block-form{display:grid;gap:20px;max-width:640px}
|
||
.form-field{display:grid;gap:7px}
|
||
.form-field label{font-weight:600;font-size:14px}
|
||
.form-field input,.form-field textarea,.form-field select{width:100%;padding:12px 13px;border:1px solid currentColor;border-radius:8px;background:#fff;color:inherit;font:inherit;min-height:46px}
|
||
.form-field textarea{min-height:140px;line-height:1.6;resize:vertical}
|
||
.has-error input,.has-error textarea,.has-error select{border-width:2px;border-color:#8b2f22}
|
||
.field-error{margin:0;font-size:13px;font-weight:600;color:#8b2f22}
|
||
.field-note{margin:0;font-size:13px;opacity:.8}
|
||
.form-error-summary{margin:0;padding:14px 18px;border-radius:8px;background:#fff0eb;color:#8b2f22;border:1px solid #e2b2a7;font-weight:600}
|
||
.form-success{margin:0;padding:16px 20px;border-radius:8px;background:#edf3dc;color:#315b49;border:1px solid #c5d89a;font-weight:600}
|
||
.form-missing{margin:0;padding:14px 18px;border:1px dashed currentColor;border-radius:8px}
|
||
.check-row{display:flex;align-items:flex-start;gap:11px}
|
||
.check-row input{width:20px;min-height:20px;flex-shrink:0;margin-top:3px}
|
||
.check-row label{font-weight:400;line-height:1.55}
|
||
.required-mark{color:#8b2f22}
|
||
/* Off screen rather than display:none so a filled value still proves automation. */
|
||
.form-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
|
||
|
||
.block-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px 10px;margin:0;padding:0;font-size:13px}
|
||
.block-breadcrumb li+li::before{content:'›';margin-right:10px;opacity:.6}
|
||
.block-breadcrumb a{text-decoration:none}
|
||
.block-breadcrumb a:hover{text-decoration:underline}
|
||
|
||
/* The column rules above were written for a flat section > text structure and set a colour meant
|
||
for light backgrounds. Inside a dark tone they won on specificity, so text in a dark column was
|
||
unreadable - 1.87:1 in the seeded footer. These two selectors match that specificity and come
|
||
later, so the dark tone wins where it has to. */
|
||
.tone-ink .block-column .block-text,
|
||
.tone-ink .block-column>.block-text:first-child{color:#dae3da}
|
||
|
||
/* The consent question. Fixed to the bottom, but it never covers the whole page: the content
|
||
stays readable while the decision is open, because a wall would make "accept" the only way
|
||
forward. Accepting and refusing are the same button in the same row. */
|
||
.consent-bar{position:fixed;inset-inline:12px;bottom:12px;z-index:50;max-width:620px;margin-inline:auto;background:#fff;color:#203b34;border:1px solid #cfd8d1;border-radius:14px;padding:20px 22px;box-shadow:0 18px 50px #1b2a2426;font-size:14px;line-height:1.6}
|
||
.consent-bar h2{font-size:16px;margin:0 0 8px}
|
||
.consent-bar p{margin:0 0 14px}
|
||
.consent-actions{display:flex;flex-wrap:wrap;gap:10px}
|
||
.consent-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 18px;border-radius:8px;border:1px solid #2c6b4f;background:#2c6b4f;color:#fff;font:inherit;font-weight:600;cursor:pointer}
|
||
.consent-actions .consent-button:last-child{background:#fff;color:#1b2a24;border-color:#b3c0b7}
|
||
.consent-button:hover{filter:brightness(.94)}
|
||
.consent-button:focus-visible,.consent-bar a:focus-visible,.consent-bar summary:focus-visible,.consent-bar input:focus-visible{outline:3px solid #b55b12;outline-offset:2px}
|
||
.consent-details{margin-top:14px}
|
||
.consent-details>summary{cursor:pointer;font-size:13px;font-weight:600;padding:4px 0}
|
||
.consent-groups{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
|
||
.consent-groups label{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5}
|
||
.consent-groups input{margin-top:3px;width:18px;height:18px;flex-shrink:0}
|
||
.consent-choice{margin-top:14px;background:#fff;color:#1b2a24;border-color:#b3c0b7}
|
||
.consent-links{margin:14px 0 0;font-size:12px}
|
||
.consent-links a{color:#a4510f}
|
||
/* While the question is open the bar is fixed at the bottom, so the page has to end above it -
|
||
otherwise it covers the last element, and an embed's own consent button sat right underneath.
|
||
Found by the browser test, which could not click it. */
|
||
body.consent-open{padding-bottom:260px}
|
||
@media (min-width:900px){body.consent-open{padding-bottom:200px}}
|
||
.consent-page main{max-width:680px;margin-inline:auto;padding:40px 20px}
|
||
.consent-page .consent-bar{position:static;inset:auto;box-shadow:none;max-width:none;margin-top:24px}
|
||
@media (max-width:620px){.consent-bar{inset-inline:0;bottom:0;border-radius:14px 14px 0 0;padding:16px}.consent-actions .consent-button{flex:1 1 140px}}
|
||
|
||
/* An embedded third party, and what stands in its place until it may load. */
|
||
.block-embed iframe{display:block;width:100%;border:0;border-radius:10px;background:#eef1ed}
|
||
.embed-blocked{border:1px dashed #b3c0b7;border-radius:10px;padding:24px;background:#f6f7f4;text-align:center}
|
||
.embed-title{margin:0 0 8px;font-weight:600}
|
||
.embed-hint{margin:0 0 10px;font-size:14px;line-height:1.6;color:#4a5751}
|
||
.embed-provider{margin:0 0 16px;font-size:13px;color:#4a5751}
|
||
|
||
/* Header and footer hold block documents of their own (ADR 026). They are therefore ordinary
|
||
block containers - as flex containers they shrank the section inside them until a single word
|
||
wrapped one letter per line. Their sections are chrome, not articles, so they sit tighter than
|
||
a section in the page body, and their rows keep their columns side by side. */
|
||
.site-header .block-section,
|
||
.site-footer .block-section{padding-block:20px}
|
||
.site-header .block-row,
|
||
.site-footer .block-row{margin-top:0;align-items:center}
|
||
.site-header .block-column,
|
||
.site-footer .block-column{border:0;border-radius:0;padding:0}
|
||
.site-header .block-text,
|
||
.site-footer .block-text{margin:0}
|
||
/* Size and weight only, never colour: the tone of the area decides that, and a colour here won
|
||
against .tone-ink and put 2.24:1 grey text on the dark footer. The browser check caught it. */
|
||
.site-header .block-column>.block-text:first-child{font-size:24px;font-weight:800;letter-spacing:-1px;text-transform:none;margin:0}
|
||
.site-footer .block-column>.block-text:first-child{font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;margin:0}
|
||
/* One landmark for the three links that must be on every page. Loose text outside a landmark is
|
||
also what axe objects to, and rightly: a screen reader then has no way to skip to it. */
|
||
.legal-bar{padding:16px 20px;text-align:center;font-size:12px;color:var(--muted);background:#f1f3ef}
|
||
.legal-bar a{color:#a4510f}
|
||
|
||
/* An image takes the rounding of its figure. Without this a radius on an image block rounded the
|
||
figure and left the picture square - which looked like the setting did nothing. */
|
||
.block-image img, .block-gallery img, .block-logos img { border-radius: inherit }
|
||
|
||
/* A single icon, sized by class because inline styles are forbidden by the policy. */
|
||
.block-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--accent);line-height:0}
|
||
.block-icon svg{width:100%;height:100%;display:block}
|
||
.icon-size-12{width:12px;height:12px}.icon-size-16{width:16px;height:16px}.icon-size-20{width:20px;height:20px}
|
||
.icon-size-24{width:24px;height:24px}.icon-size-32{width:32px;height:32px}.icon-size-40{width:40px;height:40px}
|
||
.icon-size-48{width:48px;height:48px}.icon-size-56{width:56px;height:56px}.icon-size-64{width:64px;height:64px}
|
||
.icon-size-80{width:80px;height:80px}.icon-size-96{width:96px;height:96px}.icon-size-120{width:120px;height:120px}
|
||
.icon-size-160{width:160px;height:160px}.icon-size-200{width:200px;height:200px}.icon-size-240{width:240px;height:240px}
|
||
|
||
/* A progress bar. The value is a class, not an inline style, for the same reason. */
|
||
.block-progress{margin:0 0 22px}
|
||
.progress-label{display:flex;justify-content:space-between;gap:16px;margin:0 0 8px;font-size:14px;font-weight:600}
|
||
.progress-value{color:var(--muted);font-weight:400}
|
||
.progress-track{height:10px;border-radius:999px;background:#e2e7e1;overflow:hidden}
|
||
.progress-fill{height:100%;border-radius:999px;background:var(--accent)}
|
||
.tone-ink .progress-track{background:#ffffff26}
|
||
.tone-ink .progress-fill{background:var(--mint)}
|
||
|
||
/* A slider without a script: a scroll container with snapping. It keeps working when snapping is
|
||
unsupported - then it is a strip you can scroll. No autoplay, ever. */
|
||
.block-slider{display:grid;grid-auto-flow:column;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:12px;scrollbar-gutter:stable}
|
||
.block-slider.slider-snap{scroll-snap-type:x mandatory}
|
||
.slider-snap>.slider-slide{scroll-snap-align:start}
|
||
.slider-slide{min-width:0}
|
||
.block-slider:focus-visible{outline:3px solid #b85c12;outline-offset:6px}
|
||
.slide-desktop-1{grid-auto-columns:100%}.slide-desktop-2{grid-auto-columns:calc(50% - 10px)}
|
||
.slide-desktop-3{grid-auto-columns:calc(33.333% - 14px)}.slide-desktop-4{grid-auto-columns:calc(25% - 15px)}
|
||
.slide-desktop-5{grid-auto-columns:calc(20% - 16px)}.slide-desktop-6{grid-auto-columns:calc(16.666% - 17px)}
|
||
@media (max-width:1024px){
|
||
.slide-tablet-1{grid-auto-columns:100%}.slide-tablet-2{grid-auto-columns:calc(50% - 10px)}
|
||
.slide-tablet-3{grid-auto-columns:calc(33.333% - 14px)}.slide-tablet-4{grid-auto-columns:calc(25% - 15px)}
|
||
.slide-tablet-5{grid-auto-columns:calc(20% - 16px)}.slide-tablet-6{grid-auto-columns:calc(16.666% - 17px)}
|
||
}
|
||
@media (max-width:650px){
|
||
.slide-mobile-1{grid-auto-columns:100%}.slide-mobile-2{grid-auto-columns:calc(50% - 10px)}
|
||
.slide-mobile-3{grid-auto-columns:calc(33.333% - 14px)}.slide-mobile-4{grid-auto-columns:calc(25% - 15px)}
|
||
.slide-mobile-5{grid-auto-columns:calc(20% - 16px)}.slide-mobile-6{grid-auto-columns:calc(16.666% - 17px)}
|
||
}
|
||
.progress-fill-0{width:0%}
|
||
.progress-fill-1{width:1%}
|
||
.progress-fill-2{width:2%}
|
||
.progress-fill-3{width:3%}
|
||
.progress-fill-4{width:4%}
|
||
.progress-fill-5{width:5%}
|
||
.progress-fill-6{width:6%}
|
||
.progress-fill-7{width:7%}
|
||
.progress-fill-8{width:8%}
|
||
.progress-fill-9{width:9%}
|
||
.progress-fill-10{width:10%}
|
||
.progress-fill-11{width:11%}
|
||
.progress-fill-12{width:12%}
|
||
.progress-fill-13{width:13%}
|
||
.progress-fill-14{width:14%}
|
||
.progress-fill-15{width:15%}
|
||
.progress-fill-16{width:16%}
|
||
.progress-fill-17{width:17%}
|
||
.progress-fill-18{width:18%}
|
||
.progress-fill-19{width:19%}
|
||
.progress-fill-20{width:20%}
|
||
.progress-fill-21{width:21%}
|
||
.progress-fill-22{width:22%}
|
||
.progress-fill-23{width:23%}
|
||
.progress-fill-24{width:24%}
|
||
.progress-fill-25{width:25%}
|
||
.progress-fill-26{width:26%}
|
||
.progress-fill-27{width:27%}
|
||
.progress-fill-28{width:28%}
|
||
.progress-fill-29{width:29%}
|
||
.progress-fill-30{width:30%}
|
||
.progress-fill-31{width:31%}
|
||
.progress-fill-32{width:32%}
|
||
.progress-fill-33{width:33%}
|
||
.progress-fill-34{width:34%}
|
||
.progress-fill-35{width:35%}
|
||
.progress-fill-36{width:36%}
|
||
.progress-fill-37{width:37%}
|
||
.progress-fill-38{width:38%}
|
||
.progress-fill-39{width:39%}
|
||
.progress-fill-40{width:40%}
|
||
.progress-fill-41{width:41%}
|
||
.progress-fill-42{width:42%}
|
||
.progress-fill-43{width:43%}
|
||
.progress-fill-44{width:44%}
|
||
.progress-fill-45{width:45%}
|
||
.progress-fill-46{width:46%}
|
||
.progress-fill-47{width:47%}
|
||
.progress-fill-48{width:48%}
|
||
.progress-fill-49{width:49%}
|
||
.progress-fill-50{width:50%}
|
||
.progress-fill-51{width:51%}
|
||
.progress-fill-52{width:52%}
|
||
.progress-fill-53{width:53%}
|
||
.progress-fill-54{width:54%}
|
||
.progress-fill-55{width:55%}
|
||
.progress-fill-56{width:56%}
|
||
.progress-fill-57{width:57%}
|
||
.progress-fill-58{width:58%}
|
||
.progress-fill-59{width:59%}
|
||
.progress-fill-60{width:60%}
|
||
.progress-fill-61{width:61%}
|
||
.progress-fill-62{width:62%}
|
||
.progress-fill-63{width:63%}
|
||
.progress-fill-64{width:64%}
|
||
.progress-fill-65{width:65%}
|
||
.progress-fill-66{width:66%}
|
||
.progress-fill-67{width:67%}
|
||
.progress-fill-68{width:68%}
|
||
.progress-fill-69{width:69%}
|
||
.progress-fill-70{width:70%}
|
||
.progress-fill-71{width:71%}
|
||
.progress-fill-72{width:72%}
|
||
.progress-fill-73{width:73%}
|
||
.progress-fill-74{width:74%}
|
||
.progress-fill-75{width:75%}
|
||
.progress-fill-76{width:76%}
|
||
.progress-fill-77{width:77%}
|
||
.progress-fill-78{width:78%}
|
||
.progress-fill-79{width:79%}
|
||
.progress-fill-80{width:80%}
|
||
.progress-fill-81{width:81%}
|
||
.progress-fill-82{width:82%}
|
||
.progress-fill-83{width:83%}
|
||
.progress-fill-84{width:84%}
|
||
.progress-fill-85{width:85%}
|
||
.progress-fill-86{width:86%}
|
||
.progress-fill-87{width:87%}
|
||
.progress-fill-88{width:88%}
|
||
.progress-fill-89{width:89%}
|
||
.progress-fill-90{width:90%}
|
||
.progress-fill-91{width:91%}
|
||
.progress-fill-92{width:92%}
|
||
.progress-fill-93{width:93%}
|
||
.progress-fill-94{width:94%}
|
||
.progress-fill-95{width:95%}
|
||
.progress-fill-96{width:96%}
|
||
.progress-fill-97{width:97%}
|
||
.progress-fill-98{width:98%}
|
||
.progress-fill-99{width:99%}
|
||
.progress-fill-100{width:100%}
|
||
|
||
/* Section widths. "wide" only widens the content, "full" removes the container entirely: that is
|
||
what a picture or a colour field from edge to edge needs. A full width section drops its own
|
||
padding as well, otherwise "edge to edge" would still have 32 pixels of air on each side. */
|
||
.width-wide>.section-inner{width:min(1600px,calc(100% - 64px))}
|
||
.width-full>.section-inner{width:100%;max-width:none;margin-inline:0}
|
||
@media (max-width:650px){.width-wide>.section-inner{width:calc(100% - 36px)}}
|
||
|
||
/* A section that is a flex container centres its content box; the inner container must then be
|
||
allowed to grow, or a full height section would show a strip in the middle. */
|
||
.block-section>.section-inner{flex:1 1 auto}
|