2018-12-18 01:21:29 +00:00
<!doctype html>
2020-11-29 22:13:27 +00:00
< html lang = "{process.env.LOCALE}" dir = "{process.env.LOCALE_DIRECTION}" >
2018-12-18 01:21:29 +00:00
< head >
< meta charset = 'utf-8' >
2022-04-10 18:34:56 +01:00
< meta name = "viewport" content = "width=device-width" >
2018-12-18 01:21:29 +00:00
< meta id = 'theThemeColor' name = 'theme-color' content = '#4169e1' >
2020-11-29 22:13:27 +00:00
< meta name = "description" content = "{intl.appDescription}" >
2018-12-18 01:21:29 +00:00
%sapper.base%
< link id = 'theManifest' rel = 'manifest' href = '/manifest.json' >
< link id = 'theFavicon' rel = 'icon' type = 'image/png' href = '/favicon.png' >
2019-05-14 05:45:38 +01:00
< link rel = "apple-touch-icon" href = "/apple-icon.png" >
2020-06-26 03:09:27 +01:00
<!-- 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/ -->
2018-12-18 01:21:29 +00:00
< meta name = "mobile-web-app-capable" content = "yes" >
2020-06-26 03:09:27 +01:00
< meta name = "apple-mobile-web-app-capable" content = "yes" >
2022-04-10 18:34:56 +01:00
< meta name = "apple-mobile-web-app-title" content = "{intl.appName}" >
2022-04-10 19:25:29 +01:00
< meta name = "apple-mobile-web-app-status-bar-style" content = "default" >
2022-04-10 18:34:56 +01:00
<!-- 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" / >
2023-01-10 14:21:38 +00:00
< link rel = "me" href = "https://fosstodon.org/@semaphore" >
2018-12-18 01:21:29 +00:00
<!-- inline CSS -->
2022-11-19 18:13:57 +00:00
< style id = "theBottomNavStyle" media = "only x" >
:root {
2022-11-24 23:24:29 +00:00
--nav-top: calc(100dvh - var(--nav-total-height));
--nav-bottom: initial;
2022-11-19 18:13:57 +00:00
--main-content-pad-top: 0px;
--main-content-pad-bottom: var(--main-content-pad-vertical);
2022-11-20 19:50:38 +00:00
--toast-gap-bottom: var(--nav-total-height);
2022-11-22 02:53:25 +00:00
--fab-gap-top: 0px;
2022-11-19 18:13:57 +00:00
}
2022-11-24 23:24:29 +00:00
@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));
}
}
2022-11-19 18:13:57 +00:00
< / style >
2019-06-01 23:51:46 +01:00
< 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"],
2023-01-09 15:55:41 +00:00
.inline-emoji, .theme-preview, .account-profile {
2019-06-01 23:51:46 +01:00
filter: grayscale(100%);
}
< / style >
2021-05-15 01:54:22 +01:00
< style id = "theFocusVisiblePolyfillStyle" media = "only x" >
2020-05-16 21:36:08 +01:00
/* polyfill */
2020-05-16 22:25:12 +01:00
/* 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]) {
2020-05-16 21:36:08 +01:00
outline: none !important; /* important to win the specificity war */
}
2020-05-16 22:25:12 +01:00
.js-focus-visible :focus:not([data-focus-visible-added]).focus-after::after {
2020-05-16 21:36:08 +01:00
display: none;
}
2021-05-15 01:54:22 +01:00
< / style >
< style id = "theFocusVisibleStyle" media = "only x" >
2020-05-16 21:36:08 +01:00
/* 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 >
2022-04-26 02:36:29 +01:00
< style id = "theCenterNavStyle" media = "only x" >
@media (min-width: 992px) {
.main-nav-ul {
justify-content: center;
}
}
< / style >
2020-05-16 21:36:08 +01:00
2018-12-18 01:21:29 +00:00
< 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 -->
2018-12-22 23:37:51 +00:00
< div id = "theToast" > < / div >
2018-12-18 01:21:29 +00:00
2019-05-08 15:52:12 +01:00
<!-- Snackbar.html gets rendered here -->
< div id = "theSnackbar" > < / div >
2018-12-18 01:21:29 +00:00
<!-- LoadingMask.html gets rendered here -->
< div id = "loading-mask" aria-hidden = "true" > < / div >
2022-11-12 17:47:02 +00:00
<!-- announceAriaLivePolite.js gets rendered here -->
< div id = "theAriaLive" class = "sr-only" aria-live = "polite" > < / div >
2018-12-18 01:21:29 +00:00
<!-- 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 >