chore: font changes more flexible

_config.yml

@@ -22,10 +22,9 @@ analytics:
 description:
 open_graph:
   enable: true                        # enable open graph meta tags
-  image: /assets/images/profile.png   # open graph image path
+  image: /assets/images/profile.png   # path or link to the open graph image
 
 # Style
-text_direction: ltr         # text direction, 'ltr' or 'rtl'
 date_format: "%Y-%m-%d"     # date format
 theme_color: "#1DA1F2"      # your favorite theme color
 contact_delimiter: "·"      # contact delimiter, '·', '/' or '|'

_data/data.yml

@@ -1,9 +1,13 @@
+meta:
+  direction: ltr            # text direction, "ltr" (like English) or "rtl" (like Arabic), default is "ltr"
+  language: en              # text language, the value is HTML lang attribute value, default is "en"
+
 basic:
   name: Foo Bar                      # name
-  title: Backend Developer           # job title
+  title: Backend Developer           # job title 
   avatar:
     show: true                       # show or hide avatar
-    path: /assets/images/profile.png # avatar file path
+    path: /assets/images/profile.png # file path or link to your avatar
 
 contact:
   location: Beijing, China  # location, text or markdown link syntax
@@ -45,7 +49,7 @@ contact:
   wordpress:                # https://<username>.wordpress.com
   blogger:                  # https://<username>.blogspot.com
   devto:                    # https://dev.to/<username>
-  
+
   # creativity
   figma:                    # https://www.figma.com/@<username>
   behance:                  # https://www.behance.net/<username>

_includes/close.html

@@ -1,8 +1,7 @@
 <div class="close">
   {%- if data.close.size > 0 %}
   <div class="description">
-    {{ data.close }}
+    {{ data.close | markdownify }}
   </div>
   {%- endif %}
-  <a href="javascript:history.go(-1)">Back</a>
 </div>

_includes/common.html

@@ -1,5 +1,7 @@
 {%- if site.open %}
-<div class="wrapper">
+<div class="wrapper"
+  lang='{{ data.meta.language | default: "en" }}'
+  dir='{{ data.meta.direction | default: "ltr" }}'>
   {%- include basic.html%}
   {%- include profile.html %}
   {%- include experience.html %}

_includes/education.html

@@ -36,10 +36,12 @@ <h2>{{ education.title }}</h2>
           <div class="major">
             <span>{{ item.major }}</span>
           </div>
+          {%- if item.degree %}
           <div class="degree">
             <i class="fa-solid fa-graduation-cap"></i>
             <span>{{ item.degree }}</span>
           </div>
+          {%- endif %}
         </div>
 
         {%- if item.description.size > 0 %}

_includes/experience.html

@@ -39,10 +39,12 @@ <h2>{{ experience.title }}</h2>
           <div class="role">
             <span>{{ item.role }}</span>
           </div>
+          {%- if item.location %}
           <div class="location">
             <i class="fa-solid fa-location-dot"></i>
             <span>{{ item.location }}</span>
           </div>
+          {%- endif %}
         </div>
 
         {%- if item.description.size > 0 %}

_includes/footer.html

@@ -1,4 +1,6 @@
-<footer class="footer">
+<footer class="footer"
+  lang='{{ data.meta.language | default: "en" }}'
+  dir='{{ data.meta.direction | default: "ltr" }}'>
   <span>Updated:&nbsp;</span>
   <span>{{ site.time | date: site.date_format | default: "%Y-%m-%d" }}</span>
   <i class="fa-solid fa-heart fa-beat-fade"></i>

_includes/head.html

@@ -19,11 +19,11 @@
 <title>Online Resume</title>
 {%- endif %}
 
+<link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
 <link rel="stylesheet" href="{{ "/assets/fontawesome/css/fontawesome.min.css" | relative_url }}">
 <link rel="stylesheet" href="{{ "/assets/fontawesome/css/brands.min.css" | relative_url }}">
 <link rel="stylesheet" href="{{ "/assets/fontawesome/css/solid.min.css" | relative_url }}">
 <link rel="stylesheet" href="{{ "/assets/icons/css/all.css" | relative_url }}">
-<link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
 
 {%- if site.analytics.google %}
 <!-- Google tag (gtag.js) -->

_includes/skill.html

@@ -23,9 +23,9 @@ <h2>{{ skill.title }}</h2>
         <div class="skill-level">
           {%- for i in (1..5) %}
           {%- if i <= item.level %}
-          <i class="fa-solid fa-{{ site.skill_level_icon | default: "star" }}"></i>
+          <i class='fa-solid fa-{{ site.skill_level_icon | default: "star" }}'></i>
           {%- else %}
-          <i class="fa-regular fa-{{ site.skill_level_icon | default: "star" }}"></i>
+          <i class='fa-regular fa-{{ site.skill_level_icon | default: "star" }}'></i>
           {%- endif %}
           {%- endfor %}
         </div>

_layouts/default.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ site.lang | default: "en" }}">
+<html>
   <head>
     {%- include head.html %}
   </head>

_sass/_fonts.scss

@@ -0,0 +1,9 @@
+// Change the default font to your own favourite by @font-face and :lang()
+// @font-face {
+//   font-family: "Custom Font";
+//   src: url("CUSTOM_FONT_FILE_PATH_LINK");
+// }
+
+// :lang(en) {
+//   font-family: "Custom Font";
+// }

assets/css/main.scss

@@ -36,11 +36,9 @@ $contact-delimiter: "{{ site.contact_delimiter | default: "·" }}";
   "sanitize",
   "base",
   "responsive",
-  "print";
-
-{% if site.text_direction == "rtl" %}
-body { direction: rtl; }
-{% endif %}
+  "print",
+  "fonts"
+;
 
 section {
   .section-title {