Fix mobile responsive issues: research intro image, card images, and news ticker duplication

Author: Fine yq

cn/index.md

@@ -314,6 +314,10 @@ title: 首页
         .ticker-item {
             white-space: normal;
         }
+
+        .ticker-duplicate {
+            display: none;
+        }
     }
 
     @media (max-width: 480px) {
@@ -355,12 +359,14 @@ title: 首页
                 <span class="ticker-title">{{ item.title }}</span>
             </a>
             {% endfor %}
+            <span class="ticker-duplicate">
             {% for item in news_page.news_items limit: 4 %}
             <a class="ticker-item" href="/news/">
                 <span class="ticker-date">{{ item.date }}</span>
                 <span class="ticker-title">{{ item.title }}</span>
             </a>
             {% endfor %}
+            </span>
         </div>
     </div>
     <a class="ticker-link" href="/news/">查看全部 →</a>

cn/research.md

@@ -212,21 +212,72 @@ permalink: /cn/research/
             font-size: 2rem;
         }
 
+        .research-intro-image {
+            float: none;
+            display: block;
+            width: 60%;
+            max-width: 320px;
+            margin: 1rem auto;
+        }
+
         .card-header {
             flex-direction: column;
             align-items: stretch;
             gap: 1.25rem;
         }
 
         .card-content {
+            width: 100%;
+            max-width: 100%;
             padding-left: 0;
         }
 
         .card-figure {
             flex: none;
             width: 100%;
+            max-width: 100%;
             margin-top: 0.5rem;
         }
+
+        .card-figure img {
+            height: auto;
+            width: clamp(220px, 70vw, 320px);
+        }
+    }
+
+    @media (max-width: 480px) {
+        .research-intro-image {
+            width: 80%;
+            max-width: 280px;
+        }
+
+        .research-card {
+            padding: 1rem;
+        }
+
+        .card-title {
+            font-size: 1rem;
+            padding: 0.4rem 0.8rem;
+        }
+
+        .card-lead {
+            font-size: 0.95rem;
+        }
+
+        .card-list li {
+            font-size: 0.95rem;
+            padding-left: 1.5rem;
+        }
+
+        .card-figure img {
+            width: 100%;
+            max-width: 220px;
+            height: auto;
+        }
+
+        .card-header {
+            column-gap: 0.75rem;
+        }
     }
 </style>
 

index.md

@@ -314,6 +314,10 @@ title: Home
         .ticker-item {
             white-space: normal;
         }
+
+        .ticker-duplicate {
+            display: none;
+        }
     }
 
     @media (max-width: 480px) {
@@ -355,12 +359,14 @@ title: Home
                 <span class="ticker-title">{{ item.title }}</span>
             </a>
             {% endfor %}
+            <span class="ticker-duplicate">
             {% for item in news_page.news_items limit: 4 %}
             <a class="ticker-item" href="/news/">
                 <span class="ticker-date">{{ item.date }}</span>
                 <span class="ticker-title">{{ item.title }}</span>
             </a>
             {% endfor %}
+            </span>
         </div>
     </div>
     <a class="ticker-link" href="/news/">View all →</a>

research.md

@@ -378,6 +378,10 @@ title: Research
     }
 
     @media (max-width: 480px) {
+        .research-intro-image {
+            width: 80%;
+            max-width: 280px;
+        }
         .research-card {
             padding: 1rem;
         }
@@ -514,6 +518,14 @@ title: Research
             padding: 1.25rem;
         }
 
+        .research-intro-image {
+            float: none;
+            display: block;
+            width: 60%;
+            max-width: 320px;
+            margin: 1rem auto;
+        }
+
         .research-section {
             padding: 1.5rem;
         }