j0.lol
1/* Element | http://localhost:3000/ */
2
3* {
4 box-sizing: border-box;
5}
6
7h1.plain,
8h2.plain,
9h3.plain {
10 font-size: inherit;
11 font-weight: inherit;
12 display: inline;
13}
14
15.heading.heading {
16 font-weight: bold;
17 text-transform: capitalize;
18}
19
20ol.thumb-grid {
21 --thumbnail-width: 16rem;
22 display: grid;
23 grid-template-columns: repeat(auto-fill, var(--thumbnail-width));
24 gap: 1rem;
25 padding: 0;
26 justify-content: center;
27
28 @media (width < 34rem) {
29 padding: 1rem;
30 grid-template-columns: auto;
31 }
32
33 li {
34 display: flex;
35 flex-flow: column;
36 gap: 0.5rem;
37
38 vid-thumbnail {
39 position: relative;
40
41 img {
42 width: 100%;
43 }
44
45 vid-timestamp {
46 position: absolute;
47 bottom: 0;
48 right: 0;
49 background: hsla(from black h s l / 70%);
50 color: white;
51 font-family: "Courier New", Courier, monospace;
52 }
53 }
54 vid-details-large {
55 display: flex;
56 gap: 0.5rem;
57 flex-flow: row nowrap;
58
59 img {
60 width: 3rem;
61 height: 3rem;
62 border-radius: 999rem;
63 }
64 vid-title {
65 font-weight: bold;
66 }
67 }
68
69 vid-details-small {
70 display: flex;
71 gap: 0.5rem;
72 font-style: italic;
73 }
74 }
75}