MirrorHub/atlas
0
0
Fork 0
mirror of https://github.com/placeAtlas/atlas.git synced 2024-07-05 19:49:02 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1176 from mxdanger/logo

Browse source 
Updated logos, favicon, and metadata
This commit is contained in:
Stefano 2022-04-10 11:48:17 +02:00 committed by GitHub
parent 169a8e7d02 4306b49ff0
commit 96d3995dc6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 73 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
web/_img/apple-touch-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
web/_img/favicon-dark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 454 B

1
web/_img/favicon-dark.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 440 B

BIN
web/_img/favicon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 474 B

1
web/_img/favicon.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 440 B

BIN
web/_img/logo-100x100.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.9 KiB

1
web/_img/logo-transparent.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 443 B

BIN
web/_img/logo.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

1
web/_img/logo.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 470 B

BIN
web/_img/pwa/icon-192x192.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 17 KiB

BIN
web/_img/pwa/icon-256x256.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.9 KiB

BIN
web/_img/pwa/icon-384x384.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6 KiB

BIN
web/_img/pwa/icon-512x512.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 52 KiB

BIN
web/_img/pwa/icon-maskable-192x192.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
web/_img/pwa/icon-maskable-512x512.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 44 KiB

27
web/_js/favicon.js Normal file
View 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())
})

12
web/about.html
View file

@ -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
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

19
web/index.html
View file

@ -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.

30
web/manifest.webmanifest
View file

@ -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"
}
]
}