Changes for page Public Web Site
Last modified by Agnease on 2026/05/30 16:24
Summary
-
Objects (1 modified, 0 added, 0 removed)
Details
- XWiki.StyleSheetExtension[0]
-
- code
-
... ... @@ -590,31 +590,6 @@ 590 590 } 591 591 } 592 592 593 -.resource-content { 594 - order: 1; 595 -} 596 - 597 -.resource-sidebar { 598 - order: 2; 599 -} 600 - 601 -@media (max-width: 767px) { 602 - .resource-layout { 603 - display: flex; 604 - flex-direction: column; 605 - } 606 - 607 - .resource-sidebar { 608 - order: 0; 609 - position: static; 610 - width: 100%; 611 - } 612 - 613 - .resource-content { 614 - order: 1; 615 - } 616 -} 617 - 618 618 /* ========== Homepage Resource Strip ========== */ 619 619 620 620 .homepage-resource-strip { ... ... @@ -722,6 +722,53 @@ 722 722 } 723 723 } 724 724 700 +.resource-inline-cta { 701 + display: flex; 702 + align-items: center; 703 + justify-content: space-between; 704 + gap: 22px; 705 + margin: 30px 0; 706 + padding: 20px 22px; 707 + border: 1px solid fade(@brand, 22%); 708 + border-radius: @radius; 709 + background: @brand-bg; 710 + box-shadow: @shadow-sm; 711 + 712 + p { 713 + margin: 0; 714 + color: @muted; 715 + line-height: 1.55; 716 + } 717 + 718 + strong { 719 + color: @text; 720 + } 721 + 722 + .btn { 723 + flex-shrink: 0; 724 + } 725 +} 726 + 727 +@media (max-width: 767px) { 728 + .resource-inline-cta { 729 + display: block; 730 + 731 + p { 732 + margin-bottom: 14px; 733 + } 734 + } 735 +} 736 + 737 +@media (max-width: 767px) { 738 + .resource-inline-cta { 739 + display: block; 740 + 741 + p { 742 + margin-bottom: 14px; 743 + } 744 + } 745 +} 746 + 725 725 /* ========== Responsive ========== */ 726 726 727 727 @media (max-width: 980px) { ... ... @@ -844,15 +844,18 @@ 844 844 } 845 845 846 846 .resource-layout { 847 - display: grid; 848 - grid-template-columns: minmax(0, 760px) 280px; 849 - gap: 42px; 869 + display: block; 850 850 max-width: 1080px; 851 851 margin: 0 auto; 852 852 padding-top: 28px; 853 - align-items: start; 854 854 } 855 855 875 +.resource-layout::after { 876 + content: ""; 877 + display: block; 878 + clear: both; 879 +} 880 + 856 856 .resource-content { 857 857 color: @text; 858 858 font-size: 16px; ... ... @@ -922,6 +922,10 @@ 922 922 } 923 923 924 924 .resource-sidebar { 950 + float: right; 951 + width: 280px; 952 + margin-left: 42px; 953 + margin-bottom: 28px; 925 925 position: sticky; 926 926 top: 96px; 927 927 border: 1px solid @line; ... ... @@ -951,8 +951,14 @@ 951 951 } 952 952 953 953 .resource-cta { 954 - margin-top: 36px; 955 - padding: 22px; 983 + display: flex; 984 + flex-direction: column; 985 + align-items: center; 986 + text-align: center; 987 + 988 + max-width: 820px; 989 + margin: 42px auto 0; 990 + padding: 28px 30px; 956 956 border: 1px solid fade(@brand, 20%); 957 957 border-radius: @radius; 958 958 background: @brand-bg; ... ... @@ -959,20 +959,43 @@ 959 959 960 960 h3 { 961 961 margin-top: 0; 997 + margin-bottom: 10px; 962 962 } 963 963 964 964 p { 1001 + max-width: 680px; 1002 + margin-left: auto; 1003 + margin-right: auto; 965 965 color: @muted; 966 966 } 1006 + 1007 + .btn { 1008 + margin-top: 8px; 1009 + } 967 967 } 968 968 1012 +.resource-note, 1013 +.resource-checklist, 1014 +.resource-cta { 1015 + display: flow-root; 1016 +} 1017 + 1018 +@media (max-width: 767px) { 1019 + .resource-cta { 1020 + padding: 24px 20px; 1021 + } 1022 +} 1023 + 969 969 @media (max-width: 900px) { 970 970 .resource-layout { 971 - grid-template-columns: 1fr; 972 972 padding-top: 22px; 973 973 } 974 974 975 975 .resource-sidebar { 1030 + float: none; 1031 + width: 100%; 1032 + margin-left: 0; 1033 + margin-bottom: 24px; 976 976 position: static; 977 977 } 978 978 } ... ... @@ -1258,3 +1258,19 @@ 1258 1258 padding: @section-padding-mobile; 1259 1259 } 1260 1260 } 1319 + 1320 +.resource-faq-item { 1321 + border-bottom: 1px solid @line; 1322 + padding: 12px 0; 1323 + 1324 + summary { 1325 + cursor: pointer; 1326 + font-weight: 700; 1327 + color: @text; 1328 + } 1329 + 1330 + p { 1331 + margin: 10px 0 4px; 1332 + color: @muted; 1333 + } 1334 +}