Commit 18190e5f authored by marius david's avatar marius david
Browse files

custom favicon

parent ccc26185

web/_img/canvas-log-low-res.png

0 → 100644
+622 B
Loading image diff...

web/_js/favicon.js

deleted100644 → 0
+0 −27
Original line number Diff line number Diff line 
// 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())

})

web/about.html

+2 −6
Original line number Diff line number Diff line
@@ -39,14 +39,11 @@ 
		<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#222">

		

		<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 rel="icon" href="_img/canvas-log-low-res.png" type="image/png" class="js-site-favicon">

    

		<link rel="stylesheet" href="./_css/style.css">

		<link rel="stylesheet" href="./_js/dist/bootstrap-dark.min.css">

		<link rel="stylesheet" href="./_js/dist/bootstrap-icons-font/bootstrap-icons.min.css">

		

		<script src="./_js/favicon.js" defer></script>

	</head>

	<!-- TODO: canvas adaptation -->

	<body>
@@ -54,8 +51,7 @@ 
			<div class="container">

				<a class="navbar-brand text-body d-flex align-items-center" href="./">

					<picture>

						<source srcset="./_img/favicon-dark.svg" media="(prefers-color-scheme: dark)">

						<img class="d-block me-2" height="32" width="32" src="./_img/favicon.svg" alt="">

						<img class="d-block me-2" height="30" width="30" src="./_img/canvas-log-low-res.png" alt="">

					</picture>

					The 2023 r/place Atlas

				</a>

web/index.html

+2 −5
Original line number Diff line number Diff line
@@ -39,15 +39,13 @@ 
		<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#222">

		

		<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 rel="icon" href="_img/canvas-log-low-res.png" type="image/png" class="js-site-favicon">

		

		<link rel="stylesheet" href="./_css/style.css">

		<link rel="stylesheet" href="./_js/dist/bootstrap-dark.min.css">

		<link rel="stylesheet" href="./_js/dist/bootstrap-icons-font/bootstrap-icons.min.css">

		<link rel="manifest" href="./manifest.webmanifest">

		<script type="module" src="./_js/dist/pwa-update.js"></script>

		<script src="./_js/favicon.js" defer></script>

	</head>

	<body>

		<div id="wrapper" class="listHidden">
@@ -63,8 +61,7 @@ 
					<div class="container-fluid">

						<a class="navbar-brand text-body d-flex align-items-center" href="./">

							<picture>

								<source srcset="./_img/favicon-dark.svg" media="(prefers-color-scheme: dark)">

								<img class="d-block me-2" height="32" width="32" src="./_img/favicon.svg" alt="">

								<img class="d-block me-2" height="30" width="30" src="./_img/canvas-log-low-res.png" alt="">

							</picture>

							The 2024 Fediverse Canvas Atlas

						</a>