Updated design and layout

saturn/server/static/css/color.css

@@ -0,0 +1,48 @@
+:root {
+	--ui-background: white;
+	--ui-01: var(--gray-10);
+	--ui-04: var(--gray-50);
+
+	--text-01: var(--gray-100);
+	--text-02: var(--gray-70);
+	--text-03: var(--gray-40);
+	--text-04: white;
+
+	--link-01: var(--blue-60);
+
+	--interactive-01: var(--blue-60);
+	--interactive-02: var(--gray-80);
+
+	--field-01: var(--gray-10);
+	--danger-02: var(--red-60);
+
+	--hover-primary: var(--blue-60-hover);
+	--hover-primary-text: var(--blue-70);
+	--hover-ui: var(--gray-10-hover);
+
+	--active-primary: var(--blue-80);
+	--active-ui: var(--gray-30);
+
+	--focus: var(--blue-60);
+
+	--visited-link: var(--purple-60);
+
+
+	--gray-10: #f4f4f4;
+	--gray-10-hover: #e5e5e5;
+	--gray-30: #c6c6c6;
+	--gray-40: #a8a8a8;
+	--gray-50: #8d8d8d;
+	--gray-70: #525252;
+	--gray-80: #393939;
+	--gray-100: #161616;
+
+	--blue-60: #0f62fe;
+	--blue-60-hover: #0353e9;
+	--blue-70: #0043ce;
+	--blue-80: #002d9c;
+
+	--purple-60: #8a3ffc;
+
+	--red-60: #da1e28;
+}

saturn/server/static/css/index.css

@@ -49,13 +49,19 @@ body > #events {
 	grid-template-columns:
 		6rem
 		1fr;
-	gap: 1rem;
+	gap: 0;
 	background: var(--ui-01);
 	padding: 1rem;
 }
-.event * {
+.event .description,
+.event .date,
+.event .other div {
+	padding: .25rem;
+}
+.event .description {
 	overflow-x: hidden;
 	text-overflow: ellipsis;
+	overflow-y: hidden;
 }
 .event > .summary {
 	font-size: 1.75rem;
@@ -94,6 +100,9 @@ body > #events {
 .event .other {
 	color: var(--text-02);
 }
+.event div {
+	overflow: visible;
+}
 .event > .info {
 	grid-column: 2;
 	display: grid;

saturn/server/static/css/main.css

@@ -1,50 +1,3 @@
-:root {
-	--ui-background: white;
-	--ui-01: var(--gray-10);
-	--ui-04: var(--gray-50);
-
-	--text-01: var(--gray-100);
-	--text-02: var(--gray-70);
-	--text-03: var(--gray-40);
-	--text-04: white;
-
-	--link-01: var(--blue-60);
-
-	--interactive-01: var(--blue-60);
-
-	--field-01: var(--gray-10);
-	--danger-02: var(--red-60);
-
-	--hover-primary: var(--blue-60-hover);
-	--hover-primary-text: var(--blue-70);
-	--hover-ui: var(--gray-10-hover);
-
-	--active-primary: var(--blue-80);
-	--active-ui: var(--gray-30);
-
-	--focus: var(--blue-60);
-
-	--visited-link: var(--purple-60);
-
-
-	--gray-10: #f4f4f4;
-	--gray-10-hover: #e5e5e5;
-	--gray-30: #c6c6c6;
-	--gray-40: #a8a8a8;
-	--gray-50: #8d8d8d;
-	--gray-70: #525252;
-	--gray-100: #161616;
-
-	--blue-60: #0f62fe;
-	--blue-60-hover: #0353e9;
-	--blue-70: #0043ce;
-	--blue-80: #002d9c;
-
-	--purple-60: #8a3ffc;
-
-	--red-60: #da1e28;
-}
-
 body {
 	margin: 0;
 	font-family: Inter, sans-serif;
@@ -73,7 +26,10 @@ a {
 	color: var(--link-01);
 	position: relative;
 }
-a:hover, a:visited:hover {
+a:visited {
+	color: var(--visited-link);
+}
+a:hover {
 	color: var(--hover-primary-text);
 }
 a:active {
@@ -82,8 +38,12 @@ a:active {
 a:focus {
 	outline: 1px solid var(--focus);
 }
-a:visited {
+a.standalone {
-	color: var(--visited-link);
+	text-decoration: none;
+}
+a.standalone:hover,
+a.standalone:active {
+	text-decoration: underline;
 }
 
 a:before {

saturn/server/templates/base.html

@@ -10,6 +10,7 @@
 		
 		<link rel="icon" type="text/svg" href="/static/svg/logo.svg" />
 		{% block style %}
+		<link rel="stylesheet" href="/static/css/color.css" />
 		<link rel="stylesheet" href="/static/css/main.css" />
 		<link rel="stylesheet" href="/static/icons/remixicon.css" />
 		{% endblock %}

saturn/server/templates/index.html

@@ -68,7 +68,8 @@
 				{% if event.location %}
 				<div>
 					<i class="ri-map-pin-line ri-fw ri-sm"></i>
-					<a href="https://nominatim.openstreetmap.org/ui/search.html?q={{event.location}}">
+					<a class="standalone"
+						href="https://nominatim.openstreetmap.org/ui/search.html?q={{event.location}}">
 						{{ event.location }}
 					</a>
 				</div>