-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
365 lines (339 loc) · 14.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://apis.google.com" />
<link rel="preconnect" href="https://content-sheets.googleapis.com" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<title>Astronomy and Astrophysics Outlist</title>
<meta name="description"
content="Outlist and ally list for LGBTQIA+ members in the astronomy and astrophysics community">
<meta name="keywords"
content="outlist, lgbt, lgbtq, lgbtqia, lgbtq+, astronomy, astronomer, astrophysics, astrophysicist, lesbian, gay, bisexual, transgender, queer, intersex, asexual" />
<meta name="creator" content="Yao-Yuan Mao">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@yaoyuanmao" />
<meta property="og:url" content="https://astro-outlist.github.io/" />
<meta property="og:title" content="Astronomy and Astrophysics Outlist" />
<meta property="og:description"
content="Outlist and ally list for LGBTQIA+ members in the astronomy and astrophysics community" />
<meta property="og:image" content="https://astro-outlist.github.io/banner-90s.jpg" />
<meta property="og:image:url" content="https://astro-outlist.github.io/banner-90s.jpg" />
<meta property="og:image:secure_url" content="https://astro-outlist.github.io/banner-90s.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="Astronomy and Astrophysics Outlist 90s Website Banner" />
<meta property="og:type" content="website" />
<link rel="icon" sizes="192x192" href="icon.png">
<link rel="apple-touch-icon" href="icon.png">
<meta name="google-site-verification" content="OoP0puiFUTsizS0hzohiNIHBsR4Z48rJDjhVlTW6lrs">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/2.0.0/modern-normalize.min.css" integrity="sha512-4xo8blKMVCiXpTaLzQSLSw3KFOVPWhm/TRtuPVc4WG6kUgjH6J03IBuG7JZPkcWMxJ5huwaBpOpnwYElP/m6wg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
html, body{
font-family: Inter, Arial, Helvetica, sans-serif;
font-size: 96%;
}
body {
color: #333;
}
a:any-link {
color: #0CB0FF;
}
.content {
max-width: 1020px;
margin: 0 auto;
padding: 0 16px 240px 16px;
}
.row {
padding: 8px 6px;
display: none;
}
.name,
.position {
display: inline-block;
vertical-align: top;
padding: 0 3px;
width: 72%;
}
.name {
width: 25%;
}
.rainbow {
width: 100%;
height: 24px;
top: -1px;
}
.rainbow div {
width: 15.2%;
height: 100%;
float: left;
padding: 0px;
margin: 0;
}
.rainbow > div:nth-child(1), .rainbow > div:nth-child(8) {
width: 4.4%
}
.rainbow > div > div {
width: 25%;
}
nav {
margin-bottom: 24px;
}
.link_block > a {
display: inline-block;
border-right: 1px solid #333;
padding: 0.05em 0.5em 0.05em 0.2em;
}
.link_block > a:first-child {
padding-left: 0;
}
.link_block > a:last-child {
border-right: none;
padding-right: 0;
}
.block {
margin-bottom: 36px;
}
.block p {
margin: 12px 0;
}
@media (max-width: 760px) {
.name,
.position {
width: 100%;
}
}
.table {
border-left: 2px solid #ff8e00;
margin-bottom: 36px;
}
.header {
border-left: 4px solid #ff8e00;
padding-left: 6px;
}
#allylist,
#allylist_table {
border-left-color: #008e00;
}
.count {
margin-left: 0.33em;
}
.wait {
background-color: #eee;
padding: 4px 16px;
margin-bottom: 36px;
}
.annotation {
color: #999;
padding: 1px 4px;
border: 1px solid #999;
white-space: nowrap;
font-size: 80%;
vertical-align: middle;
cursor: help;
}
.position_text {
margin-right: 6px;
}
img {
vertical-align: text-top;
}
.footer {
text-align: center;
font-size: 80%;
}
.show{
display: block;
}
#search_astro_outlist{
display: block;
margin: 2em 0em;
padding: 0.4em;
width:100%;
max-width: 400px;
}
</style>
</head>
<body>
<div class="content">
<div class="rainbow">
<div>
<div style="background-color:#ffafc8;"></div>
<div style="background-color:#74d7ee;"></div>
<div style="background-color:#613915;"></div>
<div style="background-color:#000000;"></div>
</div>
<div style="background-color:#e40303;"></div>
<div style="background-color:#ff8c00;"></div>
<div style="background-color:#ffed00;"></div>
<div style="background-color:#008026;"></div>
<div style="background-color:#004dff;"></div>
<div style="background-color:#750787;"></div>
<div>
<div style="background-color:#000000;"></div>
<div style="background-color:#613915;"></div>
<div style="background-color:#74d7ee;"></div>
<div style="background-color:#ffafc8;"></div>
</div>
</div>
<h1>Astronomy and Astrophysics Outlist</h1>
<nav class="link_block">
<a href="#outlist">Outlist</a>
<a href="#allylist">Ally List</a>
<a href="./signup.html">Join/Update</a>
<a href="90s/">History</a>
<a href="#search" onclick="var e=document.getElementById('search_astro_outlist'); e.scrollIntoView(alignToTop=true); e.focus(); return false;">Search</a>
</nav>
<div class="block">
<p>As professionals in astronomy and astrophysics, whether we are students, faculty, staff, librarians or are
working in other positions,
we all like to believe that our work environment is determined only by our capabilities as students and
researchers,
and that it is free from personal bias. A productive professional atmosphere depends on open and accepting
interactions
of individuals free from discrimination and harassment.</p>
<p>As openly lesbian, gay, bisexual, transgender, queer, intersex, asexual, and other gender/sexual minorities
(LGBTQIA+)
members of the astronomical community, we strongly believe that there is no place for discrimination based on
sexual
orientation/preference or gender identity/expression. We want to actively maintain and promote a safe, accepting
and supportive environment in all our work places. We invite other LGBTQIA+ members of the astronomical
community
to join us in being visible and to reach out to those who still feel that it is not yet safe for them to be
public.</p>
<p>As experts, TAs, instructors, professors and technical staff, we serve as professional role models every day.
Let us
also become positive examples of members of the LGBTQIA+ community at large.</p>
<p>We also invite everyone in our community, regardless how you identify yourself, to work to be an ally and make
visible your acceptance of LGBTQIA+ people.
We urge you to make visible (and audible) your objections to derogatory comments and "jokes" about LGBTQIA+
people.</p>
<p>In the light of the above statements, we, your fellow students, alumni/ae, faculty, coworkers, and friends,
sign this
message.
</p>
</div>
<div class="block">
<p>
<b>Please
<a href="./signup.html">fill
out this form <img src="static/ic_edit.png" /></a>
to add yourself to the lists or to update/remove your information.</b>
</p>
<p>The information you provided will be sent to current maintainers:
<a href="https://yymao.github.io/">Yao‑Yuan Mao</a> (Utah) and
<a href="https://web.physics.ucsb.edu/~blaes">Omer Blaes</a> (UCSB).
You can also reach us at
<span style="display: inline-block;"><img src="static/ic_email.png" /> <a href="mailto:[email protected]">[email protected]</a>.</span>
</p>
<p>We very much appreciate your help with
advertising this site on social media, your personal website,
and/or your department's mailing list!</p>
<p class="link_block">Relevent sites:
<a href="https://sgma.aas.org/">AAS SGMA</a>
<a href="http://lgbtphysicists.org/">LGBT+ Physicists</a>
<a href="http://lgbtmath.org/">LGBT+ Mathematicians</a>
<a href="https://500queerscientists.com/">500 Queer Scientists</a>
<a href="https://arxiv.org/abs/1804.08406">LGBT+ Inclusivity Best Practices</a>
</p>
</div>
<a name="search"></a>
<input id="search_astro_outlist" type="search" placeholder="🔍 Type to search the lists" disabled>
<h2 id="outlist" class="header">The Outlist <span id="outlist_count" class="count"></span></h2>
<div id="outlist_table" class="table"></div>
<div id="outlist_wait" class="wait">
<h3>The Outlist is being generated...</h3>
<p>If the list does not show up within a few seconds, please check that Javascript is enabled in browser settings, and then refresh this page. Alternatively, you can <a
href="https://docs.google.com/spreadsheets/d/e/2PACX-1vQDYnG3wS158-G5Samp4opJzM0mCWEyhTtZw-4liCpN4inZ9aXo0XnGD3JpYA0DwS3uzpEt5tNDuTRe/pubhtml?gid=1407953020&single=true">view the Outlist here</a> (though not formatted prettily). You can still <a href="./signup.html">join the list</a> as usual.</p>
</div>
<h2 id="allylist" class="header">The Ally List <span id="allylist_count" class="count"></span></h2>
<div id="allylist_table" class="table"></div>
<div id="allylist_wait" class="wait">
<h3>The Ally List is being generated...</h3>
<p>If the list does not show up within a few seconds, please check that Javascript is enabled in browser settings, and then refresh this page. Alternatively, you can <a
href="https://docs.google.com/spreadsheets/d/e/2PACX-1vQDYnG3wS158-G5Samp4opJzM0mCWEyhTtZw-4liCpN4inZ9aXo0XnGD3JpYA0DwS3uzpEt5tNDuTRe/pubhtml?gid=1888211415&single=true">view the Ally List here</a> (though not formatted prettily). You can still <a href="./signup.html">join the list</a> as usual.</p>
</div>
<div class="footer">
Made by <a href="https://yymao.github.io/">Yao-Yuan Mao</a>. This site uses <a href="https://developers.cloudflare.com/analytics/web-analytics">Cloudflare Web Analytics</a>.
</div>
</div>
<script src="https://apis.google.com/js/api.js"></script>
<script>
const listnames = ["outlist", "allylist"];
const formatRow = function (row_raw) {
// 0:lastupdated, 1:firstname, 2:lastname, 3:position, 4:website, 5:email, 6:nonbinary
const row = row_raw.map(x => x.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"));
var html = "<div class='row show'><div class='name'>";
html += row[1] + " " + row[2];
if (row[5]) html += " <a href='mailto:" + row[5] + "' title='" + row[5] + "'><img src='static/ic_email.png'/></a>";
if (row[4]) html += " <a href='" + row[4] + "' title='" + row[4] + "'><img src='static/ic_web.png'/></a>";
html += "</div> <div class='position'><span class='position_text'>" + row[3] + "</span>";
if (row[6]) html += " <span class='annotation' title='Including transgender, nonbinary, genderqueer, and other non-cisgender identities'>Non-binary/non-cis</span>";
if (row[0]) html += " <span class='annotation' title='Last updated date'>" + row[0] + "</span>";
html += "</div></div>";
return html;
};
const renderData = function(listname, data_array, count_adjust = 0){
document.getElementById(listname + "_table").innerHTML = data_array.map(formatRow).join("");
document.getElementById(listname + "_wait").setAttribute("style", "display:none;");
};
const showRow = function(row){
row.classList.add("show");
};
const hideRow = function(row){
row.classList.remove("show");
};
const setCountAndRowColors = function(listname){
var rows = document.querySelectorAll("#" + listname + "_table > .show");
rows.forEach((row, i) => {
row.dataset.color = (i % 2) ? "#fff" : "#eee";
row.style.backgroundColor = row.dataset.color;
});
var count = rows.length;
document.getElementById(listname + "_count").innerHTML = "(" + count + " entr" + (count == 1 ? "y":"ies") + ")";
};
const filterData = function(text){
if (text && text.trim()){
var t = text.toLowerCase();
document.querySelectorAll(".row").forEach((row) => {
if (row.textContent.toLowerCase().indexOf(t) > -1) { showRow(row); }
else { hideRow(row); }
});
}
else{
document.querySelectorAll(".row").forEach(showRow);
}
listnames.forEach(setCountAndRowColors);
};
const main = function(response){
listnames.forEach((listname, i) => {
var data = response.result.valueRanges[i].values;
if (!i) data.push(["", "", "", "This space left blank for those who feel they cannot yet come out due to societal fear and ignorance."]);
renderData(listname, data);
setCountAndRowColors(listname);
});
document.querySelectorAll(".row").forEach((row) => {
row.addEventListener("mouseenter", () => {row.style.backgroundColor = "#ddd";});
row.addEventListener("mouseleave", () => {row.style.backgroundColor = row.dataset.color;});
});
var search_box = document.getElementById("search_astro_outlist");
search_box.addEventListener("input", () => {filterData(search_box.value);});
search_box.disabled = false;
};
gapi.load('client', function(){
gapi.client.init({
apiKey: 'AIzaSyAVpCwgT1MqDEsntmyaqHhgGMpXFa04bg0',
discoveryDocs: ['https://sheets.googleapis.com/$discovery/rest?version=v4'],
}).then(function(){
gapi.client.sheets.spreadsheets.values.batchGet({
spreadsheetId: "1hgBsfaKogTvGHQ9NP8H-FJDgBZ-AR07ffUzBFs3VjFc",
ranges: ["outlist!A2:G1000", "allylist!A2:F1000"],
}).then(main);
});
});
</script>
<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "fb4031b6dbab444395b4edfe2c5de763"}'></script>
</body>
</html>