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,43 @@ 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 + 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; 859 + 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 865 +.resource-layout::after { 866 + content: ""; 867 + display: block; 868 + clear: both; 869 +} 870 + 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 { 940 + float: right; 941 + width: 280px; 942 + margin-left: 42px; 943 + margin-bottom: 28px; 925 925 position: sticky; 926 926 top: 96px; 927 927 border: 1px solid @line; ... ... @@ -966,13 +966,22 @@ 966 966 } 967 967 } 968 968 988 +.resource-note, 989 +.resource-checklist, 990 +.resource-cta { 991 + display: flow-root; 992 +} 993 + 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 { 1000 + float: none; 1001 + width: 100%; 1002 + margin-left: 0; 1003 + margin-bottom: 24px; 976 976 position: static; 977 977 } 978 978 } ... ... @@ -1236,41 +1236,41 @@ 1236 1236 } 1237 1237 1238 1238 /* ========== Resources Index ========== */ 1267 + 1239 1239 .resources-index-page { 1240 1240 background: #fff; 1241 1241 1242 - /* Resources index: show cards in rows of 2, center the last one if alone */ 1243 - .resources-grid { 1244 - display: grid; 1271 + .services-grid { 1245 1245 grid-template-columns: repeat(2, minmax(0, 1fr)); 1246 - justify-content: center; 1247 - align-items: stretch; 1248 1248 } 1274 +} 1249 1249 1250 - .resources-grid .resource-card { 1251 - height: 100%; 1276 +@media (max-width: 980px) { 1277 + .resources-index-page { 1278 + .services-grid { 1279 + grid-template-columns: 1fr; 1280 + } 1252 1252 } 1253 - 1254 - .resources-grid .resource-card:last-child:nth-child(odd) { 1255 - grid-column: 1 / -1; 1256 - max-width: calc(50% - 12px); 1257 - justify-self: center; 1258 - } 1259 1259 } 1260 1260 1261 -/* Keep 2 columns on tablets. Only switch to 1 column on smaller mobile screens. */ 1262 1262 @media (max-width: 767px) { 1263 1263 .resources-index-page { 1264 1264 padding: @section-padding-mobile; 1287 + } 1288 +} 1265 1265 1266 - .resources-grid{1267 - grid-template-columns: 1fr;1268 - }1290 +.resource-faq-item { 1291 + border-bottom: 1px solid @line; 1292 + padding: 12px 0; 1269 1269 1270 - .resources-grid .resource-card:last-child:nth-child(odd) { 1271 - grid-column: auto; 1272 - max-width: none; 1273 - justify-self: stretch; 1274 - } 1294 + summary { 1295 + cursor: pointer; 1296 + font-weight: 700; 1297 + color: @text; 1275 1275 } 1299 + 1300 + p { 1301 + margin: 10px 0 4px; 1302 + color: @muted; 1303 + } 1276 1276 }