clickable calendar

vnshed/src/lib/components/calendar.svelte

@@ -1,7 +1,10 @@
-<script>
+<script lang="ts">
-    import { makeid } from "$lib/functions.js"
+    let current: Number = 9;
-    let id = makeid(8);
+
-    let current = 10;
+    function set_day(day: Number) {
+        current = day;
+        return null;
+    }
 </script>
 
 <div class="calendar rounded">
@@ -21,9 +24,9 @@
         {#each [...Array(31).keys()] as day}
             <li>
                 {#if current == day+1}
-                    <span class="active">{day+1}</span>
+                    <button class="active">{day+1}</button>
                 {:else}
-                    {day+1}
+                    <button class="nonactive" onclick={set_day(day+1)}>{day+1}</button>
                 {/if}
             </li>
         {/each}
@@ -90,8 +93,17 @@
     }
 
     .days li .active {
+        height: 2em;
         padding: 5px;
         border-radius: 30%;
+        aspect-ratio: 1/1;
+    }
+
+    .days li .nonactive {
+        height: 2em;
+        padding: 5px;
+        background: none;
+        aspect-ratio: 1/1;
     }
 
     @media screen and (max-width: 720px) {
@@ -101,6 +113,7 @@
     @media screen and (max-width: 420px) {
         .weekdays li, .days li {width: 12.5%;}
         .days li .active {padding: 2px;}
+        .days li .nonactive {padding: 2px;}
     }
 
     @media screen and (max-width: 290px) {

vnshed/src/lib/css/calendar.css

@@ -1,75 +0,0 @@
-ul {list-style-type: none;}
-
-.calendar * {
-    margin: 0;
-}
-
-.month {
-    width: 100%;
-    text-align: center;
-    align-content: center;
-}
-
-.month ul {
-    margin: 0;
-    padding: 0.5rem;
-}
-
-.month ul li {
-    display: inline;
-    text-transform: uppercase;
-    letter-spacing: 3px;
-}
-
-.month .prev {
-    float: inline-start;
-    cursor: pointer;
-}
-
-.month .next {
-    float: inline-end;
-    cursor: pointer;
-}
-
-.weekdays {
-    padding: 10px 0 0 0;
-}
-
-.weekdays li {
-    display: inline-block;
-    width: 13.6%;
-    text-align: center;
-}
-
-.days {
-    padding: 10px 0;
-    margin: 0;
-}
-
-.days li {
-    list-style-type: none;
-    display: inline-block;
-    width: 13.6%;
-    text-align: center;
-    margin-bottom: 5px;
-    font-size: smaller;
-    cursor: pointer;
-}
-
-.days li .active {
-    padding: 5px;
-    border-radius: 30%;
-}
-
-@media screen and (max-width: 720px) {
-    .weekdays li, .days li {width: 13.1%;}
-}
-
-@media screen and (max-width: 420px) {
-    .weekdays li, .days li {width: 12.5%;}
-    .days li .active {padding: 2px;}
-}
-
-@media screen and (max-width: 290px) {
-    .weekdays li, .days li {width: 12.2%;}
-}

vnshed/src/routes/+layout.svelte

@@ -8,14 +8,15 @@
 
 	let { children } = $props();
 
-	let page_data = {
+	let page_data = $state({
 		title: "",
 		description: "",
 		time_to_read: "",
 		genres: [],
 		tags: [],
-		badges: []
+		badges: [],
-	}
+		pub_date: ""
+	})
 
 	function send_json() {
 		console.log(JSON.stringify(page_data))