Skip to Content

Changes for page Service Navigator

Last modified by Veronika Kocher on Thursday, 03 Sep 2026 14:15
From version 3.2
edited by ZID Server
on Tuesday, 14 Jul 2026 15:09
Change comment: There is no comment for this version
To version 1.1
edited by ZID Server
on Tuesday, 14 Jul 2026 15:01
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,51 +1,0 @@
1 -{{html}}
2 -<div class="rh-grid">
3 -
4 - <div class="rh-col">
5 - <a class="rh-img" href="#"></a>
6 - <div class="rh-body">
7 - <h3 class="rh-heading"><a href="#"><span class="rh-num">1.</span> Planning &amp; Set-up</a></h3>
8 - <p class="rh-desc">Resources for preparation of your research</p>
9 - <div class="rh-cards">
10 - <a class="rh-card rh-flame1" href="#">Data Management</a>
11 - <a class="rh-card rh-flame2" href="#">Research Strategy and Funding</a>
12 - <a class="rh-card rh-flame3" href="#">Research Strategy and Funding</a>
13 - <a class="rh-card rh-flame4" href="#">Responsible and Compliant Research</a>
14 - </div>
15 - <a class="rh-btn" href="#">Explore Planning &amp; Set-up</a>
16 - </div>
17 - </div>
18 -
19 - <div class="rh-col">
20 - <a class="rh-img" href="#"></a>
21 - <div class="rh-body">
22 - <h3 class="rh-heading"><a href="#"><span class="rh-num">2.</span> Execution</a></h3>
23 - <p class="rh-desc">Daily support resources during your project</p>
24 - <div class="rh-cards">
25 - <a class="rh-card rh-flame5" href="#">Collaboration Tools</a>
26 - <a class="rh-card rh-flame1" href="#">Computing resources</a>
27 - <a class="rh-card rh-flame2" href="#">Daily IT Support</a>
28 - <a class="rh-card rh-flame3" href="#">Graduate School</a>
29 - <a class="rh-card rh-flame4" href="#">TU Delft collections</a>
30 - </div>
31 - <a class="rh-btn" href="#">Explore Execution</a>
32 - </div>
33 - </div>
34 -
35 - <div class="rh-col">
36 - <a class="rh-img" href="#"></a>
37 - <div class="rh-body">
38 - <h3 class="rh-heading"><a href="#"><span class="rh-num">3.</span> Dissemination</a></h3>
39 - <p class="rh-desc">Sharing, publishing and archiving research</p>
40 - <div class="rh-cards">
41 - <a class="rh-card rh-flame5" href="#">Media Production</a>
42 - <a class="rh-card rh-flame1" href="#">Publishing</a>
43 - <a class="rh-card rh-flame2" href="#">Science Communication</a>
44 - <a class="rh-card rh-flame3" href="#">Tech Transfer</a>
45 - </div>
46 - <a class="rh-btn" href="#">Explore Dissemination</a>
47 - </div>
48 - </div>
49 -
50 -</div>
51 -{{/html}}
XWiki.StyleSheetExtension[0]
code
... ... @@ -1,6 +2,5 @@
1 -/* 1) Akzentfarbe zentral auf Angewandte-Orange */
2 2  .rh-grid{
3 - --rh-accent: #dd4814; /* Nummer + Überschrift */
2 + --rh-accent: hsl(194,95%,40%); /* Farbe der Nummer/Überschrift */
4 4   display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin:1rem 0;
5 5  }
6 6  @media (max-width:900px){ .rh-grid{ grid-template-columns:1fr; } }
... ... @@ -21,18 +21,11 @@
21 21  .rh-desc{ color:#666; font-size:.95rem; margin:0 0 1.1rem; }
22 22  
23 23  .rh-cards{ display:flex; flex-direction:column; gap:.55rem; margin-bottom:1.3rem; }
24 -.rh-card{
25 - display:block; padding:.8rem 1rem; border-radius:8px;
26 - background:#fbe9e2; /* leichtes Angewandte-Orange statt Grau */
23 +.rh-card{ display:block; padding:.8rem 1rem; border-radius:8px; background:#f7f7f7;
27 27   text-decoration:none; color:#1a1a1a; font-weight:600; font-size:.95rem;
28 28   border-left:4px solid var(--rh-flame,#ccc);
29 - transition:background .15s ease, color .15s ease, transform .15s ease;
30 -}
31 -.rh-card:hover{
32 - background:#dd4814; /* voll Angewandte-Orange */
33 - color:#fff; /* weiße Schrift */
34 - transform:translateX(3px);
35 -}
26 + transition:background .15s ease, transform .15s ease; }
27 +.rh-card:hover{ background:#eee; transform:translateX(3px); }
36 36  .rh-flame1{ --rh-flame:#0ca6d8; }
37 37  .rh-flame2{ --rh-flame:#e2330b; }
38 38  .rh-flame3{ --rh-flame:#f2a900; }
... ... @@ -39,12 +39,9 @@
39 39  .rh-flame4{ --rh-flame:#2e9e5b; }
40 40  .rh-flame5{ --rh-flame:#8e44ad; }
41 41  
42 -/* 2) Buttons: alle einheitlich orange (die drei Farbklassen zusammengeführt) */
43 -.rh-btn{
44 - margin-top:auto; display:block; text-align:center; text-decoration:none;
45 - padding:.8rem 1rem; border-radius:8px; font-weight:700;
46 - background:#dd4814; color:#fff;
47 - transition:background .15s ease;
48 -}
49 -.rh-btn:hover{ background:#b23810; color:#fff; } /* dunkleres Orange, Schrift bleibt weiß */
50 -
34 +.rh-btn{ margin-top:auto; display:block; text-align:center; text-decoration:none;
35 + padding:.8rem 1rem; border-radius:8px; font-weight:700; color:#1a1a1a; transition:filter .15s ease; }
36 +.rh-btn:hover{ filter:brightness(.95); }
37 +.rh-btn-yellow{ background:#f2c200; }
38 +.rh-btn-green{ background:#7bc043; }
39 +.rh-btn-forest{ background:#2e9e5b; color:#fff; }