:root{ --rapport-w: 280px; } #rapport{ margin-bottom: 20vh; padding-left: var(--rapport-w); padding-bottom: 10vh; margin: 0 auto; max-width: calc(var(--max-w-content) + var(--rapport-w)); .rapport__header{ // display: grid; // grid-template-columns: 1fr 140px; // column-gap: calc(var(--spacing)*1.5); // row-gap: calc(var(--spacing)*2); margin-top: calc(var(--spacing)*2); max-width: var(--max-w-content); padding-bottom: calc(var(--spacing)*0.5); .rapport__title-group{ grid-column: span 2; } .title{ text-transform: uppercase; font-weight: normal; font-size: var(--fs-big); line-height: var(--leading-tight); font-weight: normal; margin-top: calc(var(--spacing)*1); } .subtitle{ font-size: var(--fs-big); line-height: var(--leading-tight); margin-top: calc(var(--spacing)*0.5); font-weight: normal; } dl{ align-self: start; font-size: var(--fs-small); border-bottom: var(--border-light); flex-grow: 2; align-items: flex-start; margin-top: calc(var(--spacing)*2); .dl__group{ @include grid-content(); border-top: var(--border-light); padding: calc(var(--spacing)*0.5) 0; } dt{ color: var(--color-txt-light); padding-right: 1ch; } } .thumbnail--group{ display: flex; gap: calc(var(--spacing)*0.5); margin-top: calc(var(--spacing)*1); } .thumbnail{ max-width: 260px; display: grid; grid-template-columns: 2fr 3fr; column-gap: calc(var(--padding-inner)*1); padding: calc(var(--padding-inner)*0.5); border: var(--border-light); // font-size: var(--fs-small); figure{ border: var(--border-medium); display: flex; aspect-ratio: 4/3; grid-column: 1; grid-row: 1/3; img{ width: 100%; height: 100%; object-fit: cover; } } .thumbnail__title{ padding-top: calc(var(--padding-inner)*0.5); a{ text-decoration: none; } } button{ align-self: end; display: flex; align-items: end; justify-content: end; padding-right: calc(var(--padding-inner)*0.5); padding-bottom: calc(var(--padding-inner)*0.5); } button svg{ width: 15px; height: 15px; fill: var(--color-txt); } } } .rapport__content{ max-width: var(--max-w-content); margin-top: calc(var(--spacing)*3); .section-content{ margin-bottom: calc(var(--spacing)*3); } .section-title{ font-size: var(--fs-medium); margin-bottom: var(--spacing); font-weight: normal; text-transform: uppercase; } p { margin: calc(var(--spacing)*0.5) 0; } ul{ padding-left: 3ch; } } } #rapport__aside{ width: var(--rapport-w); position: fixed; top: calc(var(--header-h) + var(--padding-body)); left: var(--padding-body); border: var(--border-light); // border-radius: var(--radius-small); height: calc(100vh - var(--header-h) - var(--padding-body)*2); .tabs{ display: flex; border-bottom: var(--border-light); height: calc(var(--h-block)*1.25); .tab{ display: flex; align-items: center; font-size: var(--fs-small); font-weight: bold; padding-left: 2ch; padding-top: 3px; } .tab[for="tab-print"]{ width: calc(var(--h-block)*1.5); border-right: var(--border-light); padding-left: 0; justify-content: center; .icon{ svg{ width: 18px; fill: var(--color-txt); } } } } .content-aside{ padding: var(--padding-body); height: calc(100% - var(--h-block)*1.25); overflow: scroll; } #toc{ ul{ list-style: none;} li{ font-size: var(--fs-small); padding: 5px 1ch; padding-top: 7px; } li.selected{ // color: var(--color-accent); background-color: var(--grey-800); } .toc-level-1{ margin-bottom: calc(var(--spacing)*0.5); font-weight: bold; } .toc-level-2{ margin-bottom: calc(var(--spacing)*0.25); padding-left: 4ch; } a{ text-decoration: none; } } } #tab-print, #tab-toc{ display: none; } #tab-print:checked ~ .content-aside #toc{ display: none; } #tab-print:checked ~ .content-aside #print-features{ display: block; } #tab-toc:checked ~ .content-aside #toc{ display: block; } #tab-toc:checked ~ .content-aside #print-features{ display: none; }