Cv-interactif/pdf.css at main · davidgenty/Cv-interactif · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
.pdf-main{
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;
  padding:54px 0 80px;
}

.pdf-main .section-shell{width:100%;padding:0}

.pdf-intro{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:end;
  margin-bottom:30px;
}

.pdf-heading{max-width:none}

.pdf-heading h1{
  margin:14px 0 20px;
  font-size:clamp(2.4rem,4vw,3.25rem);
  line-height:1.02;
  letter-spacing:-.045em;
  white-space:nowrap;
}

.pdf-heading p{
  max-width:none;
  margin:0;
  color:#aeb8c8;
  font-size:1.02rem;
}

.pdf-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-start;
}

.pdf-viewer-shell{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(19,24,33,.96),rgba(13,17,24,.96));
  box-shadow:var(--shadow);
}

.viewer-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  color:#8f99a8;
  font-size:.76rem;
  letter-spacing:.04em;
}

.viewer-bar div{display:flex;align-items:center;gap:9px;min-width:0}
.viewer-bar strong{color:#dce2eb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewer-dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 16px var(--mint)}
.pdf-frame-wrap{height:min(1100px,84vh);min-height:720px;overflow:hidden;background:#11141b}
.pdf-frame-interactive{display:block;width:100%;height:100%;border:0;background:#11141b}
.pdf-fallback{display:grid;place-items:center;align-content:center;gap:10px;height:100%;padding:30px;text-align:center;color:#aab4c2}
.pdf-fallback p{margin:0 0 12px}

@media(max-width:900px){
  .pdf-main{width:min(100% - 28px,1180px);padding-top:38px}
  .pdf-intro{gap:24px}
  .pdf-frame-wrap{height:78vh;min-height:580px}
}

@media(max-width:520px){
  .pdf-main{width:min(100% - 18px,1180px);padding:28px 0 52px}
  .pdf-heading h1{font-size:clamp(2.35rem,12vw,3.2rem);white-space:normal}
  .pdf-actions{flex-direction:column}
  .pdf-actions .button{width:100%}
  .viewer-bar{align-items:flex-start;flex-direction:column;gap:5px}
  .pdf-frame-wrap{height:70vh;min-height:500px}
  .pdf-viewer-shell{border-radius:16px}
}