bas.sh
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Fix web splash (#5456)
* Fix web splash
* Untangle base styles
* Fix id name, remove log
authored by
Eric Bailey
and committed by
GitHub
e1ee95a7
b77031a0
+121
-71
+48
-1
bskyweb/templates/base.html
+48
-1
bskyweb/templates/base.html
···
32
32
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf">
33
33
-->
34
34
35
+
<style>
36
+
/**
37
+
* Minimum styles required to render splash.
38
+
*
39
+
* ALL OTHER STYLES BELONG IN `src/style.css`
40
+
*
41
+
* THIS NEEDS TO BE DUPLICATED IN `bskyweb/templates/base.html`
42
+
*/
43
+
html {
44
+
background-color: white;
45
+
scrollbar-gutter: stable both-edges;
46
+
}
47
+
@media (prefers-color-scheme: dark) {
48
+
html {
49
+
background-color: black;
50
+
}
51
+
}
52
+
html,
53
+
body {
54
+
margin: 0px;
55
+
padding: 0px;
56
+
font-family: 'Inter-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif;
57
+
text-rendering: optimizeLegibility;
58
+
/* Platform-specific reset */
59
+
-webkit-overflow-scrolling: touch;
60
+
-webkit-text-size-adjust: 100%;
61
+
-webkit-font-smoothing: antialiased;
62
+
-moz-osx-font-smoothing: grayscale;
63
+
-ms-overflow-style: scrollbar;
64
+
font-synthesis-weight: none;
65
+
}
66
+
html,
67
+
body,
68
+
#root {
69
+
display: flex;
70
+
flex: 1 0 auto;
71
+
min-height: 100%;
72
+
}
73
+
#splash {
74
+
position: fixed;
75
+
width: 100px;
76
+
left: 50%;
77
+
top: 50%;
78
+
transform: translateX(-50%) translateY(-50%) translateY(-50px);
79
+
}
80
+
</style>
81
+
35
82
{% include "scripts.html" %}
36
83
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
37
84
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
···
48
95
<body>
49
96
{%- block body_all %}
50
97
<div id="root">
51
-
<div id="preload">
98
+
<div id="splash">
52
99
<!-- Bluesky SVG -->
53
100
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 320"><path fill="#0085ff" d="M180 142c-16.3-31.7-60.7-90.8-102-120C38.5-5.9 23.4-1 13.5 3.4 2.1 8.6 0 26.2 0 36.5c0 10.4 5.7 84.8 9.4 97.2 12.2 41 55.7 55 95.7 50.5-58.7 8.6-110.8 30-42.4 106.1 75.1 77.9 103-16.7 117.3-64.6 14.3 48 30.8 139 116 64.6 64-64.6 17.6-97.5-41.1-106.1 40 4.4 83.5-9.5 95.7-50.5 3.7-12.4 9.4-86.8 9.4-97.2 0-10.3-2-27.9-13.5-33C336.5-1 321.5-6 282 22c-41.3 29.2-85.7 88.3-102 120Z"/></svg>
54
101
</div>
+25
-69
src/style.css
+25
-69
src/style.css
···
1
+
/**
2
+
* IMPORTANT
3
+
*
4
+
* Some of these styles are duplicated in the `web/index.html` and
5
+
* `bskyweb/templates/base.html` files. Depending on what you're updating, you
6
+
* may need to touch all three. Ask Eric if you aren't sure.
7
+
*/
8
+
1
9
@font-face {
2
10
font-family: 'Inter-Regular';
3
11
src: local('Inter-Regular'),
···
96
104
*/
97
105
98
106
/**
99
-
* Extend the react-native-web reset:
100
-
* https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js
107
+
* BEGIN STYLES
108
+
*
109
+
* HTML & BODY STYLES IN `web/index.html` and `bskyweb/templates/base.html`
101
110
*/
102
-
html,
103
-
body,
104
-
#root {
105
-
width: 100%;
106
-
/* To smooth any scrolling behavior */
107
-
-webkit-overflow-scrolling: touch;
108
-
margin: 0px;
109
-
padding: 0px;
110
-
/* Allows content to fill the viewport and go beyond the bottom */
111
-
min-height: 100%;
112
-
}
113
-
#root {
114
-
flex-shrink: 0;
115
-
flex-basis: auto;
116
-
flex-grow: 1;
117
-
display: flex;
118
-
flex: 1;
119
-
}
120
-
121
-
html {
122
-
/* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */
123
-
-webkit-text-size-adjust: 100%;
124
-
height: calc(100% + env(safe-area-inset-top));
125
-
scrollbar-gutter: stable both-edges;
126
-
}
127
-
html,
128
-
body {
129
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
130
-
'Liberation Sans', Helvetica, Arial, sans-serif;
131
-
}
132
-
133
-
#preload {
134
-
width: 100px;
135
-
position: fixed;
136
-
left: 50%;
137
-
top: 50%;
138
-
transform: translate(-50%, -50%);
139
-
}
140
-
141
-
/* Buttons and inputs have a font set by UA, so we'll have to reset that */
142
-
button,
143
-
input,
144
-
textarea {
145
-
font: inherit;
146
-
line-height: inherit;
147
-
}
148
-
149
-
/* Color theming */
150
-
/* Default will always be white */
151
111
:root {
152
112
--text: black;
153
113
--background: white;
154
114
--backgroundLight: hsl(211, 20%, 95%);
155
115
}
156
-
/* This gives us a black background when system is dark and we have not loaded the theme/color scheme values in JS */
157
116
@media (prefers-color-scheme: dark) {
158
117
:root {
118
+
color-scheme: dark;
159
119
--text: white;
160
120
--background: black;
161
121
--backgroundLight: hsl(211, 20%, 20%);
162
-
color-scheme: dark;
163
122
}
164
123
}
165
124
166
-
/* Overwrite those preferences with the selected theme */
167
125
html.theme--light {
168
126
--text: black;
169
127
--background: white;
170
128
--backgroundLight: hsl(211, 20%, 95%);
129
+
background-color: white;
171
130
}
172
131
html.theme--dark {
132
+
color-scheme: dark;
133
+
background-color: black;
173
134
--text: white;
174
135
--background: black;
175
136
--backgroundLight: hsl(211, 20%, 20%);
176
-
color-scheme: dark;
177
137
}
178
138
html.theme--dim {
139
+
color-scheme: dark;
140
+
background-color: hsl(211, 28%, 12%);
179
141
--text: white;
180
142
--background: hsl(211, 20%, 4%);
181
143
--backgroundLight: hsl(211, 20%, 10%);
182
-
color-scheme: dark;
144
+
}
145
+
146
+
/* Buttons and inputs have a font set by UA, so we'll have to reset that */
147
+
button,
148
+
input,
149
+
textarea {
150
+
font: inherit;
151
+
line-height: inherit;
183
152
}
184
153
185
154
/* Remove autofill styles on Webkit */
···
198
167
/* Force left-align date/time inputs on iOS mobile */
199
168
input::-webkit-date-and-time-value {
200
169
text-align: left;
201
-
}
202
-
203
-
body {
204
-
display: flex;
205
-
/* Allows you to scroll below the viewport; default value is visible */
206
-
overflow-y: auto;
207
-
overscroll-behavior-y: none;
208
-
text-rendering: optimizeLegibility;
209
-
background-color: var(--background);
210
-
-webkit-font-smoothing: antialiased;
211
-
-moz-osx-font-smoothing: grayscale;
212
-
-ms-overflow-style: scrollbar;
213
-
font-synthesis-weight: none;
214
170
}
215
171
216
172
/* Remove default link styling */
+48
-1
web/index.html
+48
-1
web/index.html
···
36
36
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Black.66e9a87f1c921e844ed4.otf">
37
37
<link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf">
38
38
-->
39
+
40
+
<style>
41
+
/**
42
+
* Minimum styles required to render splash.
43
+
*
44
+
* ALL OTHER STYLES BELONG IN `src/style.css`
45
+
*
46
+
* THIS NEEDS TO BE DUPLICATED IN `bskyweb/templates/base.html`
47
+
*/
48
+
html {
49
+
background-color: white;
50
+
scrollbar-gutter: stable both-edges;
51
+
}
52
+
@media (prefers-color-scheme: dark) {
53
+
html {
54
+
background-color: black;
55
+
}
56
+
}
57
+
html,
58
+
body {
59
+
margin: 0px;
60
+
padding: 0px;
61
+
font-family: 'Inter-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif;
62
+
text-rendering: optimizeLegibility;
63
+
/* Platform-specific reset */
64
+
-webkit-overflow-scrolling: touch;
65
+
-webkit-text-size-adjust: 100%;
66
+
-webkit-font-smoothing: antialiased;
67
+
-moz-osx-font-smoothing: grayscale;
68
+
-ms-overflow-style: scrollbar;
69
+
font-synthesis-weight: none;
70
+
}
71
+
html,
72
+
body,
73
+
#root {
74
+
display: flex;
75
+
flex: 1 0 auto;
76
+
min-height: 100%;
77
+
}
78
+
#splash {
79
+
position: fixed;
80
+
width: 100px;
81
+
left: 50%;
82
+
top: 50%;
83
+
transform: translateX(-50%) translateY(-50%) translateY(-50px);
84
+
}
85
+
</style>
39
86
</head>
40
87
41
88
<body>
···
90
137
91
138
<!-- The root element for your Expo app. -->
92
139
<div id="root">
93
-
<div id="preload">
140
+
<div id="splash">
94
141
<!-- Bluesky SVG -->
95
142
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 320"><path fill="#0085ff" d="M180 142c-16.3-31.7-60.7-90.8-102-120C38.5-5.9 23.4-1 13.5 3.4 2.1 8.6 0 26.2 0 36.5c0 10.4 5.7 84.8 9.4 97.2 12.2 41 55.7 55 95.7 50.5-58.7 8.6-110.8 30-42.4 106.1 75.1 77.9 103-16.7 117.3-64.6 14.3 48 30.8 139 116 64.6 64-64.6 17.6-97.5-41.1-106.1 40 4.4 83.5-9.5 95.7-50.5 3.7-12.4 9.4-86.8 9.4-97.2 0-10.3-2-27.9-13.5-33C336.5-1 321.5-6 282 22c-41.3 29.2-85.7 88.3-102 120Z"/></svg>
96
143
</div>