Style fix for coverstory headline on mobile

ubyssey · Nov 22, 2024 · 10a48f1 · 10a48f1
1 parent 0c93798
commit 10a48f1
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/article/templates/article/objects/cover_story.html b/article/templates/article/objects/cover_story.html
@@ -19,9 +19,11 @@
   </div>
   {% endif %}
   <div class="o-article__right">
-    <mark class="o-article__headline" id="coverstory" >
-      <a href="{% pageurl article %}">{{ article.title|safe }}</a>
-    </mark>
+    <div class="o-article__headline">
+      <mark id="coverstory" >
+        <a href="{% pageurl article %}">{{ article.title|safe }}</a>
+      </mark>
+    </div>
     <div class="o-article__meta">
       <p class="o-article__snippet">{% if article.lede %}{{article.lede|safe}}{% else %}{{article.search_description|safe}}{% endif %}</p>
       <div class="o-article__byline">

diff --git a/ubyssey/static_src/src/styles/objects/_article_cover.scss b/ubyssey/static_src/src/styles/objects/_article_cover.scss
@@ -10,7 +10,8 @@
       width: 400px;
       max-width: 685px;
 
-      .o-article__headline {
+      .o-article__headline mark {
+        margin-left: 1em;
         // Text
         font-size: 2rem;
         line-height: 3.2rem;
@@ -28,13 +29,13 @@
       width: 100%;
 
       .o-article__headline {
+        margin-inline: 1em;
+      }
+
+      .o-article__headline mark {
         // Text
         font-size: 1.5rem;
         line-height: 2.5rem;
-
-        @media($bp-larger-than-phablet) {
-          left: 20px;
-        }
       }
 
       .o-article__image {
@@ -76,8 +77,7 @@
       }
     }
 
-    .o-article__headline {
-      margin-left: 1em;
+    .o-article__headline mark {
       position: relative;
 
       background-color: $color-ubyssey-blue;