This repository has been archived on 2023-02-03. You can view files and clone it, but cannot push or open issues or pull requests.
autonomic.zone/scss/utilities/_hex.scss

61 lines
1.0 KiB
SCSS
Raw Normal View History

2017-08-31 11:44:57 +00:00
.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;
}
}