Improved styling

saturn/server/static/css/index.css

@@ -5,52 +5,70 @@ body {
 	grid-template-rows:
 		auto
 		1fr;
-	column-gap: 2rem;
 }
 
 body > h1 {
 	grid-row: 1;
 	grid-column: 1 / span 2;
+	margin: 3rem 3rem 1rem 3rem;
 }
 
-body > * {
+body > #events {
 	margin: 2rem;
 }
 
+@media (max-width: 672px) {
+	body > h1 {
+		margin: 1rem;
+	}
+	body > #events {
+		margin: 0;
+	}
+}
+
 .event {
 	margin: 1rem;
 	display: grid;
 	grid-template-columns:
 		6rem
 		1fr;
-	row-gap: .5rem;
-	column-gap: 1rem;
+	gap: 1rem;
 	background: var(--ui-01);
 	padding: 1rem;
 }
+.event * {
+	overflow-x: hidden;
+	text-overflow: ellipsis;
+}
 .event > .summary {
-	font-weight: 400;
-	font-size: 1.5rem;
+	font-size: 1.75rem;
+	line-height: 2.25rem;
 	grid-row: 1;
 	grid-column: 1 / span 2;
 }
 .event > .date {
 	grid-column: 1;
-	font-size: 1.1rem;
+	font-size: 1.25rem;
+	line-height: 1.75rem;
 	display: grid;
 	grid-template-columns: auto;
+	grid-template-rows: auto auto;
 	gap: 1rem;
 	text-align: center;
 }
-.event > .date > div {
-	display: grid;
-	grid-template-columns: auto;
+.event > .date > div > span {
+	display: block;
 }
 .date .day {
-	font-size: 3em;
+	font-size: 2.625rem;
+	line-height: 3.25rem;
+	font-weight: 300;
+	font-variant: tabular-nums;
 }
 .date .time {
-	font-size: 1.5em;
+	font-size: 1.75rem;
+	line-height: 2.25rem;
+	font-variant: tabular-nums;
 }
 .event .end-date,
 .event .other {
@@ -65,3 +83,11 @@ body > * {
 		auto;
 	gap: 1rem;
 }
+.event .description {
+	font-size: 1rem;
+	line-height: 1.5rem;
+}
+.event .other {
+	font-size: 1rem;
+	line-height: 1.375rem;
+}

saturn/server/static/css/main.css

@@ -3,20 +3,52 @@
 	--ui-01: var(--gray-10);
 	--text-01: var(--gray-100);
 	--text-02: var(--gray-70);
+	--link-01: var(--blue-60);
+	--hover-primary-text: var(--blue-70);
+	--focus: var(--blue-60);
+	--visited-link: var(--purple-60);
 
 	--gray-10: #f4f4f4;
 	--gray-70: #525252;
 	--gray-100: #161616;
+
+	--blue-60: #0f62fe;
+	--blue-70: #0043ce;
+
+	--purple-60: #8a3ffc;
 }
 
 body {
 	margin: 0;
 	font-family: Inter, sans-serif;
+	font-size: .875rem;
+	font-weight: 400;
+	line-height: 1.125rem;
 	background: var(--ui-background);
 	color: var(--text-01);
+
+	font-feature-settings: 'ss01', 'ss03';
 }
 
 h1 {
 	font-weight: 300;
-	font-size: 3rem;
+	font-size: 3.375rem;
+	line-height: 4rem;
+ 	font-feature-settings: 'ss01', 'ss02', 'ss03', 'cv11';
+}
+
+a {
+	color: var(--link-01);
+}
+a:hover {
+	color: var(--hover-primary-text);
+}
+a:active {
+	color: var(--text-01);
+}
+a:focus {
+	outline: 1px solid var(--focus);
+}
+a:visited {
+	color: var(--visited-link);
 }