css fixes mobile

Author: mikensubuga

_layouts/bib.html

@@ -3,7 +3,7 @@
 <!-- _layouts/bib.html -->
       <div class="row">
         {%- if site.enable_publication_thumbnails -%}
-        <div class="col-sm-2 {% if entry.preview %}preview{% else %}abbr{% endif %}">
+        <div class="col-sm-3 {% if entry.preview %}preview{% else %}abbr{% endif %}">
         {%- if entry.preview -%}
           {% if entry.preview contains '://' -%}
           <img class="preview z-depth-1 rounded" src="{{ entry.preview }}">
@@ -30,7 +30,7 @@
         {%- endif -%}
 
         <!-- Entry bib key -->
-        <div id="{{entry.key}}" class="{% if site.enable_publication_thumbnails %}col-sm-8{% else %}col-sm-10{% endif %}">
+        <div id="{{entry.key}}" class="{% if site.enable_publication_thumbnails %}col-sm-7{% else %}col-sm-10{% endif %}">
         <!-- Title -->
         <div class="title">{{entry.title}}</div>
         <!-- Author -->

_sass/_base.scss

@@ -668,14 +668,25 @@ footer.sticky-bottom {
       }
 
       .abbr {
-        height: 2rem;
         margin-bottom: 0.5rem;
 
         abbr {
           display: inline-block;
           background-color: var(--global-theme-color);
-          padding-left: 1rem;
-          padding-right: 1rem;
+          padding: 0.4rem 0.6rem;
+          font-size: 0.6rem;
+          font-weight: 600;
+          letter-spacing: 0.01em;
+          line-height: 1.4;
+          white-space: normal;
+          word-break: normal;
+          text-align: center;
+          border-radius: 0.25rem;
+
+          @media (min-width: 576px) {
+            display: block;
+            padding: 0.4rem 0.35rem;
+          }
 
           a {
             color: white;