fix notes layout when container isnt as wide as viewport

This commit is contained in:
Hakim El Hattab 2018-12-18 10:14:18 +01:00
parent 6fe0cbc0dd
commit 9f1856d55b
2 changed files with 6 additions and 4 deletions

View File

@ -1488,7 +1488,7 @@ body {
.reveal .speaker-notes { .reveal .speaker-notes {
display: none; display: none;
position: absolute; position: absolute;
width: 25vw; width: 33.3333333333%;
height: 100%; height: 100%;
top: 0; top: 0;
left: 100%; left: 100%;
@ -1516,7 +1516,7 @@ body {
opacity: 0.5; } opacity: 0.5; }
.reveal.show-notes { .reveal.show-notes {
max-width: 75vw; max-width: 75%;
overflow: visible; } overflow: visible; }
.reveal.show-notes .speaker-notes { .reveal.show-notes .speaker-notes {

View File

@ -1619,6 +1619,8 @@ $controlsArrowAngleActive: 36deg;
* SPEAKER NOTES * SPEAKER NOTES
*********************************************/ *********************************************/
$notesWidthPercent: 25%;
// Hide on-page notes // Hide on-page notes
.reveal aside.notes { .reveal aside.notes {
display: none; display: none;
@ -1629,7 +1631,7 @@ $controlsArrowAngleActive: 36deg;
.reveal .speaker-notes { .reveal .speaker-notes {
display: none; display: none;
position: absolute; position: absolute;
width: 25vw; width: $notesWidthPercent / (1-$notesWidthPercent/100) * 1%;
height: 100%; height: 100%;
top: 0; top: 0;
left: 100%; left: 100%;
@ -1665,7 +1667,7 @@ $controlsArrowAngleActive: 36deg;
.reveal.show-notes { .reveal.show-notes {
max-width: 75vw; max-width: 100% - $notesWidthPercent;
overflow: visible; overflow: visible;
} }