Skip to content

Commit cd3d0a2

Browse files
burieberryburieberry
authored
fix author fitted template (#1963)
1 parent 69f58f4 commit cd3d0a2

File tree

1 file changed

+95
-18
lines changed

1 file changed

+95
-18
lines changed

‎packages/experiments-realm/author.gts

+95-18
Original file line numberDiff line numberDiff line change
@@ -277,6 +277,9 @@ export class Author extends CardDef {
277277
font: var(--boxel-font-sm);
278278
letter-spacing: var(--boxel-lsp-sm);
279279
}
280+
.author-bio-links {
281+
align-self: end;
282+
}
280283
.author-bio-links > :deep(.embedded-format) {
281284
display: flex;
282285
flex-wrap: wrap;
@@ -364,7 +367,6 @@ export class Author extends CardDef {
364367
height: 100%;
365368
min-width: 100px;
366369
min-height: 29px;
367-
display: grid;
368370
gap: var(--gap-size);
369371
overflow: hidden;
370372
padding: var(--boxel-sp-xs);
@@ -385,6 +387,7 @@ export class Author extends CardDef {
385387
}
386388
.title-group {
387389
grid-area: header;
390+
overflow: hidden;
388391
}
389392
.title {
390393
display: -webkit-box;
@@ -436,6 +439,7 @@ export class Author extends CardDef {
436439
437440
@container fitted-card ((aspect-ratio <= 1.0) and (226px <= height)) {
438441
.author-fitted {
442+
display: grid;
439443
grid-template:
440444
'img' max-content
441445
'header' max-content
@@ -450,43 +454,48 @@ export class Author extends CardDef {
450454
/* Aspect ratio < 1.0 (Vertical card) */
451455
@container fitted-card (aspect-ratio <= 1.0) and (224px <= height < 226px) {
452456
.author-fitted {
457+
display: grid;
453458
grid-template:
454459
'img' max-content
455-
'header' 1fr
456-
'links' max-content / 1fr;
457-
}
458-
.title,
459-
.description {
460-
-webkit-line-clamp: 3;
460+
'header' max-content
461+
'links' 1fr / 1fr;
461462
}
462463
.bio {
463464
display: none;
464465
}
466+
.links {
467+
align-self: end;
468+
}
465469
}
466470
467471
@container fitted-card (aspect-ratio <= 1.0) and (180px <= height < 224px) {
468472
.author-fitted {
469473
--thumbnail-size: 40px;
474+
display: grid;
470475
grid-template:
471476
'img' max-content
472-
'header' 1fr
473-
'links' max-content / 1fr;
477+
'header' max-content
478+
'links' 1fr / 1fr;
474479
}
475480
.title {
476481
font-size: var(--boxel-font-size-sm);
477482
}
478483
.bio {
479484
display: none;
480485
}
486+
.links {
487+
align-self: end;
488+
}
481489
}
482490
483491
@container fitted-card (aspect-ratio <= 1.0) and (148px <= height < 180px) {
484492
.author-fitted {
485493
--thumbnail-size: 40px;
494+
display: grid;
486495
grid-template:
487496
'img' max-content
488-
'header' 1fr
489-
'links' max-content / 1fr;
497+
'header' max-content
498+
'links' 1fr / 1fr;
490499
}
491500
.title {
492501
font-size: var(--boxel-font-size-sm);
@@ -495,11 +504,38 @@ export class Author extends CardDef {
495504
.bio {
496505
display: none;
497506
}
507+
.links {
508+
align-self: end;
509+
}
498510
}
499511
500512
@container fitted-card (aspect-ratio <= 1.0) and (128px <= height < 148px) {
501513
.author-fitted {
502514
--thumbnail-size: 40px;
515+
display: grid;
516+
grid-template:
517+
'img' max-content
518+
'header' max-content
519+
'links' 1fr / 1fr;
520+
}
521+
.title {
522+
font-size: var(--boxel-font-size-xs);
523+
}
524+
.description,
525+
.bio {
526+
display: none;
527+
}
528+
.links {
529+
align-self: end;
530+
}
531+
}
532+
533+
@container fitted-card (aspect-ratio <= 1.0) and (118px <= height < 128px) {
534+
.author-fitted {
535+
--thumbnail-size: 40px;
536+
--link-icon-size: 13px;
537+
--gap-size: var(--boxel-sp-4xs);
538+
display: grid;
503539
grid-template:
504540
'img' max-content
505541
'header' 1fr
@@ -514,11 +550,12 @@ export class Author extends CardDef {
514550
}
515551
}
516552
517-
@container fitted-card (aspect-ratio <= 1.0) and (118px <= height < 128px) {
553+
@container fitted-card (aspect-ratio <= 1.0) and (92px <= height < 118px) {
518554
.author-fitted {
519555
--thumbnail-size: 40px;
520556
--link-icon-size: 13px;
521557
--gap-size: var(--boxel-sp-4xs);
558+
display: grid;
522559
grid-template:
523560
'img' max-content
524561
'header' 1fr
@@ -533,9 +570,29 @@ export class Author extends CardDef {
533570
}
534571
}
535572
573+
@container fitted-card (aspect-ratio <= 1.0) and (height < 92px) {
574+
.author-fitted {
575+
--thumbnail-size: 20px;
576+
--gap-size: var(--boxel-sp-4xs);
577+
display: grid;
578+
grid-template:
579+
'img' max-content
580+
'header' 1fr / 1fr;
581+
}
582+
.title {
583+
font-size: var(--boxel-font-size-xs);
584+
}
585+
.description,
586+
.bio,
587+
.links {
588+
display: none;
589+
}
590+
}
591+
536592
@container fitted-card ((aspect-ratio <= 1.0) and (400px <= height)) {
537593
.author-fitted {
538594
--gap-size: var(--boxel-sp-xs);
595+
display: grid;
539596
grid-template:
540597
'img' max-content
541598
'header' max-content
@@ -558,6 +615,7 @@ export class Author extends CardDef {
558615
@container fitted-card ((1.0 < aspect-ratio) and (151px <= height)) {
559616
.author-fitted {
560617
--gap-size: var(--boxel-sp-xxs) var(--boxel-sp-sm);
618+
display: grid;
561619
grid-template:
562620
'img header' minmax(var(--thumbnail-size), max-content)
563621
'img links' 1fr / max-content 1fr;
@@ -583,6 +641,7 @@ export class Author extends CardDef {
583641
.author-fitted {
584642
--gap-size: var(--boxel-sp-xxs) var(--boxel-sp-sm);
585643
--thumbnail-size: 50px;
644+
display: grid;
586645
grid-template:
587646
'img header' minmax(var(--thumbnail-size), max-content)
588647
'img links' 1fr / max-content 1fr;
@@ -604,10 +663,11 @@ export class Author extends CardDef {
604663
@container fitted-card ((1.0 < aspect-ratio) and (78px <= height <= 114px)) {
605664
.author-fitted {
606665
--gap-size: var(--boxel-sp-xxxs) var(--boxel-sp-xs);
607-
--thumbnail-size: 30px;
666+
--thumbnail-size: 20px;
608667
--link-icon-size: 15px;
668+
display: grid;
609669
grid-template:
610-
'img header' 1fr
670+
'img header' minmax(var(--thumbnail-size), max-content)
611671
'img links' 1fr / max-content 1fr;
612672
}
613673
.title-group {
@@ -620,12 +680,16 @@ export class Author extends CardDef {
620680
.description {
621681
display: none;
622682
}
683+
.links {
684+
align-self: end;
685+
}
623686
}
624687
625-
@container fitted-card ((1.0 < aspect-ratio) and (500px <= width) and (58px <= height <= 77px)) {
688+
@container fitted-card ((1.0 < aspect-ratio) and (500px <= width) and (56px <= height <= 77px)) {
626689
.author-fitted {
627690
--gap-size: var(--boxel-sp-xs);
628691
--thumbnail-size: 34px;
692+
display: grid;
629693
grid-template: 'img header' 1fr / max-content 1fr;
630694
padding: var(--boxel-sp-4xs) var(--boxel-sp-xs);
631695
align-items: center;
@@ -643,6 +707,7 @@ export class Author extends CardDef {
643707
.author-fitted {
644708
--gap-size: var(--boxel-sp-xxs);
645709
--thumbnail-size: 40px;
710+
display: grid;
646711
grid-template: 'img header' 1fr / max-content 1fr;
647712
align-items: center;
648713
padding: var(--boxel-sp-xxxs);
@@ -657,10 +722,13 @@ export class Author extends CardDef {
657722
}
658723
}
659724
660-
@container fitted-card ((1.0 < aspect-ratio) and (height <= 57px)) {
725+
@container fitted-card ((1.0 < aspect-ratio) and (height <= 55px)) {
661726
.author-fitted {
662-
--gap-size: var(--boxel-sp-xxxs);
727+
--gap-size: var(--boxel-sp-xs);
663728
--thumbnail-size: 20px;
729+
display: grid;
730+
grid-template: 'img header' 1fr / max-content 1fr;
731+
align-items: center;
664732
padding: var(--boxel-sp-xxxs);
665733
}
666734
.author-thumbnail.is-icon {
@@ -676,9 +744,18 @@ export class Author extends CardDef {
676744
font-size: var(--boxel-font-size-xs);
677745
line-height: 1.1;
678746
}
747+
.description {
748+
display: block;
749+
white-space: nowrap;
750+
text-overflow: ellipsis;
751+
}
752+
.bio,
753+
.links {
754+
display: none;
755+
}
679756
}
680757
681-
@container fitted-card ((1.0 < aspect-ratio) and (width <= 100px) and (height <= 57px)) {
758+
@container fitted-card ((1.0 < aspect-ratio) and (width <= 100px) and (height <= 55px)) {
682759
.author-fitted {
683760
display: flex;
684761
align-items: center;

0 commit comments

Comments
 (0)