hugo-theme/layouts/shortcodes/calendar.html

80 lines
1.2 KiB
HTML
Raw Normal View History

2024-02-13 20:55:36 +00:00
{{ $month := .Get "month" }}
{{ if not $month }}
{{ errorf "Error: 'month' is a required parameter." }}
{{ end }}
{{ $year := .Get "year" }}
{{ if not $year }}
{{ errorf "Error: 'year' is a required parameter." }}
{{ end }}
{{ $label := .Get "label" }}
{{ if not $label }}
{{ errorf "Error: 'label' is a required parameter." }}
{{ end }}
{{ $daysInMonth := 27 }}
<div class="calendar">
<a class="month">{{ time.Format "January 2006" "01 Dec 2024" }}</a>
<div class="days">
{{ $padding := 4 }}
{{ range seq 1 1}}
<div class="pad-day"></div>
{{ end }}
{{ range seq 1 $daysInMonth }}
<div class="day">{{ . }}</div>
{{ end }}
</div>
</div>
<style>
.calendar {
width: 100%;
margin: 20px 0;
padding: 0;
background-color: darkslategray;
}
a.month {
display: block;
padding: 15px 0;
margin: 0;
text-align: center;
width: 100%;
background-color: black;
}
.days {
width: calc(100% - 10px) ;
padding: 5px;
margin: auto;
display: flex;
flex-wrap: wrap;
}
.pad-day, .day {
width: calc(14.28% - 3px) ;
margin: 1.5px;
aspect-ratio: 1;
}
.day {
background-color: gray;
transition: 400ms;
}
.day:hover {
transform: scale(1.2);
background-color: black;
}
</style>