From 6b74bcef253eb843cd85772216ab3cb6f6362189 Mon Sep 17 00:00:00 2001
From: gome <gome@ctrl-c.club>
Date: Sat, 18 Mar 2023 16:42:38 -0500
Subject: [PATCH] the background update

---
 css/gomepage.css | 46 +++++++++++++++----------
 js/background.js | 90 ++++++++++++++++++++++++++++++------------------
 2 files changed, 85 insertions(+), 51 deletions(-)

diff --git a/css/gomepage.css b/css/gomepage.css
index 14fdfe4..5e19743 100644
--- a/css/gomepage.css
+++ b/css/gomepage.css
@@ -10,22 +10,8 @@ html {
   position: relative;
   overflow-x: hidden;
 }
-html:before {
-  content: '';
-  display: block;
-  height: 100vh;
-  width: 100vw;
-  background-color: #efe5d7;
-  transition: opacity 2000ms 300ms;
-  position: absolute;
-  top: 0;
-  z-index: -1;
-}
-html.loaded:before {
-  opacity: 0;
-}
 header, main, .gome-img {
-  transition: border-color 2000ms 300ms;
+  transition: border-color 2000ms;
 }
 html.loaded header, html.loaded main, html.loaded .gome-img {
   border-color: #323a42;
@@ -41,6 +27,19 @@ body {
   grid-template-rows: 1fr auto min-content;
   line-height: 1.2;
 }
+#background {
+  position: fixed;
+  z-index: -2;
+  display: block;
+  width: 100vw;
+  height: 100vh;
+  object-fit: cover;
+  transition: opacity 2000ms;
+  opacity: 0;
+}
+html.loaded #background {
+  opacity: 1;
+}
 *::selection {
   background: #eab77544;
 }
@@ -175,7 +174,19 @@ nav a.new:hover .link-title::after, nav a.new:focus .link-title::after {
   line-height: 1.2;
   border-radius: 2px;
   font-size: 15px;
-  animation: fade-in 2000ms ease 300ms backwards;
+  animation: fade-in 2000ms ease backwards;
+}
+.image-credit p, .image-credit h3 {
+  margin: 0;
+}
+.image-credit p .line {
+  white-space: nowrap;
+}
+.image-credit h3 {
+  font-size: 15px;
+  font-weight: bold;
+  font-style: normal;
+  font-family: 'Palatino Linotype', Lora, serif;
 }
 header .image-credit {
   margin: 9px 0 -16px 13.5px;
@@ -330,9 +341,8 @@ time {
 a.journal-link + a.journal-link {
   margin-top: 1em;
 }
-.line {
+a.journal-link .line {
   display: inline-block;
-  background-color: #323a42;
   height: 2px;
   position: relative;
 }
diff --git a/js/background.js b/js/background.js
index c5423cb..fb3b53f 100644
--- a/js/background.js
+++ b/js/background.js
@@ -1,3 +1,5 @@
+const PREFIX = 'https://gome.page/bg/';
+
 const choose = options => {
   const weight_sum = options.reduce((a, b) => a + b.weight, 0);
   let choice = Math.floor(Math.random() * weight_sum);
@@ -11,29 +13,29 @@ const choose = options => {
 }
 
 const images = [
-  { weight: 4, src: 'https://upload.wikimedia.org/wikipedia/commons/1/1f/Hiking_Trail_at_Mew_Lake_Campground%2C_Algonquin_Park_%2829950322654%29.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Hiking_Trail_at_Mew_Lake_Campground,_Algonquin_Park_(29950322654).jpg#Licensing', },
-  { weight: 4, src: 'https://upload.wikimedia.org/wikipedia/commons/a/a4/Butterfly_Garden_NBG_3_LR.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Butterfly_Garden_NBG_3_LR.jpg#Licensing', },
-  { weight: 4, src: 'https://upload.wikimedia.org/wikipedia/commons/b/bb/Wandelen_over_de_Planken_Wambuis_vanuit_Mossel_069_A.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Wandelen_over_de_Planken_Wambuis_vanuit_Mossel_069_A.jpg#Licensing', },
-  { weight: 4, src: 'https://upload.wikimedia.org/wikipedia/commons/f/ff/Ilsenburg%2C_Ilsetal_--_2017_--_0163.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Ilsenburg,_Ilsetal_--_2017_--_0163.jpg#Licensing', },
-  { weight: 4, src: 'https://upload.wikimedia.org/wikipedia/commons/6/66/Wood_anemones_and_tree_shadows_in_Gullmarsskogen_4.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Wood_anemones_and_tree_shadows_in_Gullmarsskogen_4.jpg#Licensing', },
-  { weight: 4, src: 'https://upload.wikimedia.org/wikipedia/commons/e/e8/Window_into_the_overgrown_Aulne_Abbey_%28DSC_0119%29.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Window_into_the_overgrown_Aulne_Abbey_(DSC_0119).jpg#Licensing', },
-  { weight: 4, src: 'https://upload.wikimedia.org/wikipedia/commons/0/09/20170815_Zalipie_5497_DxO.jpg', credit: 'https://commons.wikimedia.org/wiki/File:20170815_Zalipie_5497_DxO.jpg#Licensing', },
-  { weight: 3, src: 'https://upload.wikimedia.org/wikipedia/commons/a/a4/Maria_Saal_Freilichtmuseum_Steinerkasten_Ost-Ansicht_13092016_4233.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Maria_Saal_Freilichtmuseum_Steinerkasten_Ost-Ansicht_13092016_4233.jpg#Licensing', },
-  { weight: 3, src: 'https://upload.wikimedia.org/wikipedia/commons/3/34/M%C3%BCnster%2C_Boniburger_Wald_--_2019_--_4246.jpg', credit: 'https://commons.wikimedia.org/wiki/File:M%C3%BCnster,_Boniburger_Wald_--_2019_--_4246.jpg#Licensing', },
-  { weight: 3, src: 'https://upload.wikimedia.org/wikipedia/commons/a/a1/Schnepfau_Wendelinkapelle_01.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Schnepfau_Wendelinkapelle_01.jpg#Licensing', },
-  { weight: 3, src: 'https://upload.wikimedia.org/wikipedia/commons/9/9b/Caba%C3%B1a_de_la_Isla_del_Pato%2C_Parque_San_Jaime%2C_Londres%2C_Inglaterra%2C_2014-08-07%2C_DD_012.JPG', credit: 'https://commons.wikimedia.org/wiki/File:Caba%C3%B1a_de_la_Isla_del_Pato,_Parque_San_Jaime,_Londres,_Inglaterra,_2014-08-07,_DD_012.JPG#Licensing', },
-  { weight: 3, src: 'https://upload.wikimedia.org/wikipedia/commons/d/dd/Forest_road_Slavne_2016_G1.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Forest_road_Slavne_2016_G1.jpg#Licensing', },
-  { weight: 2, src: 'https://upload.wikimedia.org/wikipedia/commons/c/c8/Doorgang_in_muur._Locatie%2C_Chinese_tuin_Het_Verborgen_Rijk_van_Ming._Locatie._Hortus_Haren_01.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Doorgang_in_muur._Locatie,_Chinese_tuin_Het_Verborgen_Rijk_van_Ming._Locatie._Hortus_Haren_01.jpg#Licensing', },
-  { weight: 2, src: 'https://upload.wikimedia.org/wikipedia/commons/8/81/Japanese_Tea_Garden_San_Francisco_December_2016_001.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Japanese_Tea_Garden_San_Francisco_December_2016_001.jpg#Licensing', },
-  { weight: 2, src: 'https://upload.wikimedia.org/wikipedia/commons/6/61/Wooden_gate_in_Okochi_Sanso_Garden%2C_Kyoto%2C_Japan_%282%29.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Wooden_gate_in_Okochi_Sanso_Garden,_Kyoto,_Japan_(2).jpg#Licensing', },
-  { weight: 2, src: 'https://upload.wikimedia.org/wikipedia/commons/4/4c/Nationaal_Park_Weerribben-Wieden._Bemoste_boomstronken.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Nationaal_Park_Weerribben-Wieden._Bemoste_boomstronken.jpg#Licensing', },
-  { weight: 2, src: 'https://upload.wikimedia.org/wikipedia/commons/e/e9/Ritsurin_Garden%2C_Kagawa_Prefecture%3B_November_2019_%2804%29.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Ritsurin_Garden,_Kagawa_Prefecture;_November_2019_(04).jpg#Licensing', },
-  { weight: 2, src: 'https://upload.wikimedia.org/wikipedia/commons/0/01/14-09-02-oslo-RalfR-280.jpg', credit: 'https://commons.wikimedia.org/wiki/File:14-09-02-oslo-RalfR-280.jpg#Licensing', },
-  { weight: 2, src: 'https://upload.wikimedia.org/wikipedia/commons/6/61/Hut_in_Utsjoki_parish_village_in_Utsjoki%2C_Lapland%2C_Finland%2C_2021_September_-_3.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Hut_in_Utsjoki_parish_village_in_Utsjoki,_Lapland,_Finland,_2021_September_-_3.jpg#Licensing', },
-  { weight: 2, src: 'https://upload.wikimedia.org/wikipedia/commons/f/fa/Hut_in_Utsjoki_parish_village_in_Utsjoki%2C_Lapland%2C_Finland%2C_2021_September_-_2.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Hut_in_Utsjoki_parish_village_in_Utsjoki,_Lapland,_Finland,_2021_September_-_2.jpg#Licensing', },
-  { weight: 2, src: 'https://upload.wikimedia.org/wikipedia/commons/1/18/Langenlois_Weinweg_Weingartenh%C3%BCtte-8283.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Langenlois_Weinweg_Weingartenh%C3%BCtte-8283.jpg#Licensing', },
-  { weight: 2, src: 'https://upload.wikimedia.org/wikipedia/commons/9/93/Steuerberg_Hinterwachsenberg_3_Brentlerstuben_07042015_1537.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Steuerberg_Hinterwachsenberg_3_Brentlerstuben_07042015_1537.jpg#Licensing', },
-  { weight: 1, src: 'https://upload.wikimedia.org/wikipedia/commons/b/bc/Sir_Walter_Buffalo_Grass.jpg', credit: 'https://commons.wikimedia.org/wiki/File:Sir_Walter_Buffalo_Grass.jpg#Licensing', },
+  { name: 'lake_cabin', weight: 2 },
+  { name: 'paintress_well', weight: 4 },
+  { name: 'butterfly_garden', weight: 4 },
+  { name: 'duck_island_cottage', weight: 3 },
+  { name: 'moon_gate', weight: 2 },
+  { name: 'forest_road', weight: 3 },
+  { name: 'hiking_trail', weight: 4 },
+  { name: 'finnish_hut_far', weight: 2 },
+  { name: 'finnish_hut_close', weight: 2 },
+  { name: 'mossy_rock', weight: 4 },
+  { name: 'sf_japanese_garden', weight: 2 },
+  { name: 'wine_hut', weight: 2 },
+  { name: 'steiner_granary', weight: 3 },
+  { name: 'forest_pond', weight: 3 },
+  { name: 'mossy_stumps', weight: 2 },
+  { name: 'ritsurin_garden', weight: 2 },
+  { name: 'wendelin_chapel', weight: 3 },
+  { name: 'buffalo_grass', weight: 1 },
+  { name: 'alpine_dairy', weight: 2 },
+  { name: 'mist_woods', weight: 4 },
+  { name: 'aulne_abbey', weight: 4 },
+  { name: 'wood_anemones', weight: 4 },
+  { name: 'kyoto_gate', weight: 2 },
 ];
 
 const image_choice = choose(images);
@@ -41,18 +43,40 @@ const image_choice = choose(images);
 const html = document.querySelector('html');
 const body = document.querySelector('body');
 
-let img = new Image();
-img.src = image_choice.src;
+const img = document.createElement('img');
+img.id = 'background';
+img.src = `${PREFIX}${image_choice.name}.jpg`;
+img.srcset = `
+  ${PREFIX}${image_choice.name}-384.jpg 384w,
+  ${PREFIX}${image_choice.name}-512.jpg 512w,
+  ${PREFIX}${image_choice.name}-1024.jpg 1024w,
+  ${PREFIX}${image_choice.name}-2048.jpg 2048w
+`;
+
+body.appendChild(img);
+
+const lic = fetch(`https://gome.page/bg/${image_choice.name}.lic`)
+.then(response => response.text())
+.then(lic => {
+  let credit = null;
+  if (lic.startsWith('<')) {
+    credit = document.createElement('div');
+    credit.className = 'image-credit';
+    credit.innerHTML = '<h3>Image credit</h3>' + lic;
+  } else {
+    credit = document.createElement('a');
+    credit.textContent = 'Image credit';
+    credit.className = 'image-credit';
+    credit.target = '_blank';
+    credit.href = lic;  
+  }
+  if (credit) {
+    document.querySelector('header').appendChild(credit);
+    document.querySelector('main').appendChild(credit.cloneNode(true));
+  }
+});
 
-const credit = document.createElement('a');
-credit.textContent = 'Image credit';
-credit.className = 'image-credit';
-credit.target = '_blank';
-credit.href = image_choice.credit;
 
 img.addEventListener('load', () => {
-  html.style.backgroundImage = `url(${img.src})`;
   html.classList.add('loaded');
-  document.querySelector('header').appendChild(credit);
-  document.querySelector('main').appendChild(credit.cloneNode(true));
 });