gpttemp

code/public/static/css/modules/recommend/recommend_01.css

@@ -0,0 +1,70 @@
+/* recommend_01.css */
+.__PFX__-recA-wrap{
+
+    border-radius: 5px;
+    background: var(--bg-soft-color);
+}
+.__PFX__-recA-head{
+    display:flex;
+    align-items:baseline;
+    justify-content:space-between;
+    margin-bottom:6px;
+}
+.__PFX__-recA-title{
+    font-size:15px;
+    font-weight:600;
+    color:var(--primary-color);
+}
+.__PFX__-recA-sub{
+    font-size:11px;
+    color:var(--text-muted-color);
+}
+.__PFX__-recA-grid{
+    list-style:none;
+    margin:4px 0 0;
+    padding:0;
+    display:grid;
+    grid-template-columns:repeat(2,minmax(0,1fr));
+    gap:10px;
+}
+@media(min-width:768px){
+    .__PFX__-recA-grid{
+        grid-template-columns:repeat(4,minmax(0,1fr));
+    }
+}
+.__PFX__-recA-item{}
+.__PFX__-recA-link{
+    display:block;
+    text-decoration:none;
+}
+.__PFX__-recA-coverBox{
+    position:relative;
+    overflow:hidden;
+    border-radius:8px;
+    background:#111;
+}
+.__PFX__-recA-cover{
+    width:100%;
+    aspect-ratio:2/3;
+    object-fit:cover;
+    display:block;
+}
+.__PFX__-recA-tag{
+    position:absolute;
+    left:6px;
+    top:6px;
+    padding:1px 5px;
+    border-radius:6px;
+    font-size:10px;
+    background:var(--primary-color);
+    color:#fff;
+}
+.__PFX__-recA-name{
+    margin-top:4px;
+    font-size:12px;
+    line-height:1.4;
+    color:var(--text-color, var(--text-primary-color));
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:nowrap;
+}