diff options
| -rwxr-xr-x | html.rb | 5 | ||||
| -rw-r--r-- | snippets/code.html | 2 | ||||
| -rw-r--r-- | snippets/pictures.html | 10 | ||||
| -rw-r--r-- | snippets/slideshow.js | 6 | ||||
| -rw-r--r-- | snippets/style.css | 104 |
5 files changed, 46 insertions, 81 deletions
@@ -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>© 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>© 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">⏸</span></a> + <a class="btn" onclick="new_selection()"><span title="Next slideshow">⏩︎</span></a> + <p>© 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()">❮</a> <a id="next" onclick="next()">❯</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; -} |