Skip to Content

Wiki source code of Enable

Version 29.10 by Veronika Kocher on Thursday, 03 Sep 2026 13:04
Hide last authors
Veronika Kocher 22.1 1 {{html clean="false"}}
Veronika Kocher 28.1 2
Veronika Kocher 23.1 3 <style>
Veronika Kocher 28.1 4 .arsn-phase {
Veronika Kocher 23.1 5 max-width: 1400px;
6 margin: 0 auto;
7 color: #322f2b;
8 }
Veronika Kocher 16.1 9
Veronika Kocher 28.1 10 .arsn-phase * {
Veronika Kocher 23.1 11 box-sizing: border-box;
12 }
13
14 .arsn-eyebrow {
15 font-size: 12px;
16 font-weight: 700;
17 letter-spacing: .075em;
18 text-transform: uppercase;
19 }
20
21 .arsn-card {
22 border-radius: 11px;
23 box-shadow: 0 1px 3px rgba(0,0,0,.035);
24 }
25
Veronika Kocher 28.1 26 .arsn-hero-image {
27 height: 138px;
28 overflow: hidden;
29 border-radius: 11px 11px 0 0;
30 background: #f1eee9;
31 }
32
33 .arsn-hero-image img {
34 width: 100%;
35 height: 100%;
36 object-fit: cover;
37 display: block;
38 }
39
40 .arsn-progress {
41 position: relative;
42 display: grid;
43 grid-template-columns: repeat(3, minmax(0,1fr));
44 gap: 14px;
45 margin: 0 0 26px 0;
46 padding: 4px 0 0 0;
47 }
48
49 .arsn-progress:before {
50 content: "";
51 position: absolute;
52 top: 21px;
53 left: 9%;
54 right: 9%;
55 height: 2px;
56 background: #e9cfc2;
57 z-index: 0;
58 }
59
60 .arsn-step {
61 position: relative;
62 z-index: 1;
63 text-align: center;
64 }
65
66 .arsn-step-dot {
67 width: 14px;
68 height: 14px;
69 margin: 0 auto 7px auto;
70 border-radius: 50%;
71 border: 3px solid #fff;
72 box-shadow: 0 0 0 1px #d5cfc7;
73 background: #d8d2ca;
74 }
75
76 .arsn-step.active .arsn-step-dot {
77 background: #e94b13;
78 box-shadow: 0 0 0 1px #e94b13;
79 }
80
81 .arsn-step.done .arsn-step-dot {
82 background: #8c837a;
83 box-shadow: 0 0 0 1px #8c837a;
84 }
85
86 .arsn-step-label {
87 font-size: 11px;
88 font-weight: 700;
89 letter-spacing: .06em;
90 color: #746d65;
91 }
92
93 .arsn-step.active .arsn-step-label {
94 color: #7d4a37;
95 }
96
97 .arsn-step-desc {
98 margin-top: 3px;
99 font-size: 13px;
100 color: #6a655e;
101 }
102
103 .arsn-focus-grid {
104 display: grid;
105 grid-template-columns: repeat(3, minmax(230px,1fr));
106 gap: 12px;
107 }
108
109 .arsn-focus-group {
110 padding: 13px 14px;
111 background: rgba(255,255,255,.52);
112 border: 1px solid #cfe8ef;
113 border-radius: 8px;
114 }
115
116 .arsn-focus-group strong {
117 display: block;
118 margin-bottom: 6px;
119 color: #2f5661;
120 }
121
122 .arsn-focus-group ul {
123 margin: 0 0 0 17px;
124 padding: 0;
125 color: #365862;
126 }
127
128 .arsn-focus-group li {
129 margin: 4px 0;
130 }
131
132 .arsn-outcome-grid {
133 display: grid;
134 grid-template-columns: repeat(auto-fit, minmax(230px,1fr));
135 gap: 10px;
136 }
137
138 .arsn-outcome {
139 position: relative;
140 padding: 12px 13px 12px 36px;
141 background: #fcfbf8;
142 border: 1px solid #e3ded6;
143 border-radius: 8px;
144 color: #4f4a44;
145 }
146
147 .arsn-outcome:before {
148 content: "✓";
149 position: absolute;
150 left: 13px;
151 top: 10px;
152 color: #e94b13;
153 font-weight: 800;
154 }
155
Veronika Kocher 23.1 156 .arsn-area-grid {
157 display: grid;
Veronika Kocher 28.1 158 grid-template-columns: repeat(auto-fit, minmax(310px,1fr));
Veronika Kocher 23.1 159 gap: 18px;
160 align-items: stretch;
161 }
162
163 .arsn-area {
164 display: flex;
165 flex-direction: column;
166 overflow: hidden;
Veronika Kocher 24.1 167 border: 1px solid #e3ded6;
Veronika Kocher 23.1 168 border-radius: 11px;
Veronika Kocher 24.1 169 background: #fcfbf8;
Veronika Kocher 23.1 170 box-shadow: 0 1px 3px rgba(0,0,0,.035);
171 }
172
173 .arsn-area-head {
174 padding: 18px 19px 12px 19px;
175 }
176
177 .arsn-area-body {
178 padding: 3px 19px 19px 19px;
179 }
180
181 .arsn-area-label {
Veronika Kocher 28.1 182 display: inline-flex;
183 align-items: center;
184 gap: 7px;
Veronika Kocher 23.1 185 padding: 5px 8px;
186 margin-bottom: 9px;
187 border-radius: 5px;
188 font-size: 12px;
189 font-weight: 700;
190 letter-spacing: .065em;
191 }
192
Veronika Kocher 28.1 193 .arsn-area-number {
194 opacity: .72;
195 }
196
197 .arsn-area-action {
198 margin-left: 2px;
199 font-weight: 600;
200 opacity: .74;
201 letter-spacing: .02em;
202 text-transform: none;
203 }
204
Veronika Kocher 23.1 205 .arsn-area h4 {
206 font-size: 19px;
207 line-height: 1.3;
208 margin: 0 0 7px 0;
209 color: #2f2b27;
210 }
211
212 .arsn-area p {
213 margin: 0;
214 line-height: 1.5;
215 color: #625d56;
216 }
217
218 .arsn-topic {
219 display: block;
220 margin: 6px 0;
221 padding: 10px 11px;
Veronika Kocher 24.1 222 border: 1px solid #e9e4dc;
Veronika Kocher 23.1 223 border-radius: 6px;
Veronika Kocher 25.1 224 background: #fffdf9;
Veronika Kocher 23.1 225 color: #252321;
226 text-decoration: none;
227 font-weight: 600;
228 transition: transform .08s ease, box-shadow .08s ease, background .08s ease;
229 }
230
231 .arsn-topic:hover,
232 .arsn-topic:focus {
Veronika Kocher 25.1 233 background: #fff7f1;
Veronika Kocher 23.1 234 text-decoration: none;
235 transform: translateY(-1px);
236 box-shadow: 0 2px 5px rgba(0,0,0,.06);
237 }
238
239 .arsn-resource-grid {
240 display: grid;
241 grid-template-columns: repeat(auto-fit, minmax(230px,1fr));
242 gap: 12px;
243 }
244
Veronika Kocher 28.1 245 .arsn-related-grid {
246 display: grid;
247 grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
248 gap: 8px;
249 }
250
251 .arsn-related-link {
252 display: block;
253 padding: 9px 10px;
254 border: 1px solid #e9e4dc;
255 border-left: 3px solid #e94b13;
256 border-radius: 6px;
257 background: #fffdf9;
258 color: #252321;
259 text-decoration: none;
260 font-weight: 600;
261 }
262
263 .arsn-related-link:hover,
264 .arsn-related-link:focus {
265 background: #fff7f1;
266 text-decoration: none;
267 }
268
269 .arsn-tip {
270 padding: 12px 15px;
271 border: 1px solid #c7e5ed;
272 border-left: 4px solid #21b6d7;
273 background: #eaf6f9;
274 border-radius: 7px;
275 color: #365e68;
276 font-size: 13px;
277 }
278
279 .arsn-tip strong {
280 color: #2d5661;
281 }
282
283 @media (max-width: 800px) {
Veronika Kocher 23.1 284 .arsn-focus-grid {
Veronika Kocher 28.1 285 grid-template-columns: 1fr;
Veronika Kocher 23.1 286 }
287 }
Veronika Kocher 28.1 288
289 @media (max-width: 700px) {
290 .arsn-progress:before {
291 display: none;
292 }
293 .arsn-progress {
294 grid-template-columns: 1fr;
295 gap: 8px;
296 }
297 .arsn-step {
298 text-align: left;
299 display: grid;
300 grid-template-columns: 24px 1fr;
301 column-gap: 8px;
302 align-items: center;
303 }
304 .arsn-step-dot {
305 margin: 0;
306 }
307 .arsn-step-desc {
308 grid-column: 2;
309 }
310 }
Veronika Kocher 23.1 311 </style>
312
Veronika Kocher 28.1 313 <div class="arsn-phase">
Veronika Kocher 23.1 314
Veronika Kocher 28.1 315 <section class="arsn-card" style="margin:0 0 18px 0;border:1px solid #e3ded6;border-left:6px solid #e94b13;background:#fcfbf8;overflow:hidden;">
316 <div class="arsn-hero-image">
Veronika Kocher 29.1 317 <img src="https://xwiki.uni-ak.ac.at/bin/download/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/WebHome/enable.png" alt="Enable — planning and setting up an artistic or research project" />
Veronika Kocher 22.1 318 </div>
Veronika Kocher 28.1 319 <div style="padding:18px 22px 21px 22px;">
320 <div class="arsn-eyebrow" style="color:#8a4d36;margin-bottom:6px;">PROJECT PHASE 1 · ENABLE</div>
321 <h2 style="font-size:28px;line-height:1.18;margin:0 0 9px 0;color:#2c2926;">I develop my project idea — I plan, fund &amp; set up my project</h2>
322 <p style="font-size:15px;line-height:1.58;color:#5e5953;max-width:1080px;margin:0;">
323 Before active project work begins, clarify how the project will be organised, funded and supported,
324 what materials and research outputs are expected, and how rights, responsibilities, infrastructure
325 and data management will be handled from the start.
326 </p>
327 </div>
328 </section>
Veronika Kocher 16.1 329
Veronika Kocher 28.1 330 <div class="arsn-progress">
Veronika Kocher 16.1 331
Veronika Kocher 28.1 332 <div class="arsn-step active">
333 <div class="arsn-step-dot"></div>
334 <div class="arsn-step-label">1 · ENABLE</div>
335 <div class="arsn-step-desc">Plan & set up</div>
Veronika Kocher 22.1 336 </div>
Veronika Kocher 16.1 337
Veronika Kocher 28.1 338 <div class="arsn-step">
339 <div class="arsn-step-dot"></div>
340 <div class="arsn-step-label">2 · WORK & MANAGE</div>
341 <div class="arsn-step-desc">Run & document</div>
Veronika Kocher 22.1 342 </div>
Veronika Kocher 16.1 343
Veronika Kocher 28.1 344 <div class="arsn-step">
345 <div class="arsn-step-dot"></div>
346 <div class="arsn-step-label">3 · PUBLISH & SHARE</div>
347 <div class="arsn-step-desc">Publish, preserve & hand over</div>
Veronika Kocher 22.1 348 </div>
Veronika Kocher 28.1 349 </div>
Veronika Kocher 16.1 350
Veronika Kocher 28.1 351 <section class="arsn-card" style="margin:0 0 22px 0;padding:19px 21px;background:#eaf6f9;border:1px solid #cfe8ef;border-left:5px solid #21b6d7;">
Veronika Kocher 25.1 352 <div class="arsn-eyebrow" style="color:#3f6871;margin-bottom:5px;">RIGHT NOW</div>
353 <h3 style="font-size:22px;margin:0 0 8px 0;color:#2f4e56;">What should I be focusing on now?</h3>
Veronika Kocher 28.1 354 <p style="margin:0 0 15px 0;color:#49636a;">You do not need every detail fixed before you start. You do need enough shared decisions to make the project workable, responsible and easy to continue.</p>
Veronika Kocher 16.1 355
Veronika Kocher 28.1 356 <div class="arsn-focus-grid">
357 <div class="arsn-focus-group">
358 <strong>Project</strong>
359 <ul>
360 <li>What is the scope, and who is responsible for which decisions?</li>
361 <li>Which funding opportunities and funder requirements apply?</li>
362 <li>What data, materials and outputs will be created, collected or reused?</li>
363 <li>Do I need a Data Management Plan?</li>
364 </ul>
365 </div>
Veronika Kocher 17.1 366
Veronika Kocher 28.1 367 <div class="arsn-focus-group">
368 <strong>Rights & responsibilities</strong>
369 <ul>
370 <li>Which copyright, permissions or licences need to be clarified?</li>
371 <li>Will personal, sensitive, confidential or ethically complex materials be involved?</li>
372 <li>Which decisions should be documented from the beginning?</li>
373 <li>Who will be responsible for shared accounts, access and handover?</li>
374 </ul>
375 </div>
376
377 <div class="arsn-focus-group">
378 <strong>Working setup</strong>
379 <ul>
380 <li>How should files and folders be organised and named?</li>
381 <li>Where will materials be stored and backed up?</li>
382 <li>Who should have access?</li>
383 <li>Which infrastructure, services and tools are appropriate?</li>
384 </ul>
385 </div>
Veronika Kocher 22.1 386 </div>
387 </section>
Veronika Kocher 17.1 388
Veronika Kocher 28.1 389 <section style="margin:0 0 28px 0;">
390 <div class="arsn-eyebrow" style="color:#8a4d36;margin-bottom:5px;">BY THE END OF THIS PHASE</div>
391 <h3 style="font-size:21px;margin:0 0 10px 0;color:#35312d;">You should have a workable project setup</h3>
392 <div class="arsn-outcome-grid">
393 <div class="arsn-outcome">a clear project scope and named responsibilities</div>
394 <div class="arsn-outcome">a basic plan for data, materials and expected outputs</div>
395 <div class="arsn-outcome">key rights, ethics and protection issues identified</div>
396 <div class="arsn-outcome">agreed storage, backup, access and collaboration arrangements</div>
397 </div>
398 </section>
399
Veronika Kocher 23.1 400 <div style="margin:0 0 15px 0;">
Veronika Kocher 25.1 401 <div class="arsn-eyebrow" style="color:#8a4d36;margin-bottom:4px;">EXPLORE THIS PHASE</div>
Veronika Kocher 23.1 402 <h3 style="font-size:24px;margin:0 0 5px 0;color:#35312d;">Four areas to get your project ready</h3>
Veronika Kocher 28.1 403 <p style="margin:0;color:#6a655e;">Start with the area that matches what you need to decide or set up now.</p>
Veronika Kocher 22.1 404 </div>
Veronika Kocher 17.1 405
Veronika Kocher 23.1 406 <div class="arsn-area-grid" style="margin-bottom:30px;">
Veronika Kocher 26.1 407 <section class="arsn-area" style="border-top:4px solid #21b6d7;">
Veronika Kocher 23.1 408 <div class="arsn-area-head">
Veronika Kocher 28.1 409 <div class="arsn-area-label" style="background:#eaf6f9;color:#355f69;"><span class="arsn-area-number">01</span> START HERE <span class="arsn-area-action">· Orient</span></div>
Veronika Kocher 23.1 410 <h4>Orient yourself and choose the right level of setup</h4>
Veronika Kocher 28.1 411 <p>Use these pages if you are just starting out, unsure which topics apply, or need a practical minimum setup for a smaller project.</p>
Veronika Kocher 22.1 412 </div>
Veronika Kocher 23.1 413 <div class="arsn-area-body">
Veronika Kocher 28.1 414 <a class="arsn-topic" href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Enable/Get%20Started/" style="border-left:3px solid #21b6d7;">Get Started</a>
415 <a class="arsn-topic" href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Enable/Quick%20Start%20for%20Small%20Projects/" style="border-left:3px solid #21b6d7;">Quick Start for Small Projects</a>
Veronika Kocher 22.1 416 </div>
417 </section>
Veronika Kocher 16.1 418
Veronika Kocher 25.1 419 <section class="arsn-area" style="border-top:4px solid #e94b13;">
Veronika Kocher 23.1 420 <div class="arsn-area-head">
Veronika Kocher 28.1 421 <div class="arsn-area-label" style="background:#f7e6dd;color:#7b4430;"><span class="arsn-area-number">02</span> PLAN &amp; ORGANISE <span class="arsn-area-action">· Decide</span></div>
Veronika Kocher 23.1 422 <h4>Define what the project needs and how it will be organised</h4>
Veronika Kocher 28.1 423 <p>Clarify scope, responsibilities, funding conditions, expected materials and outputs, and the basic data-management approach before active work begins.</p>
Veronika Kocher 22.1 424 </div>
Veronika Kocher 23.1 425 <div class="arsn-area-body">
Veronika Kocher 28.1 426 <a class="arsn-topic" href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Enable/Project%20Planning%20%26%20Organisation/" style="border-left:3px solid #e94b13;">Project Planning &amp; Organisation</a>
427 <a class="arsn-topic" href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Enable/Funding%20%26%20Funder%20Requirements/" style="border-left:3px solid #e94b13;">Funding &amp; Funder Requirements</a>
428 <a class="arsn-topic" href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Enable/Identify%20Your%20Data%20%26%20Research%20Outputs/" style="border-left:3px solid #e94b13;">Identify Your Data &amp; Research Outputs</a>
429 <a class="arsn-topic" href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Enable/Plan%20Your%20Data%20Management/" style="border-left:3px solid #e94b13;">Plan Your Data Management</a>
430 <a class="arsn-topic" href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Enable/File%20Organisation%20%26%20Naming/" style="border-left:3px solid #e94b13;">File Organisation &amp; Naming</a>
Veronika Kocher 22.1 431 </div>
432 </section>
433
Veronika Kocher 26.1 434 <section class="arsn-area" style="border-top:4px solid #f0aa00;">
Veronika Kocher 23.1 435 <div class="arsn-area-head">
Veronika Kocher 28.1 436 <div class="arsn-area-label" style="background:#fff3d5;color:#7a5b12;"><span class="arsn-area-number">03</span> PROTECT &amp; CLARIFY <span class="arsn-area-action">· Check</span></div>
Veronika Kocher 23.1 437 <h4>Clarify rights, permissions, protection needs and responsibilities</h4>
Veronika Kocher 28.1 438 <p>Identify legal, ethical or data-protection issues early enough to obtain permissions, make agreements and avoid unnecessary restrictions later.</p>
Veronika Kocher 22.1 439 </div>
Veronika Kocher 23.1 440 <div class="arsn-area-body">
Veronika Kocher 28.1 441 <a class="arsn-topic" href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Enable/Copyright%2C%20Rights%20%26%20Licences/" style="border-left:3px solid #f0aa00;">Copyright, Rights &amp; Licences</a>
442 <a class="arsn-topic" href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Enable/Data%20Protection%20%26%20Ethics/" style="border-left:3px solid #f0aa00;">Data Protection &amp; Ethics</a>
Veronika Kocher 22.1 443 </div>
444 </section>
445
Veronika Kocher 26.1 446 <section class="arsn-area" style="border-top:4px solid #38b76a;">
Veronika Kocher 23.1 447 <div class="arsn-area-head">
Veronika Kocher 28.1 448 <div class="arsn-area-label" style="background:#e6f3e9;color:#3f6d4b;"><span class="arsn-area-number">04</span> SET UP INFRASTRUCTURE &amp; COLLABORATION <span class="arsn-area-action">· Prepare</span></div>
Veronika Kocher 23.1 449 <h4>Create a working environment the project can actually use</h4>
Veronika Kocher 28.1 450 <p>Decide where project materials live, how they are backed up and protected, which tools are appropriate and how access and collaboration will work.</p>
Veronika Kocher 22.1 451 </div>
Veronika Kocher 23.1 452 <div class="arsn-area-body">
Veronika Kocher 28.1 453 <a class="arsn-topic" href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Enable/Storage%2C%20Backup%20%26%20Security/" style="border-left:3px solid #38b76a;">Storage, Backup &amp; Security</a>
454 <a class="arsn-topic" href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Enable/Infrastructure%2C%20Services%20%26%20Tools/" style="border-left:3px solid #38b76a;">Infrastructure, Services &amp; Tools</a>
455 <a class="arsn-topic" href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Enable/Collaboration%20Setup/" style="border-left:3px solid #38b76a;">Collaboration Setup</a>
Veronika Kocher 22.1 456 </div>
457 </section>
458 </div>
459
Veronika Kocher 28.1 460 <section class="arsn-card" style="margin:0 0 27px 0;padding:18px 20px;background:#fcfbf8;border:1px solid #e3ded6;border-left:5px solid #e94b13;">
Veronika Kocher 25.1 461 <div class="arsn-eyebrow" style="color:#8a4d36;margin-bottom:5px;">NEXT PHASE</div>
Veronika Kocher 23.1 462 <h3 style="font-size:21px;margin:0 0 7px 0;color:#43332d;">Continue in Work &amp; Manage</h3>
Veronika Kocher 28.1 463 <p style="margin:0 0 13px 0;color:#68564e;line-height:1.5;">The setup decisions made here should guide the project, but they are not fixed forever. During active project work, organise, document, secure and review how the project is actually working.</p>
464 <a href="https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Work%20%26%20Manage/" class="btn btn-default" style="background:#fff7f1;border-color:#e4cabc;color:#493a34;">Continue to Work &amp; Manage</a>
Veronika Kocher 22.1 465 </section>
466
467 <div style="margin:0 0 13px 0;">
Veronika Kocher 25.1 468 <div class="arsn-eyebrow" style="color:#8a4d36;margin-bottom:4px;">USEFUL MATERIALS</div>
Veronika Kocher 23.1 469 <h3 style="font-size:22px;margin:0 0 4px 0;color:#35312d;">Practical resources</h3>
Veronika Kocher 22.1 470 </div>
471
Veronika Kocher 23.1 472 <div class="arsn-resource-grid" style="margin-bottom:27px;">
Veronika Kocher 29.5 473 <div style="padding:15px 16px;background:#fcfbf8;border:1px solid #e3ded6;border-top:3px solid #21b6d7;border-radius:9px;"><strong style="color:#3a5d66;">Info Sheets</strong><br><span data-arsn-coming-soon="true" style="display:inline-block;margin:6px 0 8px 0;padding:4px 9px;border-radius:14px;background:#fff4ee;border:1px solid #efd9cc;color:#8a4d36;font-size:11px;font-weight:700;letter-spacing:.065em;line-height:1.2;">COMING SOON</span><div style="margin-top:5px;color:#625d56;">Short reference guides for common questions and decisions.</div></div>
474 <div style="padding:15px 16px;background:#fcfbf8;border:1px solid #e3ded6;border-top:3px solid #e94b13;border-radius:9px;"><strong style="color:#503a31;">Tutorials</strong><br><span data-arsn-coming-soon="true" style="display:inline-block;margin:6px 0 8px 0;padding:4px 9px;border-radius:14px;background:#fff4ee;border:1px solid #efd9cc;color:#8a4d36;font-size:11px;font-weight:700;letter-spacing:.065em;line-height:1.2;">COMING SOON</span><div style="margin-top:5px;color:#625d56;">Step-by-step instructions for specific tasks and workflows.</div></div>
475 <div style="padding:15px 16px;background:#fcfbf8;border:1px solid #e3ded6;border-top:3px solid #38b76a;border-radius:9px;"><strong style="color:#3f6b4b;">Checklists &amp; Templates</strong><br><span data-arsn-coming-soon="true" style="display:inline-block;margin:6px 0 8px 0;padding:4px 9px;border-radius:14px;background:#fff4ee;border:1px solid #efd9cc;color:#8a4d36;font-size:11px;font-weight:700;letter-spacing:.065em;line-height:1.2;">COMING SOON</span><div style="margin-top:5px;color:#625d56;">Reusable aids for planning, documenting and reviewing your project setup.</div></div>
Veronika Kocher 22.1 476 </div>
477
Veronika Kocher 29.6 478 <aside style="margin:0 0 14px 0;padding:16px 18px;border:1px solid #c7e5ed;border-left:5px solid #21b6d7;background:#e5f5f9;border-radius:8px;"><!-- ARSN_PHASE_ROUTING_V1 -->
479 <strong style="color:#2d5661;">Need help finding the right route?</strong>
480 <div style="margin-top:5px;color:#365e68;line-height:1.5;"><strong>Start with Support Kunst und Forschung</strong> for project development, funding, proposals and coordination of funded art/research projects. For rights, data, IT, finance, HR, rooms or other specialist questions, follow the responsible service named on the topic page.</div>
Veronika Kocher 22.1 481 </aside>
482
Veronika Kocher 28.1 483 <div class="arsn-tip"><strong>Tip · A useful rule of thumb:</strong> Plan early, document decisions, and review them as the project changes. A simple setup that is actually used is usually more effective than a complex plan that is never updated.</div>
Veronika Kocher 22.1 484
485 </div>
486 {{/html}}
Veronika Kocher 29.7 487
Veronika Kocher 29.10 488 {{html clean="false"}}
489 <!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_START -->
Veronika Kocher 29.9 490
Veronika Kocher 29.10 491 <style data-sn-service-navigator-master="1">
492 /* =========================================================
493 MASTER TYPOGRAPHY
494 ========================================================= */
Veronika Kocher 29.9 495 #xwikicontent h1,
496 #xwikicontent h2,
497 #xwikicontent h3,
498 #xwikicontent h4,
499 #xwikicontent h5,
500 #xwikicontent h6,
501 #xwikicontent .box-title,
502 #xwikicontent [role="heading"],
503 #xwikicontent h1 a,
504 #xwikicontent h2 a,
505 #xwikicontent h3 a,
506 #xwikicontent h4 a,
507 #xwikicontent h5 a,
508 #xwikicontent h6 a,
509 #xwikicontent .box-title a,
510 #xwikicontent [role="heading"] a{
511 text-align:left!important;
512 text-justify:auto!important;
513 word-spacing:normal!important;
514 }
515
Veronika Kocher 29.10 516 /* =========================================================
517 COMING SOON / IN VORBEREITUNG
518 ========================================================= */
519 .sn-coming-soon-badge{
520 display:inline-block;
521 vertical-align:middle;
522 margin-left:10px;
523 padding:4px 8px;
524 border-radius:14px;
525 border:1px solid #efd9cc;
526 background:#fff4ee;
527 color:#8a4d36;
528 font-size:11px;
529 font-weight:700;
530 letter-spacing:.055em;
531 line-height:1.2;
532 white-space:nowrap;
533 }
534
535 /* =========================================================
536 NATIVE / DETAIL CALLOUT GEOMETRY
537 Preserve existing backgrounds.
538 ========================================================= */
539 #xwikicontent .arsn-info,
540 #xwikicontent .dmp-info,
541 #xwikicontent .ido-info,
542 #xwikicontent .pp-info,
543 #xwikicontent .infomessage{
Veronika Kocher 29.9 544 box-sizing:border-box!important;
Veronika Kocher 29.10 545 border-left:4px solid #21b6d7!important;
546 border-radius:8px;
Veronika Kocher 29.9 547 text-align:left!important;
548 word-spacing:normal!important;
549 }
550
Veronika Kocher 29.10 551 #xwikicontent .arsn-warn,
552 #xwikicontent .dmp-warn,
553 #xwikicontent .ido-warn,
554 #xwikicontent .pp-warn,
555 #xwikicontent .warn,
556 #xwikicontent .warning,
557 #xwikicontent .warningmessage,
Veronika Kocher 29.9 558 #xwikicontent .errormessage{
Veronika Kocher 29.10 559 box-sizing:border-box!important;
560 border-left:4px solid #e94b13!important;
561 border-radius:8px;
562 text-align:left!important;
563 word-spacing:normal!important;
Veronika Kocher 29.9 564 }
565
Veronika Kocher 29.10 566 [data-sn-master-equal-height],
567 [data-sn-master-first-row]{
Veronika Kocher 29.8 568 box-sizing:border-box;
Veronika Kocher 29.7 569 }
570 </style>
Veronika Kocher 29.9 571
Veronika Kocher 29.10 572 <script data-sn-service-navigator-master="1">
Veronika Kocher 29.7 573 (function(){
574 "use strict";
575
Veronika Kocher 29.10 576 var PAGE_KIND="overview";
577 var PLACEHOLDER=false;
578 var PLACEHOLDER_LABEL="COMING SOON";
579
Veronika Kocher 29.7 580 var MOBILE_MAX=767;
Veronika Kocher 29.8 581 var ROW_TOLERANCE=6;
Veronika Kocher 29.9 582 var RESIZE_DEBOUNCE=220;
Veronika Kocher 29.7 583
584 var root=
585 document.getElementById("xwikicontent")||
586 document.querySelector(".xwiki-rendering-content")||
587 document.querySelector("main")||
588 document.body;
589
590 if(!root)return;
591
Veronika Kocher 29.10 592 var managedHeight=new Set();
593 var managedMargin=new Set();
594 var originalHeight=new WeakMap();
595 var originalMargin=new WeakMap();
Veronika Kocher 29.9 596
597 var resizeTimer=0;
Veronika Kocher 29.10 598 var running=false;
Veronika Kocher 29.9 599
Veronika Kocher 29.10 600 var THEMES=[
601 {
602 name:"BLUE",
603 accent:"#21b6d7",
604 bg:"#eaf7fb",
605 text:"#315d68",
606 labels:[
607 "HIER STARTEN",
608 "ENTSCHEIDEN",
609 "ÃœBERPRÃœFEN & ANPASSEN",
610 "START HERE",
611 "DECIDE",
612 "REVIEW & ADAPT"
613 ]
614 },
615 {
616 name:"RED",
617 accent:"#e94b13",
618 bg:"#fff1ec",
619 text:"#8a4d36",
620 labels:[
621 "PLANEN & ORGANISIEREN",
622 "ORGANISIEREN & DOKUMENTIEREN",
623 "PUBLIZIEREN & PRÄSENTIEREN",
624 "PLAN & ORGANISE",
625 "PLAN & ORGANIZE",
626 "ORGANISE & DOCUMENT",
627 "ORGANIZE & DOCUMENT",
628 "PUBLISH & PRESENT"
629 ]
630 },
631 {
632 name:"YELLOW",
633 accent:"#f0aa00",
634 bg:"#fff8e7",
635 text:"#785b17",
636 labels:[
637 "SCHÜTZEN & KLÄREN",
638 "STANDARDISIEREN & IDENTIFIZIEREN",
639 "ÖFFNEN, NACHNUTZEN & AUFFINDBAR MACHEN",
640 "PROTECT & CLARIFY",
641 "STANDARDISE & IDENTIFY",
642 "STANDARDIZE & IDENTIFY",
643 "OPEN, REUSE & MAKE FINDABLE"
644 ]
645 },
646 {
647 name:"GREEN",
648 accent:"#38b76a",
649 bg:"#edf9f1",
650 text:"#3f7451",
651 labels:[
652 "INFRASTRUKTUR EINRICHTEN",
653 "INFRASTRUKTUR & ZUSAMMENARBEIT EINRICHTEN",
654 "SPEICHERN & ZUGRIFF STEUERN",
655 "REPOSITORIUM, ERHALTEN & ÃœBERGEBEN",
656 "SET UP INFRASTRUCTURE",
657 "SET UP INFRASTRUCTURE & COLLABORATION",
658 "STORE & CONTROL ACCESS",
659 "REPOSITORY, PRESERVE & HAND OVER"
660 ]
Veronika Kocher 29.8 661 }
Veronika Kocher 29.10 662 ];
Veronika Kocher 29.8 663
Veronika Kocher 29.10 664 function num(value){
665 var n=parseFloat(value);
666 return Number.isFinite(n)?n:0;
Veronika Kocher 29.7 667 }
668
Veronika Kocher 29.10 669 function norm(value){
670 return String(value||"")
Veronika Kocher 29.9 671 .replace(/\s+/g," ")
672 .trim()
673 .toUpperCase();
674 }
675
Veronika Kocher 29.10 676 function visible(el){
677 if(!el||el.nodeType!==1)return false;
Veronika Kocher 29.7 678
Veronika Kocher 29.10 679 var style=getComputedStyle(el);
680 var rect=el.getBoundingClientRect();
Veronika Kocher 29.9 681
682 return (
Veronika Kocher 29.10 683 style.display!=="none"&&
684 style.visibility!=="hidden"&&
685 rect.width>20&&
686 rect.height>4
Veronika Kocher 29.9 687 );
Veronika Kocher 29.7 688 }
689
Veronika Kocher 29.10 690 function saveStyle(el,map,property){
Veronika Kocher 29.8 691 if(map.has(el))return;
692
693 map.set(el,{
Veronika Kocher 29.10 694 value:el.style.getPropertyValue(property),
695 priority:el.style.getPropertyPriority(property)
Veronika Kocher 29.8 696 });
697 }
698
Veronika Kocher 29.10 699 function restoreStyle(el,map,property){
Veronika Kocher 29.8 700 var original=map.get(el);
701
702 if(original&&original.value){
703 el.style.setProperty(
704 property,
705 original.value,
706 original.priority||""
707 );
708 }else{
Veronika Kocher 29.10 709 el.style.removeProperty(property);
Veronika Kocher 29.8 710 }
711 }
712
Veronika Kocher 29.9 713 function resetRuntime(){
Veronika Kocher 29.10 714 managedHeight.forEach(function(el){
715 restoreStyle(
Veronika Kocher 29.8 716 el,
Veronika Kocher 29.10 717 originalHeight,
Veronika Kocher 29.8 718 "min-height"
719 );
720 el.removeAttribute(
Veronika Kocher 29.10 721 "data-sn-master-equal-height"
Veronika Kocher 29.8 722 );
723 });
724
Veronika Kocher 29.10 725 managedMargin.forEach(function(el){
726 restoreStyle(
Veronika Kocher 29.8 727 el,
Veronika Kocher 29.10 728 originalMargin,
Veronika Kocher 29.8 729 "margin-top"
730 );
731 el.removeAttribute(
Veronika Kocher 29.10 732 "data-sn-master-first-row"
Veronika Kocher 29.8 733 );
734 });
735
Veronika Kocher 29.10 736 managedHeight.clear();
737 managedMargin.clear();
738 }
Veronika Kocher 29.9 739
Veronika Kocher 29.10 740 function themeFor(text){
741 var value=norm(text);
Veronika Kocher 29.9 742
Veronika Kocher 29.10 743 for(var i=0;i<THEMES.length;i++){
744 for(var j=0;j<THEMES[i].labels.length;j++){
745 var label=THEMES[i].labels[j];
746
747 if(
748 value===label||
749 value.indexOf(label+" ")===0||
750 value.indexOf(label+" -")===0||
751 value.indexOf(label+" ·")===0
752 ){
753 return THEMES[i];
754 }
755 }
756 }
757
758 return null;
Veronika Kocher 29.8 759 }
760
Veronika Kocher 29.10 761 /* =======================================================
762 PLACEHOLDER BADGE
763 ======================================================= */
Veronika Kocher 29.9 764
Veronika Kocher 29.10 765 function applyPlaceholderBadge(){
766 if(!PLACEHOLDER)return;
Veronika Kocher 29.9 767
768 if(
Veronika Kocher 29.10 769 document.querySelector(
770 ".sn-coming-soon-badge"
771 )
Veronika Kocher 29.9 772 ){
Veronika Kocher 29.10 773 return;
Veronika Kocher 29.9 774 }
775
Veronika Kocher 29.10 776 var title=
777 document.querySelector(
778 "#document-title"
779 )||
780 document.querySelector(
781 "h1"
782 );
Veronika Kocher 29.9 783
Veronika Kocher 29.10 784 if(!title)return;
Veronika Kocher 29.9 785
Veronika Kocher 29.10 786 var badge=
787 document.createElement(
788 "span"
789 );
790
791 badge.className=
792 "sn-coming-soon-badge";
793
794 badge.textContent=
795 PLACEHOLDER_LABEL;
796
797 badge.setAttribute(
798 "aria-label",
799 PLACEHOLDER_LABEL
Veronika Kocher 29.9 800 );
801
Veronika Kocher 29.10 802 title.appendChild(
803 badge
804 );
805 }
Veronika Kocher 29.9 806
Veronika Kocher 29.10 807 /* =======================================================
808 DETAIL PAGE OWN-ACCENT PROPAGATION
809 ======================================================= */
Veronika Kocher 29.9 810
Veronika Kocher 29.10 811 function parseRGB(value){
812 var match=String(value||"").match(
813 /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i
Veronika Kocher 29.9 814 );
Veronika Kocher 29.10 815
816 if(!match)return null;
817
818 return [
819 Number(match[1]),
820 Number(match[2]),
821 Number(match[3])
822 ];
Veronika Kocher 29.9 823 }
824
Veronika Kocher 29.10 825 function distance(a,b){
826 return Math.sqrt(
827 Math.pow(a[0]-b[0],2)+
828 Math.pow(a[1]-b[1],2)+
829 Math.pow(a[2]-b[2],2)
830 );
831 }
Veronika Kocher 29.7 832
Veronika Kocher 29.10 833 function paletteMatch(cssColor){
834 var rgb=parseRGB(cssColor);
Veronika Kocher 29.8 835
Veronika Kocher 29.10 836 if(!rgb)return null;
Veronika Kocher 29.8 837
Veronika Kocher 29.10 838 var palette=[
839 {hex:"#21b6d7",rgb:[33,182,215]},
840 {hex:"#e94b13",rgb:[233,75,19]},
841 {hex:"#f0aa00",rgb:[240,170,0]},
842 {hex:"#38b76a",rgb:[56,183,106]}
843 ];
Veronika Kocher 29.7 844
Veronika Kocher 29.8 845 var best=null;
Veronika Kocher 29.10 846 var bestDistance=Infinity;
Veronika Kocher 29.7 847
Veronika Kocher 29.10 848 palette.forEach(function(item){
849 var d=distance(rgb,item.rgb);
Veronika Kocher 29.7 850
Veronika Kocher 29.10 851 if(d<bestDistance){
852 best=item;
853 bestDistance=d;
854 }
855 });
Veronika Kocher 29.8 856
Veronika Kocher 29.10 857 return bestDistance<=30
858 ?best
859 :null;
860 }
Veronika Kocher 29.7 861
Veronika Kocher 29.10 862 function propagateDetailAccents(){
863 if(PAGE_KIND!=="detail")return;
864
865 Array.from(
866 root.querySelectorAll(
867 ".arsn-call,.dmp-call,.ido-call,.pp-call,"+
868 ".arsn-source,.dmp-source,.ido-source,.pp-source"
869 )
870 ).forEach(function(el){
871 if(!visible(el))return;
872
873 var style=getComputedStyle(el);
874
Veronika Kocher 29.8 875 if(
Veronika Kocher 29.10 876 num(style.borderTopWidth)>=2
Veronika Kocher 29.8 877 ){
Veronika Kocher 29.10 878 var match=
879 paletteMatch(
880 style.borderTopColor
Veronika Kocher 29.8 881 );
882
Veronika Kocher 29.10 883 if(match){
884 el.style.setProperty(
885 "border-left",
886 "4px solid "+match.hex,
887 "important"
Veronika Kocher 29.8 888 );
Veronika Kocher 29.7 889 }
890 }
Veronika Kocher 29.10 891 });
Veronika Kocher 29.7 892
Veronika Kocher 29.10 893 // Warning families: explicit safety override.
894 Array.from(
895 root.querySelectorAll(
896 ".arsn-warn,.dmp-warn,.ido-warn,.pp-warn,"+
897 ".warn,.warning,.warningmessage,.errormessage"
898 )
899 ).forEach(function(el){
900 if(!visible(el))return;
Veronika Kocher 29.7 901
Veronika Kocher 29.10 902 el.style.setProperty(
903 "border-left",
904 "4px solid #e94b13",
905 "important"
906 );
907 });
Veronika Kocher 29.7 908
Veronika Kocher 29.10 909 // Info families: explicit orientation override.
910 Array.from(
911 root.querySelectorAll(
912 ".arsn-info,.dmp-info,.ido-info,.pp-info,.infomessage"
913 )
914 ).forEach(function(el){
915 if(!visible(el))return;
Veronika Kocher 29.8 916
Veronika Kocher 29.10 917 el.style.setProperty(
918 "border-left",
919 "4px solid #21b6d7",
920 "important"
921 );
922 });
923 }
Veronika Kocher 29.8 924
Veronika Kocher 29.10 925 /* =======================================================
926 OVERVIEW SEMANTIC THEME PALETTE
927 ======================================================= */
Veronika Kocher 29.8 928
Veronika Kocher 29.10 929 function smallestThemeHeaders(){
930 return Array.from(
931 root.querySelectorAll(
932 "div,span,p,strong,h3,h4,h5,h6"
933 )
934 ).filter(function(el){
935 if(!visible(el))return false;
936 if(!themeFor(el.textContent))return false;
Veronika Kocher 29.8 937
Veronika Kocher 29.10 938 return !Array.from(
939 el.children||[]
940 ).some(function(child){
941 return !!themeFor(
942 child.textContent
943 );
Veronika Kocher 29.8 944 });
Veronika Kocher 29.10 945 });
Veronika Kocher 29.7 946 }
947
Veronika Kocher 29.10 948 function findOverviewCard(header){
949 var node=header.parentElement;
950 var candidates=[];
Veronika Kocher 29.8 951
Veronika Kocher 29.10 952 while(node&&node!==root){
953 var rect=node.getBoundingClientRect();
954 var style=getComputedStyle(node);
Veronika Kocher 29.8 955
Veronika Kocher 29.10 956 var border=
957 num(style.borderTopWidth)+
958 num(style.borderRightWidth)+
959 num(style.borderBottomWidth)+
960 num(style.borderLeftWidth);
Veronika Kocher 29.8 961
Veronika Kocher 29.10 962 if(
963 rect.width>=220&&
964 rect.width<=800&&
965 rect.height>=120&&
966 border>=1
967 ){
968 candidates.push(node);
969 }
Veronika Kocher 29.8 970
Veronika Kocher 29.10 971 node=node.parentElement;
972 }
Veronika Kocher 29.8 973
Veronika Kocher 29.10 974 if(!candidates.length)return null;
Veronika Kocher 29.8 975
Veronika Kocher 29.10 976 candidates.sort(function(a,b){
977 return (
978 b.getBoundingClientRect().height-
979 a.getBoundingClientRect().height
Veronika Kocher 29.9 980 );
Veronika Kocher 29.10 981 });
Veronika Kocher 29.8 982
Veronika Kocher 29.10 983 return candidates[0];
Veronika Kocher 29.8 984 }
985
Veronika Kocher 29.10 986 function rowCandidates(link,card){
987 var result=[];
Veronika Kocher 29.9 988 var cardRect=
989 card.getBoundingClientRect();
Veronika Kocher 29.8 990
Veronika Kocher 29.10 991 var node=link;
Veronika Kocher 29.8 992
Veronika Kocher 29.10 993 while(node&&node!==card){
994 if(visible(node)){
995 var rect=
996 node.getBoundingClientRect();
Veronika Kocher 29.8 997
Veronika Kocher 29.10 998 if(
999 rect.height<=105&&
1000 rect.width>=
1001 cardRect.width*.50&&
1002 rect.width<=
1003 cardRect.width*1.03
1004 ){
1005 result.push(node);
1006 }
1007 }
Veronika Kocher 29.8 1008
Veronika Kocher 29.10 1009 node=node.parentElement;
1010 }
1011
1012 return result;
1013 }
1014
1015 function chooseOuterRow(
1016 candidates,
1017 link
1018 ){
1019 if(!candidates.length){
1020 return link;
1021 }
1022
1023 var bordered=
1024 candidates.filter(function(el){
Veronika Kocher 29.9 1025 return (
Veronika Kocher 29.10 1026 num(
1027 getComputedStyle(el)
1028 .borderLeftWidth
1029 )>=1
Veronika Kocher 29.9 1030 );
1031 });
Veronika Kocher 29.8 1032
Veronika Kocher 29.10 1033 var pool=
1034 bordered.length
1035 ?bordered
1036 :candidates;
Veronika Kocher 29.8 1037
Veronika Kocher 29.10 1038 pool.sort(function(a,b){
1039 var ar=
1040 a.getBoundingClientRect();
Veronika Kocher 29.8 1041
Veronika Kocher 29.10 1042 var br=
1043 b.getBoundingClientRect();
Veronika Kocher 29.8 1044
Veronika Kocher 29.10 1045 return (
1046 ar.left-br.left||
1047 br.width-ar.width
1048 );
1049 });
Veronika Kocher 29.8 1050
Veronika Kocher 29.10 1051 return pool[0]||link;
1052 }
Veronika Kocher 29.8 1053
Veronika Kocher 29.10 1054 function applyOverviewPalette(){
1055 if(PAGE_KIND!=="overview"){
1056 return [];
Veronika Kocher 29.9 1057 }
Veronika Kocher 29.8 1058
Veronika Kocher 29.10 1059 var headers=
1060 smallestThemeHeaders()
1061 .map(function(el){
1062 return {
1063 el:el,
1064 theme:
1065 themeFor(
1066 el.textContent
1067 ),
1068 card:
1069 findOverviewCard(
1070 el
1071 )
1072 };
Veronika Kocher 29.9 1073 })
Veronika Kocher 29.10 1074 .filter(function(row){
1075 return !!row.card;
1076 });
Veronika Kocher 29.8 1077
Veronika Kocher 29.10 1078 var unique=[];
1079 var seenHeaders=new Set();
Veronika Kocher 29.8 1080
Veronika Kocher 29.10 1081 headers.forEach(function(row){
1082 var key=
1083 row.theme.name+
1084 "|"+
1085 Math.round(
1086 row.card
1087 .getBoundingClientRect()
1088 .left
1089 )+
1090 "|"+
1091 Math.round(
1092 row.el
1093 .getBoundingClientRect()
1094 .top
1095 );
Veronika Kocher 29.8 1096
Veronika Kocher 29.10 1097 if(!seenHeaders.has(key)){
1098 seenHeaders.add(key);
1099 unique.push(row);
1100 }
1101 });
Veronika Kocher 29.8 1102
Veronika Kocher 29.10 1103 unique.forEach(function(row){
1104 var headerRect=
1105 row.el
1106 .getBoundingClientRect();
Veronika Kocher 29.8 1107
Veronika Kocher 29.10 1108 row.el.style.setProperty(
1109 "background",
1110 row.theme.bg,
1111 "important"
Veronika Kocher 29.9 1112 );
1113
Veronika Kocher 29.10 1114 row.el.style.setProperty(
1115 "color",
1116 row.theme.text,
1117 "important"
Veronika Kocher 29.9 1118 );
1119
Veronika Kocher 29.10 1120 row.el.style.setProperty(
1121 "text-align",
1122 "left",
1123 "important"
Veronika Kocher 29.9 1124 );
Veronika Kocher 29.8 1125
Veronika Kocher 29.10 1126 row.el.style.setProperty(
1127 "word-spacing",
1128 "normal",
1129 "important"
1130 );
Veronika Kocher 29.9 1131
Veronika Kocher 29.10 1132 var later=
1133 unique
1134 .filter(function(other){
1135 return (
1136 other.card===row.card&&
1137 other.el
1138 .getBoundingClientRect()
1139 .top>
1140 headerRect.top+2
1141 );
1142 })
1143 .sort(function(a,b){
1144 return (
1145 a.el
1146 .getBoundingClientRect()
1147 .top-
1148 b.el
1149 .getBoundingClientRect()
1150 .top
1151 );
1152 });
Veronika Kocher 29.9 1153
Veronika Kocher 29.10 1154 var stopTop=
1155 later.length
1156 ?later[0].el
1157 .getBoundingClientRect()
1158 .top
1159 :Infinity;
Veronika Kocher 29.9 1160
1161 Array.from(
Veronika Kocher 29.10 1162 row.card.querySelectorAll("a")
1163 ).forEach(function(link){
1164 if(!visible(link))return;
Veronika Kocher 29.9 1165
Veronika Kocher 29.10 1166 var rect=
1167 link.getBoundingClientRect();
Veronika Kocher 29.9 1168
Veronika Kocher 29.10 1169 if(
1170 rect.top<=
1171 headerRect.bottom-2||
1172 rect.top>=
1173 stopTop-2
1174 ){
1175 return;
1176 }
Veronika Kocher 29.9 1177
Veronika Kocher 29.10 1178 var candidates=
1179 rowCandidates(
1180 link,
1181 row.card
1182 );
1183
1184 var target=
1185 chooseOuterRow(
1186 candidates,
1187 link
1188 );
1189
1190 candidates.forEach(function(el){
1191 el.style.setProperty(
1192 "border-left",
1193 "0 solid transparent",
1194 "important"
1195 );
1196 });
1197
1198 target.style.setProperty(
1199 "border-left",
1200 "3px solid "+
1201 row.theme.accent,
1202 "important"
Veronika Kocher 29.9 1203 );
Veronika Kocher 29.10 1204
1205 target.style.setProperty(
1206 "box-sizing",
1207 "border-box",
1208 "important"
Veronika Kocher 29.9 1209 );
Veronika Kocher 29.8 1210 });
Veronika Kocher 29.10 1211 });
Veronika Kocher 29.8 1212
Veronika Kocher 29.10 1213 return unique;
Veronika Kocher 29.9 1214 }
Veronika Kocher 29.8 1215
Veronika Kocher 29.10 1216 /* =======================================================
1217 OVERVIEW CARD HEIGHT + FIRST THEMATIC ROW
1218 ======================================================= */
Veronika Kocher 29.9 1219
Veronika Kocher 29.10 1220 function alignOverviewCards(headers){
1221 if(
1222 PAGE_KIND!=="overview"||
1223 window.innerWidth<=MOBILE_MAX
1224 ){
1225 return;
1226 }
Veronika Kocher 29.9 1227
Veronika Kocher 29.10 1228 var cards=[];
1229 var seen=new Set();
Veronika Kocher 29.9 1230
Veronika Kocher 29.10 1231 headers.forEach(function(row){
1232 if(!seen.has(row.card)){
1233 seen.add(row.card);
1234 cards.push(row.card);
1235 }
1236 });
Veronika Kocher 29.9 1237
Veronika Kocher 29.10 1238 if(cards.length<2){
1239 return;
1240 }
Veronika Kocher 29.9 1241
Veronika Kocher 29.10 1242 // Group cards by actual top position.
1243 var groups=[];
Veronika Kocher 29.9 1244
Veronika Kocher 29.10 1245 cards.forEach(function(card){
1246 var top=
1247 card.getBoundingClientRect().top;
Veronika Kocher 29.9 1248
Veronika Kocher 29.10 1249 var group=null;
Veronika Kocher 29.9 1250
Veronika Kocher 29.10 1251 for(var i=0;i<groups.length;i++){
Veronika Kocher 29.9 1252 if(
Veronika Kocher 29.10 1253 Math.abs(
1254 groups[i].top-top
1255 )<=ROW_TOLERANCE
Veronika Kocher 29.9 1256 ){
Veronika Kocher 29.10 1257 group=groups[i];
1258 break;
Veronika Kocher 29.9 1259 }
Veronika Kocher 29.10 1260 }
Veronika Kocher 29.9 1261
Veronika Kocher 29.10 1262 if(!group){
1263 group={
1264 top:top,
1265 cards:[]
1266 };
1267 groups.push(group);
1268 }
Veronika Kocher 29.9 1269
Veronika Kocher 29.10 1270 group.cards.push(card);
1271 });
Veronika Kocher 29.9 1272
Veronika Kocher 29.10 1273 groups.forEach(function(group){
1274 if(group.cards.length<2){
1275 return;
1276 }
Veronika Kocher 29.9 1277
Veronika Kocher 29.10 1278 var firstHeaders=
1279 group.cards.map(function(card){
1280 var candidates=
1281 headers
1282 .filter(function(row){
1283 return row.card===card;
1284 })
1285 .sort(function(a,b){
1286 return (
1287 a.el
1288 .getBoundingClientRect()
1289 .top-
1290 b.el
1291 .getBoundingClientRect()
1292 .top
1293 );
1294 });
Veronika Kocher 29.9 1295
Veronika Kocher 29.10 1296 return candidates.length
1297 ?candidates[0]
1298 :null;
1299 });
Veronika Kocher 29.9 1300
Veronika Kocher 29.10 1301 if(
1302 !firstHeaders.some(function(row){
1303 return !row;
1304 })
1305 ){
1306 var targetTop=
1307 Math.max.apply(
1308 Math,
1309 firstHeaders.map(function(row){
1310 return (
1311 row.el
1312 .getBoundingClientRect()
1313 .top-
1314 row.card
1315 .getBoundingClientRect()
1316 .top
1317 );
1318 })
1319 );
Veronika Kocher 29.7 1320
Veronika Kocher 29.10 1321 firstHeaders.forEach(function(row){
1322 var relativeTop=
1323 row.el
1324 .getBoundingClientRect()
1325 .top-
1326 row.card
1327 .getBoundingClientRect()
1328 .top;
Veronika Kocher 29.8 1329
Veronika Kocher 29.10 1330 var delta=
1331 targetTop-relativeTop;
Veronika Kocher 29.8 1332
Veronika Kocher 29.10 1333 if(delta>1){
1334 saveStyle(
1335 row.el,
1336 originalMargin,
1337 "margin-top"
1338 );
Veronika Kocher 29.9 1339
Veronika Kocher 29.10 1340 var current=
1341 num(
1342 getComputedStyle(
1343 row.el
1344 ).marginTop
1345 );
Veronika Kocher 29.8 1346
Veronika Kocher 29.10 1347 row.el.style.setProperty(
1348 "margin-top",
1349 (
1350 current+delta
1351 )+"px"
1352 );
Veronika Kocher 29.8 1353
Veronika Kocher 29.10 1354 row.el.setAttribute(
1355 "data-sn-master-first-row",
1356 "1"
1357 );
Veronika Kocher 29.8 1358
Veronika Kocher 29.10 1359 managedMargin.add(
1360 row.el
1361 );
1362 }
1363 });
1364 }
Veronika Kocher 29.8 1365
Veronika Kocher 29.10 1366 var maxHeight=0;
Veronika Kocher 29.8 1367
Veronika Kocher 29.10 1368 group.cards.forEach(function(card){
1369 maxHeight=
1370 Math.max(
1371 maxHeight,
1372 card
1373 .getBoundingClientRect()
1374 .height
1375 );
1376 });
Veronika Kocher 29.8 1377
Veronika Kocher 29.10 1378 maxHeight=
1379 Math.ceil(maxHeight);
Veronika Kocher 29.8 1380
Veronika Kocher 29.10 1381 group.cards.forEach(function(card){
1382 saveStyle(
1383 card,
1384 originalHeight,
1385 "min-height"
1386 );
Veronika Kocher 29.8 1387
Veronika Kocher 29.10 1388 card.style.setProperty(
1389 "min-height",
1390 maxHeight+"px"
Veronika Kocher 29.8 1391 );
1392
Veronika Kocher 29.10 1393 card.setAttribute(
1394 "data-sn-master-equal-height",
1395 "1"
1396 );
Veronika Kocher 29.8 1397
Veronika Kocher 29.10 1398 managedHeight.add(
1399 card
1400 );
1401 });
Veronika Kocher 29.8 1402 });
1403 }
1404
Veronika Kocher 29.10 1405 /* =======================================================
1406 DETAIL GRID EQUAL HEIGHT, DESKTOP ONLY
1407 ======================================================= */
Veronika Kocher 29.8 1408
Veronika Kocher 29.10 1409 function equaliseDetailGrids(){
Veronika Kocher 29.9 1410 if(
Veronika Kocher 29.10 1411 PAGE_KIND!=="detail"||
1412 window.innerWidth<=MOBILE_MAX
Veronika Kocher 29.9 1413 ){
Veronika Kocher 29.10 1414 return;
Veronika Kocher 29.9 1415 }
Veronika Kocher 29.8 1416
Veronika Kocher 29.10 1417 var selectors=[
1418 ".arsn-grid",
1419 ".arsn-grid-2",
1420 ".arsn-grid-3",
1421 ".dmp-grid",
1422 ".ido-grid",
1423 ".pp-grid"
1424 ];
Veronika Kocher 29.8 1425
Veronika Kocher 29.10 1426 selectors.forEach(function(selector){
1427 Array.from(
1428 root.querySelectorAll(selector)
1429 ).forEach(function(grid){
1430 var children=
1431 Array.from(
1432 grid.children||[]
1433 ).filter(visible);
Veronika Kocher 29.8 1434
Veronika Kocher 29.10 1435 if(children.length<2){
1436 return;
1437 }
Veronika Kocher 29.8 1438
Veronika Kocher 29.10 1439 var groups=[];
Veronika Kocher 29.8 1440
Veronika Kocher 29.10 1441 children.forEach(function(child){
1442 var top=
1443 child
1444 .getBoundingClientRect()
1445 .top;
Veronika Kocher 29.8 1446
Veronika Kocher 29.10 1447 var group=null;
Veronika Kocher 29.8 1448
Veronika Kocher 29.10 1449 for(var i=0;i<groups.length;i++){
1450 if(
1451 Math.abs(
1452 groups[i].top-top
1453 )<=ROW_TOLERANCE
1454 ){
1455 group=groups[i];
1456 break;
1457 }
1458 }
Veronika Kocher 29.8 1459
Veronika Kocher 29.10 1460 if(!group){
1461 group={
1462 top:top,
1463 items:[]
1464 };
1465 groups.push(group);
1466 }
Veronika Kocher 29.8 1467
Veronika Kocher 29.10 1468 group.items.push(child);
1469 });
Veronika Kocher 29.8 1470
Veronika Kocher 29.10 1471 groups.forEach(function(group){
1472 if(group.items.length<2){
1473 return;
1474 }
Veronika Kocher 29.7 1475
Veronika Kocher 29.10 1476 var maxHeight=0;
Veronika Kocher 29.9 1477
Veronika Kocher 29.10 1478 group.items.forEach(function(item){
1479 maxHeight=
1480 Math.max(
1481 maxHeight,
1482 item
1483 .getBoundingClientRect()
1484 .height
1485 );
1486 });
Veronika Kocher 29.9 1487
Veronika Kocher 29.10 1488 maxHeight=
1489 Math.ceil(maxHeight);
Veronika Kocher 29.7 1490
Veronika Kocher 29.10 1491 group.items.forEach(function(item){
1492 saveStyle(
1493 item,
1494 originalHeight,
1495 "min-height"
1496 );
Veronika Kocher 29.7 1497
Veronika Kocher 29.10 1498 item.style.setProperty(
1499 "min-height",
1500 maxHeight+"px"
1501 );
Veronika Kocher 29.8 1502
Veronika Kocher 29.10 1503 item.setAttribute(
1504 "data-sn-master-equal-height",
1505 "1"
1506 );
Veronika Kocher 29.7 1507
Veronika Kocher 29.10 1508 managedHeight.add(item);
1509 });
Veronika Kocher 29.7 1510 });
Veronika Kocher 29.10 1511 });
1512 });
1513 }
Veronika Kocher 29.7 1514
Veronika Kocher 29.10 1515 /* =======================================================
1516 RUN / RESPONSIVE SCHEDULING
1517 ======================================================= */
Veronika Kocher 29.7 1518
Veronika Kocher 29.10 1519 function run(){
1520 if(running)return;
Veronika Kocher 29.7 1521
Veronika Kocher 29.10 1522 running=true;
Veronika Kocher 29.9 1523
Veronika Kocher 29.10 1524 try{
1525 resetRuntime();
1526 applyPlaceholderBadge();
1527 propagateDetailAccents();
Veronika Kocher 29.9 1528
Veronika Kocher 29.10 1529 var headers=
1530 applyOverviewPalette();
Veronika Kocher 29.9 1531
Veronika Kocher 29.10 1532 if(
1533 window.innerWidth>
1534 MOBILE_MAX
1535 ){
1536 alignOverviewCards(
1537 headers
1538 );
Veronika Kocher 29.7 1539
Veronika Kocher 29.10 1540 equaliseDetailGrids();
1541 }
Veronika Kocher 29.9 1542 }finally{
Veronika Kocher 29.10 1543 running=false;
Veronika Kocher 29.9 1544 }
Veronika Kocher 29.7 1545 }
1546
Veronika Kocher 29.10 1547 function onResize(){
Veronika Kocher 29.9 1548 if(resizeTimer){
1549 clearTimeout(
1550 resizeTimer
1551 );
1552 }
Veronika Kocher 29.8 1553
Veronika Kocher 29.9 1554 resizeTimer=
1555 setTimeout(
1556 function(){
1557 resizeTimer=0;
Veronika Kocher 29.10 1558 run();
Veronika Kocher 29.9 1559 },
1560 RESIZE_DEBOUNCE
1561 );
Veronika Kocher 29.7 1562 }
1563
Veronika Kocher 29.10 1564 async function waitForReady(){
1565 if(
1566 document.readyState!=="complete"
1567 ){
1568 await new Promise(function(resolve){
1569 window.addEventListener(
1570 "load",
1571 resolve,
1572 {once:true}
1573 );
1574 });
1575 }
1576
1577 if(
1578 document.fonts&&
1579 document.fonts.ready
1580 ){
1581 try{
1582 await document.fonts.ready;
1583 }catch(error){}
1584 }
1585
Veronika Kocher 29.9 1586 var images=
1587 Array.from(
1588 root.querySelectorAll("img")
1589 );
Veronika Kocher 29.7 1590
Veronika Kocher 29.10 1591 await Promise.all(
Veronika Kocher 29.9 1592 images.map(function(img){
1593 if(img.complete){
1594 return Promise.resolve();
1595 }
Veronika Kocher 29.7 1596
Veronika Kocher 29.9 1597 return new Promise(function(resolve){
1598 var done=function(){
1599 resolve();
1600 };
1601
1602 img.addEventListener(
1603 "load",
1604 done,
1605 {once:true}
1606 );
1607
1608 img.addEventListener(
1609 "error",
1610 done,
1611 {once:true}
1612 );
1613 });
1614 })
1615 );
1616
Veronika Kocher 29.10 1617 run();
Veronika Kocher 29.7 1618 }
1619
Veronika Kocher 29.10 1620 window.addEventListener(
Veronika Kocher 29.9 1621 "resize",
Veronika Kocher 29.10 1622 onResize,
Veronika Kocher 29.9 1623 {passive:true}
1624 );
1625
Veronika Kocher 29.10 1626 waitForReady();
Veronika Kocher 29.7 1627 })();
1628 </script>
Veronika Kocher 29.9 1629
Veronika Kocher 29.10 1630 <!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_END -->
1631 {{/html}}
1632