43 lines
868 B
CSS
43 lines
868 B
CSS
.auto-cols-max-fr {
|
|
grid-template-columns: max-content 1fr;
|
|
}
|
|
|
|
.auto-cols-max-fr-max {
|
|
grid-template-columns: max-content 1fr max-content;
|
|
}
|
|
|
|
.auto-cols-fr-max {
|
|
grid-template-columns: 1fr max-content;
|
|
}
|
|
|
|
.auto-cols-fr-min {
|
|
grid-template-columns: 1fr min-content;
|
|
}
|
|
|
|
.auto-cols-fr-auto {
|
|
grid-template-columns: 1fr auto;
|
|
}
|
|
|
|
/** Hexagon stuff **/
|
|
|
|
.hexagon-container {
|
|
--s: 150px; /* control the size */
|
|
--g: 10px; /* control the gap */
|
|
display: grid;
|
|
margin: calc(var(--s) + var(--g));
|
|
}
|
|
|
|
.hexagon-container > .hexagon {
|
|
grid-area: 1/1;
|
|
width: var(--s);
|
|
aspect-ratio: 1.15;
|
|
object-fit: cover;
|
|
clip-path: polygon(25% 0%, 75% 0%, 100% 50%,75% 100%,25% 100%,0 50%);
|
|
/*transform: translate(var(--_x,0),var(--_y,0)) scale(var(--_t,1));*/
|
|
}
|
|
|
|
.hexagon-container > .hexagon:hover {
|
|
--_t: 1.2;
|
|
z-index: 1;
|
|
}
|