theme reorx: enhance location display

src/themes/reorx/index.ejs

@@ -4,6 +4,13 @@ function linkInDiv(url) {
   return `<div class="url row"><a href="${url}" target="_blank">${fn.noSchemaURL(url)}</a></div>`
 }
 %>
+<%
+function formatLocation(loc) {
+  const cityToCountry = ['city', 'postalCode', 'region', 'countryCode'].map(key => loc[key]).filter(v => v).join(', ')
+  if (!loc.address) return cityToCountry
+  return `${loc.address}. ${cityToCountry}`
+}
+%>
 
 <!-- Basics -->
 <section class="basics-section">
@@ -36,7 +43,7 @@ function linkInDiv(url) {
     <% if (cv.basics.location) { %>
       <div class="item">
         <%- fn.getIconSVG('mdi:location') %>
-        <span><%= cv.basics.location.city %>, <%= cv.basics.location.countryCode %></span>
+        <span><%= formatLocation(cv.basics.location) %></span>
       </div>
     <% } %>
   </div>

src/themes/reorx/index.scss

@@ -165,14 +165,14 @@ section {
   .contact {
     color: $color-text-dim;
     display: flex;
+    flex-wrap: wrap;
+    gap: .4em 1em;
 
     @media screen and (max-width: 500px) {
       flex-direction: column;
-      gap: .4em;
     }
 
     .item {
-      margin-right: 1em;
       a {
         color: $color-text-dim;
       }