Add a contact section

lib/templates/cv.html.heex

@@ -38,14 +38,6 @@
       <%= Basics.css() |> Phoenix.HTML.raw() %>
       <%= Skill.css() |> Phoenix.HTML.raw() %>
       <%= Education.css() |> Phoenix.HTML.raw() %>
-
-      dt.work_location+dd::before {
-        content: '🏢 ' attr(value);
-      }
-
-      dt.location::after {
-        content: '🏠 ' attr(value);
-      }
     </style>
   </head>
 
@@ -59,6 +51,17 @@
       <Basics.about summary={@basics.summary} />
     </div>
 
+    <div id="contact" class="section">
+      <h1>Contact</h1>
+
+      <Basics.contact
+        email={@basics.email}
+        phone={@basics.phone}
+        location={@basics.location}
+        profiles={@basics.profiles}
+      />
+    </div>
+
     <div id="work" class="section">
       <h1>Expériences professionnelles</h1>
       <ol>

lib/views/basics.ex

@@ -16,6 +16,24 @@ defmodule CvGenView.Basics do
     <p><%= @summary %></p>
     """
 
+  def contact(assigns),
+    do: ~H"""
+    <dl>
+      <dt class="location">📍</dt>
+      <dd class="location"><%= @location.city %></dd>
+      <dt class="mail">📧</dt>
+      <dd class="mail"><a href={"mailto: #{@email}"}><%= @email %></a></dd>
+      <dt class="profiles"></dt>
+      <dd class="profiles">
+        <ul>
+          <%= for profile <- @profiles do %>
+            <li><a href={profile.url}><%= profile.network %></a></li>
+          <% end %>
+        </ul>
+      </dd>
+    </dl>
+    """
+
   def css(),
     do: """
     #basics {
@@ -36,5 +54,13 @@ defmodule CvGenView.Basics do
       text-align: center;
       max-width: 30ch;
     }
+
+    #contact dl {
+      column-gap: 1em;
+    }
+
+    #contact .mail a {
+      font-weight: bold;
+    }
     """
 end

lib/views/layout.ex

@@ -36,6 +36,10 @@ defmodule CvGenView.Layout do
       list-style: none;
       padding-inline: 0;
     }
+
+    dd {
+      margin: 0;
+    }
     """
 
   def page_css(),
@@ -59,7 +63,8 @@ defmodule CvGenView.Layout do
       display: grid;
       grid-template-areas:
       "basics basics"
-      "about skills"
+      "about contact"
+      "work skills"
       "work education"
       "work languages"
       "work _";
@@ -93,6 +98,14 @@ defmodule CvGenView.Layout do
       text-transform: uppercase;
       font-size: larger;
     }
+
+    a {
+      color: #337ab7;
+    }
+
+    a:focus, a:hover {
+      color: #23527c;
+    }
     """
 
   def page_print_css(),