| @@ -12,8 +12,10 @@ | ||
| 12 | 12 | --tptn-thumb-border: #ccc; |
| 13 | 13 | --tptn-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); |
| 14 | 14 | --tptn-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.2); |
| 15 | 15 | --tptn-transition: 0.2s ease; |
| 16 | + container-type: inline-size; | |
| 17 | + container-name: tptn-left-thumbs; | |
| 16 | 18 | } |
| 17 | 19 | |
| 18 | 20 | .tptn-left-thumbs ul { |
| 19 | 21 | margin: 0 !important; |
| @@ -22,9 +24,9 @@ | ||
| 22 | 24 | } |
| 23 | 25 | |
| 24 | 26 | .tptn-left-thumbs ul li { |
| 25 | 27 | display: flex; |
| 26 | - flex-wrap: wrap; | |
| 28 | + flex-wrap: nowrap; | |
| 27 | 29 | gap: var(--tptn-gap); |
| 28 | 30 | align-items: flex-start; |
| 29 | 31 | margin-bottom: 1.25rem; |
| 30 | 32 | padding: 0 !important; |
| @@ -35,10 +37,10 @@ | ||
| 35 | 37 | .tptn-left-thumbs li > a.tptn_link { |
| 36 | 38 | display: block; |
| 37 | 39 | flex: 0 0 auto; |
| 38 | 40 | align-self: flex-start; |
| 39 | - width: min(var(--tptn-thumb-width, 9999px), 100%); | |
| 40 | - max-width: 100%; | |
| 41 | + width: min(var(--tptn-thumb-width, 9999px), 45%); | |
| 42 | + max-width: 45%; | |
| 41 | 43 | padding: var(--tptn-thumb-frame-padding); |
| 42 | 44 | border-width: var(--tptn-thumb-frame-border-width); |
| 43 | 45 | border-style: solid; |
| 44 | 46 | border-color: var(--tptn-thumb-border); |
| @@ -68,10 +70,10 @@ | ||
| 68 | 70 | border-radius: calc(var(--tptn-border-radius) * 0.6); |
| 69 | 71 | } |
| 70 | 72 | |
| 71 | 73 | .tptn-left-thumbs .tptn_after_thumb { |
| 72 | - flex: 1 1 12rem; | |
| 73 | - min-width: 0; | |
| 74 | + flex: 1 1 6rem; | |
| 75 | + min-width: 4rem; | |
| 74 | 76 | } |
| 75 | 77 | |
| 76 | 78 | .tptn-left-thumbs a.tptn_link { |
| 77 | 79 | text-decoration: none; |
| @@ -93,8 +95,24 @@ | ||
| 93 | 95 | display: block; |
| 94 | 96 | font-size: 0.9em; |
| 95 | 97 | line-height: 1.4; |
| 96 | 98 | opacity: 0.85; |
| 99 | +} | |
| 100 | + | |
| 101 | +/* Below this width there isn't room for a legible thumbnail + text column side by side, so stack instead. */ | |
| 102 | +@container tptn-left-thumbs (max-width: 240px) { | |
| 103 | + .tptn-left-thumbs ul li { | |
| 104 | + flex-wrap: wrap; | |
| 105 | + } | |
| 106 | + | |
| 107 | + .tptn-left-thumbs li > a.tptn_link { | |
| 108 | + width: min(var(--tptn-thumb-width, 9999px), 100%); | |
| 109 | + max-width: 100%; | |
| 110 | + } | |
| 111 | + | |
| 112 | + .tptn-left-thumbs .tptn_after_thumb { | |
| 113 | + flex-basis: 100%; | |
| 114 | + } | |
| 97 | 115 | } |
| 98 | 116 | |
| 99 | 117 | /* Reduced motion for accessibility. */ |
| 100 | 118 | @media (prefers-reduced-motion: reduce) { |
