A calm place to write long-form, and publish it to the open social web.
skypress.blog/
Reader: resolve + render embeds on the article page
author
Jeremy Herve
date
(Jun 19, 2026, 5:31 PM +0200)
commit
f751758e
f751758ee80b99a8a7969151581686077fd5d80b
parent
d0c382e6
d0c382e6f1a5e5320430f0561a294e20b81c73b6
+97
-2
+87
src/styles/embeds.css
+87
src/styles/embeds.css
···
1
+
/* src/styles/embeds.css — embed cards on the reading page. Utility surfaces use
2
+
fixed colors (not theme tokens) so per-publication themes don't recolor them. */
3
+
.skypress-embed {
4
+
margin: 1.8rem 0;
5
+
border: 1px solid var(--line);
6
+
border-radius: var(--radius);
7
+
overflow: hidden;
8
+
background: var(--paper-raised);
9
+
}
10
+
.skypress-embed--atproto .skypress-embed__link {
11
+
display: block;
12
+
padding: 1rem 1.2rem;
13
+
text-decoration: none;
14
+
color: var(--ink);
15
+
}
16
+
.skypress-embed__head {
17
+
display: flex;
18
+
align-items: center;
19
+
gap: 0.5rem;
20
+
margin-bottom: 0.5rem;
21
+
}
22
+
.skypress-embed__avatar {
23
+
width: 32px;
24
+
height: 32px;
25
+
border-radius: 50%;
26
+
object-fit: cover;
27
+
}
28
+
.skypress-embed__author { font-weight: 600; }
29
+
.skypress-embed__handle { color: var(--muted); font-size: 0.92rem; }
30
+
.skypress-embed__text {
31
+
display: block;
32
+
white-space: pre-wrap;
33
+
line-height: 1.5;
34
+
}
35
+
.skypress-embed__media {
36
+
display: grid;
37
+
gap: 0.4rem;
38
+
margin-top: 0.75rem;
39
+
}
40
+
.skypress-embed__image { width: 100%; border-radius: 8px; }
41
+
.skypress-embed__footer {
42
+
display: block;
43
+
margin-top: 0.75rem;
44
+
font-size: 0.88rem;
45
+
color: var(--muted);
46
+
}
47
+
/* Video facade */
48
+
.skypress-embed--video { position: relative; }
49
+
.skypress-embed__play {
50
+
display: block;
51
+
width: 100%;
52
+
padding: 0;
53
+
border: 0;
54
+
background: #000;
55
+
cursor: pointer;
56
+
position: relative;
57
+
}
58
+
.skypress-embed__thumb { width: 100%; display: block; opacity: 0.92; }
59
+
.skypress-embed__playicon {
60
+
position: absolute;
61
+
inset: 0;
62
+
display: flex;
63
+
align-items: center;
64
+
justify-content: center;
65
+
font-size: 3rem;
66
+
color: #fff;
67
+
text-shadow: 0 2px 8px rgba( 0, 0, 0, 0.5 );
68
+
}
69
+
.skypress-embed__title {
70
+
display: block;
71
+
padding: 0.6rem 1rem;
72
+
color: #fff;
73
+
background: #000;
74
+
text-align: left;
75
+
font-size: 0.95rem;
76
+
}
77
+
.skypress-embed__fallback {
78
+
display: block;
79
+
padding: 0.5rem 1rem;
80
+
font-size: 0.85rem;
81
+
}
82
+
.skypress-embed__iframe {
83
+
width: 100%;
84
+
aspect-ratio: 16 / 9;
85
+
border: 0;
86
+
display: block;
87
+
}