Improved calendar style

pages/calendar/calendar.pixy

@@ -11,11 +11,10 @@ component Calendar(days []*utils.CalendarDay, user *arn.User)
 				h3.weekday-name.mountable(data-mountable-type=day.Name)= day.Name
 				.calendar-entries
 					each entry in day.Entries
-						.calendar-entry.mountable(data-mountable-type=day.Name, data-added=entry.Added)
-							a.ajax(href=entry.Anime.Link())
-								img.calendar-entry-image.lazy(data-src=entry.Anime.Image("large"), data-webp="true", alt=entry.Anime.Title.ByUser(user))
-							a.ajax(href=entry.Anime.Link())
-								.calendar-entry-title= entry.Anime.Title.ByUser(user)
+						a.calendar-entry.mountable.ajax(href=entry.Anime.Link(), data-mountable-type=day.Name, data-added=entry.Added)
+							img.calendar-entry-image.lazy(data-src=entry.Anime.Image("small"), data-webp="true", alt=entry.Anime.Title.ByUser(user))
 							.calendar-entry-info
-								.calendar-entry-time.utc-date-absolute(data-date=entry.Episode.AiringDate.Start)
-								.calendar-entry-episode= "Ep: " + strconv.Itoa(entry.Episode.Number)
+								.calendar-entry-title= entry.Anime.Title.ByUser(user)
+								.calendar-entry-time-and-episode
+									.calendar-entry-time.utc-date-absolute(data-date=entry.Episode.AiringDate.Start)
+									.calendar-entry-episode= "Ep: " + strconv.Itoa(entry.Episode.Number)

pages/calendar/calendar.scarlet

@@ -22,28 +22,45 @@
 	vertical
 
 .calendar-entry
-	ui-element
-	padding 0.5rem 1rem
-	margin-bottom 0.5rem
+	horizontal
+	default-transition
+	border-radius ui-element-border-radius
+	padding 0.5rem 0.6rem
+	margin-bottom 0.4rem
 	overflow hidden
 
+	:hover
+		background calendar-hover-color
+		box-shadow outline-shadow-light
+
 .calendar-entry-image
-	width 100%
-	height 4rem
-	object-fit cover
+	anime-list-item-image
 
 .calendar-entry[data-added="true"]
-	border 2px solid main-color
+	background calendar-entry-seen-background
+	box-shadow outline-shadow-light
+	border ui-border
 
 	:hover
-		border-color main-color
+		background calendar-entry-seen-hover-background
 
 .calendar-entry-info
-	horizontal
+	vertical
+	overflow hidden
+	margin-left 0.8rem
+	flex 1
 
 .calendar-entry-title
 	clip-long-text
-	margin-top 0.4rem
+	flex 0.5
+	line-height 1.2em
+
+.calendar-entry-time-and-episode
+	horizontal
+	flex 0.5
+	color text-color
+	line-height 1.6em
+	text-shadow none
 
 .calendar-entry-time
 	opacity 0.85