Added section tag in top article above image for mobile (I should sto…

…p deploying before thoroughly testing)
ubyssey · Nov 19, 2024 · e27e784 · e27e784
1 parent 811eca5
commit e27e784
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/article/templates/article/objects/top_article.html b/article/templates/article/objects/top_article.html
@@ -26,6 +26,7 @@ <h2 class="o-article__headline">
     </div>
 
     <div class="o-article__right">
+      <a href="{{article|get_section_link}}" class="o-article__section-tag">{{article|get_section_title}}</a>
       <div class="o-article__meta__image">
         {% if article.featured_media.first %}
             <a class="o-article__image" href="{% pageurl article %}">

diff --git a/ubyssey/static_src/src/styles/objects/_article_top.scss b/ubyssey/static_src/src/styles/objects/_article_top.scss
@@ -62,7 +62,7 @@
             width: auto;
 
             border-radius: 0.5em;
-            border: 2px solid $color-ubyssey-blue-dark;
+            border: 2px solid $color-ubyssey-blue-dark-3;
         }
     }
 
@@ -143,13 +143,33 @@
     .o-article--top_article {
         flex-direction: row-reverse;
         justify-content: left;
+        .o-article__left .o-article__section-tag {
+            display: none;
+        }
+        .o-article__meta__image {
+            margin-top: 0;
+            width: 4.5em;
+            border: 2px solid $color-ubyssey-blue-dark-3;
+            img {
+                border-radius: 0;
+                border: none;
+            }
+        }
         .o-article__right {
             margin-left: 0;
             margin-right: 1em;
         }
     }
 }
 
+@media ($bp-larger-than-tablet) {
+    .o-article--top_article {
+        .o-article__right .o-article__section-tag {
+            display: none;
+        }
+    }
+}
+
 [color-css-theme="light"] {
     .o-article--top_article {
         border-color: #00000045;