slide-deck/slide-deck.css at main · oddbird/slide-deck · 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
@property --slide-deck-gap {
  syntax: "<length>";
  inherits: true;
  initial-value: 8px;
}

slide-deck {
  --slide-deck-gap: min(round(up, 8px + 0.5vw, 0.25lh), 1lh);
  --slide-deck-default-border: thin solid gray;
  --slide-deck-progress: calc(
    (var(--slide-active-id) - 1) / (var(--slide-count) - 1) * 100%
  );
  --slide-ratio: 16/9;
  container: slide-deck slide / inline-size;
  display: grid;
}

[slide-view=grid],
[slide-view=speaker] {
  --slide-note-margin-block: var(--slide-deck-gap);
  --slide-deck-target-margin: var(--slide-deck-gap);
  --slide-deck-target-outline: medium dotted;
  --slide-deck-target-outline-offset: calc(var(--slide-deck-gap) * 0.5);
  gap: var(--slide-deck-gap);
  padding: var(--slide-deck-gap);
}

[slide-view=grid] {
  --slide-canvas-border: var(--slide-deck-default-border);
  grid-template-columns: repeat(auto-fill, minmax(min(50ch, 100%), 1fr));
}

[slide-view=slideshow] {
  @media (orientation: landscape) {
    --slide-ratio: unset;
    grid-auto-rows: 100svh;

    [slide-item='container'] {
      display: grid;
    }
  }

  [slide-canvas] {
    border-block-end: var(--slide-deck-default-border);
  }

  [slide-note] {
    display: none;
  }
}

[slide-view=speaker] {
  --slide-canvas-border: var(--slide-deck-default-border);

  @media (width >= 40em) {
    grid-template-columns: 18em 1fr;
    --slide-note-margin-block: unset;

    [slide-item='container'] {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
    }
  }

  [slide-item=canvas] {
    grid-column: 1;
  }

  [slide-canvas] {
    font-size: 60%;
  }

  [slide-note] {
    font-size: var(--note-font-size, 120%);
    grid-column: 2;
    max-width: 75ch;
  }

  [slide-item]:target {
    --note-font-size: 160%;
  }

  &::after {
    content: '';
    position: fixed;
    inset: auto 0 0 0;
    block-size: var(--slide-deck-gap);
    background: linear-gradient(
      to right,
      accentColor var(--slide-deck-progress, 0),
      canvas var(--slide-deck-progress, 0)
    );
  }
}

[slide-item] {
  scroll-margin-block: var(--slide-deck-target-margin);
}

[slide-canvas] {
  aspect-ratio: var(--slide-ratio);
  border: var(--slide-canvas-border);
  container: slide / inline-size;
  padding: var(--slide-deck-gap);

  &:where([aria-current='true']),
  &:where([slide-item][aria-current='true'] *) {
    outline: var(--slide-deck-target-outline);
    outline-offset: var(--slide-deck-target-outline-offset);
  }
}

[slide-note] {
  margin-block: var(--slide-note-margin-block);

  &:first-child { margin-block-start: unset; }
  &:last-child { margin-block-end: unset; }
}