this repo has no description
1.links-bar {
2 position: relative;
3 display: flex;
4 padding: 16px 16px 20px 16px;
5 gap: 16px;
6 overflow-x: auto;
7 background-color: var(--bg-faded-color);
8 mask-image: linear-gradient(
9 var(--to-forward),
10 transparent,
11 black 16px,
12 black calc(100% - 16px),
13 transparent
14 );
15 text-shadow: 0 1px var(--bg-blur-color);
16 transition: opacity 0.3s ease-out;
17
18 #trending-page &:not(#columns &) {
19 @media (min-width: 40em) {
20 width: 95vw;
21 max-width: calc(320px * 3.3);
22 transform: translateX(calc(-50% + var(--main-width) / 2));
23 &:dir(rtl) {
24 transform: translateX(calc(50% - var(--main-width) / 2));
25 }
26 }
27 }
28
29 & > header {
30 width: 1.2em;
31 white-space: nowrap;
32 position: relative;
33 flex-shrink: 0;
34
35 h3 {
36 font-size: 90%;
37 font-style: italic;
38 margin: 0;
39 padding: 0;
40 text-transform: uppercase;
41 color: var(--text-insignificant-color);
42 position: absolute;
43 top: 8px;
44 inset-inline-start: 0;
45 transform-origin: top left;
46 transform: rotate(-90deg) translateX(-100%);
47 &:dir(rtl) {
48 transform-origin: top right;
49 transform: rotate(90deg) translateX(100%);
50 }
51 user-select: none;
52 background-image: linear-gradient(
53 var(--to-backward),
54 var(--text-color),
55 var(--link-color)
56 );
57 background-clip: text;
58 text-fill-color: transparent;
59 -webkit-text-fill-color: transparent;
60 }
61 }
62
63 a.link-block {
64 width: 240px;
65 flex-shrink: 0;
66 /* max-width: 320px; */
67 text-decoration: none;
68 color: inherit;
69 border-radius: 16px;
70 overflow: hidden;
71 background-color: var(--accent-alpha-color);
72 border: 4px solid transparent;
73 box-shadow: 0 4px 8px -2px var(--drop-shadow-color);
74 transition: all 0.15s ease-out;
75 display: flex;
76 background-image: linear-gradient(
77 to bottom,
78 var(--accent-color, var(--link-text-color)) -50%,
79 transparent
80 );
81 background-clip: border-box;
82 background-origin: border-box;
83 min-height: 160px;
84 height: 340px;
85 max-height: 50vh;
86
87 &:not(:active):is(:hover, :focus-visible) {
88 border-color: var(--accent-color, var(--link-light-color));
89 box-shadow:
90 0 4px 8px var(--drop-shadow-color),
91 0 8px 16px var(--drop-shadow-color);
92 transform-origin: center bottom;
93 transform: scale(1.02);
94
95 img {
96 animation: position-object 5s ease-in-out 1s 5;
97 }
98 }
99
100 &:active {
101 transition: none;
102 transform: scale(1.015);
103 filter: brightness(0.8);
104 }
105
106 figure {
107 transition: 1s ease-out;
108 transition-property: opacity, mix-blend-mode;
109 }
110
111 &.inactive:not(:active, :hover) {
112 figure {
113 transition-duration: 0.3s;
114 opacity: 0.5;
115 mix-blend-mode: luminosity;
116 }
117
118 .byline {
119 transition-duration: 0.3s;
120 opacity: 0.75;
121 mix-blend-mode: luminosity;
122 }
123 }
124
125 &.active {
126 border-color: var(--accent-color, var(--link-light-color));
127 height: 100%;
128 max-height: 100%;
129
130 + button[disabled] {
131 display: none;
132 }
133 }
134
135 article {
136 width: 100%;
137 display: flex;
138 flex-direction: column;
139 justify-content: flex-end;
140 background-color: var(--bg-color);
141 background-repeat: no-repeat;
142 background-image: linear-gradient(
143 to bottom,
144 var(--accent-alpha-color) 70%,
145 var(--bg-color) 100%
146 );
147 transition: background-position-y 0.15s ease-out;
148
149 figure {
150 flex-grow: 1;
151 margin: 0 0 -16px;
152 padding: 0;
153 position: relative;
154
155 img {
156 position: absolute;
157 inset: 0;
158 width: 100%;
159 height: 100%;
160 object-fit: cover;
161 vertical-align: top;
162 mask-image: linear-gradient(
163 to bottom,
164 hsl(0, 0%, 0%) 0%,
165 hsla(0, 0%, 0%, 0.987) 14%,
166 hsla(0, 0%, 0%, 0.951) 26.2%,
167 hsla(0, 0%, 0%, 0.896) 36.8%,
168 hsla(0, 0%, 0%, 0.825) 45.9%,
169 hsla(0, 0%, 0%, 0.741) 53.7%,
170 hsla(0, 0%, 0%, 0.648) 60.4%,
171 hsla(0, 0%, 0%, 0.55) 66.2%,
172 hsla(0, 0%, 0%, 0.45) 71.2%,
173 hsla(0, 0%, 0%, 0.352) 75.6%,
174 hsla(0, 0%, 0%, 0.259) 79.6%,
175 hsla(0, 0%, 0%, 0.175) 83.4%,
176 hsla(0, 0%, 0%, 0.104) 87.2%,
177 hsla(0, 0%, 0%, 0.049) 91.1%,
178 hsla(0, 0%, 0%, 0.013) 95.3%,
179 hsla(0, 0%, 0%, 0) 100%
180 );
181 }
182 }
183 }
184
185 &:is(:hover, :focus-visible) article {
186 background-position-y: -40px;
187 }
188
189 .article-body {
190 padding: 0 8px 8px;
191 line-height: 1.3;
192 flex-shrink: 0;
193 }
194
195 .article-meta {
196 color: var(--text-insignificant-color);
197 font-size: 90%;
198 white-space: nowrap;
199 overflow: hidden;
200 text-overflow: ellipsis;
201 }
202
203 &:hover .domain {
204 color: var(--link-text-color);
205 }
206
207 h1 {
208 font-weight: normal;
209 font-size: inherit;
210 margin: 0;
211 padding: 0;
212 text-wrap: balance;
213 display: -webkit-box;
214 -webkit-line-clamp: 3;
215 -webkit-box-orient: vertical;
216 overflow: hidden;
217 }
218
219 p {
220 color: var(--text-insignificant-color);
221 margin: 0;
222 display: -webkit-box;
223 -webkit-line-clamp: 2;
224 -webkit-box-orient: vertical;
225 overflow: hidden;
226 font-size: 90%;
227
228 &.more-lines {
229 -webkit-line-clamp: 3;
230 }
231 }
232
233 hr {
234 margin: 4px 0;
235 }
236
237 .byline {
238 white-space: nowrap;
239 mask-image: linear-gradient(var(--to-backward), transparent, black 32px);
240
241 a {
242 color: inherit;
243 }
244
245 .avatar {
246 width: 16px !important;
247 height: 16px !important;
248 opacity: 0.8;
249 }
250 }
251 }
252}