Style education

lib/views/education.ex

@@ -1,6 +1,6 @@
 defmodule CvGenView.Education do
   use Phoenix.Component
-  import CvGenView.Date, only: [date: 1]
+  alias CvGenView.Date
 
   attr(:institution, :string, required: true)
   attr(:location, :string, required: true)
@@ -10,21 +10,53 @@ defmodule CvGenView.Education do
   def education(assigns) do
     ~H"""
     <div class="education">
-      <h1><%= @institution %></h1>
-
-      <dl>
-        <dt class="location"></dt>
-        <dd><%= @location %></dd>
-        <dt class="start_date">Date début</dt>
-        <dd><.date class="start_date" date={@start_date} /></dd>
-        <dt class="end_date">Date fin</dt>
-        <dd><.date class="end_date" date={@end_date} /></dd>
-      </dl>
+      <div class="heading">
+        <h1><%= @institution %></h1>
+        <span class="location"><%= @location %></span>
+        <div class="period">
+          <Date.date date={@start_date} /> - <Date.date date={@end_date} />
+        </div>
+      </div>
     </div>
     """
   end
 
+  # TODO: Almost the same as in Work heading, but not quite.
   def css(),
     do: """
+    .education h1 {
+      margin: 0;
+    }
+
+    .education > .heading {
+      display: grid;
+      grid-template-areas:
+      "header location"
+      "period _";
+      gap: 0.5em;
+
+      background-color: #eee;
+      padding: 0.5em;
+
+      margin-bottom: 1em;
+    }
+
+    .education > .heading > h1 {
+      font-weight: bold;
+    }
+
+    .education > .heading > .location {
+      font-weight: bold;
+      justify-self: end;
+      text-align: end;
+    }
+
+    .education > .heading > .period {
+      font-weight: lighter;
+    }
+
+    .education > h1 {
+      font-weight: bold;
+    }
     """
 end

lib/views/work.ex

@@ -48,7 +48,7 @@ defmodule CvGenView.Work do
       grid-template-areas:
       "header location"
       "period _";
-      row-gap: 0.5em;
+      gap: 0.5em;
 
       background-color: #eee;
       padding: 0.5em;
@@ -63,6 +63,7 @@ defmodule CvGenView.Work do
     .work > .heading > .location {
       font-weight: bold;
       justify-self: end;
+      text-align: end;
     }
 
     .work > .heading > .period {