imworkingon: Get the calendar to look better

1 files changed, 34 insertions, 11 deletions

diff --git a/public/imworkingon/imworkingon.scss b/public/imworkingon/imworkingon.scss
index 4021fda..2b1bb90 100644
--- a/public/imworkingon/imworkingon.scss
+++ b/public/imworkingon/imworkingon.scss
@@ -117,27 +117,41 @@ article.standup {
 	}
 }
 
+$cal-inner-width: 0.3;
+$cal-outer-width: 0.5;
+$cal-total-width: (7*$cal-inner-width)+(2*$cal-outer-width);
 section#standups {
 	& > p, summary {
 		text-align: center;
 	}
+
+	/* Calendar: Font styling */
 	table {
 		font-size: small;
 	}
 	td {
-		width: 2em;
 		text-align: right;
+		&:has(a) {
+			font-weight: bold;
+		}
 	}
-	td.odd-month         { background-color: #FFDDDD; }
-	td.odd-month:has(a)  { background-color: #FFDDFF; }
-	th.odd-month         { background-color: #EECCCC; }
-	td.even-month        { background-color: #DDFFDD; }
-	td.even-month:has(a) { background-color: #DDFFFF; }
-	th.even-month        { background-color: #CCEECC; }
 
-	th.even-month, th.odd-month {
-		width: 3em;
-		max-width: 3em;
+	/* Calendar: Sizing */
+	table {
+		font-size: small;
+		table-layout: fixed;
+		width: #{$cal-total-width}in;
+	}
+	td, th {
+		overflow: hidden;
+		width: #{$cal-inner-width}in;
+		max-width: #{$cal-inner-width}in;
+		&:first-child, &:last-child {
+			width: #{$cal-outer-width}in;
+			max-width: #{$cal-outer-width}in;
+		}
+	}
+	th {
 		span {
 			display: inline-block;
 			transform-origin: 0 50%;
@@ -145,12 +159,21 @@ section#standups {
 		&:first-child span { transform: rotate(-90deg) translateX(-50%) translateY(50%); }
 		&:last-child  span { transform: rotate(90deg) translateX(-50%) translateY(-50%); }
 	}
+
+	/* Calendar: Colors */
+	td.odd-month:has(a)  { background-color: hsl(220, 50%, 88%); }
+	td.odd-month         { background-color: hsl(220, 50%, 93%); }
+	th.odd-month         { background-color: hsl(220, 50%, 80%); }
+	td.even-month:has(a) { background-color: hsl(260, 50%, 88%); }
+	td.even-month        { background-color: hsl(260, 50%, 93%); }
+	th.even-month        { background-color: hsl(260, 50%, 80%); }
+
 }
 
 @media (min-width: 8.5in) {
 	body {
 		display: grid;
-		grid-template-columns: 1fr 3.4in;
+		grid-template-columns: 1fr #{$cal-total-width}in;
 		grid-template-rows:
 			min-content
 			min-content