<div class="event-date-hex hexagon reverse">
<abbr class="event-month regular" title="November">Nov</abbr> <span class="event-day">25</span>
</div>
<div class="event-date-hex hexagon{{hex_classes}}">
{{ render '@month' }} {{ render '@day' }}
</div>
{
"hex_classes": " reverse"
}
$clip-hex:0 !default;
$event-date-hex-timing:0.25s;
.event-date-hex {
background-color:rgba(black,0.05);
display:flex;
flex-direction:column;
justify-content:center;
height:4.6rem * 1.155; // regular hexagon appears to be 1.155 times as tall as it is wide
width:4.6rem;
.event-month[title] {
border-left:none;
border-right:none;
border-top:none;
margin:0 auto;
}
.event-day {
font-size:1.75rem;
line-height:2rem;
height:2rem;
margin-top:0;
}
&.reverse {
background-color:var(--blue);
.event-month[title] {
border-bottom-color:rgba(white,0.4);
color:white;
}
.event-day {
color:white;
}
}
&.not-inview {
opacity:0;
}
&.inview {
animation:hex-pop $event-date-hex-timing ease-in-out;
}
}
// for accessibility, no animation and no change in opacity
// https://www.w3.org/WAI/WCAG21/Techniques/css/C39.html
@media (prefers-reduced-motion: reduce) {
$event-date-hex-timing:1ms;
.event-date-hex {
&.not-inview {
opacity:1;
}
&.inview {
animation:none;
}
}
}
@keyframes hex-pop {
0% {
clip-path:polygon(50% 48%, 51% 49%, 51% 51%, 50% 52%, 49% 51%,49% 49%);
transform:scale(0.5);
}
100% {
clip-path:$clip-hex;
transform:scale(1);
}
}
There are no notes for this item.