enhance pwa presentation
|
@ -15,7 +15,7 @@ const createPayload = (notification) => {
|
|||
title,
|
||||
options: {
|
||||
timestamp: Date.now(),
|
||||
icon: '/android-chrome-96x96.png',
|
||||
icon: '/icons/icon_x96.png',
|
||||
...options
|
||||
}
|
||||
})
|
||||
|
|
|
@ -6,7 +6,6 @@ class MyDocument extends Document {
|
|||
return (
|
||||
<Html>
|
||||
<Head>
|
||||
<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png' />
|
||||
<link rel='manifest' href='/site.webmanifest' />
|
||||
<link rel='preload' href={`${publicPrefix}/Lightningvolt-xoqm.ttf`} as='font' type='font/ttf' crossOrigin='' />
|
||||
<style
|
||||
|
@ -19,9 +18,46 @@ class MyDocument extends Document {
|
|||
}`
|
||||
}}
|
||||
/>
|
||||
<meta name='apple-mobile-web-app-capable' content='yes' />
|
||||
<meta name='theme-color' content='#000000' />
|
||||
<link rel='apple-touch-icon' href='/icons/icon_x192.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' href='/splash/iPhone_14_Pro_Max_landscape.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' href='/splash/iPhone_14_Pro_landscape.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' href='/splash/iPhone_14_Plus__iPhone_13_Pro_Max__iPhone_12_Pro_Max_landscape.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' href='/splash/iPhone_14__iPhone_13_Pro__iPhone_13__iPhone_12_Pro__iPhone_12_landscape.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' href='/splash/iPhone_13_mini__iPhone_12_mini__iPhone_11_Pro__iPhone_XS__iPhone_X_landscape.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' href='/splash/iPhone_11_Pro_Max__iPhone_XS_Max_landscape.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' href='/splash/iPhone_11__iPhone_XR_landscape.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' href='/splash/iPhone_8_Plus__iPhone_7_Plus__iPhone_6s_Plus__iPhone_6_Plus_landscape.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' href='/splash/iPhone_8__iPhone_7__iPhone_6s__iPhone_6__4.7__iPhone_SE_landscape.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' href='/splash/4__iPhone_SE__iPod_touch_5th_generation_and_later_landscape.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' href='/splash/12.9__iPad_Pro_landscape.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' href='/splash/11__iPad_Pro__10.5__iPad_Pro_landscape.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' href='/splash/10.9__iPad_Air_landscape.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' href='/splash/10.5__iPad_Air_landscape.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' href='/splash/10.2__iPad_landscape.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' href='/splash/9.7__iPad_Pro__7.9__iPad_mini__9.7__iPad_Air__9.7__iPad_landscape.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' href='/splash/8.3__iPad_Mini_landscape.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' href='/splash/iPhone_14_Pro_Max_portrait.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' href='/splash/iPhone_14_Pro_portrait.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' href='/splash/iPhone_14_Plus__iPhone_13_Pro_Max__iPhone_12_Pro_Max_portrait.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' href='/splash/iPhone_14__iPhone_13_Pro__iPhone_13__iPhone_12_Pro__iPhone_12_portrait.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' href='/splash/iPhone_13_mini__iPhone_12_mini__iPhone_11_Pro__iPhone_XS__iPhone_X_portrait.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' href='/splash/iPhone_11_Pro_Max__iPhone_XS_Max_portrait.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' href='/splash/iPhone_11__iPhone_XR_portrait.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' href='/splash/iPhone_8_Plus__iPhone_7_Plus__iPhone_6s_Plus__iPhone_6_Plus_portrait.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' href='/splash/iPhone_8__iPhone_7__iPhone_6s__iPhone_6__4.7__iPhone_SE_portrait.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' href='/splash/4__iPhone_SE__iPod_touch_5th_generation_and_later_portrait.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' href='/splash/12.9__iPad_Pro_portrait.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' href='/splash/11__iPad_Pro__10.5__iPad_Pro_portrait.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' href='/splash/10.9__iPad_Air_portrait.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' href='/splash/10.5__iPad_Air_portrait.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' href='/splash/10.2__iPad_portrait.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' href='/splash/9.7__iPad_Pro__7.9__iPad_mini__9.7__iPad_Air__9.7__iPad_portrait.png' />
|
||||
<link rel='apple-touch-startup-image' media='screen and (device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' href='/splash/8.3__iPad_Mini_portrait.png' />
|
||||
<script src={`${publicPrefix}/darkmode.js`} crossOrigin='' />
|
||||
</Head>
|
||||
<body>
|
||||
<script src={`${publicPrefix}/darkmode.js`} />
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
|
|
Before Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 38 KiB |
Before Width: | Height: | Size: 7.8 KiB |
After Width: | Height: | Size: 5.7 KiB |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 30 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 49 KiB |
After Width: | Height: | Size: 2.7 KiB |
After Width: | Height: | Size: 3.8 KiB |
After Width: | Height: | Size: 4.8 KiB |
After Width: | Height: | Size: 8.2 KiB |
After Width: | Height: | Size: 23 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 36 KiB |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 3.3 KiB |
After Width: | Height: | Size: 372 KiB |
After Width: | Height: | Size: 425 KiB |
|
@ -1,31 +1,96 @@
|
|||
{
|
||||
"name": "stacker news",
|
||||
"name": "Stacker News",
|
||||
"short_name": "SN",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/android-chrome-192x192.png",
|
||||
"src": "/icons/icon_x48.png",
|
||||
"type": "image/png",
|
||||
"sizes": "48x48",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/icons/icon_x72.png",
|
||||
"type": "image/png",
|
||||
"sizes": "72x72",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/icons/icon_x96.png",
|
||||
"type": "image/png",
|
||||
"sizes": "96x96",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/icons/icon_x128.png",
|
||||
"type": "image/png",
|
||||
"sizes": "128x128",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/icons/icon_x192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/android-chrome-512x512.png",
|
||||
"src": "/icons/icon_x384.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
"sizes": "384x384",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/android-chrome-96x96.png",
|
||||
"src": "/icons/icon_x512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "96x96"
|
||||
"sizes": "512x512",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/android-chrome-24x24.png",
|
||||
"src": "/maskable/icon_x48.png",
|
||||
"type": "image/png",
|
||||
"sizes": "24x24"
|
||||
"sizes": "48x48",
|
||||
"purpose": "maskable"
|
||||
},
|
||||
{
|
||||
"src": "/maskable/icon_x72.png",
|
||||
"type": "image/png",
|
||||
"sizes": "72x72",
|
||||
"purpose": "maskable"
|
||||
},
|
||||
{
|
||||
"src": "/maskable/icon_x96.png",
|
||||
"type": "image/png",
|
||||
"sizes": "96x96",
|
||||
"purpose": "maskable"
|
||||
},
|
||||
{
|
||||
"src": "/maskable/icon_x128.png",
|
||||
"type": "image/png",
|
||||
"sizes": "128x128",
|
||||
"purpose": "maskable"
|
||||
},
|
||||
{
|
||||
"src": "/maskable/icon_x192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192",
|
||||
"purpose": "maskable"
|
||||
},
|
||||
{
|
||||
"src": "/maskable/icon_x384.png",
|
||||
"type": "image/png",
|
||||
"sizes": "384x384",
|
||||
"purpose": "maskable"
|
||||
},
|
||||
{
|
||||
"src": "/maskable/icon_x512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512",
|
||||
"purpose": "maskable"
|
||||
}
|
||||
],
|
||||
"display": "standalone",
|
||||
"orientation": "any",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#000000",
|
||||
"background_color": "#FADA5E",
|
||||
"id": "/",
|
||||
"start_url": "/",
|
||||
"url_handlers": [
|
||||
|
@ -42,5 +107,21 @@
|
|||
"text": "text",
|
||||
"url": "url"
|
||||
}
|
||||
}
|
||||
},
|
||||
"description": "Stacker News is like Hacker News but it pays you Bitcoin",
|
||||
"categories": ["news", "bitcoin", "lightning", "zaps", "community"],
|
||||
"screenshots": [
|
||||
{
|
||||
"src": "/shot/narrow.png",
|
||||
"type": "image/jpeg",
|
||||
"sizes": "1080x1440",
|
||||
"form_factor": "narrow"
|
||||
},
|
||||
{
|
||||
"src": "/shot/wide.png",
|
||||
"type": "image/jpeg",
|
||||
"sizes": "2048x1186",
|
||||
"form_factor": "wide"
|
||||
}
|
||||
]
|
||||
}
|
After Width: | Height: | Size: 104 KiB |
After Width: | Height: | Size: 105 KiB |
After Width: | Height: | Size: 109 KiB |
After Width: | Height: | Size: 110 KiB |
After Width: | Height: | Size: 114 KiB |
After Width: | Height: | Size: 116 KiB |
After Width: | Height: | Size: 117 KiB |
After Width: | Height: | Size: 118 KiB |
After Width: | Height: | Size: 156 KiB |
After Width: | Height: | Size: 158 KiB |
After Width: | Height: | Size: 29 KiB |
After Width: | Height: | Size: 31 KiB |
After Width: | Height: | Size: 103 KiB |
After Width: | Height: | Size: 106 KiB |
After Width: | Height: | Size: 94 KiB |
After Width: | Height: | Size: 95 KiB |
After Width: | Height: | Size: 113 KiB |
After Width: | Height: | Size: 116 KiB |
After Width: | Height: | Size: 56 KiB |
After Width: | Height: | Size: 59 KiB |
After Width: | Height: | Size: 95 KiB |
After Width: | Height: | Size: 98 KiB |
After Width: | Height: | Size: 120 KiB |
After Width: | Height: | Size: 123 KiB |
After Width: | Height: | Size: 122 KiB |
After Width: | Height: | Size: 124 KiB |
After Width: | Height: | Size: 103 KiB |
After Width: | Height: | Size: 107 KiB |
After Width: | Height: | Size: 102 KiB |
After Width: | Height: | Size: 106 KiB |
After Width: | Height: | Size: 90 KiB |
After Width: | Height: | Size: 92 KiB |
After Width: | Height: | Size: 37 KiB |
After Width: | Height: | Size: 40 KiB |
|
@ -155,7 +155,7 @@ padding: 0 0.2rem;
|
|||
background-color: var(--theme-clickToContextColor);
|
||||
}
|
||||
|
||||
body {
|
||||
html, body {
|
||||
background: var(--theme-body);
|
||||
color: var(--theme-color);
|
||||
min-height: 100vh;
|
||||
|
|