theme reorx: enhance styles

README.md

@@ -59,7 +59,7 @@ The core product of jsoncv is CV HTML, which is the HTML representation of your
 It is a compact, single-file HTML document that can be converted to PDF or hosted online to create a static CV website.
 
 CV HTML is designed with a specific layout to display a CV on an A4 sheet of paper.
-The CSS has been tailored to optimize printing, ensuring the best output whether printed on paper or saved as a PDF.
+The CSS has been tailored to optimize printing, ensuring the best typography whether printed on paper or saved as a PDF.
 Therefore, CV HTML is best suited for creating professional or academic CVs/resumes,
 rather than creative or interactive portfolio websites.
 

sample.resume.json

@@ -154,12 +154,17 @@
       ]
     },
     {
-      "name": "Compression",
+      "name": "UI Design",
       "level": "Master",
+      "summary": "Highly skilled in UI design with a strong understanding of design principles, user experience, and industry-standard tools. Proficient in creating visually appealing and user-friendly interfaces for web and mobile applications.",
       "keywords": [
-        "Mpeg",
-        "MP4",
-        "GIF"
+        "User Experience",
+        "Wireframing",
+        "Prototyping",
+        "Figma",
+        "Sketch",
+        "InVision",
+        "Axure"
       ]
     },
     {

src/themes/reorx/index.ejs

@@ -144,7 +144,7 @@ function dateRange(item, level) {
         <%- linkInDiv(item.url) %>
       </div>
       <div class="row space-between">
-        <div class="roles _fz-4"><%= item.roles.join(', ') %></div>
+        <div class="roles _ul _fz-4"><%= item.roles.join(', ') %></div>
         <%- dateRange(item, 2) %>
       </div>
       <div class="p"><%- fn.renderMarkdown(item.description) %></div>
@@ -210,7 +210,7 @@ function dateRange(item, level) {
   <% for (const item of cv.skills) { %>
     <div class="skill section-item">
       <h3><%= item.name %></h3>
-      <div class="level row _fz-4"><%= item.level %></div>
+      <div class="level row _ul _fz-4"><%= item.level %></div>
       <% if (item.summary) { %>
         <div class="summary p"><%- fn.renderMarkdown(item.summary) %></div>
       <% } %>
@@ -237,7 +237,7 @@ function dateRange(item, level) {
   <% for (const item of cv.languages) { %>
     <div class="language section-item">
       <h3><%= item.language %></h3>
-      <div class="fluency row _fz-4"><%= item.fluency %></div>
+      <div class="fluency row _ul _fz-4"><%= item.fluency %></div>
       <% if (item.summary) { %>
         <div class="summary p"><%- fn.renderMarkdown(item.summary) %></div>
       <% } %>

src/themes/reorx/index.scss

@@ -46,6 +46,7 @@ section {
 
     h3 {
       font-size: $fz-3;
+      line-height: 1.4;
       margin: 0;
     }
 
@@ -84,6 +85,8 @@ section {
     display: flex;
     flex-wrap: wrap;
     gap: 6px 8px;
+    margin-top: .8em;
+
     .item {
       font-size: 13px;
       color: #555;
@@ -139,9 +142,6 @@ section {
 }
 
 .skills-section {
-  .level {
-    margin: .8em 0;
-  }
 }
 
 footer {