From 2752be164ad8bdabafaf9dec171db3a0c9ea8d81 Mon Sep 17 00:00:00 2001
From: "Edgar P. Burkhart" <git@edgarpierre.fr>
Date: Sat, 29 Jan 2022 11:08:45 +0100
Subject: [PATCH] Updated design and layout

---
 saturn/server/static/css/color.css | 48 ++++++++++++++++++++++++
 saturn/server/static/css/index.css | 13 ++++++-
 saturn/server/static/css/main.css  | 60 +++++-------------------------
 saturn/server/templates/base.html  |  1 +
 saturn/server/templates/index.html |  3 +-
 5 files changed, 72 insertions(+), 53 deletions(-)
 create mode 100644 saturn/server/static/css/color.css

diff --git a/saturn/server/static/css/color.css b/saturn/server/static/css/color.css
new file mode 100644
index 0000000..c8054d4
--- /dev/null
+++ b/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;
+}
diff --git a/saturn/server/static/css/index.css b/saturn/server/static/css/index.css
index 2a1b092..8281bb1 100644
--- a/saturn/server/static/css/index.css
+++ b/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;
diff --git a/saturn/server/static/css/main.css b/saturn/server/static/css/main.css
index cd5f1e8..10a66eb 100644
--- a/saturn/server/static/css/main.css
+++ b/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 {
-	color: var(--visited-link);
+a.standalone {
+	text-decoration: none;
+}
+a.standalone:hover,
+a.standalone:active {
+	text-decoration: underline;
 }
 
 a:before {
diff --git a/saturn/server/templates/base.html b/saturn/server/templates/base.html
index 5627dd1..e0ff0cd 100644
--- a/saturn/server/templates/base.html
+++ b/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 %}
diff --git a/saturn/server/templates/index.html b/saturn/server/templates/index.html
index 661c9be..a58170c 100644
--- a/saturn/server/templates/index.html
+++ b/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>