diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html index 0bde22e77c..b5f504904f 100644 --- a/bskyweb/templates/base.html +++ b/bskyweb/templates/base.html @@ -68,11 +68,19 @@ width: 100%; } #splash { + display: flex; position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + align-items: center; + justify-content: center; + } + #splash svg { + position: relative; + top: -50px; width: 100px; - left: 50%; - top: 50%; - transform: translateX(-50%) translateY(-50%) translateY(-50px); } /** * We need these styles to prevent shifting due to scrollbar show/hide on @@ -106,7 +114,7 @@
- +
diff --git a/src/Splash.web.tsx b/src/Splash.web.tsx index edfa3497fb..eb4a405c85 100644 --- a/src/Splash.web.tsx +++ b/src/Splash.web.tsx @@ -1,3 +1,9 @@ +/* + * This is a reimplementation of what exists in our HTML template files + * already. Once the React tree mounts, this is what gets rendered first, until + * the app is ready to go. + */ + import {View} from 'react-native' import Svg, {Path} from 'react-native-svg'