finished demo slides

[clickslide] / clickslide.css

diff --git a/clickslide.css b/clickslide.css
index 6dd12e808d79f1bc28318d04e0cfa53de0e149f7..084bf687297871a875570f32801ec5f4816ff65d 100644 (file)
--- a/clickslide.css
+++ b/clickslide.css
@@ -1,6 +1,9 @@
 * {
   box-sizing: border-box;
   margin: 0; padding: 0;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
 }
 
 /*  min-height: 240px */     body { font-size:  9px; }
@@ -21,7 +24,10 @@ body {
   text-align: center;
   overflow-x: hidden;
 }
-body * { text-align: left; }
+body * {
+  text-align: left;
+  font-size: inherit;
+}
 
 body:after {
   position: fixed;
@@ -67,7 +73,7 @@ body a.toplevel {
 }
 body a.toplevel:before {
   color: #888;
-  content: '\2ba4'
+  content: '\2196';
 }
 
 body span.count {
@@ -94,6 +100,17 @@ div.slide {
   border: 1px solid black;
 }
 
+div.slide:after {  /* slide number */
+  position: absolute;
+  bottom: 0; left: 0;
+  font-size: 15em;
+  line-height: 1em;
+  text-align: left;
+  content: attr(count);
+  padding-left: .125em;
+  color: #DDD;
+}
+
 div.slide + a { display: none; }
 a.nextslide {
   display: inline-block;
@@ -113,23 +130,11 @@ div.slide {
   line-height: 1.5em;
 }
 
-div.slide:after {
-  position: absolute;
-  bottom: 0; left: 0;
-  width: 100%;
-  font-size: .875em;
-  line-height: 1.5em;
-  text-align: left;
-  content: attr(count) " /";
-  padding-left: 4em;
-  background-color: #EEE;
-  color: #888;
-}
-
 div.slide > * {
   margin-top: 1em;
   max-width: 85%;
-  z-index: 1;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 div.slide > *:first-child:last-child,
@@ -159,9 +164,21 @@ div.slide h2 {
   padding: .25em 1em;
 }
 
+div.slide > table {
+  width: 85%;
+}
+div.slide * table {
+  width: 100%;
+}
+
+div.slide ul li {
+  list-style-type: square;
+  margin-left: 2em;
+}
+
 div.slide ul ul, div.slide ul ol,
 div.slide ol ul, div.slide ol ol {
-  margin-left: 1em;
+  margin-left: -1em;
 }
 
 div.slide > ul,
@@ -170,6 +187,14 @@ div.slide > ol {
   margin: .25em auto;
 }
 
+div.slide pre {
+  background-color: rgba(192,192,192,128);
+  padding: 1ex;
+  text-align: left;
+  font-family: monospace;
+  overflow: hidden;
+}
+
 /* ==== Slide Display ==== */
 
 div.slide:target {
@@ -181,6 +206,22 @@ div.slide:target {
   border: none;
   font-size: inherit;
 }
+
+/* slide number, footer bar*/
+div.slide:target:after {
+  position: absolute;
+  bottom: 0; left: 0;
+  width: 100%;
+  font-size: .875em;
+  line-height: 1.5em;
+  text-align: left;
+  content: attr(count) " /";
+  padding-left: 4em;
+  background-color: #EEE;
+  color: #888;
+}
+
+/* back and forth link buttons */
 div.slide:target + a,
 div.slide:target + a + a {
   position: static;