diff options
| author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2012-07-04 15:09:58 -0400 |
|---|---|---|
| committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2012-07-04 15:09:58 -0400 |
| commit | 0c1a4add3a760a4bd9e68a4d8c02e36dac7cafdc (patch) | |
| tree | 38e6050de623540f03e6b00b1161d6ef77d312ea /lib | |
| parent | a6969770bd669fef99d6a0a2f99643d622c036ca (diff) | |
| download | fosdem-2018-presentation-0c1a4add3a760a4bd9e68a4d8c02e36dac7cafdc.tar fosdem-2018-presentation-0c1a4add3a760a4bd9e68a4d8c02e36dac7cafdc.tar.gz | |
small tweaks to notes page style
Diffstat (limited to 'lib')
| -rw-r--r-- | lib/slidenotes/notes.html | 46 |
1 files changed, 35 insertions, 11 deletions
diff --git a/lib/slidenotes/notes.html b/lib/slidenotes/notes.html index 4201647..404b023 100644 --- a/lib/slidenotes/notes.html +++ b/lib/slidenotes/notes.html @@ -6,22 +6,27 @@ <title>reveal.js - Slide Notes</title> <style> - #notes { + body { font-family: Helvetica; + } + + #notes { font-size: 24px; width: 640px; + margin-top: 5px; } - #wrap-slides { + #wrap-current-slide { width: 640px; height: 512px; float: left; + overflow: hidden; } - #slides { + #current-slide { width: 1280px; height: 1024px; - border: 1px solid black; + border: none; -moz-transform: scale(0.5); -moz-transform-origin: 0 0; -o-transform: scale(0.5); @@ -34,13 +39,14 @@ width: 320px; height: 256px; float: left; - margin: 0 0 0 50px; + margin: 0 0 0 10px; + overflow: hidden; } #next-slide { width: 1280px; height: 1024px; - border: 1px solid black; + border: none; -moz-transform: scale(0.25); -moz-transform-origin: 0 0; -o-transform: scale(0.25); @@ -48,17 +54,35 @@ -webkit-transform: scale(0.25); -webkit-transform-origin: 0 0; } + + .slides { + position: relative; + margin-bottom: 10px; + border: 1px solid black; + border-radius: 2px; + background: rgb(28, 30, 32); + } + + .slides span { + position: absolute; + top: 3px; + left: 3px; + font-weight: bold; + font-size: 14px; + color: rgba( 255, 255, 255, 0.9 ); + } </style> </head> <body> - <div id="wrap-slides"> - <iframe src="/?receiver" width="1280" height="1024" id="slides"></iframe> + <div id="wrap-current-slide" class="slides"> + <iframe src="/?receiver" width="1280" height="1024" id="current-slide"></iframe> </div> - <div id="wrap-next-slide"> + <div id="wrap-next-slide" class="slides"> <iframe src="/?receiver" width="640" height="512" id="next-slide"></iframe> + <span>UPCOMING</span> </div> <div id="notes"></div> @@ -68,7 +92,7 @@ var socketId = '{{socketId}}'; var socket = io.connect(window.location.origin); var notes = document.getElementById('notes'); - var slides = document.getElementById('slides'); + var currentSlide = document.getElementById('current-slide'); var nextSlide = document.getElementById('next-slide'); socket.on('slidedata', function(data) { @@ -76,7 +100,7 @@ if (data.socketId !== socketId) { return; } notes.innerHTML = data.notes; - slides.contentWindow.Reveal.navigateTo(data.indexh, data.indexv); + currentSlide.contentWindow.Reveal.navigateTo(data.indexh, data.indexv); nextSlide.contentWindow.Reveal.navigateTo(data.nextindexh, data.nextindexv); }); </script> |