diff options
Diffstat (limited to 'snippets')
| -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 |
4 files changed, 43 insertions, 79 deletions
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; -} |