61 lines
1.0 KiB
SCSS
61 lines
1.0 KiB
SCSS
|
.hex-grid {
|
||
|
|
@include breakpoint($sm) {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
margin: 0 auto;
|
||
|
|
overflow: hidden;
|
||
|
|
padding-bottom: 6.6%
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin hex__outer {
|
||
|
|
position: relative;
|
||
|
|
visibility: hidden;
|
||
|
|
outline: 1px solid transparent;
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
content:'';
|
||
|
|
display: block;
|
||
|
|
padding-bottom: 86.602%; // = 100 / tan(60) * 1.5
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin hex__middle {
|
||
|
|
position: absolute;
|
||
|
|
width: 92%;
|
||
|
|
padding-bottom: 106.232%; // width / sin(60)
|
||
|
|
margin: 0 1%;
|
||
|
|
overflow: hidden;
|
||
|
|
outline: 1px solid transparent;
|
||
|
|
transform: rotate3d(0,0,1,-60deg) skewY(30deg);
|
||
|
|
|
||
|
|
> * {
|
||
|
|
position: absolute;
|
||
|
|
visibility: visible;
|
||
|
|
outline: 1px solid transparent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@mixin hex__inner {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
text-align: center;
|
||
|
|
overflow: hidden;
|
||
|
|
transform: skewY(-30deg) rotate3d(0,0,1,60deg);
|
||
|
|
|
||
|
|
img {
|
||
|
|
left: -100%;
|
||
|
|
right: -100%;
|
||
|
|
min-width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
max-width: 200%;
|
||
|
|
margin: 0 auto;
|
||
|
|
transform: rotate3d(0,0,0,0deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
> * {
|
||
|
|
position: absolute;
|
||
|
|
visibility: visible;
|
||
|
|
outline: 1px solid transparent;
|
||
|
|
}
|
||
|
|
}
|