|
26 | 26 | grid-template-areas:
|
27 | 27 | 'aside header'
|
28 | 28 | 'aside content'
|
| 29 | + 'aside timestamps' |
29 | 30 | 'aside footer';
|
30 | 31 | grid-template-columns: minmax(153px, min-content) minmax(0, 1fr);
|
31 | 32 | grid-template-rows: auto 1fr auto;
|
|
38 | 39 | .post__header {
|
39 | 40 | grid-area: header;
|
40 | 41 | display: grid;
|
41 |
| - grid-template-areas: 'datetime topic . tip-stats toolbar'; |
42 |
| - grid-template-columns: auto auto 1fr auto auto; |
| 42 | + grid-template-areas: '. . topic . tip-stats toolbar'; |
| 43 | + grid-template-columns: auto auto auto 1fr auto auto; |
43 | 44 | align-items: center;
|
44 | 45 | gap: 9px;
|
45 | 46 | font-size: 13px;
|
|
48 | 49 | padding-left: 9px;
|
49 | 50 | }
|
50 | 51 |
|
51 |
| -.post__datetime { |
52 |
| - grid-area: datetime; |
53 |
| -} |
54 |
| - |
55 | 52 | .post__topic {
|
56 | 53 | grid-area: topic;
|
57 | 54 | }
|
|
158 | 155 | background-color: transparent;
|
159 | 156 | color: var(--post-like-fg);
|
160 | 157 | }
|
| 158 | + |
161 | 159 | .votes__dislike {
|
162 | 160 | background-color: transparent;
|
163 | 161 | color: var(--post-dislike-fg);
|
|
254 | 252 | line-height: 1.5;
|
255 | 253 | }
|
256 | 254 |
|
| 255 | +.post__timestamps { |
| 256 | + display: grid; |
| 257 | + grid-template-areas: '. datetime updated'; |
| 258 | + grid-template-columns: 1fr auto auto; |
| 259 | + border-top: 2px solid var(--post-aside-bg); |
| 260 | + padding: 4px; |
| 261 | +} |
| 262 | + |
| 263 | +.post__datetime { |
| 264 | + grid-area: datetime; |
| 265 | +} |
| 266 | + |
| 267 | +.post__updated { |
| 268 | + grid-area: updated; |
| 269 | + cursor: pointer; |
| 270 | + margin-left: 4px; |
| 271 | + margin-right: 8px; |
| 272 | +} |
| 273 | + |
| 274 | +.post__updated-dropdown { |
| 275 | + display: none; |
| 276 | + background-color: var(--top-nav-dropdown-menu-item-hover-bg); |
| 277 | + position: absolute; |
| 278 | + padding: 5px; |
| 279 | + box-shadow: var(--post-shadow); |
| 280 | + border-radius: 5px; |
| 281 | + border: var(--bbcode-input-border); |
| 282 | +} |
| 283 | + |
| 284 | +/* Show dropdown menu when the dropdown is focused */ |
| 285 | +.post__updated:hover .post__updated-dropdown { |
| 286 | + display: block; |
| 287 | +} |
| 288 | + |
257 | 289 | .post__footer {
|
258 | 290 | grid-area: footer;
|
259 | 291 | border-top: 2px solid var(--post-aside-bg);
|
|
282 | 314 | cursor: pointer;
|
283 | 315 | }
|
284 | 316 |
|
285 |
| -@media screen and (max-width: 576px) { |
| 317 | +@media screen and (max-width: 1358px) { |
286 | 318 | .post {
|
287 |
| - grid-template-areas: 'aside' 'header' 'content' 'footer'; |
| 319 | + grid-template-areas: 'aside' 'header' 'content' 'timestamps' 'footer'; |
288 | 320 | grid-template-columns: 100%;
|
289 | 321 | }
|
290 | 322 |
|
291 | 323 | .post__header {
|
292 |
| - grid-template-areas: 'datetime topic . tip-stats overflow' '. . . . toolbar'; |
293 |
| - grid-template-columns: auto auto 1fr auto auto; |
| 324 | + grid-template-areas: '. . topic tip-stats overflow' '. . . . toolbar'; |
| 325 | + grid-template-columns: auto auto auto 1fr auto auto; |
294 | 326 | gap: 0 6px;
|
295 | 327 | }
|
296 | 328 |
|
|
353 | 385 | }
|
354 | 386 | }
|
355 | 387 |
|
| 388 | +@media screen and (max-width: 867px) { |
| 389 | + .post__timestamps { |
| 390 | + display: grid; |
| 391 | + grid-template-areas: '. datetime updated .'; |
| 392 | + grid-template-columns: 1fr auto auto 1fr; |
| 393 | + border-top: 2px solid var(--post-aside-bg); |
| 394 | + padding: 4px; |
| 395 | + } |
| 396 | +} |
| 397 | + |
356 | 398 | @-webkit-keyframes post__like-animation {
|
357 | 399 | 0% {
|
358 | 400 | -webkit-transform: scale(1);
|
359 | 401 | transform: scale(1);
|
360 | 402 | }
|
| 403 | + |
361 | 404 | 50% {
|
362 | 405 | -webkit-transform: scale(1.1);
|
363 | 406 | transform: scale(1.1);
|
364 | 407 | }
|
| 408 | + |
365 | 409 | 100% {
|
366 | 410 | -webkit-transform: scale(1);
|
367 | 411 | transform: scale(1);
|
|
373 | 417 | -webkit-transform: scale(1);
|
374 | 418 | transform: scale(1);
|
375 | 419 | }
|
| 420 | + |
376 | 421 | 50% {
|
377 | 422 | -webkit-transform: scale(1.1);
|
378 | 423 | transform: scale(1.1);
|
379 | 424 | }
|
| 425 | + |
380 | 426 | 100% {
|
381 | 427 | -webkit-transform: scale(1);
|
382 | 428 | transform: scale(1);
|
|
0 commit comments