Mercurial > hg > Members > anatofuz > slideshow-s6cr

changeset 4:06a162f7016a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Generate css from less for Google Chrome using file://
author Yasutaka Higa <e115763@ie.u-ryukyu.ac.jp>
date Tue, 22 Dec 2015 15:18:54 +0900
parents da1255a82e3c
children 257cce632a4b
files s6/themes/blank.css s6/themes/print.css s6/themes/projection.css s6/themes/screen.css s6cr.txt slides.html.erb
diffstat 6 files changed, 347 insertions(+), 32 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/s6/themes/blank.css	Tue Dec 22 15:18:54 2015 +0900
@@ -0,0 +1,130 @@
+body {
+  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
+}
+a:link,
+a:visited {
+  color: #000000;
+}
+.slide {
+  color: #000000;
+}
+.slide h1 {
+  font-size: 200%;
+  color: white;
+  text-align: center;
+}
+.slide h1.fullscreen {
+  position: absolute;
+  top: 40%;
+  width: 100%;
+}
+.slide h1.hidden {
+  display: none;
+}
+.slide hX {
+  font-size: 250%;
+  color: white;
+  text-align: center;
+  font-weight: bold;
+}
+.slide hX.fullscreen {
+  position: absolute;
+  top: 40%;
+  width: 100%;
+}
+.slide hX.hidden {
+  display: none;
+}
+.slide h2 {
+  font-size: 220%;
+  background-color: #808db5;
+  color: white;
+  padding: 5px;
+}
+.slide h3 {
+  font-size: 180%;
+}
+.slide name {
+  font-size: 180%;
+  background-color: #ffcc00;
+}
+.slide name.fullscreen {
+  position: absolute;
+  top: 40%;
+  width: 100%;
+}
+.slide .stepcurrent {
+  color: #dd0000;
+}
+.slide .step {
+  color: #c0c0c0;
+}
+div.highlight {
+  background-color: #ffffa9;
+  display: inline-block;
+  _display: inline;
+}
+div > ul {
+  list-style-type: square;
+  font-size: 160%;
+}
+div > ol {
+  font-size: 160%;
+}
+li {
+  margin-bottom: 15px;
+}
+p,
+dt,
+dd,
+td {
+  font-size: 150%;
+}
+th {
+  font-size: 90%;
+}
+p.emphasize {
+  font-size: 180%;
+}
+pre {
+  font-size: 100%;
+}
+.code {
+  background-color: #ffffa9;
+  padding: 5px;
+}
+.small_code {
+  font-size: 90%;
+  padding: 2px;
+}
+.smaller_code {
+  font-size: 80%;
+  padding: 2px;
+}
+code {
+  font-size: 100%;
+  background-color: #ffffa9;
+  padding: 5px;
+}
+.footnote a:first-of-type {
+  text-decoration: none;
+}
+p.footnote {
+  font-size: 88%;
+}
+.help p,
+.help td {
+  font-size: 88%;
+}
+/******** 
+ * example gradient background using css3
+ */
+.slide {
+  background-image: -webkit-linear-gradient(top, #ffffff, #ffffff, #ffffff, #ffffff);
+  background-image: -moz-linear-gradient(top, #ffffff, #ffffff, #ffffff, #ffffff);
+}
+.slide.cover,
+.slide.title {
+  background-image: -webkit-linear-gradient(top, #ffffff, #ffffff, #ffffff, #ffffff);
+  background-image: -moz-linear-gradient(top, #ffffff, #ffffff, #ffffff, #ffffff);
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/s6/themes/print.css	Tue Dec 22 15:18:54 2015 +0900
@@ -0,0 +1,35 @@
+/*********************************
 * CSS @media print rules (not projection or screen)
 */
+body {
+  font-size: 12pt;
+}
+.slide {
+  display: block !important;
+  page-break-inside: avoid;
+  /********************
   * Extra styling for first slide (title/cover slide)
   */
+}
+.slide h1 {
+  page-break-after: avoid;
+}
+.slide ul {
+  page-break-inside: avoid;
+}
+.slide h1 {
+  border-top: 2pt solid gray;
+  border-bottom: 1px dotted silver;
+}
+.slide:first-child {
+  margin-bottom: 3em;
+}
+.slide:first-child h1 {
+  font-size: 200%;
+  border: none;
+  margin: 0.5em 0 0.25em;
+}
+.slide:first-child h3 {
+  margin: 0;
+  padding: 0;
+}
+.slide:first-child h4 {
+  margin: 0 0 0.5em;
+  padding: 0;
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/s6/themes/projection.css	Tue Dec 22 15:18:54 2015 +0900
@@ -0,0 +1,126 @@
+/*********************************
+ * CSS @media projection rules (not print or screen)
+ *
+ * 1) projection -> slideshow mode (display one slide at-a-time; hide all others)
+ * 2) screen     -> outline mode (display all slides-at-once on screen) 
+ * 3) print      -> print (and print preview)
+ *
+ * toggle between projection/screen (that is, slideshow/outline) mode using t-key
+ */
+html,
+body,
+.presentation {
+  margin: 0;
+  padding: 0;
+}
+.slide {
+  display: none;
+  /* note: only display current slide in projection mode */
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+  padding: 2% 4% 0% 4%;
+  /* css note: order is => top right bottom left  */
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  /* css note: lets use border-box; no need to add padding+border to get to 100% */
+  overflow-x: hidden;
+  overflow-y: auto;
+  z-index: 2;
+}
+.slide.current {
+  display: block;
+}
+/* note: only display current slide in projection mode */
+/*****
+ *  layout block structure:
+ *
+ *  .layout
+ *    > #header
+ *    > #footer
+ */
+.layout #header,
+.layout header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 0.5em;
+  z-index: 1;
+}
+.layout #footer,
+.layout footer {
+  position: fixed;
+  top: auto;
+  bottom: 0;
+  padding: 1em 0;
+  /* css note: order is => 1st top,bottom; 2nd right,left */
+  width: 100%;
+  height: 4em;
+  z-index: 5;
+  /* todo: move font-size and font-style to blank.css */
+  font-size: 100%;
+  font-weight: bold;
+  /* todo: move font-size and font-style to blank.css */
+}
+.layout #footer h1,
+.layout footer h1 {
+  display: block;
+  margin: 0;
+  padding: 0 1em;
+  font-size: 50%;
+}
+.layout #footer h2,
+.layout footer h2 {
+  display: block;
+  margin: 0;
+  padding: 0 1em;
+  font-size: 50%;
+  font-style: italic;
+}
+/*********************************
+ * general text-alignment classes
+ */
+.left {
+  text-align: left;
+}
+.center {
+  text-align: center;
+}
+.right {
+  text-align: right;
+}
+/*********************************
+ * general _absolute_ font-size classes
+ */
+.small {
+  font-size: 97%;
+}
+.x-small {
+  font-size: 88%;
+}
+.xx-small {
+  font-size: 82%;
+}
+.large {
+  font-size: 103%;
+}
+.x-large {
+  font-size: 112%;
+}
+.xx-large {
+  font-size: 118%;
+}
+/*********************************
+ * general _relative_ font-size classes
+ */
+.smaller {
+  font-size: 82%;
+}
+.larger {
+  font-size: 118%;
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/s6/themes/screen.css	Tue Dec 22 15:18:54 2015 +0900
@@ -0,0 +1,25 @@
+/*********************************
+ * CSS @media screen (not projection or print)
+ *
+ * 1) projection -> slideshow mode (display one slide at-a-time; hide all others)
+ * 2) screen     -> outline mode (display all slides-at-once on screen) 
+ * 3) print      -> print (and print preview)
+ *
+ * toggle between projection/screen (that is, slideshow/outline) mode using t-key
+ */
+.slide {
+  display: block !important;
+  margin: 1.5em 0 0;
+  border-top: 1px solid #888;
+}
+.slide h1 {
+  border-bottom: 1px solid #AAA;
+}
+.slide:first-child {
+  margin: 0;
+  border: none;
+}
+.slide:first-child h1 {
+  border: none;
+  padding-top: 1.5em;
+}
--- a/s6cr.txt	Mon Dec 21 22:32:22 2015 +0900
+++ b/s6cr.txt	Tue Dec 22 15:18:54 2015 +0900
@@ -1,26 +1,26 @@
-#  S6 blank template package manifest
-
-__file__.html   slides.html.erb
-
-# styles
-
-s6/themes/blank.css.less
-s6/themes/print.css.less
-s6/themes/projection.css.less
-s6/themes/screen.css.less
-
-# javascript machinery
-
-s6/js/jquery-1.11.3.min.js
-s6/js/jquery.microsoft.js
-s6/js/jquery.slideshow.autoplay.js
-s6/js/jquery.slideshow.controls.js
-s6/js/jquery.slideshow.counter.js
-s6/js/jquery.slideshow.footer.js
-s6/js/jquery.slideshow.js
-s6/js/jquery.slideshow.ready.js
-s6/js/jquery.slideshow.transition.js
-s6/js/less-2.5.3.min.js
-
-# images
-s6/images/logo.svg
+#  S6 blank template package manifest
+
+__file__.html   slides.html.erb
+
+# styles
+
+s6/themes/blank.css
+s6/themes/print.css
+s6/themes/projection.css
+s6/themes/screen.css
+
+# javascript machinery
+
+s6/js/jquery-1.11.3.min.js
+s6/js/jquery.microsoft.js
+s6/js/jquery.slideshow.autoplay.js
+s6/js/jquery.slideshow.controls.js
+s6/js/jquery.slideshow.counter.js
+s6/js/jquery.slideshow.footer.js
+s6/js/jquery.slideshow.js
+s6/js/jquery.slideshow.ready.js
+s6/js/jquery.slideshow.transition.js
+s6/js/less-2.5.3.min.js
+
+# images
+s6/images/logo.svg
--- a/slides.html.erb	Mon Dec 21 22:32:22 2015 +0900
+++ b/slides.html.erb	Tue Dec 22 15:18:54 2015 +0900
@@ -8,14 +8,13 @@
 <meta name="author"    content="<%= @headers['author']%>" >
 
 <!-- style sheet links -->
-<link rel="stylesheet/less" href="s6/themes/projection.css.less"   media="screen,projection">
-<link rel="stylesheet/less" href="s6/themes/screen.css.less"       media="screen">
-<link rel="stylesheet/less" href="s6/themes/print.css.less"        media="print">
-<link rel="stylesheet/less" href="s6/themes/cr.css.less"           media="screen,projection">
+<link rel="stylesheet" href="s6/themes/projection.css"   media="screen,projection">
+<link rel="stylesheet" href="s6/themes/screen.css"       media="screen">
+<link rel="stylesheet" href="s6/themes/print.css"        media="print">
+<link rel="stylesheet" href="s6/themes/cr.css"           media="screen,projection">
 
 <!-- JS -->
 <script src="s6/js/jquery-1.11.3.min.js"></script>
-<script src="s6/js/less-2.5.3.min.js"></script>
 <script src="s6/js/jquery.slideshow.js"></script>
 <script src="s6/js/jquery.slideshow.counter.js"></script>
 <script src="s6/js/jquery.slideshow.controls.js"></script>
@@ -44,7 +43,7 @@
   <div id="header"></div>
   <div id="footer">
     <div align="right">
-      <img src="s6/images/logo.svg" width="200">
+      <img src="s6/images/logo.svg" width="200px">
     </div>
   </div>
 </div>