From d987641d7b68fcfa8431b1835411bb1095a37961 Mon Sep 17 00:00:00 2001 From: pdp8 Date: Sun, 28 Jul 2024 09:44:00 +0200 Subject: image albums, flex layout --- html/about.html | 17 ++++-- html/contact.html | 11 ++-- html/robots.txt | 31 ---------- html/slideshow.js | 80 -------------------------- html/style.css | 166 +++++++++++++++++++++--------------------------------- html/tail.html | 23 ++++---- 6 files changed, 92 insertions(+), 236 deletions(-) delete mode 100644 html/robots.txt delete mode 100644 html/slideshow.js (limited to 'html') 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 @@ -pdp-8 -
-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.

-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. + pdp-8 +
+ 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.

-https://en.wikipedia.org/wiki/PDP-8 + 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. +

+ https://en.wikipedia.org/wiki/PDP-8 \ 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 @@ info@pdp8.info

fediverse

@pdp8@social.pdp8.info -

newsletter

+

+ your email will be used only for the newsletter and won't be shared with anyone +

subscribe

send a mail to info@pdp8.info with subscribe in the subject -(your address will be used only for the newsletter and won't be shared with anyone) +line

unsubscribe

send a mail to info@pdp8.info with unsubscribe 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 @@ - - - +
+ ©pdp8 + Creative Commons Attribution 4.0 International + License +

+ no tracking, cookies, javascript, or server-side scripting. source code: https://git.pdp8.info/pdp8.info/tree/ +

+
+ + + \ No newline at end of file -- cgit v1.2.3