the background update
This commit is contained in:
parent
a2612c70aa
commit
6b74bcef25
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue