Rebuild Persian website as a full-bleed visual narrative

_data/navigation.yml

@@ -12,14 +12,14 @@ main:
     url: /cv/
 
 fa:
-  - title: "پژوهش"
+  - title: "پژوهش‌ها"
     url: /fa/research/
 
   - title: "انتشارات"
     url: /fa/publications/
 
-  - title: "آزمایشگاه"
+  - title: "دانشجویان"
     url: /fa/playground/
 
   - title: "رزومه"
-    url: /fa/cv/
+    url: /fa/cv/

_includes/footer.html

@@ -7,13 +7,13 @@
     <li><a href="https://github.com/{{ site.author.github }}"><i class="fab fa-github" aria-hidden="true"></i> گیت‌هاب</a></li>
     <li><a href="{{ site.author.linkedin }}"><i class="fab fa-linkedin" aria-hidden="true"></i> لینکدین</a></li>
     <li><a href="{{ site.author.orcid }}"><i class="ai ai-orcid" aria-hidden="true"></i> ORCID</a></li>
-    <li><a href="{{ base_path }}/fa/playground/"><i class="fas fa-flask" aria-hidden="true"></i> آزمایشگاه</a></li>
+    <li><a href="{{ base_path }}/fa/playground/"><i class="fas fa-flask" aria-hidden="true"></i> ابزارهای آموزشی</a></li>
   </ul>
 </div>
 
 <div class="page__footer-copyright">
   <span>&copy; {{ site.time | date: '%Y' }} علیرضا مسلمی‌حقیقی.</span>
-  <span>پژوهشگر دکتری مالی در دانشگاه بوکونی.</span>
+  <span>دانشجوی دکتری مالی در دانشگاه بوکونی.</span>
 </div>
 {% else %}
 <div class="page__footer-follow">
@@ -30,4 +30,4 @@
   <span>&copy; {{ site.time | date: '%Y' }} {{ site.name | default: site.title }}.</span>
   <span>PhD researcher in Finance at Bocconi University.</span>
 </div>
-{% endif %}
+{% endif %}

_includes/head/custom.html

@@ -15,17 +15,22 @@
 <link rel="icon" type="image/png" href="{{ base_path }}/images/favicon-96x96.png?v=M44lzPylqQ" sizes="96x96">
 <link rel="icon" type="image/png" href="{{ base_path }}/images/favicon-16x16.png?v=M44lzPylqQ" sizes="16x16">
 <link rel="manifest" href="{{ base_path }}/images/manifest.json?v=M44lzPylqQ">
-<link rel="mask-icon" href="{{ base_path }}/images/safari-pinned-tab.svg?v=M44lzPylqQ" color="{% if page.lang == 'fa' %}#d3aa58{% else %}#8bd8ff{% endif %}">
+<link rel="mask-icon" href="{{ base_path }}/images/safari-pinned-tab.svg?v=M44lzPylqQ" color="{% if page.lang == 'fa' %}#d6ad55{% else %}#8bd8ff{% endif %}">
 <link rel="shortcut icon" href="{{ base_path }}/images/favicon.ico?v=M44lzPylqQ">
-<meta name="msapplication-TileColor" content="{% if page.lang == 'fa' %}#11110e{% else %}#070a15{% endif %}">
+<meta name="msapplication-TileColor" content="{% if page.lang == 'fa' %}#05251f{% else %}#070a15{% endif %}">
 <meta name="msapplication-TileImage" content="{{ base_path }}/images/mstile-144x144.png?v=M44lzPylqQ">
 <meta name="msapplication-config" content="{{ base_path }}/images/browserconfig.xml?v=M44lzPylqQ">
-<meta name="theme-color" content="{% if page.lang == 'fa' %}#11110e{% else %}#070a15{% endif %}">
+<meta name="theme-color" content="{% if page.lang == 'fa' %}#05251f{% else %}#070a15{% endif %}">
 <meta name="color-scheme" content="dark">
 <link rel="stylesheet" href="{{ base_path }}/assets/css/academicons.css">
+{% if page.lang == 'fa' %}
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap" rel="stylesheet">
+{% endif %}
 
 <!-- Support for MathJax -->
 <script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6"></script>
 <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
 <script defer src="{{ base_path }}/assets/js/cosmos.js"></script>
-<!-- end custom head snippets -->
+<!-- end custom head snippets -->

_includes/masthead.html

@@ -2,22 +2,59 @@
 
 {% if page.lang == 'fa' %}
   {% assign nav_links = site.data.navigation.fa %}
-  {% assign home_path = '/fa/' %}
-  {% assign brand_name = 'علیرضا مسلمی‌حقیقی' %}
-  {% assign brand_fields = 'مالی · هوش مصنوعی · شبکه‌ها' %}
-  {% assign nav_label = 'ناوبری اصلی' %}
-  {% assign menu_label = 'باز کردن فهرست' %}
   {% assign switch_path = page.translation_url | default: '/' %}
-  {% assign switch_label = 'EN' %}
-  {% assign switch_name = 'English' %}
-  {% assign switch_aria = 'View this page in English' %}
+
+  <div class="masthead masthead--persian">
+    <div class="masthead__inner-wrap">
+      <div class="fa-masthead">
+        <a class="fa-brand" href="{{ '/fa/' | relative_url }}" aria-label="علیرضا مسلمی‌حقیقی، صفحه اصلی">
+          <svg class="fa-faravahar" viewBox="0 0 190 92" aria-hidden="true" focusable="false">
+            <g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="96" cy="39" r="18"></circle>
+              <circle cx="96" cy="39" r="8"></circle>
+              <path d="M77 35C58 19 35 15 8 22c19 4 34 11 46 22-15-4-31-3-47 3 18 5 34 13 49 24 9-6 17-12 25-18"></path>
+              <path d="M115 35c19-16 42-20 69-13-19 4-34 11-46 22 15-4 31-3 47 3-18 5-34 13-49 24-9-6-17-12-25-18"></path>
+              <path d="M86 57 77 86l19-14 4 18 4-18 19 14-9-29"></path>
+              <path d="M91 21c0-9 4-14 10-17 6 3 10 8 10 17"></path>
+              <path d="M100 5v17"></path>
+            </g>
+          </svg>
+          <span class="fa-brand__copy">
+            <strong>علیرضا مسلمی‌حقیقی</strong>
+            <small>مالی · هوش مصنوعی · شبکه‌ها</small>
+          </span>
+        </a>
+
+        <nav class="fa-primary-nav" aria-label="ناوبری اصلی">
+          <a href="{{ '/fa/' | relative_url }}">خانه</a>
+          {% for link in nav_links %}
+            <a href="{{ link.url | relative_url }}">{{ link.title }}</a>
+          {% endfor %}
+        </nav>
+
+        <div class="fa-nav-controls">
+          <a class="fa-language-switcher" href="{{ switch_path | relative_url }}" hreflang="en" lang="en" aria-label="View this page in English">
+            <strong>EN</strong>
+            <span>English</span>
+          </a>
+
+          <details class="fa-menu">
+            <summary aria-label="باز کردن فهرست صفحات">
+              <span></span><span></span><span></span>
+            </summary>
+            <nav class="fa-menu__panel" aria-label="فهرست صفحات">
+              <a href="{{ '/fa/' | relative_url }}">خانه</a>
+              {% for link in nav_links %}
+                <a href="{{ link.url | relative_url }}">{{ link.title }}</a>
+              {% endfor %}
+            </nav>
+          </details>
+        </div>
+      </div>
+    </div>
+  </div>
 {% else %}
   {% assign nav_links = site.data.navigation.main %}
-  {% assign home_path = '/' %}
-  {% assign brand_name = 'Alireza Moslemihaghighi' %}
-  {% assign brand_fields = 'Finance · AI · Networks' %}
-  {% assign nav_label = 'Primary navigation' %}
-  {% assign menu_label = 'Open navigation' %}
   {% assign switch_path = page.translation_url | default: '/fa/' %}
   {% if page.translation_url == nil %}
     {% if page.url == '/' %}
@@ -34,42 +71,39 @@
       {% assign switch_path = '/fa/publication/2021-IEEE/' %}
     {% endif %}
   {% endif %}
-  {% assign switch_label = 'فا' %}
-  {% assign switch_name = 'فارسی' %}
-  {% assign switch_aria = 'مشاهده این صفحه به زبان فارسی' %}
-{% endif %}
 
-<div class="masthead">
-  <div class="masthead__inner-wrap">
-    <div class="masthead__menu">
-      <nav id="site-nav" class="greedy-nav" aria-label="{{ nav_label }}">
-        <button aria-label="{{ menu_label }}"><div class="navicon"></div></button>
-        <ul class="visible-links">
-          <li class="masthead__menu-item masthead__menu-item--lg">
-            <a class="site-brand" href="{{ home_path | relative_url }}" aria-label="{{ brand_name }}">
-              <span class="site-brand__mark{% if page.lang == 'fa' %} site-brand__mark--persian{% endif %}" aria-hidden="true"></span>
-              <span class="site-brand__copy">
-                <strong>{{ brand_name }}</strong>
-                <small>{{ brand_fields }}</small>
-              </span>
-            </a>
-          </li>
-          {% for link in nav_links %}
-            {% if link.url contains 'http' %}
-              {% assign domain = '' %}
-            {% else %}
-              {% assign domain = base_path %}
-            {% endif %}
-            <li class="masthead__menu-item"><a href="{{ domain }}{{ link.url }}">{{ link.title }}</a></li>
-          {% endfor %}
-        </ul>
-        <ul class="hidden-links hidden"></ul>
-      </nav>
+  <div class="masthead">
+    <div class="masthead__inner-wrap">
+      <div class="masthead__menu">
+        <nav id="site-nav" class="greedy-nav" aria-label="Primary navigation">
+          <button aria-label="Open navigation"><div class="navicon"></div></button>
+          <ul class="visible-links">
+            <li class="masthead__menu-item masthead__menu-item--lg">
+              <a class="site-brand" href="{{ base_path }}/" aria-label="Alireza Moslemihaghighi, home">
+                <span class="site-brand__mark" aria-hidden="true"></span>
+                <span class="site-brand__copy">
+                  <strong>Alireza Moslemihaghighi</strong>
+                  <small>Finance · AI · Networks</small>
+                </span>
+              </a>
+            </li>
+            {% for link in nav_links %}
+              {% if link.url contains 'http' %}
+                {% assign domain = '' %}
+              {% else %}
+                {% assign domain = base_path %}
+              {% endif %}
+              <li class="masthead__menu-item"><a href="{{ domain }}{{ link.url }}">{{ link.title }}</a></li>
+            {% endfor %}
+          </ul>
+          <ul class="hidden-links hidden"></ul>
+        </nav>
 
-      <a class="language-switcher" href="{{ switch_path | relative_url }}" hreflang="{% if page.lang == 'fa' %}en{% else %}fa{% endif %}" lang="{% if page.lang == 'fa' %}en{% else %}fa{% endif %}" aria-label="{{ switch_aria }}">
-        <strong>{{ switch_label }}</strong>
-        <span>{{ switch_name }}</span>
-      </a>
+        <a class="language-switcher" href="{{ switch_path | relative_url }}" hreflang="fa" lang="fa" aria-label="مشاهده این صفحه به زبان فارسی">
+          <strong>فا</strong>
+          <span>فارسی</span>
+        </a>
+      </div>
     </div>
   </div>
-</div>
+{% endif %}

_layouts/default.html

@@ -4,6 +4,7 @@
 
 {% include base_path %}
 {% assign page_lang = page.lang | default: site.locale | slice: 0, 2 %}
+{% assign page_slug = page.url | slugify %}
 
 <!doctype html>
 <html lang="{{ page_lang }}" dir="{% if page_lang == 'fa' %}rtl{% else %}ltr{% endif %}" class="no-js">
@@ -12,7 +13,7 @@
     {% include head/custom.html %}
   </head>
 
-  <body class="{% if page_lang == 'fa' %}persian-theme{% endif %}">
+  <body class="{% if page_lang == 'fa' %}persian-theme{% endif %}{% if page_slug %} page-{{ page_slug }}{% endif %}">
 
     {% include browser-upgrade.html %}
     {% include masthead.html %}
@@ -29,4 +30,4 @@
     {% include scripts.html %}
 
   </body>
-</html>
+</html>