From e27e784cf6d0707d7270f5085952878c133e27d9 Mon Sep 17 00:00:00 2001
From: SamuelmdLow <samuel.m.d.low@gmail.com>
Date: Tue, 19 Nov 2024 10:12:28 +0000
Subject: [PATCH] Added section tag in top article above image for mobile (I
 should stop deploying before thoroughly testing)

---
 .../article/objects/top_article.html          |  1 +
 .../src/styles/objects/_article_top.scss      | 22 ++++++++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/article/templates/article/objects/top_article.html b/article/templates/article/objects/top_article.html
index a9f46e2f3..33da8bcdc 100644
--- 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
index 46cf3744f..dc112e7f8 100644
--- 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,6 +143,18 @@
     .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;
@@ -150,6 +162,14 @@
     }
 }
 
+@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;