comit

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
2024-03-08 16:01:23 -05:00 · 2024-03-08 13:01:24 -05:00 · 2024-03-08 11:54:11 -05:00 · 2024-03-08 09:00:30 -05:00 · 2024-03-06 22:45:04 -05:00
5 changed files with 139 additions and 82 deletions
--- a/layouts/shortcodes/cal_layout.html
+++ b/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>
--- a/layouts/shortcodes/calendar.html
+++ b/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>
--- a/static/css/404.css
+++ b/static/css/404.css
@ -5,9 +5,10 @@
 .not-found a.logo {
 	width: 100%;
 	padding: 20px 0;
-	background-color: var(--alt-bg);
+	background-color: var(--header-bg);
 	text-align: center;
 	pointer-events: none;
+	box-shadow:  inset 0 -20px 20px -20px var(--header-shadow);
 }

 h1.not-found-num {
--- a/static/css/colorschemes/colors.css
+++ b/static/css/colorschemes/colors.css
@ -1,97 +1,106 @@
-/* Mostly based off of gruvbox */
-
 :root { 
-	--col-0: #FFFFFF;
-	--col-1: #F0F2F9;
-	--col-2: #3C5197;
-	--col-3: #0C101D;
-	--col-4: #18203A;
-	--col-5: #5F75BF;
-	--col-6: #1E2848;
-	--col-7: #12182B;
-	--col-8: #181F38;
+/* Colors */
+	--fg: #06080E;
+	--alt-fg: #F1F2F9;

+	--bg: #D4D8ED;
+	--alt-bg: #C5CCE8;
+	--dark-alt-bg: #A9B2DB; 
 	
+	--acc: #3C5197;
+	--dark-acc: #12182B;
+	--light-acc: #5F75BF;

 /* Color Sheme linking */
-	--body-bg: var(--col-3);
-	--body-fg: var(--col-1);
+	/* Body Colors */
+	--body-bg: var(--bg);
+	--body-fg: var(--fg);
+	--link-fg: var(--acc);
 	
-	--link-fg: var(--col-5);
-
-	--header-bg: var(--col-4);
-	--header-bg-hov: var(--col-2);
-	--header-fg: var(--body-fg);
-
-	--header-shadow: var(--body-bg);
+	/* 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);

-	--hamburger-fg: var(--col-1);
+	--hamburger-fg: var(--fg);
 	--hamburger-fg-checked: var(--hamburger-fg);
+
 	--langs-bg: var(--header-bg);
 	--lang-btn-bg: var(--header-bg) ;
 	--langs-bg-hov: var(--header-bg-hov);
+	--langs-fg-hov: var(--header-fg-hov);

+/* Content Colors */
+	--blockquote-border: var(--alt-bg);

-  --blockquote-border: var(--col-6);
-
-
-
-
-
-
-	--table-bg: var(--col-7);
-	--table-bg-alt: var(--col-8);
+	--table-bg: var(--dark-alt-bg);
+	--table-bg-alt: var(--alt-bg);
 	--table-border: var(--body-bg);

+	--maps-bg: var(--alt-bg);
+	--maps-border: var(--acc);

-	--maps-bg: var(--col-4);
-	--maps-border: var(--col-2);
+	--button-bg: var(--acc);
+	--button-fg: var(--alt-fg);

-	--button-bg: var(--col-2);
-	--button-fg: var(--body-fg);
+/* Calendar Colors */
+	--cal-bg: var(--alt-bg);
+	--cal-fg: var(--fg);

+	--cal-month-bg: var(--alt-bg);
+	--cal-month-fg: var(--fg);

+	--cal-weekdays-bg: var(--light-acc);
+	--cal-weekdays-fg: var(--alt-fg);

+	--cal-day-empty-fg: var(--alt-fg);
+	--cal-day-empty-bg:  var(--dark-alt-bg);

--cal-bg: var(--col-4);
--cal-fg: var(--body-fg);
+	--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-month-bg: var(--col-8);
--cal-month-fg: var(--link-fg);
+	--cal-event-fg: var(--alt-fg);
+	--cal-event-bg: var(--light-acc) ;

--cal-weekdays-bg: var(--col-7);
--cal-weekdays-fg: var(--cal-fg);
+	--cal-mobile-bg: var(--alt-bg);
+	--cal-mobile-fg: var(--fg);

--cal-day-empty-fg: var(--col-7);
--cal-day-empty-bg:  var(--col-6);
-
--cal-day-busy-fg: var(--cal-fg);
--cal-day-busy-bg: var(--col-7);
-
--cal-day-hover-fg: var(--col-2);
--cal-day-hover-bg: var(--col-7);
-
--cal-event-fg: var(--cal-fg);
--cal-event-bg: var(--col-2) ;
-
--cal-mobile-bg: var(--cal-day-busy-bg);
--cal-mobile-fg: var(--cal-fg);
--cal-mobile-border: var(--col-2);
--cal-mobile-link: var(--link-fg);
-
-/* Light Mode Colors */
-	--bg: #f9f5d7;
-	--fg: #3c3836;
-	--alt-bg: #d5c4a1;
-	--acc-1: #076678;
-	--shadow: #504945;
+	--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 Colorsheme Link Overides */
+	/* 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) ; 
 	} 
 }
--- a/static/css/style.css
+++ b/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 */

@ -377,8 +377,10 @@ blockquote.location p { padding: inherit; }
 	box-shadow: none;
 }

-.lang-btn:checked ~ .lang-switch a { box-shadow: none; }
-.lang-btn:checked ~ .lang-switch a { box-shadow: none; }
+.lang-btn:checked ~ .lang-switch a { 
+	box-shadow: none; 
+	color: var(--langs-fg-hov);
+}


 /* lang-switch content (hidden by default) */
@ -519,6 +521,7 @@ blockquote.location p { padding: inherit; }
  transition: 400ms;

  display: flex;
+	flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
@ -526,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);
 }
@ -535,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;}
Author	SHA1	Message	Date
Worktop	0c04a1b0a0	comit	2024-03-08 16:01:23 -05:00
Worktop	90556d90b3	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	2024-03-08 13:01:24 -05:00
Worktop	d107e7c97a	make emty table headers invisible	2024-03-08 11:54:11 -05:00
Jakub	777e53ef81	Rework colorscheme	2024-03-08 09:00:30 -05:00
Jakub	d03176171c	Merge branch 'master' of git.jakubb.xyz:34mdh/hugo-theme	2024-03-06 22:45:04 -05:00