work on bobile layout for cal

layouts/index.html

@@ -2,13 +2,5 @@
 		{{ partial "nav.html" . }}
 <div class="content">
 {{ .Content }}
-
-<h2>Recent Posts</h2>
-<ul>
-	{{ range first 5 (where site.RegularPages "Type" "in" site.Params.mainSections).ByTitle }}
-		<li><a href="{{ .RelPermalink }}">{{ .Title}}</a></li>
-	{{ end }}
-</ul>
-<h2>LOL</h2>
 </div>
 {{ partial "footer.html" . }}

layouts/shortcodes/calendar.html

@@ -44,6 +44,7 @@
       {{ $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 }}

static/css/calendar.css

@@ -101,12 +101,12 @@
  }
 
  .day-num {
-  font-size: 8vw;
+  font-size: 8vh;
 	pointer-events: none;
  }
 
 .day:has(>.event) .day-num {
-  font-size: 4vw;
+  font-size: 4vh;
  }
 
  .event, .event a {
@@ -115,3 +115,70 @@
   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;
+    }
+}