Skip to content

Commit 7fc075e

Browse files
nzbrnzbr
committed
revealjs: smooth transition between vertical slides
1 parent 3be3c97 commit 7fc075e

1 file changed

Lines changed: 171 additions & 67 deletions

File tree

‎web/css/revealjs/index.scss‎

Lines changed: 171 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -13,48 +13,199 @@ $sw: calc($segment * 16);
1313
$sh: calc($segment * 9);
1414

1515
$header-height: 7;
16-
$header-padding: .5;
16+
$header-padding: 0.5;
1717
$header-gap: 2;
18-
$contentHeight: calc((100 - $header-height - $header-padding * 2 - $header-gap) * $sh);
18+
$contentHeight: calc(
19+
(100 - $header-height - $header-padding * 2 - $header-gap) * $sh
20+
);
1921

20-
.reveal:not([data-background-transition=none]) .slides section {
22+
@if config.$debug {
23+
section,
24+
.section-content {
25+
outline: 1px solid fuchsia;
26+
.main-content,
27+
.sidebar {
28+
outline: 1px solid #aa00ff;
29+
}
30+
}
31+
li,
32+
h2,
33+
h3,
34+
h4,
35+
h5,
36+
h6,
37+
p {
38+
outline: 1px solid lime;
39+
}
40+
a {
41+
outline: 1px solid cyan;
42+
}
43+
#refs {
44+
.csl-entry {
45+
outline: 1px solid #aa00ff;
46+
.csl-left-margin {
47+
outline: 1px solid lime;
48+
}
49+
.csl-right-inline {
50+
outline: 1px solid lime;
51+
}
52+
}
53+
}
54+
}
55+
56+
.reveal:not([data-background-transition="none"]) .slides section {
2157
opacity: 1 !important;
2258
}
2359

2460
.reveal .slides section {
2561
height: 100vh;
2662
width: 100vw;
2763

64+
&.title-slide {
65+
background-color: colors.$background-secondary;
66+
67+
:before {
68+
content: "";
69+
position: absolute;
70+
left: 0;
71+
top: 0;
72+
width: 50vw;
73+
height: 100vh;
74+
margin-left: -50vw;
75+
background-color: colors.$background-secondary;
76+
}
77+
78+
:after {
79+
content: "";
80+
position: absolute;
81+
left: 0;
82+
top: 100vh;
83+
width: 100vw;
84+
height: 50vh;
85+
background-color: colors.$background-secondary;
86+
}
87+
}
88+
2889
h1 {
2990
@include elements.acrylic;
3091
@include elements.floating;
3192
font-size: calc(3.25 * $sw);
3293
text-align: left;
33-
padding-left: calc($header-padding * 2 * $sw);
94+
padding-left: calc(
95+
$header-padding * 2 * $sw + 50vw
96+
); // 50vw because header extends into whitespace between slides
3497
padding-top: calc($header-padding * $sh);
3598
padding-bottom: calc($header-padding * $sh);
3699
height: calc($header-height * $sh);
37100
vertical-align: middle;
38101
margin-bottom: calc($header-gap * $sh);
39102

40-
margin-right: calc(-50vw); // connect to next slide
103+
// connect to next slide (horizontal)
104+
margin-left: -50vw;
105+
// margin-right: -26vw;
106+
107+
// connect to next slide (vertical)
108+
&::before {
109+
content: "";
110+
// Use background-secondary at 100% opacity here regardless of palette.alpha, because it should look the same as the header color calculated through makeTransparent
111+
$bg-color: none !default;
112+
@if config.$darkmode {
113+
$bg-color: map.get(colors.$darkColors, "background-secondary");
114+
} @else {
115+
$bg-color: map.get(colors.$lightColors, "background-secondary");
116+
}
117+
background: linear-gradient(
118+
180deg,
119+
rgba($bg-color, 0) 0%,
120+
rgba($bg-color, 1) 100%
121+
);
122+
123+
display: block;
124+
position: absolute;
125+
top: -25vh;
126+
left: 0;
127+
width: 100%;
128+
height: 25vh;
129+
}
41130
}
42131

43132
h2.title {
44133
font-size: calc(5 * $sw);
45134
}
46135

47-
h1, h2, h3, h4, h5, h6 {
136+
h1,
137+
h2,
138+
h3,
139+
h4,
140+
h5,
141+
h6 {
48142
@if not config.$professional {
49143
font-weight: normal;
50144
text-shadow: none;
51145
color: colors.$highlight;
52146
}
53147
}
54148

55-
.section-content {
56-
font-size: calc(2.25 * $sw);
149+
li::marker {
150+
color: colors.$highlight;
151+
}
152+
153+
font-size: calc(2.25 * $sw);
154+
155+
.citation,
156+
.csl-left-margin {
157+
color: colors.$foreground-secondary;
57158

159+
a {
160+
color: inherit;
161+
}
162+
}
163+
164+
.citation {
165+
// superset
166+
position: relative;
167+
top: -1ex;
168+
font-size: 0.6em;
169+
height: 100%;
170+
}
171+
172+
video,
173+
img.floating {
174+
@include elements.floating-box($padding: 0px, $border-radius: $sw);
175+
}
176+
177+
.speechbubble {
178+
$padding: speechbubble.$padding;
179+
180+
margin-left: $padding;
181+
margin-right: $padding;
182+
183+
img {
184+
margin: 0;
185+
}
186+
}
187+
188+
.fragment.custom.highlight {
189+
&.visible {
190+
color: colors.$highlight;
191+
}
192+
}
193+
194+
#refs {
195+
@include elements.floating-text($padding: $sw, $margin: 0px);
196+
197+
font-size: 0.75em;
198+
max-height: calc(
199+
(100 - $header-height - $header-padding * 2 - $header-gap - 6) * $sh
200+
);
201+
width: calc((100 - 4) * $sw);
202+
margin: auto auto calc(2 * $sh);
203+
overflow: auto;
204+
205+
text-align: left;
206+
}
207+
208+
.section-content {
58209
width: calc(100 * $sw);
59210
height: $contentHeight;
60211

@@ -69,10 +220,6 @@ $contentHeight: calc((100 - $header-height - $header-padding * 2 - $header-gap)
69220
height: calc(100 * $sh);
70221
}
71222

72-
@if config.$debug {
73-
border: 1px solid fuchsia;
74-
}
75-
76223
.main-content {
77224
flex: 1;
78225
align-self: center;
@@ -82,73 +229,31 @@ $contentHeight: calc((100 - $header-height - $header-padding * 2 - $header-gap)
82229
}
83230

84231
.sidebar {
85-
86232
width: 25%;
87233
margin: 0;
88234
height: 100%;
89235

90236
padding-left: calc(1 * $sw);
91237
padding-right: calc(1 * $sw);
92238

93-
font-size: .5em;
94-
95-
@if config.$debug {
96-
border: 1px solid cyan;
97-
}
239+
font-size: 0.5em;
98240

99241
.citation {
100242
font-size: inherit;
101-
top: 0
243+
top: 0;
102244
}
103245

104246
p {
105247
margin-top: 0;
106248
}
107249

108-
img, video {
250+
img,
251+
video {
109252
margin: 0;
110253
width: 100%;
111254
}
112255
}
113-
114-
.citation {
115-
color: colors.$foreground-secondary;
116-
// superset
117-
position: relative;
118-
top: -1ex;
119-
font-size: 0.6em;
120-
height: 100%;
121-
}
122-
123-
video, img.floating {
124-
@include elements.floating-box($padding: 0px, $border-radius: $sw);
125-
}
126-
127-
.speechbubble {
128-
$padding: speechbubble.$padding;
129-
130-
margin-left: $padding;
131-
margin-right: $padding;
132-
133-
img {
134-
margin: 0;
135-
}
136-
}
137-
138-
#refs {
139-
@include elements.floating-text($padding: $sw, $margin: 0px);
140-
141-
font-size: 0.75em;
142-
max-height: calc((100 - $header-height - $header-padding * 2 - $header-gap - 6) * $sh);
143-
width: calc((100 - 4) * $sw);
144-
margin: auto auto calc(2 * $sh);
145-
overflow: auto;
146-
147-
text-align: left;
148-
}
149-
150256
}
151-
152257
}
153258

154259
/**
@@ -167,17 +272,17 @@ $palette: colors.$lightColors;
167272
}
168273

169274
// Override theme settings (see ../template/settings.scss)
170-
$backgroundColor: map.get($palette, 'background');
275+
$backgroundColor: map.get($palette, "background");
171276

172-
$mainColor: map.get($palette, 'foreground');
173-
$headingColor: map.get($palette, 'highlight');
277+
$mainColor: map.get($palette, "foreground");
278+
$headingColor: map.get($palette, "highlight");
174279
@if config.$professional {
175-
$headingColor: map.get($palette, 'foreground');
280+
$headingColor: map.get($palette, "foreground");
176281
}
177282

178-
$linkColor: map.get($palette, 'highlight');
179-
$linkColorHover: lighten(map.get($palette, 'highlight'), 5%);
180-
$selectionBackgroundColor: darken(map.get($palette, 'highlight'), 5%);
283+
$linkColor: map.get($palette, "highlight");
284+
$linkColorHover: lighten(map.get($palette, "highlight"), 5%);
285+
$selectionBackgroundColor: darken(map.get($palette, "highlight"), 5%);
181286

182287
$mainFontSize: 42px;
183288
$mainFont: regular-font.$font-family;
@@ -195,12 +300,11 @@ $headingFontWeight: 600;
195300
$heading1Size: 1.5em;
196301
$heading2Size: 1.25em;
197302
$heading3Size: 1.1em;
198-
$heading4Size: 1.0em;
303+
$heading4Size: 1em;
199304

200305
// Change text colors against dark slide backgrounds
201306
@include dark-bg-text-color(#fff);
202307

203-
204308
// Theme template ------------------------------
205309
@import "/node_modules/reveal.js/css/theme/template/theme";
206310
// ---------------------------------------------

0 commit comments

Comments
 (0)