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>
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 @@
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 @@
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%;
+
+ 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);
+ }
}
-body {
- margin: 0;
- padding: 0;
+@media print {
+ /* Set page layout */
+ @page {
+ size: A4 landscape;
+ }
- display: block !important;
+ body {
+ display: block !important;
+ }
- height: 100%;
- min-height: 740px;
+ .slides > article {
+ display: block;
- overflow-x: hidden;
- overflow-y: auto;
+ position: relative;
- 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)));
+ page-break-inside: never;
+ page-break-after: always;
- -webkit-font-smoothing: antialiased;
-}
+ overflow: hidden;
+ }
-.slides {
- width: 100%;
- height: 100%;
- left: 0;
- top: 0;
+ h2 {
+ position: static !important;
+ margin-top: 400px !important;
+ margin-bottom: 100px !important;
+ }
- position: absolute;
+ div.code {
+ background: rgb(240, 240, 240);
+ }
- -webkit-transform: translate3d(0, 0, 0);
-}
+ /* Add explicit links */
+ a:link:after, a:visited:after {
+ content: " (" attr(href) ") ";
+ font-size: 50%;
+ }
-.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);
+ #help {
+ display: none;
+ visibility: hidden;
+ }
}
/* Styles for slides */
