layouts/shortcodes/cal_layout.html

@@ -12,6 +12,7 @@
 {{ $daysInMonth := div $daysInMonth 24 }}
 
 <div class="calendar">
+  <link rel="stylesheet" href="/css/calendar.css" type="text/css">
   {{ 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}}
@@ -71,6 +72,7 @@
 {{ $daysInMonth := div $daysInMonth 24 }}
 
 <div class="calendar">
+  <link rel="stylesheet" href="/css/calendar.css" type="text/css">
   {{ 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}}
@@ -129,6 +131,7 @@
 {{ $daysInMonth := div $daysInMonth 24 }}
 
 <div class="calendar">
+  <link rel="stylesheet" href="/css/calendar.css" type="text/css">
   {{ 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}}
@@ -186,7 +189,7 @@
 {{ range sort (where .Site.RegularPages "Section" "events") "Params.start_date" "asc" }}
   {{ $eventDate := time.AsTime .Params.start_date }}
   {{ if and ( or ($eventDate.After $startDate) ($eventDate.Equal $startDate)) ($eventDate.Before $endDate) }}
-		<li>{{$eventDate | time.Format ":date_medium" }} - <a href="{{ .RelPermalink }}">{{.Title}}</a></li>
+		<li>{{$eventDate.Format "Jan 2, 2006" }} - <a href="{{ .RelPermalink }}">{{.Title}}</a></li>
 	{{ end }}
 {{ end }}
 </ul>

layouts/shortcodes/calendar.html

@@ -16,6 +16,7 @@
 {{ $daysInMonth := div $daysInMonth 24 }}
 
 <div class="calendar">
+  <link rel="stylesheet" href="/css/calendar.css" type="text/css">
   {{ 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}}

static/css/calendar.css

@@ -0,0 +1,184 @@
+:root {
+--cal-bg: darkslategray;
+--cal-fg: white;
+
+--cal-month-bg: black;
+--cal-month-fg: cyan;
+
+--cal-weekdays-bg: gray ;
+--cal-weekdays-fg: black;
+
+--cal-day-empty-fg: #888;
+--cal-day-empty-bg: #555;
+
+--cal-day-busy-fg:  #555;
+--cal-day-busy-bg:  #888;
+
+--cal-day-hover-fg: #555;
+--cal-day-hover-bg: black;
+
+--cal-event-fg: white;
+--cal-event-bg: var(--acc-1) ;
+}
+
+ .calendar {
+  width: 100%;
+	max-width: 1000px;
+  margin: 20px auto;
+  padding: 0;
+  background-color: var(--cal-bg);
+  color: var(--cal-fg);
+ }
+
+ a.month {
+  display: block;
+  width: 100%;
+  padding: 15px 0;
+  text-align: center;
+  background-color: var(--cal-month-bg);
+  color: var(--cal-month-fg);
+	pointer-events: none;
+ }
+
+ .days {
+  width: calc(100% - 10 px) ;
+  padding: 5px;
+  margin: auto;
+  display: flex;
+  flex-wrap: wrap;
+ }
+
+ .weekdays {
+  display: block;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+	pointer-events: none;
+ }
+
+ .weekdays p {
+  display: inline-block;
+  width: calc(14.28%);
+  background-color: var(--cal-weekdays-bg);
+  color: var(--cal-weekdays-fg);
+  margin: 0;
+  padding: 0;
+  text-align: center;
+	/* border: 0px solid var(--bg); */
+	/* border-collapse: collapse; */
+}
+
+ .pad-day, .day {
+  width: calc(14.28% - 3px - 10px);
+  padding: 0 5px;
+  margin: 1.5px;
+  aspect-ratio: 1;
+ }
+
+
+ .day {
+  background-color: var(--cal-day-empty-bg);
+  color: var(--cal-day-empty-fg);
+  transition: 400ms;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+ }
+
+
+ .day:has(>.event) {
+  display: block;
+  color: var(--cal-day-busy-fg);
+  background-color: var(--cal-day-busy-bg);
+ }
+
+.day:has(>.event):hover {
+  transform: scale(1.2);
+  background-color: var(--cal-day-hover-bg);
+  color: var(--cal-day-hover-fg);
+ }
+
+ .day-num {
+  font-size: 8vh;
+	pointer-events: none;
+ }
+
+.day:has(>.event) .day-num {
+  font-size: 4vh;
+ }
+
+ .event, .event a {
+  font-size: 1.5vh;
+  color: var(--cal-event-fg);
+  background-color: var(--cal-event-bg);
+ }
+
+ .mobile-date { display: none;}
+ 
+/* mobile layout */
+@media screen and (max-width: 755px) {
+  .day, .pad-day, .weekdays, a.month { display:  none; }
+
+  .days { 
+    padding: 0;
+    text-align: left;
+   }
+
+  .calendar{
+    background-color: inherit;
+    
+  } 
+  .day:has(>.event) {
+    display: block;
+    width: 100%;
+    aspect-ratio: auto;
+
+    text-align: left;
+
+    border-left-width: 5px;
+    border-left-style: solid;
+    margin-top: 10px;
+    background-color: var(--alt-bg);
+    border-left-color: var(--acc-1);
+    padding: 20px;
+    color: var(--alt-fg);
+
+  }
+
+  .day:has(>.event):hover {
+    background-color: var(--alt-bg);
+    transform: none;
+    color: var(--alt-fg);
+
+  }
+
+  .day-num { display: none; }
+
+ .mobile-date { 
+    display: inline-block;
+    
+    text-align: left;
+    font-size: 3vh;
+    width: auto;
+
+  }
+
+  .event {
+
+    float: right;
+    height: 100%;
+
+    display:flex;justify-content:flex-end;align-items:center;
+  }
+
+  .event, .event a {
+    background: none;
+
+  }
+    .event a {
+    color: var(--acc-1);
+    font-size: 2vh;
+    }
+}

static/css/colorschemes/colors.css

@@ -13,27 +13,6 @@
 	--lang-btn-bg: black;
 	--langs-bg: black;
 	--langs-bg-hov: gray;
-
---cal-bg: darkslategray;
---cal-fg: white;
-
---cal-month-bg: black;
---cal-month-fg: cyan;
-
---cal-weekdays-bg: gray ;
---cal-weekdays-fg: black;
-
---cal-day-empty-fg: #888;
---cal-day-empty-bg: #555;
-
---cal-day-busy-fg:  #555;
---cal-day-busy-bg:  #888;
-
---cal-day-hover-fg: #555;
---cal-day-hover-bg: black;
-
---cal-event-fg: white;
---cal-event-bg: var(--acc-1) ;
 }
 
 @media (prefers-color-scheme: dark) {

static/css/style.css

@@ -435,166 +435,3 @@ blockquote.location p { padding: inherit; }
 
 
 }
-
-/* Calendar TODO Mix in for clean stylesheet */
- .calendar {
-  width: 100%;
-	max-width: 1000px;
-  margin: 20px auto;
-  padding: 0;
-  background-color: var(--cal-bg);
-  color: var(--cal-fg);
- }
-
- a.month {
-  display: block;
-  width: 100%;
-  padding: 15px 0;
-  text-align: center;
-  background-color: var(--cal-month-bg);
-  color: var(--cal-month-fg);
-	pointer-events: none;
- }
-
- .days {
-  width: calc(100% - 10 px) ;
-  padding: 5px;
-  margin: auto;
-  display: flex;
-  flex-wrap: wrap;
- }
-
- .weekdays {
-  display: block;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-	pointer-events: none;
- }
-
- .weekdays p {
-  display: inline-block;
-  width: calc(14.28%);
-  background-color: var(--cal-weekdays-bg);
-  color: var(--cal-weekdays-fg);
-  margin: 0;
-  padding: 0;
-  text-align: center;
-	/* border: 0px solid var(--bg); */
-	/* border-collapse: collapse; */
-}
-
- .pad-day, .day {
-  width: calc(14.28% - 3px - 10px);
-  padding: 0 5px;
-  margin: 1.5px;
-  aspect-ratio: 1;
- }
-
-
- .day {
-  background-color: var(--cal-day-empty-bg);
-  color: var(--cal-day-empty-fg);
-  transition: 400ms;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
- }
-
-
- .day:has(>.event) {
-  display: block;
-  color: var(--cal-day-busy-fg);
-  background-color: var(--cal-day-busy-bg);
- }
-
-.day:has(>.event):hover {
-  transform: scale(1.2);
-  background-color: var(--cal-day-hover-bg);
-  color: var(--cal-day-hover-fg);
- }
-
- .day-num {
-  font-size: 8vh;
-	pointer-events: none;
- }
-
-.day:has(>.event) .day-num {
-  font-size: 4vh;
- }
-
- .event, .event a {
-  font-size: 1.5vh;
-  color: var(--cal-event-fg);
-  background-color: var(--cal-event-bg);
- }
-
- .mobile-date { display: none;}
- 
-/* mobile layout */
-@media screen and (max-width: 755px) {
-  .day, .pad-day, .weekdays, a.month { display:  none; }
-
-  .days { 
-    padding: 0;
-    text-align: left;
-   }
-
-  .calendar{
-    background-color: inherit;
-    
-  } 
-  .day:has(>.event) {
-    display: block;
-    width: 100%;
-    aspect-ratio: auto;
-
-    text-align: left;
-
-    border-left-width: 5px;
-    border-left-style: solid;
-    margin-top: 10px;
-    background-color: var(--alt-bg);
-    border-left-color: var(--acc-1);
-    padding: 20px;
-    color: var(--alt-fg);
-
-  }
-
-  .day:has(>.event):hover {
-    background-color: var(--alt-bg);
-    transform: none;
-    color: var(--alt-fg);
-
-  }
-
-  .day-num { display: none; }
-
- .mobile-date { 
-    display: inline-block;
-    
-    text-align: left;
-    font-size: 3vh;
-    width: auto;
-
-  }
-
-  .event {
-
-    float: right;
-    height: 100%;
-
-    display:flex;justify-content:flex-end;align-items:center;
-  }
-
-  .event, .event a {
-    background: none;
-
-  }
-    .event a {
-    color: var(--acc-1);
-    font-size: 2vh;
-    }
-}