From e028591e8142827a878c4f94f561e73d2b888faf Mon Sep 17 00:00:00 2001
From: pdp8 <pdp8@pdp8.info>
Date: Mon, 22 Aug 2022 13:57:44 +0200
Subject: images, contacts, layout

---
 html.rb                   |   9 ++--
 snippets/540px-PDP-8_.jpg | Bin 0 -> 84238 bytes
 snippets/about.html       |   2 +
 snippets/contact.html     |   9 ++++
 snippets/images.js        |   2 +-
 snippets/newsletter.html  |   6 ---
 snippets/pictures.html    |   5 +-
 snippets/style.css        | 114 +++++++++++++++++++++++++++-------------------
 8 files changed, 84 insertions(+), 63 deletions(-)
 create mode 100644 snippets/540px-PDP-8_.jpg
 create mode 100644 snippets/contact.html
 delete mode 100644 snippets/newsletter.html

diff --git a/html.rb b/html.rb
index 75caf46..8fa63b7 100755
--- a/html.rb
+++ b/html.rb
@@ -6,7 +6,7 @@ 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>"
-  ["music", "pictures", "videos", "code", "newsletter"].each do |c|
+  ["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
@@ -45,8 +45,7 @@ def music_html
     html += "<h1>#{title}</h1>"
     html += File.read(File.join(dir, "README")) + "<p>"
     cover = File.join("/", dir.sub(ROOT, ''), "cover.jpeg")
-    html += "<a title='Download cover.jpeg' href='#{cover}' download>
-        <img src='#{cover}' alt='cover'></a>
+    html += "<img id='cover' src='#{cover}' alt='cover'>
         <p>"
     Dir[File.join(dir, "*mp3")].each do |f|
       f = "/" + f.sub(ROOT, '')
@@ -131,10 +130,10 @@ end
 music_html
 video_html
 
-["about", "code", "pictures", "newsletter"].each do |basename|
+["about", "code", "pictures", "contact"].each do |basename|
   file_html basename
 end
 
-["pdp8.png", "style.css", "distances.js", "images.js"].each { |f| `rsync -av "#{File.join(SNIPPETS, f)}" "#{ROOT}"` }
+["pdp8.png", "540px-PDP-8_.jpg", "style.css", "distances.js", "images.js"].each { |f| `rsync -av "#{File.join(SNIPPETS, f)}" "#{ROOT}"` }
 `rsync -av #{File.join(SNIPPETS, "Fork-Awesome-1.2.0")} "#{ROOT}"`
 # rss
diff --git a/snippets/540px-PDP-8_.jpg b/snippets/540px-PDP-8_.jpg
new file mode 100644
index 0000000..1f67d13
Binary files /dev/null and b/snippets/540px-PDP-8_.jpg differ
diff --git a/snippets/about.html b/snippets/about.html
index b21c103..55f6131 100644
--- a/snippets/about.html
+++ b/snippets/about.html
@@ -1,3 +1,5 @@
+<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.
diff --git a/snippets/contact.html b/snippets/contact.html
new file mode 100644
index 0000000..a454e64
--- /dev/null
+++ b/snippets/contact.html
@@ -0,0 +1,9 @@
+<h1>email</h1>
+<a href='mailto:info@pdp8.info'>info@pdp8.info</a>
+<h1>matrix</h1>
+<a href='https://matrix.to/#/@pdp8:matrix.pdp8.info'>@pdp8:matrix.pdp8.info</a>
+<h1>newsletter</h1>
+<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)
+<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
diff --git a/snippets/images.js b/snippets/images.js
index 672189e..6942b29 100644
--- a/snippets/images.js
+++ b/snippets/images.js
@@ -73,6 +73,6 @@ function next() {
 }
 
 function update() {
-  src('image',"/images/"+selection[current])
+  src('image',"/pictures/"+selection[current])
 }
 
diff --git a/snippets/newsletter.html b/snippets/newsletter.html
deleted file mode 100644
index c74f7a0..0000000
--- a/snippets/newsletter.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<a href='mailto:info@pdp8.info?subject=Subscribe'>Subscribe</a>
-by email to get updates about new pdp8 releases.
-<p>
-<a href='mailto:info@pdp8.info?subject=Unsubscribe'>Unsubscribe</a>, if you are sick of it.
-<p>
-pdp8 needs your email only for the newsletter, it won't be shared with anyone.
diff --git a/snippets/pictures.html b/snippets/pictures.html
index 83235d4..5eec393 100644
--- a/snippets/pictures.html
+++ b/snippets/pictures.html
@@ -9,9 +9,8 @@
 <script>document.getElementById("image").setAttribute("src", selection[0].src);</script>
 
 <div id="controller">
-  <a class="btn" href="/info.html"><div class="fa fa-info" aria-label="info" aria-hidden="true"></div></a>
-  <a class="btn controller-item" onclick="new_selection()"><div class="fa fa-refresh" aria-label="reload" aria-hidden="true"></div></a>
-  <a class="btn controller-item" onclick="toggle_play()"><div id="play-indicator" class="fa fa-stop" area-label="stop" aria-hidden="true"></div></a>
+  <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>
 </div>
 
 <a id="prev" onclick="prev()">&#10094;</a>
diff --git a/snippets/style.css b/snippets/style.css
index fc0054a..b4a797f 100644
--- a/snippets/style.css
+++ b/snippets/style.css
@@ -4,36 +4,27 @@ body {
   font-family: sans-serif;
 }
 
-img, video {
-  max-width: 100%;
-  max-height: 90vh;
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-iframe {
-  width: 100%;
-  height: 90vh;
-}
-
-a {
-  color: #888;
-  text-decoration: none;
-}
-
-dl { overflow: hidden; }
-
-dt {
-  float:left;
-  width: 3em;
-  height: 2em;
-  margin-left: 2em;
-  clear:both;
+@media screen and (max-width: 600px) {
+  nav {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+  }
+  nav #logo { display: inline; }
+  nav .item {
+    background: #000;
+    display: none;
+    padding: 0.1em 0.5em;
+  }
+  nav .fa-bars {
+    float: right;
+    display:inline;
+    font-size: 2em;
+    padding-top: 0.25em;
+    padding-right: 0.75em;
+  }
 }
 
-dd { float:left; }
-
 nav {
   background: #000;
   color: #fff;
@@ -65,32 +56,60 @@ nav .fa-bars { display:none; }
 
 nav a:hover { color: #fff; }
 
-@media screen and (max-width: 600px) {
-  nav {
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-  }
-  nav #logo { display: inline; }
-  nav .item {
-    background: #000;
-    display: none;
-    padding: 0.1em 0.5em;
-  }
-  nav .fa-bars {
-    float: right;
-    display:inline;
-    font-size: 2em;
-    padding-top: 0.25em;
-    padding-right: 0.75em;
-  }
+.post {
+  padding: 1em;
+}
+
+/*
+.album {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+*/
+
+img, video {
+  max-width: 100%;
+  max-height: 80vh;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
 }
 
+iframe {
+  width: 100%;
+  height: 90vh;
+}
+
+a {
+  color: #888;
+  text-decoration: none;
+}
+
+/*
+dl { overflow: hidden; }
+
+dt {
+  float:left;
+  width: 3em;
+  height: 2em;
+  margin-left: 2em;
+  clear:both;
+}
+
+dd { float:left; }
+*/
+
 #image {
   padding-top: 2.5%;
   padding-bottom: 1%;
 }
 
+#cover {
+  max-height: 50vh;
+  margin-left: 0;
+}
+
 #controller {
   position: fixed;
   left: 0;
@@ -122,7 +141,6 @@ nav a:hover { color: #fff; }
 #prev:hover, #next:hover { text-decoration: none; }
 #prev:active, #next:active { color: black; }
 
-.post { padding: 1em; }
 
 /* bottom */
 .pager { width: 100%; }
-- 
cgit v1.2.3