work on claendar layout

layouts/shortcodes/calendar.html

@@ -0,0 +1,80 @@
+{{ $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>