diff options
| -rwxr-xr-x | html.rb | 9 | ||||
| -rw-r--r-- | snippets/540px-PDP-8_.jpg | bin | 0 -> 84238 bytes | |||
| -rw-r--r-- | snippets/about.html | 2 | ||||
| -rw-r--r-- | snippets/contact.html | 9 | ||||
| -rw-r--r-- | snippets/images.js | 2 | ||||
| -rw-r--r-- | snippets/newsletter.html | 6 | ||||
| -rw-r--r-- | snippets/pictures.html | 5 | ||||
| -rw-r--r-- | snippets/style.css | 114 |
8 files changed, 84 insertions, 63 deletions
@@ -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 Binary files differnew file mode 100644 index 0000000..1f67d13 --- /dev/null +++ b/snippets/540px-PDP-8_.jpg 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()">❮</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%; } |
