Bladeren bron

:art: fixing up margins for wide article tags on single and list | more adjustments to images in cards

tags/0.9.0
J 4 jaren geleden
bovenliggende
commit
74ed506d9c
4 gewijzigde bestanden met toevoegingen van 54 en 39 verwijderingen
  1. 7
    1
      vue-theme/src/components/card.vue
  2. 36
    33
      vue-theme/src/pages/index.vue
  3. 6
    3
      vue-theme/src/pages/list.vue
  4. 5
    2
      vue-theme/src/pages/single.vue

+ 7
- 1
vue-theme/src/components/card.vue Bestand weergeven

93
     .is-grid .card
93
     .is-grid .card
94
         &--info 
94
         &--info 
95
             .featured-or-hero-image img
95
             .featured-or-hero-image img
96
-                max-height: $max-card-img-height
96
+                max-height: calc($max-card-img-height / 3)
97
     .card
97
     .card
98
+        &--info 
99
+            .featured-or-hero-image img
100
+                max-height: $max-card-img-height
98
         .wide
101
         .wide
99
             padding: 0
102
             padding: 0
100
             flex-direction: row
103
             flex-direction: row
101
             grid-gap: $ms--2
104
             grid-gap: $ms--2
105
+            /* Featured image link */
106
+            > a
107
+                max-width: 50%
102
 </style>
108
 </style>

+ 36
- 33
vue-theme/src/pages/index.vue Bestand weergeven

109
                 list-style: none
109
                 list-style: none
110
                 li.post
110
                 li.post
111
                     background-color: white
111
                     background-color: white
112
+                    margin: 0 0 0.65em 0
112
                     .featured-or-hero-image img
113
                     .featured-or-hero-image img
113
                         max-height: $max-card-img-height
114
                         max-height: $max-card-img-height
114
                     p.excerpt
115
                     p.excerpt
121
                         auto
122
                         auto
122
 /* min-width 768px */
123
 /* min-width 768px */
123
 @media (min-width: $medium)
124
 @media (min-width: $medium)
124
-    .page--index > article > section
125
-        ul
126
-            display: grid
127
-            grid-template-columns: 
128
-                49.5% 24.25% 24.25%
129
-            grid-template-rows: 
130
-                48% 48%
131
-            gap: 2% 1%
132
-            li
133
-                margin: 0
134
-                min-height: 10em
135
-                &:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4), &:nth-of-type(5)
136
-                    p.excerpt
137
-                        -webkit-line-clamp: $card-line-clamp
138
-                    .featured-or-hero-image img
139
-                        max-height: calc($max-card-img-height / 2)
140
-                /* n1 episode */
141
-                &:nth-of-type(1)
142
-                    grid-column-start: 1
143
-                    grid-row-start: 1
144
-                    grid-row-end: 3
145
-                /* n2 exhibition, n3 events */
146
-                &:nth-of-type(2), &:nth-of-type(3)
147
-                    grid-column-start: 2
148
-                    grid-row-start: 1
149
-                &:nth-of-type(3)
150
-                    grid-column-start: 3
125
+    .page--index 
126
+        > article 
127
+            grid-gap: $ms--2 0
128
+            > section ul
129
+                display: grid
130
+                grid-template-columns: 
131
+                    49.5% 24.25% 24.25%
132
+                grid-template-rows: 
133
+                    48% 48%
134
+                gap: 2% 1%
135
+                li
136
+                    margin: 0
137
+                    min-height: 10em
138
+                    &:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4), &:nth-of-type(5)
139
+                        p.excerpt
140
+                            -webkit-line-clamp: $card-line-clamp
141
+                        .featured-or-hero-image img
142
+                            max-height: calc($max-card-img-height / 2)
143
+                    /* n1 episode */
144
+                    &:nth-of-type(1)
145
+                        grid-column-start: 1
146
+                        grid-row-start: 1
147
+                        grid-row-end: 3
148
+                    /* n2 exhibition, n3 events */
149
+                    &:nth-of-type(2), &:nth-of-type(3)
150
+                        grid-column-start: 2
151
+                        grid-row-start: 1
152
+                    &:nth-of-type(3)
153
+                        grid-column-start: 3
151
 
154
 
152
-                /* n4 artists, n5 posts */
153
-                &:nth-of-type(4), &:nth-of-type(5)
154
-                    grid-column-start: 2
155
-                    grid-row-start: 2
156
-                &:nth-of-type(5)
157
-                    grid-column-start: 3
155
+                    /* n4 artists, n5 posts */
156
+                    &:nth-of-type(4), &:nth-of-type(5)
157
+                        grid-column-start: 2
158
+                        grid-row-start: 2
159
+                    &:nth-of-type(5)
160
+                        grid-column-start: 3
158
         &.max
161
         &.max
159
             /* Need some extra gap on wide pages */
162
             /* Need some extra gap on wide pages */
160
             padding: $ms--2 0
163
             padding: $ms--2 0

+ 6
- 3
vue-theme/src/pages/list.vue Bestand weergeven

250
     .posts.is-grid
250
     .posts.is-grid
251
         width: 100%
251
         width: 100%
252
         display: grid
252
         display: grid
253
-        grid-template-columns: auto 33.33% auto
253
+        grid-template-columns: repeat(3, 1fr)
254
         grid-gap: $ms--2
254
         grid-gap: $ms--2
255
         align-items: start
255
         align-items: start
256
         /* 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 */
260
                 max-width: 100%
260
                 max-width: 100%
261
 
261
 
262
 @media (min-width: $medium)
262
 @media (min-width: $medium)
263
-    .page--list.f-col
264
-        flex-direction: row
263
+    .page--list
264
+        &.f-col
265
+            flex-direction: row
266
+        article
267
+            margin: 0 $ms--2 0 0
265
 </style>
268
 </style>

+ 5
- 2
vue-theme/src/pages/single.vue Bestand weergeven

331
 
331
 
332
         
332
         
333
 @media (min-width: $medium)
333
 @media (min-width: $medium)
334
-    .page--single.f-col
335
-        flex-direction: row
334
+    .page--single
335
+        article
336
+            padding: 0 0.65em 0 0
337
+        &.f-col
338
+            flex-direction: row
336
 </style>
339
 </style>

Laden…
Annuleren
Opslaan