license, css and javascript fixes

5 files changed, 46 insertions, 81 deletions

diff --git a/html.rb b/html.rb
index 49493bd..dd98c7e 100755
--- a/html.rb
+++ b/html.rb
@@ -5,12 +5,11 @@ SNIPPETS = File.join(File.dirname(__FILE__), "snippets")
 
 def nav cat
   html = "<nav>"
-  html += "<a href='/about.html'><img src='/pdp8.png' id='logo' alt='pdp8'></a>"
+  html += "<a id='logo' href='/about.html'><img src='/pdp8.png' alt='pdp8'></a>"
   ["music", "pictures", "videos", "code", "contact"].each do |c|
     c == cat ? cl = 'item current' : cl = 'item'
     html += "<a class='#{cl}' href='/#{c}.html'>#{c}</a>"
   end
-  # html += '<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/80x15.png" /></a>'
   html += "<a id='menu' href='#' onclick='show_vertical_menu()'>"
   html += "<div class='fa fa-bars' aria-hidden='true'></div>"
   html += "</a>"
@@ -67,6 +66,7 @@ def music_html
     html += "</div>"
     html += "<hr>"
   end
+  html += '<p>&copy; pdp8 <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>'
   html += File.read(File.join(SNIPPETS, "tail.html"))
   print_html "music", html
 end
@@ -96,6 +96,7 @@ def video_html
     html += "</div>"
     html += "<hr>"
   end
+  html += '<p>&copy; pdp8 <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>'
   html += File.read(File.join(SNIPPETS, "tail.html"))
   print_html "videos", html
 end
diff --git a/snippets/code.html b/snippets/code.html
index e0e0216..6b43fee 100644
--- a/snippets/code.html
+++ b/snippets/code.html
@@ -1 +1 @@
-<iframe src='https://git.pdp8.info/' frameBorder="0"/>"
+<iframe src='https://git.pdp8.info/' title="pdp8 git repositories"/>"
diff --git a/snippets/pictures.html b/snippets/pictures.html
index 01ea0be..4ec88c6 100644
--- a/snippets/pictures.html
+++ b/snippets/pictures.html
@@ -1,22 +1,24 @@
 <script src="/distances.js"></script>
 <script src="/slideshow.js"></script>
 
+<!--
 <script> 
   (function() { new_selection() })();
 </script>
+-->
 
 <img id="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=" alt/>
-<script>document.getElementById("image").setAttribute("src", selection[0].src);</script>
 
 <div id="controller">
-  <a class="btn controller-item" onclick="new_selection()"><div class="fa fa-refresh" aria-label="reload" aria-hidden="true" title="New slideshow"></div></a>
-  <a class="btn controller-item" onclick="toggle_play()"><div id="play-indicator" class="fa fa-stop" area-label="stop" aria-hidden="true" title="Toggle play"></div></a>
+  <a class="btn" onclick="toggle_play()"><span id="play-indicator" title="Pause slideshow">&#x23F8;</span></a>
+  <a class="btn" onclick="new_selection()"><span title="Next slideshow">&#x23E9;&#xfe0e;</span></a>
+  <p>&copy; pdp8 <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>
 </div>
 
 <a id="prev" onclick="prev()">&#10094;</a>
 <a id="next" onclick="next()">&#10095;</a>
 
 <script> 
-  (function() { play() })();
+  (function() { new_selection(); play() })();
 </script>
 
diff --git a/snippets/slideshow.js b/snippets/slideshow.js
index 6942b29..4ed2ef8 100644
--- a/snippets/slideshow.js
+++ b/snippets/slideshow.js
@@ -51,14 +51,16 @@ function toggle_play() { playing == 1 ? stop() : play() }
 function play() {
   playing = 1
   interval = setInterval(function () { next() }, 3000);
-  document.getElementById("play-indicator").className = "fa fa-stop"
+  document.getElementById("play-indicator").title = "Pause slideshow"
+  document.getElementById("play-indicator").innerText = "\u23F8"
   hide_controls()
 }
 
 function stop() {
   playing = 0
   clearInterval(interval)
-  document.getElementById("play-indicator").className = "fa fa-play"
+  document.getElementById("play-indicator").title = "Play slideshow"
+  document.getElementById("play-indicator").innerText = "\u23F5"
   show_controls()
 }
 
diff --git a/snippets/style.css b/snippets/style.css
index a0ea50f..8814922 100644
--- a/snippets/style.css
+++ b/snippets/style.css
@@ -4,6 +4,31 @@ body {
   font-family: sans-serif;
 }
 
+nav {
+  background: #000;
+  color: #fff;
+  padding: 0.75em 0 1em 0;
+}
+
+nav a {
+  padding: 0 1em;
+  text-decoration: none;
+}
+
+nav img {
+  height: 2em;
+  display: inline;
+  vertical-align: bottom;
+}
+
+nav #logo img { height: 2em; }
+
+nav .current { color: #fff; }
+
+nav .fa-bars { display:none; }
+
+nav a:hover { color: #fff; }
+
 @media screen and (max-width: 600px) {
   nav {
     display: inline-block;
@@ -25,49 +50,7 @@ body {
   }
 }
 
-nav {
-  background: #000;
-  color: #fff;
-  padding: 0.75em 0 1em 0;
-  height: 2.5em;
-}
-
-nav #logo {
-  display: inline;
-  font-size: 2em;
-  padding-left: 0.25em;
-  padding-top: 0;
-  padding-right: 1em;
-  height: 1.25em;
-  vertical-align: top;
-  margin: 0 1vw;
-}
-
-nav .current { color: #fff; }
-
-nav a {
-  display: inline;
-  padding-right: 1em;
-  position: relative;
-  vertical-align: bottom;
-  text-decoration: none;
-}
-
-nav .fa-bars { display:none; }
-
-nav a:hover { color: #fff; }
-
-.post {
-  padding: 1em;
-}
-
-/*
-.album {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-*/
+.post { padding: 2em; }
 
 img, video {
   max-width: 100%;
@@ -80,6 +63,7 @@ img, video {
 iframe {
   width: 100%;
   height: 90vh;
+  border: none;
 }
 
 a {
@@ -96,6 +80,7 @@ a {
   margin-left: 0;
 }
 
+
 #controller {
   position: fixed;
   left: 0;
@@ -105,9 +90,12 @@ a {
   padding: 0
 }
 
-.controller-item {
+.btn {
   display: inline-block;
   cursor: pointer;
+  color: #000;
+  font-size: 2em;
+  font-weight: bold;
   width: 4em;
 }
 
@@ -118,7 +106,6 @@ a {
   font-weight: bold;
   font-size: 8em;
   transition: 0.5s ease;
-  display: inline-block;
   bottom: 6vh;
 }
 
@@ -126,30 +113,3 @@ a {
 #next { right: 1%; }
 #prev:hover, #next:hover { text-decoration: none; }
 #prev:active, #next:active { color: black; }
-
-
-/* bottom */
-.pager { width: 100%; }
-
-.btn {
-  white-space: nowrap;
-  margin: 0.5em;
-  text-decoration: none;
-  color: #000;
-}
-
-.btn-left {
-  margin: 1.5em;
-  text-decoration: none;
-  color: #000;
-  float: left;
-  display: inline-block;
-}
-
-.btn-right {
-  margin: 1.5em;
-  text-decoration: none;
-  color: #000;
-  float: right;
-  display: inline-block;
-}