summaryrefslogtreecommitdiff
path: root/snippets
diff options
context:
space:
mode:
Diffstat (limited to 'snippets')
-rw-r--r--snippets/code.html2
-rw-r--r--snippets/pictures.html10
-rw-r--r--snippets/slideshow.js6
-rw-r--r--snippets/style.css104
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">&#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;
-}