Apply branding to index, improve icons, fix theme colour

- For index.html, set the Chrome title bar on mobile to the background #101010 instead of the blue. It also adds a better "one size fits all" Apple Touch icon declaration. The Open Graph description is updated to our tagline instead of the original.
- For manifest.json, restructures the file, sets the background #101010 to the theme colour, and fixes the capitalization on the description.
- For touchicon.png, this is just an enhanced version with the background applied, and a margin so it doesn't get cut off on home screens.
This commit is contained in:
Anthony Lavado 2019-01-07 00:38:26 -05:00
parent a0109fc505
commit d270bfdbb2
3 changed files with 34 additions and 37 deletions

View file

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html class="preload">
<head>
@ -15,17 +15,16 @@
<meta property="og:title" content="Jellyfin">
<meta property="og:site_name" content="Jellyfin">
<meta property="og:url" content="http://jellyfin.media">
<meta property="og:description" content="Energize your media.">
<meta property="og:description" content="The Free Software Media System.">
<meta property="og:type" content="article">
<meta property="fb:app_id" content="1618309211750238">
<link rel="apple-touch-icon" href="touchicon.png">
<link rel="apple-touch-icon" sizes="72x72" href="touchicon72.png">
<link rel="apple-touch-icon" sizes="114x114" href="touchicon114.png">
<link rel="apple-touch-startup-image" href="css/images/iossplash.png">
<link rel="apple-touch-icon" sizes="180x180" href="touchicon.png">
<!--<link rel="apple-touch-startup-image" href="css/images/iossplash.png">-->
<link rel="shortcut icon" href="favicon.ico">
<meta name="msapplication-TileImage" content="touchicon144.png">
<meta name="msapplication-TileColor" content="#333333">
<meta name="theme-color" content="#43A047">
<meta name="theme-color" content="#101010">
<title>Jellyfin</title>

View file

@ -1,32 +1,30 @@
{
"_comment": "This should be Jellyfin, but that breaks apps...",
"description": "Jellyfin: the Free Software media system.",
"display": "minimal-ui",
"icons": [
{
"sizes": "72x72",
"src": "touchicon72.png",
"type": "image/png"
},
{
"sizes": "114x114",
"src": "touchicon114.png",
"type": "image/png"
},
{
"sizes": "144x144",
"src": "touchicon144.png",
"type": "image/png"
}
],
"lang": "en-US",
"name": "Emby",
"related_applications": [
{
"platform": "web"
}
],
"short_name": "Emby",
"start_url": "/web/index.html",
"theme_color": "#00a4dc"
"name": "Emby",
"_comment": "This should be Jellyfin, but that breaks apps...",
"description": "Jellyfin: the Free Software Media System.",
"lang": "en-US",
"display": "minimal-ui",
"short_name": "Emby",
"start_url": "/web/index.html",
"theme_color": "#101010",
"icons": [{
"sizes": "72x72",
"src": "touchicon72.png",
"type": "image/png"
},
{
"sizes": "114x114",
"src": "touchicon114.png",
"type": "image/png"
},
{
"sizes": "144x144",
"src": "touchicon144.png",
"type": "image/png"
}
],
"related_applications": [{
"platform": "web"
}]
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3 KiB

After

Width:  |  Height:  |  Size: 8.3 KiB

Before After
Before After