Merge branch 'master' into reddit
|
@ -732,6 +732,7 @@ #timeControls {
|
|||
font-size: 12px;
|
||||
text-align: center;
|
||||
min-width: 300px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#timeControls input {
|
||||
|
@ -742,6 +743,26 @@ #timeControls input {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
#timeControlsTooltip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
padding: 0.5em 2em;
|
||||
background: #555;
|
||||
border: 1px #000 solid;
|
||||
justify-content: center;
|
||||
bottom: 40px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#timeControlsTooltip p {
|
||||
line-height: normal;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#timeControls:hover #timeControlsTooltip {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
|
|
BIN
web/_img/apple-touch-icon.png
Normal file
After Width: | Height: | Size: 44 KiB |
BIN
web/_img/favicon-dark.png
Normal file
After Width: | Height: | Size: 454 B |
1
web/_img/favicon-dark.svg
Normal file
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 192"><defs><style>.cls-1 {fill: #ff4500;}.cls-2 {fill: white;}</style></defs><polygon class="cls-1" points="154 0 154 38 39 38 39 192 0 192 0 0 154 0"/><polygon class="cls-1" points="192 38 192 192 77 192 77 153 154 153 154 38 192 38"/><polygon class="cls-1" points="154 38 68.8 68.8 123.2 123.2 154 38"/><polygon class="cls-2" points="68.8 68.8 39 153 123.2 123.2 68.8 68.8"/></svg>
|
After Width: | Height: | Size: 440 B |
BIN
web/_img/favicon.png
Normal file
After Width: | Height: | Size: 474 B |
1
web/_img/favicon.svg
Normal file
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 192"><defs><style>.cls-1 {fill: #ff4500;}.cls-2 {fill: black;}</style></defs><polygon class="cls-1" points="154 0 154 38 39 38 39 192 0 192 0 0 154 0"/><polygon class="cls-1" points="192 38 192 192 77 192 77 153 154 153 154 38 192 38"/><polygon class="cls-1" points="154 38 68.8 68.8 123.2 123.2 154 38"/><polygon class="cls-2" points="68.8 68.8 39 153 123.2 123.2 68.8 68.8"/></svg>
|
After Width: | Height: | Size: 440 B |
Before Width: | Height: | Size: 2.9 KiB |
1
web/_img/logo-transparent.svg
Normal file
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><style>.cls-1 {fill: #ff4500;}.cls-2 {fill: black;}</style></defs><polygon class="cls-1" points="364 76 364 148 148 148 148 436 76 436 76 76 364 76"/><polygon class="cls-1" points="436 148 436 436 220 436 220 364 364 364 364 148 436 148"/><polygon class="cls-1" points="364 148 205 205 307 307 364 148"/><polygon class="cls-2" points="205 205 148 364 307 307 205 205"/></svg>
|
After Width: | Height: | Size: 443 B |
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 4.8 KiB |
1
web/_img/logo.svg
Normal file
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#ff4500;}</style></defs><rect class="cls-1" width="512" height="512"/><polygon class="cls-2" points="364 76 364 148 148 148 148 436 76 436 76 76 364 76"/><polygon class="cls-2" points="436 148 436 436 220 436 220 364 364 364 364 148 436 148"/><polygon class="cls-2" points="364 148 205 205 307 307 364 148"/><polygon points="205 205 148 364 307 307 205 205"/></svg>
|
After Width: | Height: | Size: 470 B |
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 2.9 KiB |
Before Width: | Height: | Size: 6 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 52 KiB |
BIN
web/_img/pwa/icon-maskable-192x192.png
Normal file
After Width: | Height: | Size: 14 KiB |
BIN
web/_img/pwa/icon-maskable-512x512.png
Normal file
After Width: | Height: | Size: 44 KiB |
27
web/_js/favicon.js
Normal file
|
@ -0,0 +1,27 @@
|
|||
// Based on GitHub's favicon switcher. Temporary(?) fix for Chromium based browsers that won't dynamically update embedded CSS media query inside of SVG
|
||||
function updateFavicon(colorScheme) {
|
||||
const favicon = document.head.querySelector('.js-site-favicon[type="image/svg+xml"]')
|
||||
const faviconFallback = document.head.querySelector('.js-site-favicon[type="image/png"]')
|
||||
if (favicon && faviconFallback) {
|
||||
if (colorScheme || colorScheme == 'dark') {
|
||||
favicon.href = '_img/favicon-dark.svg';
|
||||
faviconFallback.href = '_img/favicon-dark.png';
|
||||
} else {
|
||||
favicon.href = '_img/favicon.svg';
|
||||
faviconFallback.href = '_img/favicon.png';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function prefersDarkColorScheme() {
|
||||
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
}
|
||||
|
||||
if (prefersDarkColorScheme()) {
|
||||
// update favicon to dark on page load
|
||||
updateFavicon('dark')
|
||||
}
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
updateFavicon(prefersDarkColorScheme())
|
||||
})
|
|
@ -90,10 +90,11 @@ const timeConfig = [
|
|||
url: "./_img/place/final.png",
|
||||
image: null,
|
||||
showAtlas: true,
|
||||
},
|
||||
}
|
||||
];
|
||||
|
||||
let slider = document.getElementById("timeControlsSlider");
|
||||
let tooltip = document.getElementById("timeControlsTooltip")
|
||||
let image = document.getElementById("image");
|
||||
|
||||
let timeCallback = (a) => {};
|
||||
|
@ -102,11 +103,11 @@ let atlasBackup = [];
|
|||
// SETUP
|
||||
slider.max = timeConfig.length;
|
||||
slider.value = timeConfig.length;
|
||||
updateTime(timeConfig.length)
|
||||
updateTime(slider.value)
|
||||
|
||||
slider.oninput = (event) => {
|
||||
slider.addEventListener("input", (event) => {
|
||||
updateTime(parseInt(event.target.value))
|
||||
};
|
||||
})
|
||||
|
||||
async function updateTime(index) {
|
||||
let configObject = timeConfig[index-1];
|
||||
|
@ -124,4 +125,13 @@ async function updateTime(index) {
|
|||
atlas = []
|
||||
}
|
||||
timeCallback(atlas)
|
||||
}
|
||||
if (typeof configObject.timestamp === "number") tooltip.querySelector('p').textContent = new Date(configObject.timestamp*1000).toUTCString()
|
||||
else tooltip.querySelector('p').textContent = configObject.timestamp
|
||||
tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px"
|
||||
}
|
||||
|
||||
tooltip.parentElement.addEventListener('mouseenter', () => tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px"
|
||||
)
|
||||
|
||||
window.addEventListener('resize', () => tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px"
|
||||
)
|
|
@ -14,26 +14,30 @@
|
|||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>The 2022 /r/place Atlas</title>
|
||||
|
||||
<meta name="description" content="An Atlas of Reddit's /r/place, with information to each artwork of the canvas.">
|
||||
<meta name="author" content="Roland Rytz">
|
||||
<meta name="keywords" content="reddit, /r/place, april">
|
||||
<meta name="application-name" content="2022 /r/place Atlas">
|
||||
<meta name="robots" content="index, follow">
|
||||
|
||||
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
|
||||
<meta name="color-scheme" content="dark">
|
||||
|
||||
<link rel="icon alternate" href="_img/favicon.png" type="image/png" class="js-site-favicon">
|
||||
<link rel="icon" href="_img/favicon.svg" type="image/svg+xml" class="js-site-favicon">
|
||||
|
||||
<link href="./_css/style.css" rel="stylesheet" type="text/css" media="all">
|
||||
<script type="text/javascript" src="./_js/favicon.js" defer></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
<header class="aboutHeader">
|
||||
<a href="./">
|
||||
<img id="logo" src="./_img/logo-100x100.png" height="50" width="50" alt="">
|
||||
<img id="logo" src="./_img/logo.svg" height="50" width="50" alt="">
|
||||
<h1>The 2022 /r/place Atlas</h1>
|
||||
</a>
|
||||
<!--nav>
|
||||
|
|
BIN
web/favicon.ico
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
@ -20,18 +20,33 @@
|
|||
<title>The 2022 /r/place Atlas</title>
|
||||
<meta name="description" content="An interactive map of Reddit's 2022 /r/place, with information to each artwork of the canvas.">
|
||||
<meta name="author" content="Roland Rytz (2022 by Stefano#7366)">
|
||||
<meta name="keywords" content="reddit, /r/place 2022">
|
||||
<meta name="application-name" content="The /r/place Atlas 2022">
|
||||
<meta name="robots" content="index, follow">
|
||||
|
||||
<meta property="og:title" content="The 2022 /r/place Atlas">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://place-atlas.stefanocoding.me/">
|
||||
<meta property="og:image" content="https://place-atlas.stefanocoding.me/_img/logo.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="512">
|
||||
<meta property="og:image:height" content="512">
|
||||
<meta property="og:image:alt" content="The /r/place Atlas logo">
|
||||
<meta property="og:description" content="An interactive map of Reddit's 2022 /r/place, with information to each artwork of the canvas.">
|
||||
|
||||
<!-- <meta name="google-site-verification" content="gZGHpBSMzffAbIn0qB8b00We6EwSGkDTfDoQVv-NWss"/> -->
|
||||
|
||||
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, shrink-to-fit=no"> <!-- user-scalable=no -->
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="color-scheme" content="dark">
|
||||
|
||||
<link rel="apple-touch-icon" href="_img/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon alternate" href="_img/favicon.png" type="image/png" class="js-site-favicon">
|
||||
<link rel="icon" href="_img/favicon.svg" type="image/svg+xml" class="js-site-favicon">
|
||||
|
||||
<link href="./_css/style.css" rel="stylesheet" type="text/css" media="all">
|
||||
<link rel="manifest" href="./manifest.webmanifest">
|
||||
|
||||
<script type="text/javascript" src="./_js/favicon.js" defer></script>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
|
@ -67,7 +82,7 @@
|
|||
<div id="wrapper">
|
||||
<header>
|
||||
<a href="./">
|
||||
<img id="logo" src="./_img/logo.png" height="50" width="50" alt="Logo">
|
||||
<img id="logo" src="./_img/logo.svg" height="50" width="50" alt="Logo">
|
||||
<!-- If you wonder why I shrink the image in html,
|
||||
it's because this is the image that will be used
|
||||
by reddit and the like as the thumbnail for the site.
|
||||
|
@ -156,7 +171,8 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
|
|||
<button title="Reset View" id="zoomResetButton"></button>
|
||||
<button title="Zoom Out" id="zoomOutButton"></button>
|
||||
</div>
|
||||
<div id="timeControls">
|
||||
<div id="timeControls">
|
||||
<div id="timeControlsTooltip"><p>Time control slider</p></div>
|
||||
<input type="range" min="1" max="1" value="1" class="slider" id="timeControlsSlider">
|
||||
</div>
|
||||
<div id="author">
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"theme_color": "#f69435",
|
||||
"background_color": "#f69435",
|
||||
"theme_color": "#923b15",
|
||||
"background_color": "#111111",
|
||||
"display": "minimal-ui",
|
||||
"scope": "/",
|
||||
"start_url": "/",
|
||||
|
@ -10,23 +10,27 @@
|
|||
"icons": [
|
||||
{
|
||||
"src": "_img/pwa/icon-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
"sizes": "196x196",
|
||||
"type": "image/png",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "_img/pwa/icon-256x256.png",
|
||||
"sizes": "256x256",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "_img/pwa/icon-384x384.png",
|
||||
"sizes": "384x384",
|
||||
"type": "image/png"
|
||||
"src": "_img/pwa/icon-maskable-192x192.png",
|
||||
"sizes": "196x196",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable"
|
||||
},
|
||||
{
|
||||
"src": "_img/pwa/icon-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
"type": "image/png",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "_img/pwa/icon-maskable-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|