From 6cb7fdb0588d0acb5d589cdb45ea3fe13f8a807c Mon Sep 17 00:00:00 2001 From: pdp8 Date: Tue, 30 Jan 2024 23:46:06 +0100 Subject: dark theme, lazy img/media loading, climbing integrated, IA links --- html.rb | 58 +++++++++++++++++++++++++++++--------- html/pictures.html | 8 +++--- html/slideshow.js | 4 +-- html/style.css | 83 ++++++++++++++++++++++++++++++++++++++++-------------- 4 files changed, 113 insertions(+), 40 deletions(-) diff --git a/html.rb b/html.rb index fd944bd..7e9d2f0 100755 --- a/html.rb +++ b/html.rb @@ -9,12 +9,12 @@ SNIPPETS = File.join(File.dirname(__FILE__), 'html') def nav(cat) html = '' html end @@ -43,30 +43,34 @@ def music_html html = File.read(File.join(SNIPPETS, 'head.html')) html += nav 'music' music.each do |dir| + next if dir.match 'alfadeo' + date = File.basename(dir).split('_')[0] html += "
" title = File.basename(dir).split('_')[1..-1].join(' ') html += "

#{title}

" - html += File.read(File.join(dir, 'README')).chomp.gsub("\n\n", '

').gsub("\n", '
') + '

' - cover = File.join(MEDIA_URL, dir.sub(MEDIA_DIR, ''), 'cover.jpeg') - html += "cover" + html += File.read(File.join(dir, 'README')).chomp.gsub("\n\n", '

').gsub("\n", '
') # + '

' + cover = File.join(MEDIA_URL, dir.sub(MEDIA_DIR, ''), 'cover.webp') + html += "cover" html += '' copyrights_file = File.join(dir, 'copyrights') copyrights = File.readlines(copyrights_file).collect { |l| l.chomp } if File.exist? copyrights_file Dir[File.join(dir, '*mp3')].each_with_index do |mp3, _i| mp3 = File.join(MEDIA_URL, mp3.sub(MEDIA_DIR, '')) - name = File.basename(mp3, '.mp3')[3..-1] + name = File.basename(mp3, '.mp3')[3..-1].gsub('_', ' ') # name += " ©#{copyrights[i]}" if copyrights html += '' + html += "" html += "" - html += "" html += '' end html += '
#{name} - #{name}
' + ia = "https://archive.org/details/pdp8_#{title.gsub(' ', '_')}" + html += "

Internet Archive: #{ia}" bc = if File.exist?(File.join(dir, 'bandcamp')) File.read(File.join(dir, 'bandcamp')).chomp else @@ -74,7 +78,7 @@ def music_html end html += "

Bandcamp: #{bc}" html += '

' - html += '
' + # html += '
' end html += '

© pdp8 Creative Commons Attribution 4.0 International License' html += File.read(File.join(SNIPPETS, 'tail.html')) @@ -99,22 +103,50 @@ def video_html webm = File.join(MEDIA_URL, 'videos', File.basename(dir), title.gsub(' ', '_') + '.webm') poster = File.join(MEDIA_URL, 'videos', File.basename(dir), 'poster.png') - html += "

" html += lines.join('
') html += '' - html += '

' + # html += '
' end html += '

 © pdp8 Creative Commons Attribution 4.0 International License' html += File.read(File.join(SNIPPETS, 'tail.html')) print_html 'videos', html end +def climbing_html + html = File.read(File.join(SNIPPETS, 'head.html')) + html += nav 'climbing' + Dir[File.join(MEDIA_DIR, 'climbing', '*.txt')].collect do |txt| + lines = File.read(txt).lines.collect { |l| l.chomp } + { date: lines.shift, + text: lines.join('
'), + mp4: txt.sub(MEDIA_DIR, MEDIA_URL).sub('.txt', '.mp4'), + webm: txt.sub(MEDIA_DIR, MEDIA_URL).sub('.txt', '.webm'), + webp: txt.sub(MEDIA_DIR, MEDIA_URL).sub('.txt', '.webp') } + end.sort_by { |m| m[:date] }.reverse.each do |post| + html += '

' + html += "

#{post[:date]}

" + html += "

+ " + html += post[:text] + html += '

' + end + html += '

 © pdp8 Creative Commons Attribution 4.0 International License' + html += File.read(File.join(SNIPPETS, 'tail.html')) + print_html 'climbing', html +end + music_html video_html +climbing_html %w[about code pictures contact].each do |basename| file_html basename diff --git a/html/pictures.html b/html/pictures.html index 25bf1c2..e733266 100644 --- a/html/pictures.html +++ b/html/pictures.html @@ -1,15 +1,15 @@ -

- - +

© pdp8 Creative Commons Attribution 4.0 International License

diff --git a/html/slideshow.js b/html/slideshow.js index ea265e4..48a5395 100644 --- a/html/slideshow.js +++ b/html/slideshow.js @@ -52,7 +52,7 @@ function play() { playing = 1 interval = setInterval(function () { next() }, 3000); document.getElementById("play-indicator").title = "Pause slideshow" - document.getElementById("play-indicator").className = "fa fa-pause" + document.getElementById("play-indicator").className = "fa fa-inverse fa-pause" hide_controls() } @@ -60,7 +60,7 @@ function stop() { playing = 0 clearInterval(interval) document.getElementById("play-indicator").title = "Play slideshow" - document.getElementById("play-indicator").className = "fa fa-play" + document.getElementById("play-indicator").className = "fa fa-inverse fa-play" show_controls() } diff --git a/html/style.css b/html/style.css index 63fdb65..1c8bf59 100644 --- a/html/style.css +++ b/html/style.css @@ -1,12 +1,12 @@ body { + background-color: black; + color: #eee; width: 100vw; margin: 0; font-family: sans-serif; } nav { - background: #000; - color: #fff; padding: 0.75em 0 1em 0; } @@ -21,13 +21,21 @@ nav img { vertical-align: bottom; } -nav #logo img { height: 2em; } +nav #logo img { + height: 2em; +} -nav .current { color: #fff; } +nav .current { + color: white; +} -nav #menu { display:none; } +nav #menu { + display: none; +} -nav a:hover { color: #fff; } +nav a:hover { + color: white; +} @media screen and (max-width: 600px) { nav .item { @@ -43,16 +51,32 @@ nav a:hover { color: #fff; } } } -.post { padding: 1em; } +.post { + padding: 1em; +} -img, video { - max-width: 100%; +img, +video { max-height: 80vh; + max-width: 80vw; + object-fit: contain; display: block; margin-left: auto; margin-right: auto; } +#image { + padding-top: 2.5%; + padding-bottom: 1%; +} + +.cover { + max-height: min(50vh, 90vw); + max-width: min(50vh, 90vw); + margin-left: 0; + padding: 1em 0; +} + iframe { width: 100%; height: 90vh; @@ -63,16 +87,19 @@ a { color: #888; } -#image { - padding-top: 2.5%; - padding-bottom: 1%; +td { + padding-right: 1em; + font-size: larger; } -.cover { - max-height: 50vh; - margin-left: 0; +audio { + width: 12.5em; + height: 2.5em; } +audio::-webkit-media-controls-panel { + background-color: #aaa; +} #controller { position: fixed; @@ -86,13 +113,14 @@ a { .btn { display: inline-block; cursor: pointer; - color: #000; + color: #111; font-size: 2em; font-weight: bold; width: 4em; } -#prev, #next { +#prev, +#next { cursor: pointer; position: absolute; color: lightgrey; @@ -102,7 +130,20 @@ a { bottom: 6vh; } -#prev { left: 1%; } -#next { right: 1%; } -#prev:hover, #next:hover { text-decoration: none; } -#prev:active, #next:active { color: black; } +#prev { + left: 1%; +} + +#next { + right: 1%; +} + +#prev:hover, +#next:hover { + text-decoration: none; +} + +#prev:active, +#next:active { + color: black; +} \ No newline at end of file -- cgit v1.2.3