Merge pull request #27 from Nikronic/add-drafsh-kaviani

Add Drafsh Kaviani

_includes/header.liquid

@@ -43,6 +43,27 @@
       </button>
 
       <div class="collapse navbar-collapse text-right" id="navbarNav">
+        {% if page.emblem %}
+          <div class="emblem">
+            <a href="https://en.wikipedia.org/wiki/Derafsh_Kaviani">
+              {% if page.emblem.image %}
+                {% assign emblem_image_path = page.emblem.image | prepend: 'assets/img/' %}
+                {% if page.emblem.image_circular %}
+                  {% assign emblem_image_class = 'img-fluid z-depth-1 rounded-circle' %}
+                {% else %}
+                  {% assign emblem_image_class = 'img-fluid z-depth-1 rounded' %}
+                {% endif %}
+                {% capture sizes %}(min-width: {{site.max_width}}) {{ site.max_width | minus: 30 | times: 0.3}}px, (min-width: 576px)
+            30vw, 95vw"{% endcapture %}
+                {%
+                  include figure.liquid path = emblem_image_path class = emblem_image_class sizes = sizes alt = page.emblem.image
+                  cache_bust = true
+                %}
+              {% endif %}
+            </a>
+          </div>
+        {% endif %}
+
         <ul class="navbar-nav ml-auto flex-nowrap">
           {% for page in site.pages %}
             {% if page.permalink == '/' %} {% assign about_title = page.title %} {% endif %}

_pages/about.md

@@ -10,6 +10,10 @@ profile:
   image_circular: false # crops the image to make it circular
   more_info: >
 
+emblem:
+  image: kaviani.webp
+  image_circular: false
+
 news: true # includes a list of news items
 latest_posts: true # includes a list of the newest posts
 selected_papers: true # includes a list of papers marked as "selected={true}"

_sass/_base.scss

@@ -178,6 +178,44 @@ blockquote {
   color: var(--global-theme-color);
 }
 
+// Emblem
+
+.emblem {
+  width: 100%;
+
+  .more-info {
+    margin-bottom: 5px;
+    margin-top: 5px;
+    font-family: monospace;
+
+    p {
+      display: inline-block;
+      margin: 0;
+    }
+  }
+}
+
+.emblem figure {
+  margin: 0 0 0rem !important;
+  display: none;
+}
+
+@media (min-width: 576px) {
+  .emblem figure {
+    display: block;
+  }
+
+  .emblem {
+    width: 5%;
+
+    .address {
+      p {
+        display: block;
+      }
+    }
+  }
+}
+
 // Profile
 
 .profile {