Made activity list prettier

home/static/css/style.css

@@ -118,6 +118,15 @@ main h2 {
 	color: var(--color_bg_2);
 	padding-top: 20px;
 	font-size: 1.5rem;
+	font-weight: bold;
+	text-align: left;
+	border-bottom: 2px solid var(--color_bg_1);
+	border-image-source: linear-gradient(to right, var(--color_bg_1) 0%, transparent 75%);
+	border-image-slice: 1;
+}
+main h3 {
+	color: var(--color_bg_2);
+	font-size: 1.2rem;
 	font-weight: 300;
 	text-align: left;
 	border-bottom: 2px solid var(--color_bg_1);
@@ -125,6 +134,7 @@ main h2 {
 	border-image-slice: 1;
 }
 
+
 main p {
 	font-size: 1rem;
 }
@@ -134,6 +144,25 @@ main a:link {
 	color: rgb(62, 62, 255);
 }
 
+dl {
+	list-style: none;
+	display: grid;
+	grid-template-columns: 1fr 5fr;
+}
+dl dt {
+	grid-column: 1 / span 1;
+	justify-self: end;
+	text-align: right;
+	margin: 5px 10px;
+	font-weight: bold;
+	align-self: center;
+}
+dl dd {
+	margin: 5px 5px;
+	justify-self: start;
+	text-align: left;
+}
+
 footer {
 	position: absolute;
 	bottom: 0;

home/templates/activites.html

@@ -9,9 +9,9 @@
 	{% for activity in activities %}
 		<h3>{{ activity.title }}</h3>
 		<dl>
-			<dd>Durée :</dd><dt>{{ activity.duration }}</dt>
-			<dd>MJ :</dd><dt>{{ activity.host_name }}</dt>
-			<dd>Description :</dd><dt>{{ activity.description }}</dt>
+			<dt>Durée :</dt><dd>{{ activity.duration }}</dd>
+			<dt>MJ :</dt><dd>{{ activity.host_name }}</dd>
+			<dt>Description :</dt><dd>{{ activity.description }}</dd>
 		</dl>
 	{% endfor %}
 {% endblock %}
\ No newline at end of file