135 lines
5.6 KiB
HTML
135 lines
5.6 KiB
HTML
<!doctype html>
|
|
<html lang="{process.env.LOCALE}" dir="{process.env.LOCALE_DIRECTION}">
|
|
<head>
|
|
<meta charset='utf-8' >
|
|
<meta name="viewport" content="width=device-width">
|
|
<meta id='theThemeColor' name='theme-color' content='#4169e1' >
|
|
<meta name="description" content="{intl.appDescription}" >
|
|
|
|
%sapper.base%
|
|
|
|
<link id='theManifest' rel='manifest' href='/manifest.json' >
|
|
<link id='theFavicon' rel='icon' type='image/png' href='/favicon.png' >
|
|
<link rel="apple-touch-icon" href="/apple-icon.png" >
|
|
<!-- both of these *-web-app-capable are required, for Chrome on Android and Safari on iOS
|
|
https://developers.google.com/web/fundamentals/native-hardware/fullscreen/ -->
|
|
<meta name="mobile-web-app-capable" content="yes" >
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-title" content="{intl.appName}">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
|
<!-- splashscreen for iOS -->
|
|
<link href="/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
|
|
<link href="/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
|
|
<link href="/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
|
|
<link href="/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
|
|
<link href="/iphonexr_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
|
|
<link href="/iphonexsmax_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
|
|
<link href="/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
|
|
<link href="/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
|
|
<link href="/ipadpro3_splash.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
|
|
<link href="/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
|
|
<link rel="me" href="https://fosstodon.org/@semaphore">
|
|
|
|
<!-- inline CSS -->
|
|
|
|
<style id="theBottomNavStyle" media="only x">
|
|
:root {
|
|
--nav-top: calc(100dvh - var(--nav-total-height));
|
|
--nav-bottom: initial;
|
|
--main-content-pad-top: 0px;
|
|
--main-content-pad-bottom: var(--main-content-pad-vertical);
|
|
--toast-gap-bottom: var(--nav-total-height);
|
|
--fab-gap-top: 0px;
|
|
}
|
|
@supports not (height: 1dvh) {
|
|
/* In browsers that don't support dvh, use the large-small-dynamic-viewport-units-polyfill */
|
|
:root {
|
|
--nav-top: calc((100 * var(--1dvh)) - var(--nav-total-height));
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style id="theGrayscaleStyle" media="only x">
|
|
/* Firefox doesn't seem to like applying filter: grayscale() to
|
|
* the entire body, so we apply individually.
|
|
*/
|
|
img, svg, video,
|
|
input[type="checkbox"], input[type="radio"],
|
|
.inline-emoji, .theme-preview, .account-profile {
|
|
filter: grayscale(100%);
|
|
}
|
|
</style>
|
|
|
|
<style id="theFocusVisiblePolyfillStyle" media="only x">
|
|
/* polyfill */
|
|
/* Note we have to use [data-focus-visible-added] rather than .focus-visible because
|
|
* Svelte overrides classes */
|
|
.js-focus-visible :focus:not([data-focus-visible-added]) {
|
|
outline: none !important; /* important to win the specificity war */
|
|
}
|
|
.js-focus-visible :focus:not([data-focus-visible-added]).focus-after::after {
|
|
display: none;
|
|
}
|
|
</style>
|
|
<style id="theFocusVisibleStyle" media="only x">
|
|
/* standard version */
|
|
:focus:not(:focus-visible) {
|
|
outline: none !important; /* important to win the specificity war */
|
|
}
|
|
:focus:not(:focus-visible).focus-after::after {
|
|
display: none;
|
|
}
|
|
</style>
|
|
<style id="theCenterNavStyle" media="only x">
|
|
@media (min-width: 992px) {
|
|
.main-nav-ul {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<noscript>
|
|
<style>
|
|
.hidden-from-ssr {
|
|
opacity: 1 !important;
|
|
}
|
|
</style>
|
|
</noscript>
|
|
|
|
<!-- Sapper generates a <style> tag containing critical CSS
|
|
for the current page. CSS for the rest of the src is
|
|
lazily loaded when it precaches secondary pages -->
|
|
%sapper.styles%
|
|
|
|
<!-- This contains the contents of the <:Head> component, if
|
|
the current page has one -->
|
|
%sapper.head%
|
|
</head>
|
|
<body>
|
|
<!-- inline JS -->
|
|
|
|
<!-- The application will be rendered inside this element,
|
|
because `templates/client.js` references it -->
|
|
<div id='sapper'>%sapper.html%</div>
|
|
|
|
<!-- Toast.html gets rendered here -->
|
|
<div id="theToast"></div>
|
|
|
|
<!-- Snackbar.html gets rendered here -->
|
|
<div id="theSnackbar"></div>
|
|
|
|
<!-- LoadingMask.html gets rendered here -->
|
|
<div id="loading-mask" aria-hidden="true"></div>
|
|
|
|
<!-- announceAriaLivePolite.js gets rendered here -->
|
|
<div id="theAriaLive" class="sr-only" aria-live="polite"></div>
|
|
|
|
<!-- inline SVG -->
|
|
|
|
<!-- Sapper creates a <script> tag containing `templates/client.js`
|
|
and anything else it needs to hydrate the src and
|
|
initialise the router -->
|
|
%sapper.scripts%
|
|
</body>
|
|
</html>
|