@uva-glass/component-library
Version:
React components UvA
2 lines (1 loc) • 970 B
CSS
.page-wrapper{--columns: 12;--gutter: 2rem;--color: rgba(126 195 240 / 25%);--repeating-width: calc(100% / var(--columns));--column-width: calc((100% / var(--columns)) - var(--grid-gap));--background-width: calc(100% + var(--grid-gap));--background-columns: repeating-linear-gradient( to right, var(--color), var(--color) var(--column-width), transparent var(--column-width), transparent var(--repeating-width) );align-content:flex-start;border:1px solid;border-color:transparent #e9e9e9;display:flex;flex-wrap:wrap;max-width:80rem;min-height:calc(100vh - 8rem);position:relative}.page-wrapper:before{background-image:var(--background-columns);content:"";inset:0 calc(var(--grid-gap) / -2) 0 calc(var(--grid-gap) / 2);opacity:.5;position:absolute;z-index:-1}.page-wrapper>div>div{background-color:#0000000d;box-shadow:inset calc(var(--grid-gap) / 2) 0 0 0 #c8000026,inset calc(var(--grid-gap) / -2) 0 0 0 #c8000026;padding:0 calc(var(--grid-gap) / 2);text-align:center}