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
Change comment: There is no comment for this version
To version 8.9
edited by Veronika Kocher
on Thursday, 03 Sep 2026 15:54
Change comment: There is no comment for this version

Summary

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;">ENABLE · 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