Animation assist

_static/buttons.html

@@ -0,0 +1,10 @@
+<!-- a container for the buttons -->
+<div class="controls">
+    <!-- the btn,  btn-dark, and btn-info classes come from Bootstrap-->
+<input class='btn btn-dark' id="pageview" type="button" value="X" onclick="closeFullscreen()"/>
+
+<input class='btn btn-info' id="presentation" type="button" value="Present" onclick="openFullscreen()"/>
+
+<!-- the fucntions called by buttons are defined in layout.html -->
+
+</div>

_static/custom.css

@@ -23,6 +23,7 @@ figure.profile-pic img {
 .focusareas {
     font-size: .9em;
     font-weight: bold;
+    text-transform: uppercase;
 }
 
 .whatido {
@@ -31,14 +32,14 @@ figure.profile-pic img {
 
 .major {
     margin-top: 1em;
+    text-justify: inter-character;
+    text-align: justify;
 }
 
 .gradyear {
     margin-top: 1em;
 }
 
-
-
 /* Sidebar for blog archive / each post */
 ul.ablog-archive {
     padding-left: 0px;
@@ -123,91 +124,235 @@ div.timeline div.entry.right::after {
     left: -.5em;
 }
 
-/* * {
-    box-sizing: border-box;
-} */
-
 
 .slide {
-    display: none;
+    /* display: none; */
+    animation-name: fade;
+    animation-duration: 1.5s;
+}
+
+
+H1.pechakucha {
+    display:none;
+}
 
+/* Fading animation */
+.fade {
     animation-name: fade;
     animation-duration: 1.5s;
 }
 
-img {
-    vertical-align: middle;
+
+
+/* Fancy Admonition stuff */
+div.admonition.codeicon>.admonition-title:after {
+    content: "\f121";
+    /* the fa-code icon */
 }
 
-/* Slideshow container */
-.slideshow-container {
-    /* max-width: 1000px; */
-    position: relative;
-    margin: auto;
+div.admonition.git>.admonition-title:after {
+    content: "\f126";
+    /* the fa-github icon */
 }
 
-/* Caption text */
-.text {
-    color: #f2f2f2;
-    font-size: 15px;
-    padding: 8px 12px;
-    position: absolute;
-    bottom: 8px;
+/*  define the blue  cards*/
+div.sd-card.blue {
+    border-color: navy;
+    border-width: 5px;
+    box-shadow: lightblue;
+}
+
+div.sd-card.blue div.sd-card-header{
+    background-color:  lightblue;
+    color: navy;
+}
+
+div.sd-card.blue div.sd-card-footer{
+    color: lightblue;
+    background-color: navy;
+}
+
+/*  define the pink  cards*/
+div.sd-card.pink {
+    border-color: hotpink;
+    border-width: 5px;
+    box-shadow:  pink;
+}
+div.sd-card.pink div.sd-card-header {
+    background-color:  pink;
+}
+
+/*  define the pink slides*/
+div.sd-card.pink div.sd-card-footer{
+    border-color: hotpink;
+    background-color: lightpink;
+    color:darkmagenta;
+}
+
+
+div.admonition.blue>.admonition-title:before {
+    background-color: navy;
+}
+
+div.admonition.blue>.admonition-title:after {
+    color: skyblue;
+}
+
+/* pink admonition ------------------------------ */
+/*  this sets  */
+div.admonition.pink {
+    border-color: pink;
+}
+
+div.admonition.pink>.admonition-title:before {
+    background-color:magenta;
+}
+
+div.admonition.pink>.admonition-title:after {
+    color:maroon;
+}
+
+/* presentation mode -------------------------------- */
+
+/* hide footer in fullscreen */
+#slideshow:fullscreen div.sd-card-footer{
+    display: none;
+}
+
+#slideshow:not(:fullscreen) div.sd-card-footer {
+    display: inherit;
+}
+
+
+/* #slideshow:fullscreen{
+    overflow: hidden;
+} */
+
+/* the background in full screen mode */
+#slideshow::backdrop {
+    background-color: darkblue;
+}
+
+
+#slideshow:not(:fullscreen) .controls {
+    text-align: right;
+}
+
+/* put controls inthe bottom right of the screen and 
+       on top of the slides in fullscreen */
+#slideshow:fullscreen div.controls {
+   position:absolute;
+   bottom:0px;
+   right: 0px;
+   z-index: 100; /* this line is functional*/
+}
+
+
+
+/* maximize cards in fullscreen */
+/*  maximize carousel so that cards can be maxed*/
+#slideshow:fullscreen div.sd-cards-carousel {
+    height: 100%;
+    overflow: hidden;
+}
+
+
+/*  maximize the cards  in  full screen only*/
+#slideshow:fullscreen div.sd-card {
+    height: 100%;
     width: 100%;
-    text-align: center;
+    /* text-align: center;
+    vertical-align: middle; */
+    display: block;
 }
 
-/* Number text (1/3 etc) */
-.numbertext {
-    color: #f2f2f2;
-    font-size: 12px;
-    padding: 8px 12px;
-    position: absolute;
-    top: 0;
+#slideshow:not(:fullscreen) div.sd-card {
+    height: inherit;
 }
 
-/* The dots/bullets/indicators */
-.dot {
-    height: 15px;
-    width: 15px;
-    margin: 0 2px;
-    background-color: #bbb;
-    border-radius: 50%;
-    display: inline-block;
-    transition: background-color 0.6s ease;
+/* center the images in fullscreen */
+#slideshow:fullscreen div.sd-card img{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    max-height: 800px;
+    transform: translateX(-50%) translateY(-50%);
 }
 
-.active {
-    background-color: #717171;
+#slideshow:not(:fullscreen) div.sd-card img {
+    position: relative;
 }
 
-H1.pechakucha {
+/* site view button only on in fullscreen */
+#slideshow:not(:fullscreen) #pageview{
     display:none;
 }
 
-/* Fading animation */
-.fade {
-    animation-name: fade;
-    animation-duration: 1.5s;
+#slideshow:fullscreen #pageview{
+    display:block;
 }
 
+/* presentation button off in fullscreen */
+#slideshow:fullscreen #presentation{
+    display: none;
+}
+
+#slideshow:not(:fullscreen) #presentation{
+    display: block;
+}
+
+
+/* slide animation opacity */
 @keyframes fade {
     from {
-        opacity: .4
+        opacity: .1
     }
 
     to {
         opacity: 1
     }
 }
 
+/* slide animation slide in */
+@keyframes slidein {
+    from {
+        margin-left: 100%;
+        width: 300%;
+    }
+
+    to {
+        margin-left: 0%;
+        width: 100%;
+    }
+}
+
+/* slide in from right then out to left */
+/*  to ue this one, set duration to 20s */
+@keyframes slideinout {
+    0% {
+        margin-left: 100%;
+        width: 300%;
+    }
+
+    5% {
+        margin-left: 0%;
+        width: 100%;
+    }
+
+    95% {
+        margin-left: 0%;
+        width: 100%;
+    }
+
+    100% {
+        margin-left: -100%;
+        width: 300%;
+    }
+}
+
 /* On smaller screens, decrease text size */
 @media only screen and (max-width: 300px) {
     .text {
         font-size: 11px
     }
-}
-git add xxx.png
-git commit -m 'add png file'
-git remote add origin https://github.com/xxx.git
-git push -u origin master
+}

_static/play_pause.html

@@ -0,0 +1,10 @@
+<!-- a container for the buttons -->
+<div class="controls">
+<!-- the btn,  btn-dark, and btn-info classes come from Bootstrap-->
+<input class='btn btn-dark' id="pause" type="button" value="Pause" onclick="pauseSlideShow()" />
+
+<input class='btn btn-info' id="play" type="button" value="Present" onclick="playSlideShow()" />
+
+<!-- the fucntions called by buttons are defined in layout.html -->
+
+</div>