style: Adjust domain text display for mobile and desktop views

attestate · Feb 10, 2025 · e30e2eb · e30e2eb
1 parent cf2ddbd
commit e30e2eb
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/src/public/news.css b/src/public/news.css
@@ -445,8 +445,13 @@ body {
 .row-image {
   display: none !important;
 }
+/* Hide domain text in subtitle when showing mobile image */
+.content-row-elevated .story-subtitle .domain-text {
+  display: none;
+}
+
 /* mobile device */
- @media only screen and (min-width : 300px) and (max-width : 640px) {
+@media only screen and (min-width : 300px) and (max-width : 640px) {
     .scroll-margin-base {
       scroll-margin-top: 140px;
     }
@@ -787,6 +792,10 @@ body {
     .row-image {
       display: block !important;
     }
+    /* Always show domain in subtitle for desktop */
+    .story-subtitle .domain-text {
+      display: inline !important;
+    }
     .mobile-center {
       display: none !important;
     }

diff --git a/src/views/components/row.mjs b/src/views/components/row.mjs
@@ -521,11 +521,12 @@ const row = (
                             )}
                           `}
                       ${!interactive &&
-                      (path === "/" || path === "/new" || path === "/best") &&
-                      !displayMobileImage
+                      (path === "/" || path === "/new" || path === "/best")
                         ? html`
-                            <span style="opacity:0.6"> • </span>
-                            <span>${extractedDomain}</span>
+                            <span class="domain-text">
+                              <span style="opacity:0.6"> • </span>
+                              <span>${extractedDomain}</span>
+                            </span>
                           `
                         : ""}
                       <span style="opacity:0.6"> • </span>