From 54a2137c0d20905aa3190b7009735d1171295be0 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 11 Oct 2016 11:33:39 +0200 Subject: fix responsive issue with speaker notes --- css/reveal.css | 24 +++++++++++++----------- css/reveal.scss | 26 +++++++++++++++----------- 2 files changed, 28 insertions(+), 22 deletions(-) (limited to 'css') diff --git a/css/reveal.css b/css/reveal.css index 0c52205..8a4f579 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -1433,12 +1433,8 @@ body { .reveal aside.notes { display: none; } -.reveal.show-notes { - max-width: 80vw; - overflow: visible; } - .reveal .speaker-notes { - display: block; + display: none; position: absolute; width: 20vw; height: 100%; @@ -1455,19 +1451,25 @@ body { text-align: left; font-family: Helvetica, sans-serif; -webkit-overflow-scrolling: touch; } + .reveal .speaker-notes:before { + content: 'Speaker notes'; + display: block; + margin-bottom: 10px; + opacity: 0.5; } -.reveal .speaker-notes:before { - content: 'Speaker notes'; - display: block; - margin-bottom: 10px; - opacity: 0.5; } +.reveal.show-notes { + max-width: 80vw; + overflow: visible; } + +.reveal.show-notes .speaker-notes { + display: block; } @media screen and (max-width: 1024px) { .reveal.show-notes { max-width: none; max-height: 70vh; overflow: visible; } - .reveal .speaker-notes { + .reveal.show-notes .speaker-notes { top: 70vh; left: 0; width: 100%; diff --git a/css/reveal.scss b/css/reveal.scss index f24ed2c..d2945ec 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -1521,15 +1521,10 @@ body { display: none; } -.reveal.show-notes { - max-width: 80vw; - overflow: visible; -} - // An interface element that can optionally be used to show the // speaker notes to all viewers, on top of the presentation .reveal .speaker-notes { - display: block; + display: none; position: absolute; width: 20vw; height: 100%; @@ -1546,13 +1541,22 @@ body { text-align: left; font-family: Helvetica, sans-serif; -webkit-overflow-scrolling: touch; + + &:before { + content: 'Speaker notes'; + display: block; + margin-bottom: 10px; + opacity: 0.5; + } +} + +.reveal.show-notes { + max-width: 80vw; + overflow: visible; } -.reveal .speaker-notes:before { - content: 'Speaker notes'; +.reveal.show-notes .speaker-notes { display: block; - margin-bottom: 10px; - opacity: 0.5; } @media screen and (max-width: 1024px) { @@ -1562,7 +1566,7 @@ body { overflow: visible; } - .reveal .speaker-notes { + .reveal.show-notes .speaker-notes { top: 70vh; left: 0; width: 100%; -- cgit v1.2.3