Feat bib preview (closes #1162) (#2352)

This PR enables to have `abbr` and `preview` for a single publication
(closing #1162).

The following example shows all three possibilities: 1) Preview + Abbr
2) Preview only 3) Abbr only.

<img width="786" alt="grafik"
src="https://github.com/alshedivat/al-folio/assets/1998723/0633f443-b430-4fa6-a0eb-750170a638bd">

_bibliography/papers.bib

@@ -108,5 +108,6 @@
   author={Einstein, Albert and Schrödinger, Erwin and Planck, Max and Lorentz, Hendrik Antoon and Przibram, Karl},
   year={1967},
   publisher={Vision},
-  preview={wave-mechanics.gif}
+  preview={wave-mechanics.gif},
+  abbr={Vision}
 }

_data/venues.yml

@@ -4,3 +4,6 @@
 
 "PhysRev":
   url: https://journals.aps.org/
+
+"Vision":
+  color: "#009f36"

_layouts/bib.liquid

@@ -2,7 +2,29 @@
 ---
 <div class="row">
   {% if site.enable_publication_thumbnails %}
-    <div class="col-sm-2 {% if entry.preview %}preview{% else %}abbr{% endif %}">
+    <div class="col-sm-2 abbr">
+      {%- if entry.abbr -%}
+        {%- if site.data.venues[entry.abbr] -%}
+          {% assign venue_style = null %}
+          {% if site.data.venues[entry.abbr].color != blank %}
+            {% assign venue_style = site.data.venues[entry.abbr].color | prepend: 'style="background-color:' | append: '"' %}
+          {%- endif -%}
+          <abbr
+            class="badge rounded"
+            {% if venue_style %}
+              {{ venue_style }}
+            {% endif -%}
+          >
+            {% if site.data.venues[entry.abbr].url %}
+              <a href="{{site.data.venues[entry.abbr].url}}">{{ entry.abbr }}</a>
+            {% else %}
+              <div>{{- entry.abbr -}}</div>
+            {% endif %}
+          </abbr>
+        {% else %}
+          <abbr class="badge rounded">{{ entry.abbr }}</abbr>
+        {% endif %}
+      {% endif %}
       {% if entry.preview %}
         {% if entry.preview contains '://' %}
           <img class="preview z-depth-1 rounded" src="{{ entry.preview }}">
@@ -14,26 +36,10 @@
             path=entry_path
             sizes = "200px"
             class="preview z-depth-1 rounded"
-            zoomable=false
+            zoomable=true
             alt=entry.preview
           %}
         {% endif %}
-      {% elsif entry.abbr %}
-        {% if site.data.venues[entry.abbr] %}
-          {% assign venue_style = null %}
-          {% if site.data.venues[entry.abbr].color != blank %}
-            {% assign venue_style = site.data.venues[entry.abbr].color | prepend: 'style="background-color:' | append: '"' %}
-          {% endif %}
-          <abbr
-            class="badge"
-            {% if venue_style %}
-              {{ venue_style }}
-            {% endif %}
-            ><a href="{{site.data.venues[entry.abbr].url}}">{{ entry.abbr }}</a></abbr
-          >
-        {% else %}
-          <abbr class="badge">{{ entry.abbr }}</abbr>
-        {% endif %}
       {% endif %}
     </div>
   {% endif %}
@@ -167,7 +173,9 @@
     <!-- Links/Buttons -->
     <div class="links">
       {% if entry.award %}
-        <a class="award btn btn-sm z-depth-0" role="button">{{ entry.award_name ? entry.award_name : "Awarded" }}</a>
+        <a class="award btn btn-sm z-depth-0" role="button">
+          {%- if entry.award_name %}{{ entry.award_name }}{% else %}Awareded{% endif -%}
+        </a>
       {% endif %}
       {% if entry.abstract %}
         <a class="abstract btn btn-sm z-depth-0" role="button">Abs</a>

_sass/_base.scss

@@ -705,8 +705,8 @@ footer.sticky-bottom {
         abbr {
           display: inline-block;
           background-color: var(--global-theme-color);
-          padding-left: 1rem;
+          margin-bottom: 0.5rem;
-          padding-right: 1rem;
+          width: 100%;
 
           a {
             color: white;