Changes for page Get Started
Last modified by Veronika Kocher on Friday, 04 Sep 2026 15:32
From version 8.7
edited by Veronika Kocher
on Thursday, 03 Sep 2026 13:04
on Thursday, 03 Sep 2026 13:04
Change comment:
There is no comment for this version
To version 8.9
edited by Veronika Kocher
on Thursday, 03 Sep 2026 15:54
on Thursday, 03 Sep 2026 15:54
Change comment:
There is no comment for this version
Summary
-
Page properties (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -42,7 +42,7 @@ 42 42 <section class="arsn-card" style="margin-bottom:18px;overflow:hidden;border-left:6px solid #e94b13;"> 43 43 <div class="arsn-hero-image"><img src="https://xwiki.uni-ak.ac.at/bin/download/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/WebHome/enable.png" alt="Planning an artistic or research project" /></div> 44 44 <div style="padding:18px 21px 20px 21px;"> 45 - <div class="arsn-eyebrow" style="color:#8a4d36;margin-bottom:5px;">E NABLE · GET STARTED · AUSTRIA</div>45 + <div class="arsn-eyebrow" style="color:#8a4d36;margin-bottom:5px;">PREPARE · GET STARTED · AUSTRIA</div> 46 46 <h2 style="font-size:27px;line-height:1.2;margin:0 0 8px 0;color:#2c2926;">From project idea to a fundable, workable project</h2> 47 47 <p style="margin:0;color:#5e5953;line-height:1.6;max-width:1100px;"> 48 48 Use this page to clarify your project before you search for funding or start spending money. ... ... @@ -517,6 +517,38 @@ 517 517 [data-sn-master-first-row]{ 518 518 box-sizing:border-box; 519 519 } 520 + 521 +/* ========================================================= 522 + FULL-WIDTH THREE-LINE NUMBER / TITLE / SUBTITLE BLOCKS 523 + ========================================================= */ 524 +#xwikicontent .arsn-area-label[data-sn-three-line="1"]{ 525 + display:grid!important; 526 + grid-template-columns:minmax(0,1fr)!important; 527 + grid-auto-rows:auto!important; 528 + width:100%!important; 529 + max-width:none!important; 530 + box-sizing:border-box!important; 531 + justify-items:start!important; 532 + align-items:start!important; 533 + gap:2px!important; 534 + text-align:left!important; 535 + text-align-last:left!important; 536 + text-justify:auto!important; 537 + word-spacing:normal!important; 538 + white-space:normal!important; 539 +} 540 +#xwikicontent .arsn-area-label[data-sn-three-line="1"] > .arsn-area-number, 541 +#xwikicontent .arsn-area-label[data-sn-three-line="1"] > .sn-area-label-title, 542 +#xwikicontent .arsn-area-label[data-sn-three-line="1"] > .arsn-area-action{ 543 + display:block!important; 544 + width:100%!important; 545 + margin:0!important; 546 + text-align:left!important; 547 + text-align-last:left!important; 548 + text-justify:auto!important; 549 + word-spacing:normal!important; 550 + white-space:normal!important; 551 +} 520 520 </style> 521 521 522 522 <script data-sn-service-navigator-master="1"> ... ... @@ -709,6 +709,227 @@ 709 709 } 710 710 711 711 /* ======================================================= 744 + BORDERLESS FILLED RED/ORANGE CTA BUTTONS 745 + ======================================================= */ 746 + 747 + function colourDistance(a,b){ 748 + return Math.sqrt( 749 + Math.pow(a[0]-b[0],2)+ 750 + Math.pow(a[1]-b[1],2)+ 751 + Math.pow(a[2]-b[2],2) 752 + ); 753 + } 754 + 755 + function makeFilledRedOrangeCTAsBorderless(){ 756 + var RED_ORANGE=[233,75,19]; 757 + 758 + Array.from( 759 + root.querySelectorAll( 760 + 'a,button,[role="button"],input[type="submit"],input[type="button"]' 761 + ) 762 + ).forEach(function(el){ 763 + if(!visible(el))return; 764 + 765 + var style=getComputedStyle(el); 766 + var rgb=parseRGB(style.backgroundColor); 767 + 768 + if(!rgb)return; 769 + 770 + if( 771 + colourDistance( 772 + rgb, 773 + RED_ORANGE 774 + )>55 775 + ){ 776 + return; 777 + } 778 + 779 + var rect=el.getBoundingClientRect(); 780 + 781 + if( 782 + rect.width<80|| 783 + rect.height<24 784 + ){ 785 + return; 786 + } 787 + 788 + el.style.setProperty( 789 + "border", 790 + "none", 791 + "important" 792 + ); 793 + 794 + el.style.setProperty( 795 + "border-left", 796 + "none", 797 + "important" 798 + ); 799 + 800 + el.style.setProperty( 801 + "border-top", 802 + "none", 803 + "important" 804 + ); 805 + 806 + el.style.setProperty( 807 + "border-right", 808 + "none", 809 + "important" 810 + ); 811 + 812 + el.style.setProperty( 813 + "border-bottom", 814 + "none", 815 + "important" 816 + ); 817 + 818 + el.style.setProperty( 819 + "box-shadow", 820 + "none", 821 + "important" 822 + ); 823 + }); 824 + } 825 + 826 + /* ======================================================= 827 + FULL-WIDTH THREE-LINE AREA LABELS 828 + ======================================================= */ 829 + 830 + function compactText(value){ 831 + return String(value||"") 832 + .replace(/\s+/g," ") 833 + .trim(); 834 + } 835 + 836 + function makeThreeLineAreaLabels(){ 837 + Array.from( 838 + root.querySelectorAll( 839 + ".arsn-area-label" 840 + ) 841 + ).forEach(function(label){ 842 + if( 843 + label.getAttribute( 844 + "data-sn-three-line" 845 + )==="1" 846 + ){ 847 + return; 848 + } 849 + 850 + var number= 851 + label.querySelector( 852 + ":scope > .arsn-area-number" 853 + ); 854 + 855 + var action= 856 + label.querySelector( 857 + ":scope > .arsn-area-action" 858 + ); 859 + 860 + if( 861 + !number|| 862 + !action 863 + ){ 864 + return; 865 + } 866 + 867 + var clone= 868 + label.cloneNode(true); 869 + 870 + var cloneNumber= 871 + clone.querySelector( 872 + ":scope > .arsn-area-number" 873 + ); 874 + 875 + var cloneAction= 876 + clone.querySelector( 877 + ":scope > .arsn-area-action" 878 + ); 879 + 880 + if(cloneNumber){ 881 + cloneNumber.remove(); 882 + } 883 + 884 + if(cloneAction){ 885 + cloneAction.remove(); 886 + } 887 + 888 + var titleText= 889 + compactText( 890 + clone.textContent 891 + ); 892 + 893 + if(!titleText){ 894 + return; 895 + } 896 + 897 + var numberNode= 898 + number.cloneNode(true); 899 + 900 + var actionNode= 901 + action.cloneNode(true); 902 + 903 + var titleNode= 904 + document.createElement( 905 + "span" 906 + ); 907 + 908 + titleNode.className= 909 + "sn-area-label-title"; 910 + 911 + titleNode.textContent= 912 + titleText; 913 + 914 + while(label.firstChild){ 915 + label.removeChild( 916 + label.firstChild 917 + ); 918 + } 919 + 920 + label.appendChild( 921 + numberNode 922 + ); 923 + 924 + label.appendChild( 925 + titleNode 926 + ); 927 + 928 + label.appendChild( 929 + actionNode 930 + ); 931 + 932 + label.setAttribute( 933 + "data-sn-three-line", 934 + "1" 935 + ); 936 + 937 + var head= 938 + label.closest( 939 + ".arsn-area-head" 940 + ); 941 + 942 + if(head){ 943 + head.style.setProperty( 944 + "width", 945 + "100%", 946 + "important" 947 + ); 948 + 949 + head.style.setProperty( 950 + "max-width", 951 + "100%", 952 + "important" 953 + ); 954 + 955 + head.style.setProperty( 956 + "box-sizing", 957 + "border-box", 958 + "important" 959 + ); 960 + } 961 + }); 962 + } 963 + 964 + /* ======================================================= 712 712 PLACEHOLDER BADGE 713 713 ======================================================= */ 714 714 ... ... @@ -1479,6 +1479,9 @@ 1479 1479 var headers= 1480 1480 applyOverviewPalette(); 1481 1481 1735 + makeThreeLineAreaLabels(); 1736 + makeFilledRedOrangeCTAsBorderless(); 1737 + 1482 1482 if( 1483 1483 window.innerWidth> 1484 1484 MOBILE_MAX