comit

- 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

@@ -35,27 +35,41 @@
 	{{ 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>
 
+      {{ $eventCount := 0 }}
       {{ 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 )) }}
+          {{ $eventCount = add $eventCount 1 }}
           <div class="event" >
             <a href="{{ .RelPermalink }}">{{.Title}}</a>
           </div>
         {{ end }}        
     {{ end }}
+    {{ if gt $eventCount 1 }}
+      {{ errorf "Error: Multiple events per day currently unsuported"}}
+    {{ end }}
     </div>
   {{ end }}
   </div>
 </div>
 
+<script>
+function simulateLinkClick() {
+  var link = document.querySelector('.div a');
+  if (link) {
+    link.click();
+  }
+}
+</script>
+
 
 {{ $date := $date.AddDate 0 1 0 }}
 
@@ -100,16 +114,22 @@
       <h3 class="day-num">{{ . }}</h3>
       <h3 class="mobile-date">{{ $startDate | time.Format ":date_long" }} </h3>
 
+      {{ $eventCount := 0 }}
       {{ 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 )) }}
+        {{ $eventCount = add $eventCount 1 }}
           <div class="event" >
             <a href="{{ .RelPermalink }}">{{.Title}}</a>
           </div>
         {{ end }}        
     {{ end }}
+    {{ if gt $eventCount 1 }}
+      {{ errorf "Error: Multiple events per day currently unsuported"}} 
+    {{ end }}
+    
     </div>
   {{ end }}
   </div>
@@ -152,22 +172,28 @@
 	{{ 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>
 
+      {{ $eventCount := 0 }}
       {{ 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 )) }}
+        {{ $eventCount = add $eventCount 1 }}
           <div class="event" >
             <a href="{{ .RelPermalink }}">{{.Title}}</a>
           </div>
         {{ end }}        
     {{ end }}
+    {{ if gt $eventCount 1 }}
+      {{ errorf "Error: Multiple events per day currently unsuported"}} 
+    {{ end }}
+    
     </div>
   {{ end }}
   </div>

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,22 +48,27 @@
 	{{ 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>
 
+      {{ $eventCount := 0 }}
       {{ 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 )) }}
+          {{ $eventCount = add $eventCount 1 }}
           <div class="event" >
             <a href="{{ .RelPermalink }}">{{.Title}}</a>
           </div>
         {{ end }}        
     {{ end }}
+    {{ if gt $eventCount 1 }}
+      {{ errorf "Error: Multiple events per day currently unsuported" }}
+    {{ end }}
     </div>
   {{ end }}
   </div>

static/css/colorschemes/colors.css

@@ -1,25 +1,27 @@
-/* Mostly based off of gruvbox */
-
 :root { 
-	--bg: #D4D8ED; 
+/* Colors */
 	--fg: #06080E;
 	--alt-fg: #F1F2F9;
-	--acc: #3C5197;
+
-	--dark-acc: #12182B;
+	--bg: #D4D8ED;
-	--light-acc: #5F75BF;
 	--alt-bg: #C5CCE8;
 	--dark-alt-bg: #A9B2DB; 
 	
+	--acc: #3C5197;
+	--dark-acc: #12182B;
+	--light-acc: #5F75BF;
+
 /* Color Sheme linking */
+	/* Body Colors */
 	--body-bg: var(--bg);
 	--body-fg: var(--fg);
 	--link-fg: var(--acc);
 	
+	/* Navbar Colors */
 	--header-bg: var(--alt-bg);
 	--header-bg-hov: var(--acc);
 	--header-fg: var(--fg);
 	--header-fg-hov: var(--alt-fg);
-
 	--header-shadow: var(--dark-acc);
 	--header-shadow-hov: var(--header-shadow);
 
@@ -31,6 +33,7 @@
 	--langs-bg-hov: var(--header-bg-hov);
 	--langs-fg-hov: var(--header-fg-hov);
 
+/* Content Colors */
 	--blockquote-border: var(--alt-bg);
 
 	--table-bg: var(--dark-alt-bg);
@@ -43,8 +46,7 @@
 	--button-bg: var(--acc);
 	--button-fg: var(--alt-fg);
 
-
+/* Calendar Colors */
-
 	--cal-bg: var(--alt-bg);
 	--cal-fg: var(--fg);
 
@@ -59,41 +61,46 @@
 
 	--cal-day-busy-fg: var(--alt-fg);
 	--cal-day-busy-bg: var(--acc);
-
 	--cal-day-hover-fg: var(--cal-day-busy-fg);
 	--cal-day-hover-bg: var(--cal-day-busy-bg);
 
 	--cal-event-fg: var(--alt-fg);
 	--cal-event-bg: var(--light-acc) ;
 
---cal-mobile-bg: var(--cal-day-busy-bg);
+	--cal-mobile-bg: var(--alt-bg);
---cal-mobile-fg: var(--cal-fg);
+	--cal-mobile-fg: var(--fg);
---cal-mobile-border: var(--col-2);
---cal-mobile-link: var(--link-fg);
 
+	--cal-mobile-border: var(--acc);
+	--cal-mobile-link: var(--light-acc);
 } 
 
 @media (prefers-color-scheme: dark) { 
 	:root {
-
+	/* Dark Mode Colors */
 		--bg: #06080E;
 		--fg: #F0F2F9;
 		--dark-acc: #0C101D;
 		--alt-bg: #18203A;
 		--dark-alt-bg: #12182B;
 
+	/* Dark Mode Colorscheme Changes */
 		--link-fg: var(--light-acc);
+
 		--table-bg: var(--dark-acc);
 		--table-bg-alt: var(----alt-bg);
+
 		--button-fg: var(--body-fg);
+
 		--cal-bg: var(--dark-acc);
+
 		--cal-weekdays-fg: var(--fg);
+
 		--cal-day-empty-fg: var(--dark-acc);
+
 		--cal-day-busy-fg: var(--acc);
 		--cal-day-busy-bg: var(--alt-bg);
+
 		--cal-event-fg: var(--fg);
 		--cal-event-bg: var(--acc) ; 
-
-
 	} 
 }

static/css/style.css

@@ -229,7 +229,7 @@ table tr { background-color: var(--table-bg-alt); }
 
 table tr:nth-child(2n) { background-color: var(--table-bg); }
 
-
+table thead tr th:empty { display: none; }
 
 /* Markdown Blockquote styles */
 
@@ -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;}