Style work header

lib/views/work.ex

@@ -11,21 +11,14 @@ defmodule CvGenView.Work do
 
   def work(assigns) do
     ~H"""
-    <div>
-      <h1><%= @name %></h1>
-
-      <dl>
-        <dt class="position" lang="fr">Poste</dt>
-        <dd lang="fr"><%= @position %></dd>
-        <dt class="start_date">Date début</dt>
-        <dd><.date class="start_date" date={@start_date} /></dd>
-        <%= unless is_nil(@end_date) do %>
-          <dt class="end_date">Date fin</dt>
-          <dd><.date class="end_date" date={@end_date} /></dd>
-        <% end %>
-        <dt class="work_location"></dt>
-        <dd><%= @location %></dd>
-      </dl>
+    <div class="work">
+      <div class="heading">
+        <h1><%= @name %></h1>
+        <span class="location"><%= @location %></span>
+        <div class="period">
+          <%= @start_date %> - <%= @end_date || "aujourd'hui" %>
+        </div>
+      </div>
 
       <p class="summary" lang="en"><%= @summary %></p>
 
@@ -40,7 +33,32 @@ defmodule CvGenView.Work do
 
   def css,
     do: """
-    #work {
+    .work h1 {
+      margin: 0;
+    }
+
+    .work > .heading {
+      display: grid;
+      grid-template-areas:
+      "header location"
+      "period _";
+      row-gap: 0.5em;
+
+      background-color: #eee;
+      padding: 0.5em;
+    }
+
+    .work > .heading > h1 {
+      font-weight: bold;
+    }
+
+    .work > .heading > .location {
+      font-weight: bold;
+      justify-self: end;
+    }
+
+    .work > .heading > .period {
+      font-weight: lighter;
     }
     """
 end