image albums, flex layout

6 files changed, 92 insertions, 236 deletions

diff --git a/html/about.html b/html/about.html
index 55f6131..9e2797c 100644
--- a/html/about.html
+++ b/html/about.html
@@ -1,7 +1,14 @@
-<img src="540px-PDP-8_.jpg" alt="pdp-8" title="By Kris Arnold - https://www.flickr.com/photos/wka/3735964493/, CC BY-SA 2.0, https://commons.wikimedia.org/w/index.php?curid=110392229">
-<br>
-The PDP-8 is a 12-bit minicomputer that was produced by Digital Equipment Corporation (DEC). It was the first commercially successful minicomputer, with over 50,000 units being sold over the model's lifetime. Its basic design follows the pioneering LINC but has a smaller instruction set, which is an expanded version of the PDP-5 instruction set.
 <p>
-The PDP-8 combines low cost, simplicity, expandability, and careful engineering for value. The greatest historical significance was that the PDP-8's low cost and high volume made a computer available to many new customers for many new uses. Its continuing significance is as a historical example of value-engineered computer design.
+  <img src="540px-PDP-8_.jpg" alt="pdp-8"
+    title="By Kris Arnold - https://www.flickr.com/photos/wka/3735964493/, CC BY-SA 2.0, https://commons.wikimedia.org/w/index.php?curid=110392229">
+  <br>
+  The PDP-8 is a 12-bit minicomputer that was produced by Digital Equipment Corporation (DEC). It was the first
+  commercially successful minicomputer, with over 50,000 units being sold over the model's lifetime. Its basic design
+  follows the pioneering LINC but has a smaller instruction set, which is an expanded version of the PDP-5 instruction
+  set.
 <p>
-<a href="https://en.wikipedia.org/wiki/PDP-8">https://en.wikipedia.org/wiki/PDP-8</a>
+  The PDP-8 combines low cost, simplicity, expandability, and careful engineering for value. The greatest historical
+  significance was that the PDP-8's low cost and high volume made a computer available to many new customers for many
+  new uses. Its continuing significance is as a historical example of value-engineered computer design.
+<p>
+  <a href="https://en.wikipedia.org/wiki/PDP-8">https://en.wikipedia.org/wiki/PDP-8</a>
\ No newline at end of file
diff --git a/html/contact.html b/html/contact.html
index 4582664..cac00d8 100644
--- a/html/contact.html
+++ b/html/contact.html
@@ -2,14 +2,13 @@
 <a href='mailto:info@pdp8.info'>info@pdp8.info</a>
 <h1>fediverse</h1>
 <a href='https://social.pdp8.info/pdp8'>@pdp8@social.pdp8.info</a>
-<!--
-<h1>matrix</h1>
-<a href='https://matrix.to/#/@pdp8:matrix.pdp8.info'>@pdp8:matrix.pdp8.info</a>
--->
 <h1>newsletter</h1>
+<p>
+  <em>your email will be used only for the newsletter and won't be shared with anyone</em>
+</p>
 <h2>subscribe</h2>
 send a mail to <a href='mailto:info@pdp8.info?subject=Subscribe'>info@pdp8.info</a> with <b>subscribe</b> in the subject
-(your address will be used only for the newsletter and won't be shared with anyone)
+line
 <h2>unsubscribe</h2>
 send a mail to <a href='mailto:info@pdp8.info?subject=Subscribe'>info@pdp8.info</a> with <b>unsubscribe</b> in the
-subject
\ No newline at end of file
+subject line
\ No newline at end of file
diff --git a/html/robots.txt b/html/robots.txt
deleted file mode 100644
index 1bd8b9e..0000000
--- a/html/robots.txt
+++ /dev/null
@@ -1,31 +0,0 @@
-User-agent: Amazonbot
-Disallow: /
-
-User-agent: ChatGPT-User
-Disallow: /
-
-User-agent: GPTBot
-Disallow: /
-
-User-agent: Google-Extended
-Disallow: /
-
-User-agent: anthropic-ai
-Disallow: /
-
-User-agent: Omgilibot
-Disallow: /
-
-User-agent: Omgili
-Disallow: /
-
-User-agent: FacebookBot
-Disallow: /
-
-User-agent: Bytespider
-Disallow: /
-
-User-agent: ImagesiftBot 
-Disallow: /
-
-SITEMAP: https://pdp8.info/sitemap.txt
diff --git a/html/slideshow.js b/html/slideshow.js
deleted file mode 100644
index 48a5395..0000000
--- a/html/slideshow.js
+++ /dev/null
@@ -1,80 +0,0 @@
-selection = []
-visited = []
-current = 0
-playing = 1
-
-document.addEventListener('keyup', function(event) {
-  if(event.keyCode == 37) { prev() } // left
-  else if(event.keyCode == 39) { next() } // right
-  else if(event.keyCode == 32) {
-    toggle_play()
-  } // space
-  else if(event.keyCode == 13) { new_selection() } // enter
-});
-
-function new_selection() {
-  images = Object.keys(distances)
-  start = images[Math.floor(Math.random()*images.length)]
-  sortable = []
-  for (file in distances[start]) {
-    if (visited.indexOf(file) == -1) { // not in visited
-      sortable.push([file,distances[start][file]]) // objects cannot be sorted in js, use array instead
-    }
-  }
-  n = 6
-  selection = []
-  sorted = sortable.sort(function(a, b) { return a[1] - b[1]; }).slice(0,n); // sort by distance, get first n elements
-  sorted.forEach(function(img,index) { 
-    selection.push(img[0])
-    visited.push(img[0])
-  }) 
-  selection = selection.sort(() => Math.random() - 0.5); // shuffle
-  current = 0
-  update()
-}
-
-function src(id,path) { document.getElementById(id).src = path }
-function onclick(id,fun) { document.getElementById(id).onclick = fun }
-
-function hide_controls() {
-  document.getElementById("prev").style.display = "none"
-  document.getElementById("next").style.display = "none"
-}
-
-function show_controls() {
-  document.getElementById("prev").style.display = "block"
-  document.getElementById("next").style.display = "block"
-}
-
-function toggle_play() { playing == 1 ? stop() : play() }
-
-function play() {
-  playing = 1
-  interval = setInterval(function () { next() }, 3000);
-  document.getElementById("play-indicator").title = "Pause slideshow"
-  document.getElementById("play-indicator").className = "fa fa-inverse fa-pause"
-  hide_controls()
-}
-
-function stop() {
-  playing = 0
-  clearInterval(interval)
-  document.getElementById("play-indicator").title = "Play slideshow"
-  document.getElementById("play-indicator").className = "fa fa-inverse fa-play"
-  show_controls()
-}
-
-function prev() {
-  current = (current-1+selection.length) % selection.length // js % cannot handle negative values
-  update()
-}
-
-function next() {
-  current = (current+1) % selection.length
-  update()
-}
-
-function update() {
-  src('image',"https://media.pdp8.info/pictures/"+selection[current])
-}
-
diff --git a/html/style.css b/html/style.css
index 8478ca3..ddaf027 100644
--- a/html/style.css
+++ b/html/style.css
@@ -1,91 +1,67 @@
 body {
+  display: flex;
+  flex-direction: column;
   background-color: black;
   color: #eee;
-  width: 100vw;
-  margin: 0;
+  margin: 1em;
   font-family: sans-serif;
 }
 
 nav {
-  padding: 0.75em 0 1em 0;
-}
-
-nav a {
-  padding: 0 1em;
-  text-decoration: none;
+  display: flex;
+  align-items: center;
 }
 
 nav img {
   height: 2em;
-  display: inline;
-  vertical-align: bottom;
 }
 
-nav #logo img {
-  height: 2em;
+nav .menu {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  font-size: larger
 }
 
-nav .current {
-  color: white;
+nav a {
+  margin: 0 0.5em;
 }
 
-nav #menu {
-  display: none;
+nav .current {
+  color: #eee;
+  font-weight: bold;
 }
 
-nav a:hover {
-  color: white;
+a {
+  color: #888;
+  transition: 0.5s ease;
+  text-decoration: none;
 }
 
-@media screen and (max-width: 600px) {
-  nav .item {
-    display: none;
-    padding-left: 1em;
-    padding-top: 0.5em;
-  }
-
-  nav #menu {
-    float: right;
-    display: inline;
-    font-size: 2em;
-  }
+a:hover {
+  color: white;
 }
 
-.post {
-  margin: 2em 1em;
+td {
+  padding-right: 1em;
+  font-size: larger;
 }
 
 img,
 video {
   max-height: 80vh;
-  max-width: 80vw;
+  max-width: 95vw;
   object-fit: contain;
-  display: block;
-  margin-left: 0;
+  margin: 0 auto
 }
 
-#image {
-  padding-top: 2.5%;
-  padding-bottom: 1%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.gallery {
-  margin: 1em;
-  flex-wrap: wrap;
-  display: flex
-}
-
-.thumb {
-  margin: 2px 3px;
+audio {
+  width: 12.5em;
+  height: 2.5em;
 }
 
-.cover {
-  max-height: min(50vh, 90vw);
-  max-width: min(50vh, 90vw);
-  margin-left: 0;
-  padding: 1em 0;
+audio::-webkit-media-controls-panel {
+  background-color: #aaa;
 }
 
 iframe {
@@ -94,67 +70,51 @@ iframe {
   border: none;
 }
 
-a {
-  color: #888;
-}
-
-td {
-  padding-right: 1em;
-  font-size: larger;
-}
-
-audio {
-  width: 12.5em;
-  height: 2.5em;
+.webring {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 2em;
+  align-items: baseline;
 }
 
-audio::-webkit-media-controls-panel {
-  background-color: #aaa;
+.post {
+  /* margin: 1em 2em; */
 }
 
-#controller {
-  position: fixed;
-  left: 0;
-  bottom: 2.5%;
-  width: 100%;
-  text-align: center;
-  padding: 0
+.gallery {
+  display: flex;
+  flex-wrap: wrap;
 }
 
-.btn {
-  display: inline-block;
-  cursor: pointer;
-  color: #111;
-  font-size: 2em;
-  font-weight: bold;
-  width: 4em;
+.thumb {
+  margin: 0.25em;
 }
 
-#prev,
-#next {
-  cursor: pointer;
-  position: absolute;
-  color: lightgrey;
-  font-weight: bold;
-  font-size: 8em;
-  transition: 0.5s ease;
-  bottom: 6vh;
+.cover {
+  max-height: min(50vh, 90vw);
+  max-width: min(50vh, 90vw);
+  margin-left: 0;
+  display: block;
+  padding: 1em 0;
 }
 
-#prev {
-  left: 1%;
+.slide {
+  display: flex;
+  flex-direction: column;
+  margin-top: 2em;
 }
 
-#next {
-  right: 1%;
+.slidenav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-#prev:hover,
-#next:hover {
-  text-decoration: none;
+.navarrow {
+  font-weight: bold;
+  font-size: 3em;
 }
 
-#prev:active,
-#next:active {
-  color: black;
-}
+.license {
+  margin-top: 3em
+}
\ No newline at end of file
diff --git a/html/tail.html b/html/tail.html
index 53ca8ca..3da431f 100644
--- a/html/tail.html
+++ b/html/tail.html
@@ -1,11 +1,12 @@
-    <script>
-      function show_vertical_menu() {
-        document.getElementById("menu").style.display = "none"
-        items = document.getElementsByClassName("item")
-        for (i = 0; i < items.length; i++) {
-          items[i].style.display = "block"
-        }
-      }
-    </script>
-  </body>
-</html>
+<div class='license'>
+  <a href='mailto:info@pdp8.info'>&copy;pdp8</a>
+  <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International
+    License</a>
+  <p>
+    no tracking, cookies, javascript, or server-side scripting. source code: <a
+      href='https://git.pdp8.info/pdp8.info/tree/'>https://git.pdp8.info/pdp8.info/tree/</a>
+  </p>
+</div>
+</body>
+
+</html>
\ No newline at end of file