Improved calendar day styling. Large numbers, now today marker and other tweaks.

src/components/CalendarDay.vue

@@ -1,8 +1,16 @@
 <script setup>
+import { computed } from 'vue'
+import { formatDateCompact, fromLocalString } from '@/utils/date'
+
 const props = defineProps({
   day: Object,
   dragging: { type: Boolean, default: false },
 })
+
+const formattedDate = computed(() => {
+  const date = fromLocalString(props.day.date)
+  return formatDateCompact(date)
+})
 </script>
 
 <template>
@@ -21,6 +29,7 @@ const props = defineProps({
     ]"
     :data-date="props.day.date"
   >
+    <span class="compact-date">{{ formattedDate }}</span>
     <h1 class="day-number">{{ props.day.displayText }}</h1>
     <span v-if="props.day.lunarPhase" class="lunar-phase">{{ props.day.lunarPhase }}</span>
     <div v-if="props.day.holiday" class="holiday-info" dir="auto" :title="props.day.holiday.name">
@@ -32,59 +41,68 @@ const props = defineProps({
 <style scoped>
 .cell {
   position: relative;
+  background: var(--panel);
   border-inline-end: 1px solid var(--border-color);
   border-bottom: 1px solid var(--border-color);
   user-select: none;
   display: grid;
-  /* 3 columns: day number, flexible space, lunar phase */
-  grid-template-columns: min-content 1fr min-content;
-  /* 3 rows: header, flexible filler, holiday label */
-  grid-template-rows: auto 1fr auto;
-  /* Named grid areas (only ones actually used) */
+  /* Updated grid for centered day number */
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr auto;
+  /* Named grid areas */
   grid-template-areas:
-    'day-number . lunar-phase'
-    'day-number . lunar-phase'
-    'holiday-info holiday-info holiday-info';
-  /* Explicit areas mainly for clarity */
-  grid-auto-flow: row;
+    'day-number'
+    'holiday-info';
   padding: 0.25em;
-  overflow: hidden;
+  overflow: visible;
   width: 100%;
   height: var(--row-h);
   font-weight: 700;
   transition: background-color 0.15s ease;
-  align-items: start;
+  align-items: center;
+  justify-items: center;
 }
 .cell h1.day-number {
   margin: 0;
   padding: 0;
-  min-width: 1.5em;
-  font-size: 1em;
-  font-weight: 700;
+  position: absolute;
+  inset-block: 1.5rem;
+  inset-inline: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 5vmin;
+  font-weight: 600;
   color: var(--ink);
-  transition: background-color 0.15s ease;
-  grid-area: day-number;
+  opacity: 0.8;
+  transition: all 0.15s ease;
+}
+.cell.firstday h1.day-number {
+  font-weight: 400;
 }
 .cell.weekend h1.day-number {
   color: var(--weekend);
 }
 .cell.firstday h1.day-number {
   color: var(--firstday);
-  text-shadow: 0 0 0.1em var(--strong);
 }
-.cell.today h1.day-number {
-  border-radius: 2em;
-  background: var(--today);
-  border: 0.2em solid var(--today);
-  margin: -0.2em;
-  color: var(--strong);
-  font-weight: bold;
-}
-.cell.selected {
-  filter: hue-rotate(180deg);
+.cell.today::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: calc(100% + .3rem);
+  height: calc(100% + .3rem);
+  border-radius: 1rem;
+  background: transparent;
+  border: 0.1em solid var(--today);
+  z-index: 15;
+  pointer-events: none;
 }
 .cell.selected h1.day-number {
-  color: var(--strong);
+  opacity: 0.3;
+  filter: brightness(1.2);
 }
 .cell.holiday {
   background-image: linear-gradient(
@@ -102,32 +120,50 @@ const props = defineProps({
     );
   }
 }
-.cell.holiday h1.day-number {
-  /* Slight emphasis without forcing a specific hue */
-  color: var(--holiday);
-  text-shadow: 0 0 0.3em rgba(255, 255, 255, 0.4);
-}
 .lunar-phase {
   grid-area: lunar-phase;
-  align-self: start;
-  justify-self: end;
-  margin-top: 0.5em;
-  margin-inline-end: 0.2em;
+  position: absolute;
+  inset-block-start: 0.5em;
+  inset-inline-end: 0.2em;
   font-size: 0.8em;
   opacity: 0.7;
 }
 
+.compact-date {
+  position: absolute;
+  top: 0.25em;
+  left: 0.25em;
+  inset-inline-end: 1rem; /* Space for lunar phase */
+  font-weight: 400;
+  color: var(--ink);
+  line-height: 1;
+  pointer-events: none;
+}
+
+.cell.weekend .compact-date {
+  color: var(--weekend);
+}
+.cell.firstday .compact-date {
+  color: var(--firstday);
+}
+.cell.today .compact-date {
+  color: var(--strong);
+}
+.cell.selected .compact-date {
+  color: var(--strong);
+}
+
 .holiday-info {
   grid-area: holiday-info;
   align-self: end;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--holiday-label);
-  font-size: clamp(1.2vw, 0.6em, 1em);
-  line-height: 1;
+  max-width: 100%;
+  color: var(--holiday);
+  font-size: 1em;
+  font-weight: 400;
+  line-height: 1.0;
   padding-inline: 0.15em;
-  padding-block-end: 0.05em;
+  padding-block: 0;
   pointer-events: auto;
 }
 </style>