[css] highlights in css file

tailwind.css

@@ -39,3 +39,22 @@ html {
 .image-center {
     @apply mx-auto;
 }
+
+h2.section-title i {
+    @apply mr-4;
+    @apply text-zinc-600;
+}
+
+div.organization i {
+    @apply mr-1;
+    @apply text-stone-500;
+}
+
+ul.highlights {
+	@apply pe-4;
+}
+ul.highlights li {
+    @apply text-center;
+    @apply ring;
+}
+

templates/partials/education.html

@@ -2,7 +2,7 @@
 {% if education %}
 <section class="section" id="education-section">
   <header>
-    <h2 class='section-title'>{% trans %}resume education title{% endtrans %} <span class="item-count">({{ education | length }})</span></h2>
+    <h2 class='section-title'><i class="fa-solid fa-graduation-cap"></i>{% trans %}resume education title{% endtrans %} <span class="item-count">({{ education | length }})</span></h2>
   </header>
 
   <section id="education">
@@ -34,7 +34,7 @@
           </span>
           {% endif %}
         </div>
-        <div class="location">
+        <div class="location organization">
           {% if education_item.area %}
           <div class="area">
             {{ education_item.area }}

templates/partials/interests.html

@@ -2,7 +2,7 @@
 {% if interests %}
 <section class="section" id="interests-section">
   <header>
-    <h2 class='section-title' class='section-title'>{% trans %}resume interest title{% endtrans %}</h2>
+    <h2 class='section-title' class='section-title'><i class='fa-solid fa-heart'></i>{% trans %}resume interest title{% endtrans %}</h2>
   </header>
   <section id="interests">
     {% for interest in interests %}
@@ -12,6 +12,11 @@
         {{ interest.name }}
       </h3>
       {% endif %}
+      {% if interest.description %}
+      <div class="description">
+	{{ interest.description }}
+      </div>
+      {% endif %}
       {% if interest.keywords %}
       <ul class="keywords">
         {% for keyword in interest.keywords %}

templates/partials/languages.html

@@ -1,7 +1,7 @@
 {% set languages = page.resume.languages %}
 {% if languages %}
 <section class="section" id="languages-section"> <header>
-    <h2 class='section-title'>{% trans %}resume language title{% endtrans %}</h2>
+    <h2 class='section-title'><i class='fa-solid fa-flag'></i>{% trans %}resume language title{% endtrans %}</h2>
   </header>
   <section id="languages">
     {% for language in languages %}

templates/partials/skills.html

@@ -2,7 +2,7 @@
 {% if skills %}
 <section class="section" id="skills-section">
 	<header>
-		<h2 class='section-title'>{% trans %}resume skill title{% endtrans %}</h2>
+    <h2 class='section-title'><i class="fa-regular fa-keyboard"></i>{% trans %}resume skill title{% endtrans %}</h2>
 	</header>
 	<section id="skills">
 		{% for skill in  skills %}

templates/partials/volunteer.html

@@ -2,7 +2,7 @@
 {% if volunteer %}
 <section class="section" id="volunteer-section">
   <header>
-    <h2 class='section-title'>{% trans %}resume volunteer title{% endtrans %}</h2>
+    <h2 class='section-title'><i class="fa-solid fa-handshake-angle"></i>{% trans %}resume volunteer title{% endtrans %}</h2>
   </header>
   <section id="volunteer">
     {% for volunteer_item in volunteer %}
@@ -85,7 +85,7 @@
         {% if volunteer_item.highlights %}
         <ul class="highlights grid grid-cols-4 gap-4">
           {% for highlight in volunteer_item.highlights %}
-          <li class="bg-slate-700 rounded-md ring-2 ring-blue-500/50  text-center">{{ highlight | replace("\r\n", "<br>") | replace("\n", "<br>") | replace("\r", "<br>") }}</li>
+          <li>{{ highlight | replace("\r\n", "<br>") | replace("\n", "<br>") | replace("\r", "<br>") }}</li>
           {% endfor %}
         </ul>
         {% endif %}

templates/partials/work.html

@@ -2,7 +2,7 @@
 {% if work %}
 <section class="section" id="work-section">
   <header>
-    <h2 class='section-title'>{% trans %}resume work title{% endtrans %} <span class="item-count">({{ work | length }})</span></h2>
+    <h2 class='section-title'><i class="fa-solid fa-suitcase"></i>{% trans %}resume work title{% endtrans %} <span class="item-count">({{ work | length }})</span></h2>
   </header>
 
   <section id="work">
@@ -36,7 +36,7 @@
           </div>
         </div>
 
-	      <div class="company">
+	      <div class="company organization">
           <i class="fa-solid fa-building mr-2"></i>
           {{ work_item.name }}
           {% if work_item.url %}
@@ -69,7 +69,7 @@
         {% if work_item.highlights %}
         <ul class="highlights grid grid-cols-4 gap-4">
           {% for  highlight in work_item.highlights %}
-            <li class="bg-slate-700 rounded-md ring-2 ring-blue-500/50  text-center">{{ highlight | replace("\r\n", "<br>") | replace("\n", "<br>") | replace("\r", "<br>") }}</li>
+            <li>{{ highlight | replace("\r\n", "<br>") | replace("\n", "<br>") | replace("\r", "<br>") }}</li>
           {% endfor %}
         </ul>
         {% endif %}