aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorHakim El Hattab <hakim.elhattab@gmail.com>2016-10-11 11:33:39 +0200
committerHakim El Hattab <hakim.elhattab@gmail.com>2017-05-16 09:45:37 +0200
commit54a2137c0d20905aa3190b7009735d1171295be0 (patch)
tree65ea1e343199e73859abb176876132dd99cead2d
parent2cc5ae946b40f98a7a1f1a883d995615f69681e2 (diff)
downloadfosdem-2018-presentation-54a2137c0d20905aa3190b7009735d1171295be0.tar
fosdem-2018-presentation-54a2137c0d20905aa3190b7009735d1171295be0.tar.gz
fix responsive issue with speaker notes
-rw-r--r--css/reveal.css24
-rw-r--r--css/reveal.scss26
2 files changed, 28 insertions, 22 deletions
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%;