Skip to Content

Changes for page Get Started

Last modified by Veronika Kocher on Friday, 04 Sep 2026 15:32
From version 8.4
edited by Veronika Kocher
on Thursday, 03 Sep 2026 9:18
Change comment: There is no comment for this version
To version 8.6
edited by Veronika Kocher
on Thursday, 03 Sep 2026 10:09
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -435,22 +435,115 @@
435 435  </div>
436 436  {{/html}}
437 437  
438 -{{html clean="false"}}
438 +\n\n
439 +\n\n{{html clean="false"}}
439 439  <!-- SN_HORIZONTAL_BOX_HARMONIZER_START -->
440 -<style data-sn-horizontal-box-harmonizer="1">
441 -[data-sn-equal-height-managed="1"]{box-sizing:border-box}
442 -@media(max-width:767px){
443 - [data-sn-equal-height-managed="1"]{min-height:0!important}
441 +
442 +<style data-sn-horizontal-box-harmonizer="7">
443 +/* ---------- Typography: never justify headings ---------- */
444 +#xwikicontent h1,
445 +#xwikicontent h2,
446 +#xwikicontent h3,
447 +#xwikicontent h4,
448 +#xwikicontent h5,
449 +#xwikicontent h6,
450 +#xwikicontent .box-title,
451 +#xwikicontent [role="heading"],
452 +#xwikicontent h1 a,
453 +#xwikicontent h2 a,
454 +#xwikicontent h3 a,
455 +#xwikicontent h4 a,
456 +#xwikicontent h5 a,
457 +#xwikicontent h6 a,
458 +#xwikicontent .box-title a,
459 +#xwikicontent [role="heading"] a{
460 + text-align:left!important;
461 + text-justify:auto!important;
462 + word-spacing:normal!important;
444 444  }
464 +
465 +/* ---------- Native XWiki semantic callouts ---------- */
466 +#xwikicontent .box.infomessage,
467 +#xwikicontent .infomessage,
468 +#xwikicontent .box.warningmessage,
469 +#xwikicontent .warningmessage,
470 +#xwikicontent .box.successmessage,
471 +#xwikicontent .successmessage,
472 +#xwikicontent .box.errormessage,
473 +#xwikicontent .errormessage,
474 +#xwikicontent [data-sn-callout-harmonized="1"]{
475 + box-sizing:border-box!important;
476 + border-radius:8px!important;
477 + border-top:1px solid rgba(0,0,0,.08)!important;
478 + border-right:1px solid rgba(0,0,0,.08)!important;
479 + border-bottom:1px solid rgba(0,0,0,.08)!important;
480 + border-left:4px solid var(--sn-callout-accent,#21b6d7)!important;
481 + padding:14px 16px!important;
482 + text-align:left!important;
483 + text-justify:auto!important;
484 + word-spacing:normal!important;
485 + box-shadow:none!important;
486 +}
487 +
488 +#xwikicontent .box.infomessage,
489 +#xwikicontent .infomessage{
490 + --sn-callout-accent:#21b6d7;
491 + background:#eaf7fb!important;
492 +}
493 +
494 +#xwikicontent .box.warningmessage,
495 +#xwikicontent .warningmessage{
496 + --sn-callout-accent:#f0aa00;
497 + background:#fff8e7!important;
498 +}
499 +
500 +#xwikicontent .box.successmessage,
501 +#xwikicontent .successmessage{
502 + --sn-callout-accent:#38b76a;
503 + background:#edf9f1!important;
504 +}
505 +
506 +#xwikicontent .box.errormessage,
507 +#xwikicontent .errormessage{
508 + --sn-callout-accent:#e94b13;
509 + background:#fff1ec!important;
510 +}
511 +
512 +#xwikicontent [data-sn-callout-harmonized="1"] > :first-child,
513 +#xwikicontent .infomessage > :first-child,
514 +#xwikicontent .warningmessage > :first-child,
515 +#xwikicontent .successmessage > :first-child,
516 +#xwikicontent .errormessage > :first-child{
517 + margin-top:0!important;
518 +}
519 +
520 +#xwikicontent [data-sn-callout-harmonized="1"] > :last-child,
521 +#xwikicontent .infomessage > :last-child,
522 +#xwikicontent .warningmessage > :last-child,
523 +#xwikicontent .successmessage > :last-child,
524 +#xwikicontent .errormessage > :last-child{
525 + margin-bottom:0!important;
526 +}
527 +
528 +#xwikicontent [data-sn-equal-height-managed],
529 +#xwikicontent [data-sn-first-section-aligned],
530 +#xwikicontent [data-sn-first-content-aligned]{
531 + box-sizing:border-box;
532 +}
445 445  </style>
446 -<script data-sn-horizontal-box-harmonizer="1">
534 +
535 +<script data-sn-horizontal-box-harmonizer="7">
447 447  (function(){
448 448   "use strict";
449 449  
450 450   var MOBILE_MAX=767;
451 - var ROW_TOLERANCE=4;
540 + var ROW_TOLERANCE=6;
452 452   var MIN_W=150;
453 453   var MIN_H=36;
543 + var MAX_PARENT_CHILDREN=18;
544 + var SEARCH_DEPTH=5;
545 + var RESIZE_DEBOUNCE=220;
546 + var MIN_WIDTH_CHANGE=2;
454 454  
455 455   var root=
456 456   document.getElementById("xwikicontent")||
... ... @@ -460,72 +460,297 @@
460 460  
461 461   if(!root)return;
462 462  
463 - var managed=new Set();
464 - var raf=0;
556 + var heightManaged=new Set();
557 + var sectionManaged=new Set();
558 + var contentManaged=new Set();
465 465  
560 + var originalMinHeight=new WeakMap();
561 + var originalMarginTop=new WeakMap();
562 +
563 + var resizeTimer=0;
564 + var lastWidth=-1;
565 + var hasApplied=false;
566 + var applying=false;
567 +
466 466   function num(v){
467 467   var n=parseFloat(v);
468 468   return Number.isFinite(n)?n:0;
469 469   }
470 470  
471 - function visible(el){
573 + function visible(el,minW,minH){
472 472   if(!el||el.nodeType!==1)return false;
575 +
473 473   var s=getComputedStyle(el);
474 - if(s.display==="none"||s.visibility==="hidden"||Number(s.opacity)===0)return false;
577 +
578 + if(
579 + s.display==="none"||
580 + s.visibility==="hidden"||
581 + Number(s.opacity)===0
582 + ){
583 + return false;
584 + }
585 +
475 475   var r=el.getBoundingClientRect();
476 - return r.width>=MIN_W&&r.height>=MIN_H;
587 +
588 + return (
589 + r.width>=(minW||1)&&
590 + r.height>=(minH||1)
591 + );
477 477   }
478 478  
594 + function normalizeText(text){
595 + return String(text||"")
596 + .replace(/\s+/g," ")
597 + .trim()
598 + .toUpperCase();
599 + }
600 +
479 479   function excluded(el){
480 - return !el.matches||el.matches(
481 - "button,input,select,textarea,option,label,img,svg,canvas,table,thead,tbody,tfoot,tr,td,th,summary,script,style,noscript,template,.btn,.chip,[role=button]"
602 + return (
603 + !el.matches||
604 + el.matches(
605 + "button,input,select,textarea,option,label,img,svg,canvas,table,thead,tbody,tfoot,tr,td,th,summary,script,style,noscript,template,.btn,.chip,[role=button]"
606 + )
482 482   );
483 483   }
484 484  
610 + /* ---------- Custom coloured callouts ---------- */
611 +
612 + function nativeCallout(el){
613 + var c=
614 + typeof el.className==="string"
615 + ? el.className.toLowerCase()
616 + : "";
617 +
618 + return (
619 + /(^|\s)(infomessage|warningmessage|successmessage|errormessage)(\s|$)/.test(c)
620 + );
621 + }
622 +
623 + function customCallout(el){
624 + if(!visible(el,220,42)||excluded(el))return false;
625 +
626 + var r=el.getBoundingClientRect();
627 +
628 + if(r.height>520)return false;
629 +
630 + var s=getComputedStyle(el);
631 +
632 + var bg=
633 + s.backgroundColor&&
634 + s.backgroundColor!=="rgba(0, 0, 0, 0)"&&
635 + s.backgroundColor!=="transparent"&&
636 + s.backgroundColor!=="rgb(255, 255, 255)";
637 +
638 + var left=
639 + num(s.borderLeftWidth);
640 +
641 + return (
642 + bg&&
643 + left>=2
644 + );
645 + }
646 +
647 + function harmoniseCustomCallouts(){
648 + Array.from(
649 + root.querySelectorAll(
650 + "div,aside,section"
651 + )
652 + ).forEach(function(el){
653 + if(nativeCallout(el))return;
654 + if(!customCallout(el))return;
655 +
656 + var s=getComputedStyle(el);
657 +
658 + el.setAttribute(
659 + "data-sn-callout-harmonized",
660 + "1"
661 + );
662 +
663 + if(
664 + s.borderLeftColor
665 + ){
666 + el.style.setProperty(
667 + "--sn-callout-accent",
668 + s.borderLeftColor
669 + );
670 + }
671 + });
672 + }
673 +
674 + /* ---------- Restore only values V7 itself changed ---------- */
675 +
676 + function saveOriginal(el,map,property){
677 + if(map.has(el))return;
678 +
679 + map.set(el,{
680 + value:
681 + el.style.getPropertyValue(
682 + property
683 + ),
684 + priority:
685 + el.style.getPropertyPriority(
686 + property
687 + )
688 + });
689 + }
690 +
691 + function restoreOriginal(el,map,property){
692 + var original=map.get(el);
693 +
694 + if(original&&original.value){
695 + el.style.setProperty(
696 + property,
697 + original.value,
698 + original.priority||""
699 + );
700 + }else{
701 + el.style.removeProperty(
702 + property
703 + );
704 + }
705 + }
706 +
707 + function resetRuntime(){
708 + heightManaged.forEach(function(el){
709 + restoreOriginal(
710 + el,
711 + originalMinHeight,
712 + "min-height"
713 + );
714 +
715 + el.removeAttribute(
716 + "data-sn-equal-height-managed"
717 + );
718 + });
719 +
720 + sectionManaged.forEach(function(el){
721 + restoreOriginal(
722 + el,
723 + originalMarginTop,
724 + "margin-top"
725 + );
726 +
727 + el.removeAttribute(
728 + "data-sn-first-section-aligned"
729 + );
730 + });
731 +
732 + contentManaged.forEach(function(el){
733 + restoreOriginal(
734 + el,
735 + originalMarginTop,
736 + "margin-top"
737 + );
738 +
739 + el.removeAttribute(
740 + "data-sn-first-content-aligned"
741 + );
742 + });
743 +
744 + heightManaged.clear();
745 + sectionManaged.clear();
746 + contentManaged.clear();
747 + }
748 +
749 + /* ---------- Card detection ---------- */
750 +
485 485   function namedLikeBox(el){
486 - var c=typeof el.className==="string"?el.className:"";
752 + var c=
753 + typeof el.className==="string"
754 + ? el.className
755 + : "";
756 +
487 487   return /(^|[\s_-])(box|card|tile|panel|role|check|service|source|call|area|detail|resource|topic|warn|info)([\s_-]|$)/i.test(c);
488 488   }
489 489  
490 490   function boxLike(el){
491 - if(!visible(el)||excluded(el))return false;
761 + if(
762 + !visible(el,MIN_W,MIN_H)||
763 + excluded(el)
764 + ){
765 + return false;
766 + }
767 +
492 492   var s=getComputedStyle(el);
493 493   var r=el.getBoundingClientRect();
770 +
494 494   var border=
495 - num(s.borderTopWidth)+num(s.borderRightWidth)+
496 - num(s.borderBottomWidth)+num(s.borderLeftWidth);
772 + num(s.borderTopWidth)+
773 + num(s.borderRightWidth)+
774 + num(s.borderBottomWidth)+
775 + num(s.borderLeftWidth);
776 +
497 497   var radius=Math.max(
498 - num(s.borderTopLeftRadius),num(s.borderTopRightRadius),
499 - num(s.borderBottomLeftRadius),num(s.borderBottomRightRadius)
778 + num(s.borderTopLeftRadius),
779 + num(s.borderTopRightRadius),
780 + num(s.borderBottomLeftRadius),
781 + num(s.borderBottomRightRadius)
500 500   );
501 - var bg=s.backgroundColor&&s.backgroundColor!=="rgba(0, 0, 0, 0)"&&s.backgroundColor!=="transparent";
502 - var shadow=s.boxShadow&&s.boxShadow!=="none";
503 - return namedLikeBox(el)||border>=1||(bg&&radius>=3)||(shadow&&r.width>=180);
783 +
784 + var bg=
785 + s.backgroundColor&&
786 + s.backgroundColor!=="rgba(0, 0, 0, 0)"&&
787 + s.backgroundColor!=="transparent";
788 +
789 + var shadow=
790 + s.boxShadow&&
791 + s.boxShadow!=="none";
792 +
793 + return (
794 + namedLikeBox(el)||
795 + border>=1||
796 + (bg&&radius>=3)||
797 + (shadow&&r.width>=180)
798 + );
504 504   }
505 505  
506 506   function pickTarget(child){
507 - if(!visible(child))return null;
802 + if(!visible(child,MIN_W,MIN_H))return null;
803 +
508 508   if(boxLike(child))return child;
509 509  
510 510   var cr=child.getBoundingClientRect();
511 511   var q=[];
808 +
512 512   Array.from(child.children||[]).forEach(function(el){
513 513   q.push({el:el,depth:1});
514 514   });
515 515  
516 - var best=null,bestScore=-1;
813 + var best=null;
814 + var bestScore=-Infinity;
517 517  
518 518   while(q.length){
519 519   var item=q.shift();
520 520   var el=item.el;
521 - if(!visible(el))continue;
522 522  
820 + if(!visible(el,MIN_W,MIN_H))continue;
821 +
523 523   var r=el.getBoundingClientRect();
524 524  
525 - if(r.width>=cr.width*.72&&boxLike(el)){
526 - var widthFit=1-Math.min(1,Math.abs(cr.width-r.width)/Math.max(1,cr.width));
527 - var topFit=1-Math.min(1,Math.abs(cr.top-r.top)/80);
528 - var score=widthFit*5+topFit*2+Math.min(r.height,600)/600;
824 + if(
825 + r.width>=cr.width*.68&&
826 + boxLike(el)
827 + ){
828 + var widthFit=
829 + 1-Math.min(
830 + 1,
831 + Math.abs(cr.width-r.width)/
832 + Math.max(1,cr.width)
833 + );
834 +
835 + var topFit=
836 + 1-Math.min(
837 + 1,
838 + Math.abs(cr.top-r.top)/100
839 + );
840 +
841 + var score=
842 + widthFit*6+
843 + topFit*3+
844 + Math.min(r.height,900)/450+
845 + Math.min(r.width*r.height,900000)/900000;
846 +
529 529   if(score>bestScore){
530 530   best=el;
531 531   bestScore=score;
... ... @@ -532,9 +532,12 @@
532 532   }
533 533   }
534 534  
535 - if(item.depth<3){
853 + if(item.depth<SEARCH_DEPTH){
536 536   Array.from(el.children||[]).forEach(function(next){
537 - q.push({el:next,depth:item.depth+1});
855 + q.push({
856 + el:next,
857 + depth:item.depth+1
858 + });
538 538   });
539 539   }
540 540   }
... ... @@ -542,130 +542,692 @@
542 542   return best;
543 543   }
544 544  
545 - function reset(){
546 - managed.forEach(function(el){
547 - el.style.removeProperty("min-height");
548 - el.removeAttribute("data-sn-equal-height-managed");
549 - });
550 - managed.clear();
866 + function groupRows(entries){
867 + var groups=[];
868 +
869 + entries
870 + .slice()
871 + .sort(function(a,b){
872 + return (
873 + a.rect.top-b.rect.top||
874 + a.rect.left-b.rect.left
875 + );
876 + })
877 + .forEach(function(entry){
878 + var group=null;
879 +
880 + for(var i=0;i<groups.length;i++){
881 + if(
882 + Math.abs(
883 + groups[i].top-
884 + entry.rect.top
885 + )<=ROW_TOLERANCE
886 + ){
887 + group=groups[i];
888 + break;
889 + }
890 + }
891 +
892 + if(!group){
893 + group={
894 + top:entry.rect.top,
895 + entries:[]
896 + };
897 + groups.push(group);
898 + }
899 +
900 + group.entries.push(entry);
901 + });
902 +
903 + return groups;
551 551   }
552 552  
553 - function horizontalLayout(parent){
554 - if(!visible(parent))return false;
555 - var s=getComputedStyle(parent);
556 - if(s.display==="grid"||s.display==="inline-grid")return true;
557 - if(s.display==="flex"||s.display==="inline-flex"){
558 - return s.flexDirection==="row"||s.flexDirection==="row-reverse";
906 + function validRow(group){
907 + if(group.entries.length<2)return false;
908 +
909 + var lefts=
910 + group.entries
911 + .map(function(e){return e.rect.left;})
912 + .sort(function(a,b){return a-b;});
913 +
914 + if(
915 + lefts[lefts.length-1]-
916 + lefts[0]<
917 + 80
918 + ){
919 + return false;
559 559   }
560 - return false;
921 +
922 + var widths=
923 + group.entries
924 + .map(function(e){return e.rect.width;})
925 + .filter(function(w){return w>0;});
926 +
927 + if(widths.length<2)return false;
928 +
929 + var minW=
930 + Math.min.apply(Math,widths);
931 +
932 + var maxW=
933 + Math.max.apply(Math,widths);
934 +
935 + return (
936 + maxW/
937 + Math.max(1,minW)<=
938 + 1.9
939 + );
561 561   }
562 562  
563 - function rowGroups(entries){
564 - var groups=[];
565 - entries.slice().sort(function(a,b){
566 - return a.rect.top-b.rect.top||a.rect.left-b.rect.left;
567 - }).forEach(function(entry){
568 - var group=null;
569 - for(var i=0;i<groups.length;i++){
570 - if(Math.abs(groups[i].top-entry.rect.top)<=ROW_TOLERANCE){
571 - group=groups[i];
572 - break;
942 + /* ---------- Known ARSN first section bars ---------- */
943 +
944 + function knownBar(el){
945 + var text=
946 + normalizeText(
947 + el.textContent
948 + );
949 +
950 + return (
951 + text==="HIER STARTEN"||
952 + text==="ORGANISIEREN & DOKUMENTIEREN"||
953 + text==="ENTSCHEIDEN"||
954 + text==="START HERE"||
955 + text==="GET STARTED"||
956 + text==="ORGANISE & DOCUMENT"||
957 + text==="ORGANIZE & DOCUMENT"||
958 + text==="DECIDE"
959 + );
960 + }
961 +
962 + function findKnownBar(card){
963 + var cardRect=
964 + card.getBoundingClientRect();
965 +
966 + var rows=
967 + Array.from(
968 + card.querySelectorAll(
969 + "div,p,span,strong,h3,h4,h5,h6"
970 + )
971 + )
972 + .filter(function(el){
973 + if(!visible(el,20,6))return false;
974 + if(!knownBar(el))return false;
975 +
976 + var r=el.getBoundingClientRect();
977 +
978 + var rel=
979 + r.top-
980 + cardRect.top;
981 +
982 + return (
983 + rel>=35&&
984 + rel<=
985 + cardRect.height*.75
986 + );
987 + })
988 + .sort(function(a,b){
989 + return (
990 + a.getBoundingClientRect().top-
991 + b.getBoundingClientRect().top
992 + );
993 + });
994 +
995 + return rows[0]||null;
996 + }
997 +
998 + function alignKnownBars(cards){
999 + var rows=
1000 + cards.map(function(card){
1001 + var bar=
1002 + findKnownBar(card);
1003 +
1004 + if(!bar)return null;
1005 +
1006 + var cr=
1007 + card.getBoundingClientRect();
1008 +
1009 + var br=
1010 + bar.getBoundingClientRect();
1011 +
1012 + return {
1013 + bar:bar,
1014 + relativeTop:
1015 + br.top-
1016 + cr.top
1017 + };
1018 + });
1019 +
1020 + if(
1021 + rows.some(function(row){
1022 + return !row;
1023 + })
1024 + ){
1025 + return false;
1026 + }
1027 +
1028 + var target=
1029 + Math.max.apply(
1030 + Math,
1031 + rows.map(function(row){
1032 + return row.relativeTop;
1033 + })
1034 + );
1035 +
1036 + rows.forEach(function(row){
1037 + var delta=
1038 + target-
1039 + row.relativeTop;
1040 +
1041 + if(delta<=1)return;
1042 +
1043 + saveOriginal(
1044 + row.bar,
1045 + originalMarginTop,
1046 + "margin-top"
1047 + );
1048 +
1049 + var current=
1050 + num(
1051 + getComputedStyle(
1052 + row.bar
1053 + ).marginTop
1054 + );
1055 +
1056 + row.bar.style.setProperty(
1057 + "margin-top",
1058 + (
1059 + current+
1060 + delta
1061 + )+"px"
1062 + );
1063 +
1064 + row.bar.setAttribute(
1065 + "data-sn-first-section-aligned",
1066 + "7"
1067 + );
1068 +
1069 + sectionManaged.add(
1070 + row.bar
1071 + );
1072 + });
1073 +
1074 + return true;
1075 + }
1076 +
1077 + /* ---------- Generic first content after heading ---------- */
1078 +
1079 + function heading(card){
1080 + var cr=
1081 + card.getBoundingClientRect();
1082 +
1083 + var rows=
1084 + Array.from(
1085 + card.querySelectorAll(
1086 + "h1,h2,h3,h4,h5,h6,.box-title,[role=heading]"
1087 + )
1088 + )
1089 + .filter(function(el){
1090 + if(!visible(el,20,8))return false;
1091 +
1092 + var r=el.getBoundingClientRect();
1093 +
1094 + var rel=
1095 + r.top-
1096 + cr.top;
1097 +
1098 + return (
1099 + rel>=0&&
1100 + rel<=
1101 + Math.min(
1102 + 160,
1103 + cr.height*.45
1104 + )
1105 + );
1106 + })
1107 + .sort(function(a,b){
1108 + return (
1109 + a.getBoundingClientRect().top-
1110 + b.getBoundingClientRect().top
1111 + );
1112 + });
1113 +
1114 + return rows[0]||null;
1115 + }
1116 +
1117 + function firstContent(card,h){
1118 + if(!h)return null;
1119 +
1120 + var cr=
1121 + card.getBoundingClientRect();
1122 +
1123 + var hr=
1124 + h.getBoundingClientRect();
1125 +
1126 + var rows=
1127 + Array.from(
1128 + card.querySelectorAll(
1129 + "p,div,ul,ol,dl,blockquote"
1130 + )
1131 + )
1132 + .filter(function(el){
1133 + if(
1134 + el===h||
1135 + h.contains(el)||
1136 + el.contains(h)
1137 + ){
1138 + return false;
573 573   }
574 - }
575 - if(!group){
576 - group={top:entry.rect.top,entries:[]};
577 - groups.push(group);
578 - }
579 - group.entries.push(entry);
1140 +
1141 + if(!visible(el,30,8))return false;
1142 +
1143 + var text=
1144 + String(el.textContent||"")
1145 + .replace(/\s+/g," ")
1146 + .trim();
1147 +
1148 + if(text.length<3)return false;
1149 +
1150 + var r=el.getBoundingClientRect();
1151 +
1152 + if(
1153 + r.top<
1154 + hr.bottom-1
1155 + ){
1156 + return false;
1157 + }
1158 +
1159 + if(
1160 + r.top-cr.top>
1161 + Math.min(
1162 + 280,
1163 + cr.height*.65
1164 + )
1165 + ){
1166 + return false;
1167 + }
1168 +
1169 + if(
1170 + r.height>
1171 + cr.height*.58
1172 + ){
1173 + return false;
1174 + }
1175 +
1176 + return true;
1177 + })
1178 + .sort(function(a,b){
1179 + var ar=
1180 + a.getBoundingClientRect();
1181 +
1182 + var br=
1183 + b.getBoundingClientRect();
1184 +
1185 + return (
1186 + ar.top-br.top||
1187 + ar.height-br.height
1188 + );
1189 + });
1190 +
1191 + return rows[0]||null;
1192 + }
1193 +
1194 + function alignGeneric(cards){
1195 + var rows=
1196 + cards.map(function(card){
1197 + var h=
1198 + heading(card);
1199 +
1200 + var c=
1201 + firstContent(
1202 + card,
1203 + h
1204 + );
1205 +
1206 + if(!h||!c)return null;
1207 +
1208 + var cr=
1209 + card.getBoundingClientRect();
1210 +
1211 + var rr=
1212 + c.getBoundingClientRect();
1213 +
1214 + return {
1215 + content:c,
1216 + relativeTop:
1217 + rr.top-cr.top
1218 + };
1219 + });
1220 +
1221 + if(
1222 + rows.some(function(row){
1223 + return !row;
1224 + })
1225 + ){
1226 + return false;
1227 + }
1228 +
1229 + var target=
1230 + Math.max.apply(
1231 + Math,
1232 + rows.map(function(row){
1233 + return row.relativeTop;
1234 + })
1235 + );
1236 +
1237 + rows.forEach(function(row){
1238 + var delta=
1239 + target-
1240 + row.relativeTop;
1241 +
1242 + if(delta<=1)return;
1243 +
1244 + saveOriginal(
1245 + row.content,
1246 + originalMarginTop,
1247 + "margin-top"
1248 + );
1249 +
1250 + var current=
1251 + num(
1252 + getComputedStyle(
1253 + row.content
1254 + ).marginTop
1255 + );
1256 +
1257 + row.content.style.setProperty(
1258 + "margin-top",
1259 + (
1260 + current+
1261 + delta
1262 + )+"px"
1263 + );
1264 +
1265 + row.content.setAttribute(
1266 + "data-sn-first-content-aligned",
1267 + "7"
1268 + );
1269 +
1270 + contentManaged.add(
1271 + row.content
1272 + );
580 580   });
581 - return groups;
1274 +
1275 + return true;
582 582   }
583 583  
584 - function run(){
585 - reset();
1278 + function applyRow(group){
1279 + if(!validRow(group))return false;
586 586  
587 - if(window.innerWidth<=MOBILE_MAX)return;
1281 + var cards=[];
1282 + var seen=new Set();
588 588  
589 - var parents=Array.from(root.querySelectorAll("*")).filter(function(el){
590 - return el.children&&el.children.length>=2&&horizontalLayout(el);
1284 + group.entries.forEach(function(entry){
1285 + if(!seen.has(entry.target)){
1286 + seen.add(entry.target);
1287 + cards.push(entry.target);
1288 + }
591 591   });
592 592  
593 - parents.forEach(function(parent){
594 - var entries=[];
1291 + if(cards.length<2)return false;
595 595  
596 - Array.from(parent.children).forEach(function(child){
597 - if(!visible(child))return;
598 - var target=pickTarget(child);
599 - if(!target)return;
600 - entries.push({
601 - target:target,
602 - rect:target.getBoundingClientRect()
603 - });
604 - });
1293 + if(
1294 + !alignKnownBars(cards)
1295 + ){
1296 + alignGeneric(cards);
1297 + }
605 605  
606 - if(entries.length<2)return;
1299 + var maxHeight=0;
607 607  
608 - rowGroups(entries).forEach(function(group){
609 - if(group.entries.length<2)return;
1301 + cards.forEach(function(card){
1302 + maxHeight=
1303 + Math.max(
1304 + maxHeight,
1305 + card.getBoundingClientRect().height
1306 + );
1307 + });
610 610  
611 - var lefts=group.entries.map(function(e){return e.rect.left;}).sort(function(a,b){return a-b;});
612 - if(lefts[lefts.length-1]-lefts[0]<80)return;
1309 + maxHeight=
1310 + Math.ceil(
1311 + maxHeight
1312 + );
613 613  
614 - var targets=[];
615 - var seen=new Set();
1314 + if(maxHeight<MIN_H)return false;
616 616  
617 - group.entries.forEach(function(e){
618 - if(!seen.has(e.target)){
619 - seen.add(e.target);
620 - targets.push(e.target);
621 - }
1316 + cards.forEach(function(card){
1317 + saveOriginal(
1318 + card,
1319 + originalMinHeight,
1320 + "min-height"
1321 + );
1322 +
1323 + card.style.setProperty(
1324 + "min-height",
1325 + maxHeight+"px"
1326 + );
1327 +
1328 + card.setAttribute(
1329 + "data-sn-equal-height-managed",
1330 + "7"
1331 + );
1332 +
1333 + heightManaged.add(card);
1334 + });
1335 +
1336 + return true;
1337 + }
1338 +
1339 + function calculate(force){
1340 + if(applying)return;
1341 +
1342 + var width=
1343 + Math.round(
1344 + window.innerWidth
1345 + );
1346 +
1347 + var meaningful=
1348 + lastWidth<0||
1349 + Math.abs(
1350 + width-
1351 + lastWidth
1352 + )>=
1353 + MIN_WIDTH_CHANGE;
1354 +
1355 + if(
1356 + hasApplied&&
1357 + !force&&
1358 + !meaningful
1359 + ){
1360 + return;
1361 + }
1362 +
1363 + applying=true;
1364 +
1365 + try{
1366 + harmoniseCustomCallouts();
1367 +
1368 + if(width<=MOBILE_MAX){
1369 + if(hasApplied){
1370 + resetRuntime();
1371 + }
1372 +
1373 + hasApplied=false;
1374 + lastWidth=width;
1375 + return;
1376 + }
1377 +
1378 + if(hasApplied){
1379 + resetRuntime();
1380 + }
1381 +
1382 + var parents=
1383 + Array.from(
1384 + root.querySelectorAll("*")
1385 + )
1386 + .filter(function(parent){
1387 + return (
1388 + visible(
1389 + parent,
1390 + MIN_W,
1391 + MIN_H
1392 + )&&
1393 + parent.children&&
1394 + parent.children.length>=2&&
1395 + parent.children.length<=
1396 + MAX_PARENT_CHILDREN
1397 + );
622 622   });
623 623  
624 - if(targets.length<2)return;
1400 + var touched=
1401 + new Set();
625 625  
626 - var max=0;
627 - targets.forEach(function(el){
628 - max=Math.max(max,el.getBoundingClientRect().height);
1403 + parents.forEach(function(parent){
1404 + var entries=[];
1405 +
1406 + Array.from(
1407 + parent.children
1408 + ).forEach(function(child){
1409 + if(
1410 + !visible(
1411 + child,
1412 + MIN_W,
1413 + MIN_H
1414 + )
1415 + ){
1416 + return;
1417 + }
1418 +
1419 + var target=
1420 + pickTarget(child);
1421 +
1422 + if(!target)return;
1423 +
1424 + entries.push({
1425 + target:target,
1426 + rect:
1427 + target.getBoundingClientRect()
1428 + });
629 629   });
630 630  
631 - max=Math.ceil(max);
632 - if(max<MIN_H)return;
1431 + groupRows(
1432 + entries
1433 + ).forEach(function(group){
1434 + if(!validRow(group))return;
633 633  
634 - targets.forEach(function(el){
635 - el.style.setProperty("min-height",max+"px");
636 - el.setAttribute("data-sn-equal-height-managed","1");
637 - managed.add(el);
1436 + var targets=
1437 + group.entries.map(function(entry){
1438 + return entry.target;
1439 + });
1440 +
1441 + if(
1442 + !targets.some(function(el){
1443 + return !touched.has(el);
1444 + })
1445 + ){
1446 + return;
1447 + }
1448 +
1449 + if(applyRow(group)){
1450 + targets.forEach(function(el){
1451 + touched.add(el);
1452 + });
1453 + }
638 638   });
639 639   });
640 - });
1456 +
1457 + lastWidth=width;
1458 + hasApplied=true;
1459 + }finally{
1460 + applying=false;
1461 + }
641 641   }
642 642  
643 - function schedule(){
644 - if(raf)cancelAnimationFrame(raf);
645 - raf=requestAnimationFrame(function(){
646 - raf=requestAnimationFrame(function(){
647 - raf=0;
648 - run();
649 - });
650 - });
1464 + function resize(){
1465 + if(resizeTimer){
1466 + clearTimeout(
1467 + resizeTimer
1468 + );
1469 + }
1470 +
1471 + resizeTimer=
1472 + setTimeout(
1473 + function(){
1474 + resizeTimer=0;
1475 + calculate(false);
1476 + },
1477 + RESIZE_DEBOUNCE
1478 + );
651 651   }
652 652  
653 - addEventListener("resize",schedule,{passive:true});
654 - addEventListener("load",schedule,{once:true});
1481 + function waitImages(){
1482 + var images=
1483 + Array.from(
1484 + root.querySelectorAll("img")
1485 + );
655 655  
656 - root.addEventListener("click",function(){
657 - setTimeout(schedule,0);
658 - },true);
1487 + return Promise.all(
1488 + images.map(function(img){
1489 + if(img.complete){
1490 + return Promise.resolve();
1491 + }
659 659  
660 - if(document.fonts&&document.fonts.ready){
661 - document.fonts.ready.then(schedule);
1493 + return new Promise(function(resolve){
1494 + var done=function(){
1495 + resolve();
1496 + };
1497 +
1498 + img.addEventListener(
1499 + "load",
1500 + done,
1501 + {once:true}
1502 + );
1503 +
1504 + img.addEventListener(
1505 + "error",
1506 + done,
1507 + {once:true}
1508 + );
1509 + });
1510 + })
1511 + );
662 662   }
663 663  
664 - schedule();
665 - setTimeout(schedule,250);
666 - setTimeout(schedule,900);
1514 + async function initial(){
1515 + if(
1516 + document.readyState!==
1517 + "complete"
1518 + ){
1519 + await new Promise(function(resolve){
1520 + addEventListener(
1521 + "load",
1522 + resolve,
1523 + {once:true}
1524 + );
1525 + });
1526 + }
1527 +
1528 + if(
1529 + document.fonts&&
1530 + document.fonts.ready
1531 + ){
1532 + try{
1533 + await document.fonts.ready;
1534 + }catch(error){}
1535 + }
1536 +
1537 + await waitImages();
1538 +
1539 + // Exactly one initial layout calculation.
1540 + calculate(true);
1541 + }
1542 +
1543 + addEventListener(
1544 + "resize",
1545 + resize,
1546 + {passive:true}
1547 + );
1548 +
1549 + initial();
667 667  })();
668 668  </script>
669 -<!-- SN_HORIZONTAL_BOX_HARMONIZER_END -->
670 -{{/html}}
671 671  
1553 +<!-- SN_HORIZONTAL_BOX_HARMONIZER_END -->
1554 +{{/html}}\n