瀏覽代碼

:art: auto column grid duh

tags/0.9.0
J 4 年之前
父節點
當前提交
90161e2869
共有 2 個檔案被更改,包括 7 行新增10 行删除
  1. 4
    9
      vue-theme/src/components/card.vue
  2. 3
    1
      vue-theme/src/pages/list.vue

+ 4
- 9
vue-theme/src/components/card.vue 查看文件

91
 /* for widths larger than 768px */
91
 /* for widths larger than 768px */
92
 @media (min-width: $medium)
92
 @media (min-width: $medium)
93
     .card
93
     .card
94
+        &--info 
95
+            .featured-or-hero-image img
96
+                max-height: $max-card-img-height
94
         .wide
97
         .wide
95
             padding: 0
98
             padding: 0
96
             flex-direction: row
99
             flex-direction: row
97
-            grid-gap: $ms-0
98
-            a
99
-                width: 100%
100
-                /* Force crop images */
101
-                .featured-or-hero-image img
102
-                    object-fit: cover
103
-                    object-position: 0% 30%
104
-                    max-height: $max-card-img-height
105
-                    overflow-y: clip
100
+            grid-gap: $ms--2
106
 </style>
101
 </style>

+ 3
- 1
vue-theme/src/pages/list.vue 查看文件

245
         list-style: none
245
         list-style: none
246
         .post
246
         .post
247
             width: 100%
247
             width: 100%
248
+
249
+    /* posts in grid list */
248
     .posts.is-grid
250
     .posts.is-grid
249
         width: 100%
251
         width: 100%
250
         display: grid
252
         display: grid
251
-        grid-template-columns: 32% 32% 32%
253
+        grid-template-columns: auto auto auto
252
         grid-gap: $ms--2
254
         grid-gap: $ms--2
253
         align-items: start
255
         align-items: start
254
         /* This is important for how the grid lines up to the page */
256
         /* This is important for how the grid lines up to the page */

Loading…
取消
儲存