brian/laravel-stubs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

adding some hexagon stuff, should be able to do a honeycomb layout with it

Browse Source
This commit is contained in:
Brian 2022-08-18 14:17:41 -06:00
parent a7df7a64f0
commit 0ff04a5ecd
Signed by: brian
GPG Key ID: DE1A5390A3B84CD8
1 changed files with 21 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/resources/css/extends/grid.css
View File

@ -1,3 +1,24 @@
.auto-cols-max-fr {
grid-template-column: max-content 1fr;
}
.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;
}