forked from jakub/jakubb-hugo
80 lines
1.2 KiB
HTML
80 lines
1.2 KiB
HTML
{{ $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> |