chore: Update bib.liquid and _base.scss to improve publication thumbn…

…ail display and styling AKA trying to do (alshedivat/al-folio#2352)
chloeho7 · Jun 14, 2024 · 60bb246 · 60bb246
1 parent de7efbb
commit 60bb246
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 21 deletions.
diff --git a/_layouts/bib.liquid b/_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 }}">
@@ -13,26 +35,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 %}

diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -684,9 +684,8 @@ footer.sticky-bottom {
         abbr {
           display: inline-block;
           background-color: var(--global-theme-color);
-          padding-left: 1rem;
-          padding-right: 1rem;
-
+          margin-bottom: 0.5rem;
+          width: 100%;
           a {
             color: white;