fix: text alignment in menu, and styling images a little

Author: renambot

_includes/news.liquid

@@ -30,13 +30,17 @@
                   {% if item.image %}
                    {% assign full_url = "https://www.evl.uic.edu/output/originals/" | append: item.image %}
                      <div style="width: 250px; height:187px;overflow: hidden;">
-                      <a class="news-title" href="{{ item.url | relative_url }}">
-                        <img src="{{ full_url }}" alt="{{ item.title }}" style="width: 100%; height: 100%; object-fit: cover;" />
+                      <a class="news-title zoom" href="{{ item.url | relative_url }}">
+                        <img src="{{ full_url }}" alt="{{ item.title }}" style="width: 100%; height: 100%; object-fit: cover;"
+                        class="img-fluid img-thumbnail rounded z-depth-1"/>
                       </a>
                     </div>
                   {% else %}
                      <div style="width: 250px; height:187px;overflow: hidden;">
-                       <img src="{{ 'assets/img/new-logo-small-480.webp' | relative_url }}" alt="{{ item.title }}" style="width: 100%; height: 100%; object-fit: cover;" />
+                      <a class="news-title zoom" href="{{ item.url | relative_url }}">
+                       <img src="{{ 'assets/img/new-logo-small-480.webp' | relative_url }}" alt="{{ item.title }}" style="width: 100%; height: 100%; object-fit: cover;"
+                       class="img-fluid img-thumbnail rounded z-depth-1"/>
+                       </a>
                     </div>
                   {% endif %}
                   </td>
@@ -114,7 +118,7 @@
                    {% assign full_url = "https://www.evl.uic.edu/output/originals/" | append: item.image %}
                      <div style="width: 300px; height:200px;overflow: hidden;">
                       <a class="news-title" href="{{ item.url | relative_url }}">
-                        <img src="{{ full_url }}" alt="{{ item.title }}" style="width: 100%; height: 100%; object-fit: cover;" />
+                        <img src="{{ full_url }}" alt="{{ item.title }}" style="width: 100%; height: 100%; object-fit: cover;"/>
                       </a>
                     </div>
                   {% else %}

_sass/_base.scss

@@ -1186,7 +1186,7 @@ swiper-container {
   align-items: center;
   flex-direction: row;
   border-radius: 4px;
-  text-align: center;
+  text-align: left;
   font-style: normal;
   border: none;
   font-weight: 300;
@@ -1466,3 +1466,7 @@ h2.year-divider {
   margin-top: 2rem;
   text-align: right;
 }
+
+.zoom:hover {
+  transform: scale(1.05);
+}