genie-component-library
Version:
Genie Component Library
52 lines (51 loc) • 1.96 kB
CSS
/**
* @prop --gradient: The main gradient
* @prop --transform: The transform
* @prop --block-grid-area-1: Grid area of a block, up to the 5th. For more use parts
* @prop --block-color-1: Color of a block, up to the 5th. For more use parts
* @prop --block-grid-area-2: Grid area of a block, up to the 5th. For more use parts
* @prop --block-color-2: Color of a block, up to the 5th. For more use parts
* @prop --block-grid-area-3: Grid area of a block, up to the 5th. For more use parts
* @prop --block-color-3: Color of a block, up to the 5th. For more use parts
* @prop --block-grid-area-4: Grid area of a block, up to the 5th. For more use parts
* @prop --block-color-4: Color of a block, up to the 5th. For more use parts
* @prop --block-grid-area-5: Grid area of a block, up to the 5th. For more use parts
* @prop --block-color-5: Color of a block, up to the 5th. For more use parts
*/
:host {
padding: 0;
margin: 0;
z-index: -1;
position: absolute;
width: 100%;
height: 100vh;
}
div {
height: 100%;
transform: var(--transform, skewY(-5deg));
transform-origin: 0;
background: var(--gradient, linear-gradient(150deg, #53f 15%, #05d5ff 70%, #a6ffcb 94%));
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
}
div :nth-child(1) {
grid-area: var(--block-grid-area-1, 1/1/span 4/span 2);
background-color: var(--block-color-1, #53f);
}
div :nth-child(2) {
grid-area: var(--block-grid-area-2, 1/3/span 3/span 2);
background-color: var(--block-color-2, #4553ff);
}
div :nth-child(3) {
grid-area: var(--block-grid-area-3, 1/5/span 2/span 2);
background-color: var(--block-color-3, #4f40ff);
}
div :nth-child(4) {
grid-area: var(--block-grid-area-4, 3/11/span 3/span 2);
background-color: var(--block-color-4, #0dcfff);
}
div :nth-child(5) {
grid-area: var(--block-grid-area-5, 8/1/span 5/span 4);
background-color: var(--block-color-5, #1fa2ff);
}