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>

cmd/present/static/print.css

@@ -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;
-}

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();

cmd/present/static/styles.css

@@ -1,10 +1,10 @@
-/* Framework */
+@media screen {
-
+  /* Framework */
-html {
+  html {
     height: 100%;
-}
+  }
 
-body {
+  body {
     margin: 0;
     padding: 0;
 
@@ -23,9 +23,9 @@ body {
     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 {
+  .slides {
     width: 100%;
     height: 100%;
     left: 0;
@@ -34,9 +34,9 @@ body {
     position: absolute;
 
     -webkit-transform: translate3d(0, 0, 0);
-}
+  }
 
-.slides > article {
+  .slides > article {
     display: block;
 
     position: absolute;
@@ -71,26 +71,26 @@ body {
     -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 {
+  .slides.layout-widescreen > article {
     margin-left: -550px;
     width: 1100px;
-}
+  }
-.slides.layout-faux-widescreen > article {
+  .slides.layout-faux-widescreen > article {
     margin-left: -550px;
     width: 1100px;
 
     padding: 40px 160px;
-}
+  }
 
-.slides.layout-widescreen > article:not(.nobackground):not(.biglogo),
+  .slides.layout-widescreen > article:not(.nobackground):not(.biglogo),
-.slides.layout-faux-widescreen > article:not(.nobackground):not(.biglogo) {
+  .slides.layout-faux-widescreen > article:not(.nobackground):not(.biglogo) {
     background-position-x: 0, 840px;
-}
+  }
 
-/* Clickable/tappable areas */
+  /* Clickable/tappable areas */
 
-.slide-area {
+  .slide-area {
     z-index: 1000;
 
     position: absolute;
@@ -109,102 +109,146 @@ body {
     -o-tap-highlight-color: transparent;
     -moz-tap-highlight-color: transparent;
     -webkit-tap-highlight-color: transparent;
-}
+  }
-#prev-slide-area {
+  #prev-slide-area {
     margin-left: -550px;
-}
+  }
-#next-slide-area {
+  #next-slide-area {
     margin-left: 400px;
-}
+  }
-.slides.layout-widescreen #prev-slide-area,
+  .slides.layout-widescreen #prev-slide-area,
-.slides.layout-faux-widescreen #prev-slide-area {
+  .slides.layout-faux-widescreen #prev-slide-area {
     margin-left: -650px;
-}
+  }
-.slides.layout-widescreen #next-slide-area,
+  .slides.layout-widescreen #next-slide-area,
-.slides.layout-faux-widescreen #next-slide-area {
+  .slides.layout-faux-widescreen #next-slide-area {
     margin-left: 500px;
-}
+  }
 
-/* Slides */
+  /* Slides */
 
-.slides > article {
+  .slides > article {
     display: none;
-}
+  }
-.slides > article.far-past {
+  .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 {
+  .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 {
+  .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 {
+  .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 {
+  .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-widescreen > article.far-past,
-.slides.layout-faux-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-widescreen > article.past,
-.slides.layout-faux-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-widescreen > article.current,
-.slides.layout-faux-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-widescreen > article.next,
-.slides.layout-faux-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-widescreen > article.far-next,
-.slides.layout-faux-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 */