Reorganize education

lib/views/education.ex

@@ -6,16 +6,18 @@ defmodule CvGenView.Education do
   attr(:location, :string, required: true)
   attr(:start_date, :string, required: true)
   attr(:end_date, :string, required: true)
+  attr(:summary, :string, required: true)
 
   def education(assigns) do
     ~H"""
     <div class="education">
-      <div class="heading">
+      <div class="period">
+        <Date.date date={@start_date} /> - <Date.date date={@end_date} />
+      </div>
+      <div class="box">
         <h1><%= @institution %></h1>
-        <span class="location"><%= @location %></span>
-        <div class="period">
-          <Date.date date={@start_date} /> - <Date.date date={@end_date} />
-        </div>
+        <h2><%= @area %></h2>
+        <p><%= @summary %></p>
       </div>
     </div>
     """
@@ -24,15 +26,15 @@ defmodule CvGenView.Education do
   # TODO: Almost the same as in Work heading, but not quite.
   def css(),
     do: """
-    .education h1 {
+    .education h1,
+    .education h2,
+    .education p {
       margin: 0;
     }
 
-    .education > .heading {
-      display: grid;
-      grid-template-areas:
-      "header location"
-      "period _";
+    .box {
+      display: flex;
+      flex-direction: column;
       gap: 0.5em;
 
       background-color: #eee;
@@ -41,22 +43,18 @@ defmodule CvGenView.Education do
       margin-bottom: 1em;
     }
 
-    .education > .heading > h1 {
+    .box > h1 {
       font-weight: bold;
     }
 
-    .education > .heading > .location {
-      font-weight: bold;
-      justify-self: end;
-      text-align: end;
+    .box > h2 {
+      font-weight: normal;
+      padding-left: 0.5em;
     }
 
-    .education > .heading > .period {
+    .box > p {
       font-weight: lighter;
-    }
-
-    .education > h1 {
-      font-weight: bold;
+      padding-left: 0.5em;
     }
     """
 end