xobs/lca2020-pay-it-forward
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix responsive issue with speaker notes

Browse Source
This commit is contained in:
Hakim El Hattab 2016-10-11 11:33:39 +02:00
parent 2cc5ae946b
commit 54a2137c0d
2 changed files with 28 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
css/reveal.css
View File

@ -1433,12 +1433,8 @@ body {
.reveal aside.notes { .reveal aside.notes {
display: none; } display: none; }
.reveal.show-notes {
max-width: 80vw;
overflow: visible; }
.reveal .speaker-notes { .reveal .speaker-notes {
display: block; display: none;
position: absolute; position: absolute;
width: 20vw; width: 20vw;
height: 100%; height: 100%;
@ -1455,19 +1451,25 @@ body {
text-align: left; text-align: left;
font-family: Helvetica, sans-serif; font-family: Helvetica, sans-serif;
-webkit-overflow-scrolling: touch; } -webkit-overflow-scrolling: touch; }
.reveal .speaker-notes:before { .reveal .speaker-notes:before {
content: 'Speaker notes'; content: 'Speaker notes';
display: block; display: block;
margin-bottom: 10px; margin-bottom: 10px;
opacity: 0.5; } opacity: 0.5; }
.reveal.show-notes {
max-width: 80vw;
overflow: visible; }
.reveal.show-notes .speaker-notes {
display: block; }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.reveal.show-notes { .reveal.show-notes {
max-width: none; max-width: none;
max-height: 70vh; max-height: 70vh;
overflow: visible; } overflow: visible; }
.reveal .speaker-notes { .reveal.show-notes .speaker-notes {
top: 70vh; top: 70vh;
left: 0; left: 0;
width: 100%; width: 100%;

22
css/reveal.scss
View File

@ -1521,15 +1521,10 @@ body {
display: none; display: none;
} }
.reveal.show-notes {
max-width: 80vw;
overflow: visible;
}
// An interface element that can optionally be used to show the // An interface element that can optionally be used to show the
// speaker notes to all viewers, on top of the presentation // speaker notes to all viewers, on top of the presentation
.reveal .speaker-notes { .reveal .speaker-notes {
display: block; display: none;
position: absolute; position: absolute;
width: 20vw; width: 20vw;
height: 100%; height: 100%;
@ -1546,14 +1541,23 @@ body {
text-align: left; text-align: left;
font-family: Helvetica, sans-serif; font-family: Helvetica, sans-serif;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
}
.reveal .speaker-notes:before { &:before {
content: 'Speaker notes'; content: 'Speaker notes';
display: block; display: block;
margin-bottom: 10px; margin-bottom: 10px;
opacity: 0.5; opacity: 0.5;
} }
}
.reveal.show-notes {
max-width: 80vw;
overflow: visible;
}
.reveal.show-notes .speaker-notes {
display: block;
}
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.reveal.show-notes { .reveal.show-notes {
@ -1562,7 +1566,7 @@ body {
overflow: visible; overflow: visible;
} }
.reveal .speaker-notes { .reveal.show-notes .speaker-notes {
top: 70vh; top: 70vh;
left: 0; left: 0;
width: 100%; width: 100%;