Style skill keyword list

lib/templates/cv.html.heex

@@ -35,6 +35,7 @@
 
       <%= Work.css() |> Phoenix.HTML.raw() %>
       <%= Basics.css() |> Phoenix.HTML.raw() %>
+      <%= Skill.css() |> Phoenix.HTML.raw() %>
 
       dt.work_location+dd::before {
         content: '🏢 ' attr(value);
@@ -43,12 +44,6 @@
       dt.location::after {
         content: '🏠 ' attr(value);
       }
-
-      li h1,
-      li h2,
-      li h3 {
-        font-weight: 500;
-      }
     </style>
   </head>
 

lib/views/skill.ex

@@ -6,11 +6,30 @@ defmodule CvGenView.Skill do
   def skill(assigns) do
     ~H"""
     <h1><%= @skill.name %></h1>
-    <ul>
+    <ul class="keywords">
       <%= for kw <- @skill.keywords do %>
         <li><%= kw %></li>
       <% end %>
     </ul>
     """
   end
+
+  def css(),
+    do: """
+    #skills ul.keywords {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.2em;
+    }
+
+    #skills .keywords > li {
+      padding: 3px 7px;
+      font-size: 0.7em;
+      font-weight: 700;
+      color: #fff;
+      text-align: center;
+      background-color: #333;
+      border-radius: 0.5em;
+    }
+    """
 end