cmd/present: Fixed printing of slides.

I moved print.css into styles.css - to make it obvious that it needs to be
considered when modifying the styles.css. I use @media screen for all the
framwork related css, this means the @media print doesn't have to start
overriding each property - also there's less chance of a problem when
something isn't overridden.

Change-Id: Ic58e8c80df3339b55f67140a47866a232e0d30a3
Reviewed-on: https://go-review.googlesource.com/5526
Reviewed-by: Andrew Gerrand <adg@golang.org>

3 files changed, 247 insertions, 269 deletions

diff --git a/cmd/present/static/print.css b/cmd/present/static/print.css
deleted file mode 100644
index b24b4df..0000000
--- a/cmd/present/static/print.css
+++ /dev/null
@@ -1,56 +0,0 @@
-/* set page layout */
-@page {
-  size: A4 landscape;
-}
-
-body { 
-  display: block !important;
-}
-
-.slides {
-  left: 0;
-  top: 0;
-}
-
-.slides > article {
-  position: relative;
-
-  left: 0;
-  top: 0;
-
-  margin: 0 !important;
-  page-break-inside: avoid;
-
-  text-shadow: none; /* disable shadow */
-
-  display: block !important;
-  transform: translate(0) !important;
-  -o-transform: translate(0) !important;
-  -moz-transform: translate(0) !important;
-  -webkit-transform: translate3d(0, 0, 0) !important;
-}
-
-div.code {
-  background: rgb(240, 240, 240);
-}
-
-/* hide click areas */
-.slide-area, #prev-slide-area, #next-slide-area {
-  display: none;
-}
-
-/* add explicit links */
-a:link:after, a:visited:after {
- content: " (" attr(href) ") ";
- font-size: 50%;
-}
-
-/* white background */
-body {
-  background: rgb(255,255,255) !important;
-}
-
-#help {
-  display: none;
-  visibility: hidden;
-}
diff --git a/cmd/present/static/slides.js b/cmd/present/static/slides.js
index 3423fbe..a48ec52 100644
--- a/cmd/present/static/slides.js
+++ b/cmd/present/static/slides.js
@@ -467,15 +467,6 @@ function addGeneralStyle() {
   document.querySelector('head').appendChild(el);
 };
 
-function addPrintStyle() {
-  var el = document.createElement('link');
-  el.rel = 'stylesheet';
-  el.type = 'text/css';
-  el.media = "print";
-  el.href = PERMANENT_URL_PREFIX + 'print.css';
-  document.body.appendChild(el);
-};
-
 function showHelpText() {
 };
 
@@ -486,7 +477,6 @@ function handleDomLoaded() {
 
   addFontStyle();
   addGeneralStyle();
-  addPrintStyle();
   addEventListeners();
 
   updateSlides();
diff --git a/cmd/present/static/styles.css b/cmd/present/static/styles.css
index ba99053..5cb2953 100644
--- a/cmd/present/static/styles.css
+++ b/cmd/present/static/styles.css
@@ -1,210 +1,254 @@
-/* Framework */
+@media screen {
+  /* Framework */
+  html {
+    height: 100%;
+  }
 
-html {
-  height: 100%;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-
-  display: block !important;
-
-  height: 100%;
-  min-height: 740px;
-
-  overflow-x: hidden;
-  overflow-y: auto;
-
-  background: rgb(215, 215, 215);
-  background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
-  background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
-  background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
-  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190)));
-
-  -webkit-font-smoothing: antialiased;
-}
-
-.slides {
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-
-  position: absolute;
-
-  -webkit-transform: translate3d(0, 0, 0);
-}
-
-.slides > article {
-  display: block;
-
-  position: absolute;
-  overflow: hidden;
-
-  width: 900px;
-  height: 700px;
-
-  left: 50%;
-  top: 50%;
+  body {
+    margin: 0;
+    padding: 0;
 
-  margin-left: -450px;
-  margin-top: -350px;
+    display: block !important;
 
-  padding: 40px 60px;
+    height: 100%;
+    min-height: 740px;
 
-  box-sizing: border-box;
-  -o-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-
-  border-radius: 10px;
-  -o-border-radius: 10px;
-  -moz-border-radius: 10px;
-  -webkit-border-radius: 10px;
-
-  background-color: white;
-
-  border: 1px solid rgba(0, 0, 0, .3);
-
-  transition: transform .3s ease-out;
-  -o-transition: -o-transform .3s ease-out;
-  -moz-transition: -moz-transform .3s ease-out;
-  -webkit-transition: -webkit-transform .3s ease-out;
-}
-.slides.layout-widescreen > article {
-  margin-left: -550px;
-  width: 1100px;
-}
-.slides.layout-faux-widescreen > article {
-  margin-left: -550px;
-  width: 1100px;
-
-  padding: 40px 160px;
-}
-
-.slides.layout-widescreen > article:not(.nobackground):not(.biglogo),
-.slides.layout-faux-widescreen > article:not(.nobackground):not(.biglogo) {
-  background-position-x: 0, 840px;
-}
-
-/* Clickable/tappable areas */
-
-.slide-area {
-  z-index: 1000;
-
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 150px;
-  height: 700px;
-
-  left: 50%;
-  top: 50%;
-
-  cursor: pointer;
-  margin-top: -350px;
-
-  tap-highlight-color: transparent;
-  -o-tap-highlight-color: transparent;
-  -moz-tap-highlight-color: transparent;
-  -webkit-tap-highlight-color: transparent;
-}
-#prev-slide-area {
-  margin-left: -550px;
-}
-#next-slide-area {
-  margin-left: 400px;
-}
-.slides.layout-widescreen #prev-slide-area,
-.slides.layout-faux-widescreen #prev-slide-area {
-  margin-left: -650px;
-}
-.slides.layout-widescreen #next-slide-area,
-.slides.layout-faux-widescreen #next-slide-area {
-  margin-left: 500px;
-}
-
-/* Slides */
-
-.slides > article {
-  display: none;
-}
-.slides > article.far-past {
-  display: block;
-  transform: translate(-2040px);
-  -o-transform: translate(-2040px);
-  -moz-transform: translate(-2040px);
-  -webkit-transform: translate3d(-2040px, 0, 0);
-}
-.slides > article.past {
-  display: block;
-  transform: translate(-1020px);
-  -o-transform: translate(-1020px);
-  -moz-transform: translate(-1020px);
-  -webkit-transform: translate3d(-1020px, 0, 0);
-}
-.slides > article.current {
-  display: block;
-  transform: translate(0);
-  -o-transform: translate(0);
-  -moz-transform: translate(0);
-  -webkit-transform: translate3d(0, 0, 0);
-}
-.slides > article.next {
-  display: block;
-  transform: translate(1020px);
-  -o-transform: translate(1020px);
-  -moz-transform: translate(1020px);
-  -webkit-transform: translate3d(1020px, 0, 0);
-}
-.slides > article.far-next {
-  display: block;
-  transform: translate(2040px);
-  -o-transform: translate(2040px);
-  -moz-transform: translate(2040px);
-  -webkit-transform: translate3d(2040px, 0, 0);
-}
-
-.slides.layout-widescreen > article.far-past,
-.slides.layout-faux-widescreen > article.far-past {
-  display: block;
-  transform: translate(-2260px);
-  -o-transform: translate(-2260px);
-  -moz-transform: translate(-2260px);
-  -webkit-transform: translate3d(-2260px, 0, 0);
-}
-.slides.layout-widescreen > article.past,
-.slides.layout-faux-widescreen > article.past {
-  display: block;
-  transform: translate(-1130px);
-  -o-transform: translate(-1130px);
-  -moz-transform: translate(-1130px);
-  -webkit-transform: translate3d(-1130px, 0, 0);
-}
-.slides.layout-widescreen > article.current,
-.slides.layout-faux-widescreen > article.current {
-  display: block;
-  transform: translate(0);
-  -o-transform: translate(0);
-  -moz-transform: translate(0);
-  -webkit-transform: translate3d(0, 0, 0);
-}
-.slides.layout-widescreen > article.next,
-.slides.layout-faux-widescreen > article.next {
-  display: block;
-  transform: translate(1130px);
-  -o-transform: translate(1130px);
-  -moz-transform: translate(1130px);
-  -webkit-transform: translate3d(1130px, 0, 0);
-}
-.slides.layout-widescreen > article.far-next,
-.slides.layout-faux-widescreen > article.far-next {
-  display: block;
-  transform: translate(2260px);
-  -o-transform: translate(2260px);
-  -moz-transform: translate(2260px);
-  -webkit-transform: translate3d(2260px, 0, 0);
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    background: rgb(215, 215, 215);
+    background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
+    background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
+    background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
+    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190)));
+
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .slides {
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+
+    position: absolute;
+
+    -webkit-transform: translate3d(0, 0, 0);
+  }
+
+  .slides > article {
+    display: block;
+
+    position: absolute;
+    overflow: hidden;
+
+    width: 900px;
+    height: 700px;
+
+    left: 50%;
+    top: 50%;
+
+    margin-left: -450px;
+    margin-top: -350px;
+
+    padding: 40px 60px;
+
+    box-sizing: border-box;
+    -o-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+
+    border-radius: 10px;
+    -o-border-radius: 10px;
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+
+    background-color: white;
+
+    border: 1px solid rgba(0, 0, 0, .3);
+
+    transition: transform .3s ease-out;
+    -o-transition: -o-transform .3s ease-out;
+    -moz-transition: -moz-transform .3s ease-out;
+    -webkit-transition: -webkit-transform .3s ease-out;
+  }
+  .slides.layout-widescreen > article {
+    margin-left: -550px;
+    width: 1100px;
+  }
+  .slides.layout-faux-widescreen > article {
+    margin-left: -550px;
+    width: 1100px;
+
+    padding: 40px 160px;
+  }
+
+  .slides.layout-widescreen > article:not(.nobackground):not(.biglogo),
+  .slides.layout-faux-widescreen > article:not(.nobackground):not(.biglogo) {
+    background-position-x: 0, 840px;
+  }
+
+  /* Clickable/tappable areas */
+
+  .slide-area {
+    z-index: 1000;
+
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 150px;
+    height: 700px;
+
+    left: 50%;
+    top: 50%;
+
+    cursor: pointer;
+    margin-top: -350px;
+
+    tap-highlight-color: transparent;
+    -o-tap-highlight-color: transparent;
+    -moz-tap-highlight-color: transparent;
+    -webkit-tap-highlight-color: transparent;
+  }
+  #prev-slide-area {
+    margin-left: -550px;
+  }
+  #next-slide-area {
+    margin-left: 400px;
+  }
+  .slides.layout-widescreen #prev-slide-area,
+  .slides.layout-faux-widescreen #prev-slide-area {
+    margin-left: -650px;
+  }
+  .slides.layout-widescreen #next-slide-area,
+  .slides.layout-faux-widescreen #next-slide-area {
+    margin-left: 500px;
+  }
+
+  /* Slides */
+
+  .slides > article {
+    display: none;
+  }
+  .slides > article.far-past {
+    display: block;
+    transform: translate(-2040px);
+    -o-transform: translate(-2040px);
+    -moz-transform: translate(-2040px);
+    -webkit-transform: translate3d(-2040px, 0, 0);
+  }
+  .slides > article.past {
+    display: block;
+    transform: translate(-1020px);
+    -o-transform: translate(-1020px);
+    -moz-transform: translate(-1020px);
+    -webkit-transform: translate3d(-1020px, 0, 0);
+  }
+  .slides > article.current {
+    display: block;
+    transform: translate(0);
+    -o-transform: translate(0);
+    -moz-transform: translate(0);
+    -webkit-transform: translate3d(0, 0, 0);
+  }
+  .slides > article.next {
+    display: block;
+    transform: translate(1020px);
+    -o-transform: translate(1020px);
+    -moz-transform: translate(1020px);
+    -webkit-transform: translate3d(1020px, 0, 0);
+  }
+  .slides > article.far-next {
+    display: block;
+    transform: translate(2040px);
+    -o-transform: translate(2040px);
+    -moz-transform: translate(2040px);
+    -webkit-transform: translate3d(2040px, 0, 0);
+  }
+
+  .slides.layout-widescreen > article.far-past,
+  .slides.layout-faux-widescreen > article.far-past {
+    display: block;
+    transform: translate(-2260px);
+    -o-transform: translate(-2260px);
+    -moz-transform: translate(-2260px);
+    -webkit-transform: translate3d(-2260px, 0, 0);
+  }
+  .slides.layout-widescreen > article.past,
+  .slides.layout-faux-widescreen > article.past {
+    display: block;
+    transform: translate(-1130px);
+    -o-transform: translate(-1130px);
+    -moz-transform: translate(-1130px);
+    -webkit-transform: translate3d(-1130px, 0, 0);
+  }
+  .slides.layout-widescreen > article.current,
+  .slides.layout-faux-widescreen > article.current {
+    display: block;
+    transform: translate(0);
+    -o-transform: translate(0);
+    -moz-transform: translate(0);
+    -webkit-transform: translate3d(0, 0, 0);
+  }
+  .slides.layout-widescreen > article.next,
+  .slides.layout-faux-widescreen > article.next {
+    display: block;
+    transform: translate(1130px);
+    -o-transform: translate(1130px);
+    -moz-transform: translate(1130px);
+    -webkit-transform: translate3d(1130px, 0, 0);
+  }
+  .slides.layout-widescreen > article.far-next,
+  .slides.layout-faux-widescreen > article.far-next {
+    display: block;
+    transform: translate(2260px);
+    -o-transform: translate(2260px);
+    -moz-transform: translate(2260px);
+    -webkit-transform: translate3d(2260px, 0, 0);
+  }
+}
+
+@media print {
+  /* Set page layout */
+  @page {
+    size: A4 landscape;
+  }
+
+  body {
+    display: block !important;
+  }
+
+  .slides > article {
+    display: block;
+
+    position: relative;
+
+    page-break-inside: never;
+    page-break-after: always;
+
+    overflow: hidden;
+  }
+
+  h2 {
+    position: static !important;
+    margin-top: 400px !important;
+    margin-bottom: 100px !important;
+  }
+
+  div.code {
+    background: rgb(240, 240, 240);
+  }
+
+  /* Add explicit links */
+  a:link:after, a:visited:after {
+   content: " (" attr(href) ") ";
+   font-size: 50%;
+  }
+
+  #help {
+    display: none;
+    visibility: hidden;
+  }
 }
 
 /* Styles for slides */