40 lines
1.2 KiB
CSS
40 lines
1.2 KiB
CSS
.wrapper {
|
|
/* CLASSIC WRAPPER */
|
|
/* max-width: var(--wrapper-max-width, 80rem);
|
|
margin-inline-start: auto;
|
|
margin-inline-end: auto;
|
|
--_content-padding: var(--content-padding, var(--space-s));
|
|
padding-inline-start: var(--_content-padding);
|
|
padding-inline-end: var(--_content-padding);
|
|
position: relative; */
|
|
--content-width: 65rem;
|
|
--grid-wrapper: [full-start] 1fr [wrapper-start]
|
|
minmax(0, var(--content-width)) [wrapper-end] 1fr [full-end];
|
|
|
|
/* GRID WRAPPER */
|
|
display: grid;
|
|
grid-template-columns: var(--grid-wrapper);
|
|
--_content-padding: var(--content-padding, var(--space-s));
|
|
column-gap: var(--_content-padding);
|
|
}
|
|
/* set content inside wrapper column */
|
|
.wrapper > * {
|
|
grid-column: wrapper;
|
|
}
|
|
|
|
/* set full width content to full grid */
|
|
.wrapper.full-width {
|
|
/* calculate inline padding based on available space minus content space to align full-width content with wrapper content */
|
|
padding-inline: max(
|
|
calc((100vw - var(--content-width)) / 2),
|
|
var(--_content-padding)
|
|
);
|
|
grid-column: full;
|
|
}
|
|
/* set full width color to full grid */
|
|
.wrapper.full-width-color {
|
|
/* https://codepen.io/t_afif/pen/oNEaqQX */
|
|
border-image: conic-gradient(var(--color-full-width, var(--color-light)) 0 0)
|
|
fill 0 //0 100vw;
|
|
}
|