calendar imporvements

- removed exessive margin from day numbers
- days with events now have JS click event that simulates clicking on
  the event
- event no longer has a seperate bg, cleaner look

layouts/shortcodes/cal_layout.html

@@ -1,3 +1,12 @@
+<script>
+function simulateLinkClick() {
+  var link = document.querySelector('.day a');
+  if (link) {
+    link.click();
+  }
+}
+</script>
+
 {{ $date := now }}
 
 {{ $month := $date.Month | int }}
@@ -35,66 +44,7 @@
 	{{ end }}
 
   {{ range seq 1 $daysInMonth }}
-    <div class="day">
+    <div class="day" onclick="simulateLinkClick()" >
-      {{ $startDate := time.AsTime ( printf "%4d-%02d-%02dT00:00:00" $year $month . ) }}
-      {{ $endDate := time.AsTime ( printf "%4d-%02d-%02dT23:59:59" $year $month . ) }}
-      <h3 class="day-num">{{ . }}</h3>
-      <h3 class="mobile-date">{{ $startDate | time.Format ":date_long" }} </h3>
-
-      {{ range where $.Site.RegularPages "Section" "eq" "events" }}
-        {{ $eventStart := time.AsTime .Params.start_date }}
-        {{ $eventEnd := time.AsTime .Params.end_date }}
-        
-        {{ if and ( or ($eventEnd.After $startDate) ($eventEnd.Equal $startDate)) (or ( $eventStart.Before $endDate ) ( $eventStart.Equal $endDate )) }}
-          <div class="event" >
-            <a href="{{ .RelPermalink }}">{{.Title}}</a>
-          </div>
-        {{ end }}        
-    {{ end }}
-    </div>
-  {{ end }}
-  </div>
-</div>
-
-
-{{ $date := $date.AddDate 0 1 0 }}
-
-{{ $month := $date.Month | int }}
-{{ $year := $date.Year }}
-
-{{ $t1 := printf "%4d-%02d-01" $year $month }}
-{{ $t1 := time.AsTime $t1 }}
-{{ $t2 := $t1.AddDate 0 1 0 }}
-
-{{ $daysInMonth := $t2.Sub $t1 }}
-{{ $daysInMonth := $daysInMonth.Hours }}
-{{ $daysInMonth := div $daysInMonth 24 }}
-
-<div class="calendar">
-  {{ if eq .Site.Language.Lang "pl" }}
-    {{ $polish_month_names := slice "Styczeń" "Luty" "Marzec" "Kwiecień" "Maj" "Czerwiec" "Lipiec" "Sierpień" "Wrzesień" "Październik" "Listopad" "Grudzień" }}
-    {{ $month := sub $month 1}}
-    {{ $label := index $polish_month_names $month }}
-    <a class="month">{{ printf "%s %d" $label $year }}</a>
-  {{ else }}
-    <a class="month">{{ time.Format "January 2006" $t1 }}</a>
-  {{ end }}
-
-  <div class="weekdays" >
-    {{ $days := slice "sun" "mon" "tues" "wend" "thurs" "fri" "sat" }}
-    {{ range $days }}<p>{{ i18n (printf "days.%s" .) }}</p>{{ end }}
-  </div>
-
-  <div class="days">
-  {{ $padding := $t1.Weekday | int }}
-	{{ if gt $padding 0 }}
-    {{ range seq 1 $padding }}
-      <div class="pad-day"></div>
-    {{ end }}
-	{{ end }}
-
-  {{ range seq 1 $daysInMonth }}
-    <div class="day">
       {{ $startDate := time.AsTime ( printf "%4d-%02d-%02dT00:00:00" $year $month . ) }}
       {{ $endDate := time.AsTime ( printf "%4d-%02d-%02dT23:59:59" $year $month . ) }}
       <h3 class="day-num">{{ . }}</h3>
@@ -152,7 +102,65 @@
 	{{ end }}
 
   {{ range seq 1 $daysInMonth }}
-    <div class="day">
+    <div class="day" onclick="simulateLinkClick()" >
+      {{ $startDate := time.AsTime ( printf "%4d-%02d-%02dT00:00:00" $year $month . ) }}
+      {{ $endDate := time.AsTime ( printf "%4d-%02d-%02dT23:59:59" $year $month . ) }}
+      <h3 class="day-num">{{ . }}</h3>
+      <h3 class="mobile-date">{{ $startDate | time.Format ":date_long" }} </h3>
+
+      {{ range where $.Site.RegularPages "Section" "eq" "events" }}
+        {{ $eventStart := time.AsTime .Params.start_date }}
+        {{ $eventEnd := time.AsTime .Params.end_date }}
+        
+        {{ if and ( or ($eventEnd.After $startDate) ($eventEnd.Equal $startDate)) (or ( $eventStart.Before $endDate ) ( $eventStart.Equal $endDate )) }}
+          <div class="event" >
+            <a href="{{ .RelPermalink }}">{{.Title}}</a>
+          </div>
+        {{ end }}        
+    {{ end }}
+    </div>
+  {{ end }}
+  </div>
+</div>
+
+{{ $date := $date.AddDate 0 1 0 }}
+
+{{ $month := $date.Month | int }}
+{{ $year := $date.Year }}
+
+{{ $t1 := printf "%4d-%02d-01" $year $month }}
+{{ $t1 := time.AsTime $t1 }}
+{{ $t2 := $t1.AddDate 0 1 0 }}
+
+{{ $daysInMonth := $t2.Sub $t1 }}
+{{ $daysInMonth := $daysInMonth.Hours }}
+{{ $daysInMonth := div $daysInMonth 24 }}
+
+<div class="calendar">
+  {{ if eq .Site.Language.Lang "pl" }}
+    {{ $polish_month_names := slice "Styczeń" "Luty" "Marzec" "Kwiecień" "Maj" "Czerwiec" "Lipiec" "Sierpień" "Wrzesień" "Październik" "Listopad" "Grudzień" }}
+    {{ $month := sub $month 1}}
+    {{ $label := index $polish_month_names $month }}
+    <a class="month">{{ printf "%s %d" $label $year }}</a>
+  {{ else }}
+    <a class="month">{{ time.Format "January 2006" $t1 }}</a>
+  {{ end }}
+
+  <div class="weekdays" >
+    {{ $days := slice "sun" "mon" "tues" "wend" "thurs" "fri" "sat" }}
+    {{ range $days }}<p>{{ i18n (printf "days.%s" .) }}</p>{{ end }}
+  </div>
+
+  <div class="days">
+  {{ $padding := $t1.Weekday | int }}
+	{{ if gt $padding 0 }}
+    {{ range seq 1 $padding }}
+      <div class="pad-day"></div>
+    {{ end }}
+	{{ end }}
+
+  {{ range seq 1 $daysInMonth }}
+    <div class="day" onclick="simulateLinkClick()" >
       {{ $startDate := time.AsTime ( printf "%4d-%02d-%02dT00:00:00" $year $month . ) }}
       {{ $endDate := time.AsTime ( printf "%4d-%02d-%02dT23:59:59" $year $month . ) }}
       <h3 class="day-num">{{ . }}</h3>

layouts/shortcodes/calendar.html

@@ -1,3 +1,12 @@
+<script>
+function simulateLinkClick() {
+  var link = document.querySelector('.day a');
+  if (link) {
+    link.click();
+  }
+}
+</script>
+
 {{ $date:= .Get "date" }}
 {{ if not $date }}
   {{ errorf "Error: 'date' is a required parameter." }}
@@ -39,7 +48,7 @@
 	{{ end }}
 
   {{ range seq 1 $daysInMonth }}
-    <div class="day">
+    <div class="day" onclick="simulateLinkClick()" >
       {{ $startDate := time.AsTime ( printf "%4d-%02d-%02dT00:00:00" $year $month . ) }}
       {{ $endDate := time.AsTime ( printf "%4d-%02d-%02dT23:59:59" $year $month . ) }}
       <h3 class="day-num">{{ . }}</h3>

static/css/style.css

@@ -521,6 +521,7 @@ blockquote.location p { padding: inherit; }
   transition: 400ms;
 
   display: flex;
+	flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
@@ -528,7 +529,7 @@ blockquote.location p { padding: inherit; }
 
 
  .day:has(>.event) {
-  display: block;
+  /* display: block; */
   color: var(--cal-day-busy-fg);
   background-color: var(--cal-day-busy-bg);
  }
@@ -537,21 +538,25 @@ blockquote.location p { padding: inherit; }
   transform: scale(1.2);
   background-color: var(--cal-day-hover-bg);
   color: var(--cal-day-hover-fg);
+	cursor: pointer;
  }
 
  .day-num {
-  font-size: 8vh;
+  font-size: 6.5vh;
+	line-height: 1;
 	pointer-events: none;
+	margin: 0;
  }
 
 .day:has(>.event) .day-num {
-  font-size: 4vh;
+  font-size: 3vh;
+	margin-bottom: 1vh;
  }
 
  .event, .event a {
   font-size: 1.5vh;
   color: var(--cal-event-fg);
-  background-color: var(--cal-event-bg);
+  /* background-color: var(--cal-event-bg); */
  }
 
  .mobile-date { display: none;}