Changes for page Public Web Site
Last modified by Agnease on 2026/05/30 16:24
Summary
-
Page properties (1 modified, 0 added, 0 removed)
-
Objects (2 modified, 0 added, 1 removed)
Details
- Page properties
-
- Content
-
... ... @@ -146,7 +146,7 @@ 146 146 </div> 147 147 </section> 148 148 149 - <section class="resource-strip" aria-labelledby="resources-title"> 149 + <section class="resource-strip homepage-resource-strip" aria-labelledby="resources-title"> 150 150 <div class="container"> 151 151 <h2 id="resources-title">Useful XWiki resources</h2> 152 152 <p class="section-intro">
- XWiki.StyleSheetExtension[0]
-
- code
-
... ... @@ -599,6 +599,102 @@ 599 599 } 600 600 } 601 601 602 +.resource-content { 603 + order: 1; 604 +} 605 + 606 +.resource-sidebar { 607 + order: 2; 608 +} 609 + 610 +@media (max-width: 767px) { 611 + .resource-layout { 612 + display: flex; 613 + flex-direction: column; 614 + } 615 + 616 + .resource-sidebar { 617 + order: 0; 618 + position: static; 619 + width: 100%; 620 + } 621 + 622 + .resource-content { 623 + order: 1; 624 + } 625 +} 626 + 627 +/* ========== Homepage Resource Strip ========== */ 628 + 629 +.homepage-resource-strip { 630 + background: 631 + radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 70%); 632 + 633 + .resource-grid { 634 + max-width: 1040px; 635 + margin: 26px auto 0; 636 + display: grid; 637 + grid-template-columns: repeat(2, minmax(0, 1fr)); 638 + grid-gap: 22px; 639 + align-items: stretch; 640 + } 641 + 642 + .resource-card { 643 + display: flex; 644 + flex-direction: column; 645 + min-width: 0; 646 + min-height: 100%; 647 + padding: 26px; 648 + } 649 + 650 + .resource-card h4 { 651 + margin: 0 0 10px; 652 + color: @text; 653 + font-size: 21px; 654 + line-height: 1.25; 655 + font-weight: 700; 656 + } 657 + 658 + .resource-card p { 659 + margin: 0 0 18px; 660 + color: @muted; 661 + font-size: 15px; 662 + line-height: 1.6; 663 + } 664 + 665 + .resource-card a { 666 + margin-top: auto; 667 + color: @brand; 668 + font-weight: 700; 669 + text-decoration: underline; 670 + 671 + &:hover, 672 + &:focus { 673 + color: @brand-strong; 674 + } 675 + } 676 +} 677 + 678 +@media (max-width: 980px) { 679 + .homepage-resource-strip { 680 + .resource-grid { 681 + grid-template-columns: 1fr; 682 + } 683 + } 684 +} 685 + 686 +@media (max-width: 640px) { 687 + .homepage-resource-strip { 688 + .resource-card { 689 + padding: 22px; 690 + } 691 + 692 + .resource-card h4 { 693 + font-size: 19px; 694 + } 695 + } 696 +} 697 + 602 602 /* ========== CTA ========== */ 603 603 604 604 .cta-section { ... ... @@ -726,3 +726,563 @@ 726 726 padding: 24px 20px; 727 727 } 728 728 } 825 +/* ========== Resource / Article Pages ========== */ 826 + 827 +.resource-page { 828 + padding-top: 34px; 829 +} 830 + 831 +.resource-header { 832 + padding: 40px 0 30px; 833 + border-top: none; 834 + background: 835 + radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%), 836 + radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%); 837 + 838 + h1 { 839 + margin: 0 auto 14px; 840 + text-align: center; 841 + line-height: 1.18; 842 + } 843 + 844 + .resource-summary { 845 + max-width: 780px; 846 + margin: 0 auto; 847 + color: @muted; 848 + text-align: center; 849 + font-size: 18px; 850 + line-height: 1.55; 851 + } 852 +} 853 + 854 +.resource-layout { 855 + display: grid; 856 + grid-template-columns: minmax(0, 760px) 280px; 857 + gap: 42px; 858 + max-width: 1080px; 859 + margin: 0 auto; 860 + align-items: start; 861 +} 862 + 863 +.resource-content { 864 + color: @text; 865 + font-size: 16px; 866 + line-height: 1.68; 867 + 868 + h2 { 869 + text-align: left; 870 + margin: 34px 0 12px; 871 + line-height: 1.28; 872 + } 873 + 874 + h3 { 875 + margin: 24px 0 8px; 876 + line-height: 1.3; 877 + } 878 + 879 + p { 880 + margin: 0 0 16px; 881 + } 882 + 883 + ul, 884 + ol { 885 + margin: 0 0 18px; 886 + padding-left: 22px; 887 + } 888 + 889 + li { 890 + margin: 6px 0; 891 + } 892 + 893 + strong { 894 + color: @text; 895 + } 896 +} 897 + 898 +.resource-note { 899 + border-left: 4px solid @brand; 900 + background: @brand-bg; 901 + padding: 16px 18px; 902 + margin: 22px 0; 903 + border-radius: 0 @radius @radius 0; 904 + 905 + p:last-child { 906 + margin-bottom: 0; 907 + } 908 +} 909 + 910 +.resource-checklist { 911 + margin: 18px 0 24px; 912 + padding: 0; 913 + list-style: none; 914 + 915 + li { 916 + position: relative; 917 + padding: 10px 0 10px 34px; 918 + border-bottom: 1px solid @line; 919 + 920 + &:before { 921 + content: "\f00c"; 922 + font-family: FontAwesome; 923 + position: absolute; 924 + left: 0; 925 + top: 11px; 926 + color: @brand; 927 + } 928 + } 929 +} 930 + 931 +.resource-sidebar { 932 + position: sticky; 933 + top: 96px; 934 + border: 1px solid @line; 935 + border-radius: @radius; 936 + padding: 18px; 937 + background: #fff; 938 + box-shadow: @shadow-sm; 939 + 940 + h4 { 941 + margin: 0 0 10px; 942 + } 943 + 944 + ul { 945 + margin: 0; 946 + padding-left: 18px; 947 + color: @muted; 948 + } 949 + 950 + li { 951 + margin: 8px 0; 952 + } 953 + 954 + a { 955 + color: @brand; 956 + font-weight: 600; 957 + } 958 +} 959 + 960 +.resource-cta { 961 + margin-top: 36px; 962 + padding: 22px; 963 + border: 1px solid fade(@brand, 20%); 964 + border-radius: @radius; 965 + background: @brand-bg; 966 + 967 + h3 { 968 + margin-top: 0; 969 + } 970 + 971 + p { 972 + color: @muted; 973 + } 974 +} 975 + 976 +@media (max-width: 900px) { 977 + .resource-layout { 978 + grid-template-columns: 1fr; 979 + } 980 + 981 + .resource-sidebar { 982 + position: static; 983 + } 984 +} 985 +/* ========== Products / Extensions Pages ========== */ 986 + 987 +.product-index-section { 988 + padding: 52px 0 56px; 989 + 990 + h2 { 991 + margin-bottom: 10px; 992 + } 993 +} 994 + 995 +.product-card-grid { 996 + max-width: 840px; 997 + margin: 28px auto 0; 998 + display: grid; 999 + grid-template-columns: 1fr; 1000 + grid-gap: 18px; 1001 +} 1002 + 1003 +.product-card { 1004 + background: #fff; 1005 + border: 1px solid @line; 1006 + border-radius: @radius; 1007 + box-shadow: @shadow-sm; 1008 + padding: 28px; 1009 + display: grid; 1010 + grid-template-columns: 68px 1fr; 1011 + grid-gap: 22px; 1012 + align-items: start; 1013 + transition: transform .18s ease, box-shadow .18s ease; 1014 + 1015 + &:hover { 1016 + transform: translateY(-2px); 1017 + box-shadow: @shadow; 1018 + } 1019 + 1020 + .product-card-icon { 1021 + width: 58px; 1022 + height: 58px; 1023 + border-radius: 50%; 1024 + background: fade(@brand, 10%); 1025 + border: 1px solid fade(@brand, 20%); 1026 + color: @brand; 1027 + display: flex; 1028 + align-items: center; 1029 + justify-content: center; 1030 + font-size: 22px; 1031 + flex-shrink: 0; 1032 + } 1033 + 1034 + h3 { 1035 + margin: 0 0 10px; 1036 + color: @text; 1037 + font-size: 23px; 1038 + line-height: 1.25; 1039 + font-weight: 800; 1040 + } 1041 + 1042 + p { 1043 + color: @muted; 1044 + line-height: 1.6; 1045 + } 1046 + 1047 + .card-link { 1048 + margin: 0; 1049 + 1050 + a { 1051 + font-weight: 700; 1052 + } 1053 + } 1054 +} 1055 + 1056 +.product-card-kicker { 1057 + margin-bottom: 10px; 1058 + padding: 5px 10px; 1059 + font-size: 12px; 1060 + text-transform: uppercase; 1061 + letter-spacing: .04em; 1062 +} 1063 + 1064 +.product-highlights { 1065 + margin: 14px 0 20px; 1066 + padding-left: 18px; 1067 + color: @muted; 1068 + 1069 + li { 1070 + margin: 6px 0; 1071 + line-height: 1.45; 1072 + } 1073 +} 1074 + 1075 +/* ========== Individual Product Pages ========== */ 1076 + 1077 +.product-layout { 1078 + display: grid; 1079 + grid-template-columns: 1.1fr .9fr; 1080 + grid-gap: 36px; 1081 + max-width: 1040px; 1082 + margin: 0 auto; 1083 + align-items: start; 1084 +} 1085 + 1086 +.product-summary-card, 1087 +.product-info-card, 1088 +.product-gallery-panel { 1089 + background: #fff; 1090 + border: 1px solid @line; 1091 + border-radius: @radius; 1092 + box-shadow: @shadow-sm; 1093 +} 1094 + 1095 +.product-summary-card { 1096 + padding: 26px; 1097 + 1098 + h2 { 1099 + text-align: left; 1100 + margin-top: 0; 1101 + } 1102 + 1103 + p { 1104 + color: @muted; 1105 + line-height: 1.6; 1106 + } 1107 + 1108 + p:last-child { 1109 + margin-bottom: 0; 1110 + } 1111 +} 1112 + 1113 +.product-info-card { 1114 + padding: 22px; 1115 + 1116 + h3 { 1117 + margin-top: 0; 1118 + margin-bottom: 12px; 1119 + } 1120 + 1121 + ul { 1122 + margin: 0; 1123 + padding-left: 20px; 1124 + color: @muted; 1125 + } 1126 + 1127 + li { 1128 + margin: 8px 0; 1129 + line-height: 1.45; 1130 + } 1131 +} 1132 + 1133 +.product-feature-grid { 1134 + display: grid; 1135 + grid-template-columns: repeat(3, minmax(0, 1fr)); 1136 + grid-gap: 18px; 1137 + max-width: 1040px; 1138 + margin: 26px auto 0; 1139 +} 1140 + 1141 +.product-feature { 1142 + background: #fff; 1143 + border: 1px solid @line; 1144 + border-radius: @radius; 1145 + box-shadow: @shadow-sm; 1146 + padding: 22px; 1147 + transition: transform .18s ease, box-shadow .18s ease; 1148 + 1149 + &:hover { 1150 + transform: translateY(-2px); 1151 + box-shadow: @shadow; 1152 + } 1153 + 1154 + .feature-icon { 1155 + width: 46px; 1156 + height: 46px; 1157 + border-radius: 50%; 1158 + background: fade(@brand, 10%); 1159 + color: @brand; 1160 + display: flex; 1161 + align-items: center; 1162 + justify-content: center; 1163 + margin-bottom: 14px; 1164 + font-size: 18px; 1165 + } 1166 + 1167 + h3 { 1168 + margin: 0 0 8px; 1169 + color: @text; 1170 + font-size: 18px; 1171 + line-height: 1.25; 1172 + } 1173 + 1174 + p { 1175 + margin: 0; 1176 + color: @muted; 1177 + line-height: 1.5; 1178 + } 1179 +} 1180 + 1181 +.product-gallery-panel { 1182 + max-width: 1040px; 1183 + margin: 20px auto 0; 1184 + padding: 26px; 1185 + 1186 + h2 { 1187 + margin-top: 0; 1188 + text-align: center; 1189 + } 1190 + 1191 + .gallery-note { 1192 + max-width: 700px; 1193 + margin: 0 auto 18px; 1194 + color: @muted; 1195 + text-align: center; 1196 + line-height: 1.55; 1197 + } 1198 +} 1199 + 1200 +.product-gallery-placeholder { 1201 + min-height: 260px; 1202 + padding: 28px; 1203 + border: 1px dashed fade(@brand, 40%); 1204 + border-radius: @radius; 1205 + background: fade(@brand, 5%); 1206 + color: @muted; 1207 + text-align: center; 1208 + display: flex; 1209 + align-items: center; 1210 + justify-content: center; 1211 +} 1212 + 1213 +.product-section-muted { 1214 + background: 1215 + radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%); 1216 +} 1217 + 1218 +@media (max-width: 980px) { 1219 + .product-layout, 1220 + .product-feature-grid { 1221 + grid-template-columns: 1fr; 1222 + } 1223 + 1224 + .product-summary-card h2 { 1225 + text-align: center; 1226 + } 1227 +} 1228 + 1229 +@media (max-width: 640px) { 1230 + .product-card { 1231 + grid-template-columns: 1fr; 1232 + padding: 22px; 1233 + text-align: left; 1234 + 1235 + .product-card-icon { 1236 + margin-bottom: 2px; 1237 + } 1238 + } 1239 + 1240 + .product-summary-card, 1241 + .product-info-card, 1242 + .product-feature, 1243 + .product-gallery-panel { 1244 + padding: 20px; 1245 + } 1246 +} 1247 +/* ========== Resources Index ========== */ 1248 + 1249 +.resources-index-page { 1250 + padding: 56px 0 72px; 1251 + background: @brand-bg; 1252 +} 1253 + 1254 +.resources-intro { 1255 + max-width: 820px; 1256 + margin: 0 auto 32px; 1257 + text-align: center; 1258 +} 1259 + 1260 +.resources-intro p { 1261 + color: @muted; 1262 + font-size: 17px; 1263 + line-height: 1.7; 1264 + margin: 0; 1265 +} 1266 + 1267 +.resources-grid { 1268 + display: grid; 1269 + grid-template-columns: repeat(2, minmax(0, 1fr)); 1270 + gap: 24px; 1271 + margin-bottom: 36px; 1272 +} 1273 + 1274 +.resource-card { 1275 + display: flex; 1276 + gap: 18px; 1277 + background: #fff; 1278 + border: 1px solid @line; 1279 + border-radius: @radius; 1280 + box-shadow: @shadow-sm; 1281 + padding: 24px; 1282 +} 1283 + 1284 +.resource-card-icon { 1285 + flex: 0 0 46px; 1286 + width: 46px; 1287 + height: 46px; 1288 + border-radius: 14px; 1289 + background: @brand-soft; 1290 + color: @brand-strong; 1291 + display: flex; 1292 + align-items: center; 1293 + justify-content: center; 1294 + font-size: 20px; 1295 +} 1296 + 1297 +.resource-card-label { 1298 + color: @brand-strong; 1299 + font-size: 13px; 1300 + font-weight: 700; 1301 + text-transform: uppercase; 1302 + letter-spacing: .04em; 1303 + margin-bottom: 8px; 1304 +} 1305 + 1306 +.resource-card h2 { 1307 + font-size: 22px; 1308 + line-height: 1.25; 1309 + margin: 0 0 12px; 1310 +} 1311 + 1312 +.resource-card h2 a { 1313 + color: @text; 1314 + text-decoration: none; 1315 +} 1316 + 1317 +.resource-card h2 a:hover { 1318 + color: @brand-strong; 1319 + text-decoration: none; 1320 +} 1321 + 1322 +.resource-card p { 1323 + color: @muted; 1324 + font-size: 15px; 1325 + line-height: 1.65; 1326 + margin: 0 0 16px; 1327 +} 1328 + 1329 +.resource-card-link { 1330 + color: @brand-strong; 1331 + font-weight: 700; 1332 + text-decoration: none; 1333 +} 1334 + 1335 +.resource-card-link:hover { 1336 + color: @brand; 1337 + text-decoration: none; 1338 +} 1339 + 1340 +.resources-next { 1341 + max-width: 820px; 1342 + margin: 0 auto 32px; 1343 + text-align: center; 1344 +} 1345 + 1346 +.resources-next h2 { 1347 + font-size: 26px; 1348 + margin: 0 0 10px; 1349 +} 1350 + 1351 +.resources-next p { 1352 + color: @muted; 1353 + font-size: 16px; 1354 + line-height: 1.7; 1355 + margin: 0; 1356 +} 1357 + 1358 +@media (max-width: 767px) { 1359 + .resources-index-page { 1360 + padding: 36px 0 52px; 1361 + } 1362 + 1363 + .resources-intro { 1364 + text-align: left; 1365 + margin-bottom: 24px; 1366 + } 1367 + 1368 + .resources-grid { 1369 + grid-template-columns: 1fr; 1370 + gap: 18px; 1371 + } 1372 + 1373 + .resource-card { 1374 + padding: 20px; 1375 + } 1376 + 1377 + .resource-card h2 { 1378 + font-size: 20px; 1379 + } 1380 + 1381 + .resources-next { 1382 + text-align: left; 1383 + } 1384 +}
- XWiki.StyleSheetExtension[1]
-
- code
-
... ... @@ -1,129 +1,148 @@ 1 1 /* ========== Agnease Public Top Menu ========== */ 2 2 3 -@brand: #00937D; 4 -@brand-strong: #007B6A; 5 -@text: #2D3A34; 6 -@muted: #5B6B64; 7 -@line: #E4ECE9; 8 -@brand-bg: #F4FCFA; 3 +/* Desktop alignment */ 4 +#menuview .navbar-nav { 5 + float: right !important; 6 +} 9 9 10 -.agnease-services-menu { 11 - .dropdown-toggle { 12 - font-weight: inherit; 13 - font-size: inherit; 14 - } 8 +/* Top-level menu items */ 15 15 16 - &.open > .dropdown-toggle, 17 - .dropdown-toggle:hover, 18 - .dropdown-toggle:focus { 10 +.agnease-menu-item, 11 +.agnease-menu-link { 12 + > a, 13 + > .dropdown-toggle { 19 19 color: @brand; 20 - background: transparent; 15 + font-size: 17px; 16 + font-weight: 600; 17 + padding-left: 16px; 18 + padding-right: 16px; 19 + text-decoration: none; 21 21 } 22 22 22 + > a:hover, 23 + > a:focus, 24 + > a:active, 25 + &.open > a, 26 + &.active > a { 27 + color: @brand-strong; 28 + text-decoration: none; 29 + outline: none; 30 + } 31 + 23 23 .caret { 24 - margin-left: 4px; 33 + margin-left: 5px; 34 + border-top-color: @brand; 35 + border-bottom-color: @brand; 25 25 } 37 + 38 + > a:hover .caret, 39 + > a:focus .caret, 40 + > a:active .caret, 41 + &.open > a .caret, 42 + &.active > a .caret { 43 + border-top-color: @brand-strong; 44 + border-bottom-color: @brand-strong; 45 + } 26 26 } 27 27 28 -.agnease-services-dropdown { 29 - min-width: 360px; 30 - padding: 10px; 31 - border: 1px solid @line; 48 +/* Dropdown panel */ 49 + 50 +.agnease-dropdown { 51 + min-width: 310px; 52 + padding: 10px 8px; 53 + border: 1px solid fade(@brand, 18%); 32 32 border-radius: 12px; 33 - box-shadow: 0 12px 36px rgba(0, 0, 0, .10); 55 + background: #fff; 56 + box-shadow: 0 12px 32px fade(@brand-strong, 12%); 34 34 35 35 > li > a { 36 36 display: flex; 37 - align-items: flex-start;60 + align-items: center; 38 38 gap: 12px; 39 - padding: 10px 12px; 40 - border-radius: 10px; 41 - color: @text; 42 - white-space: normal; 62 + padding: 11px 14px; 63 + color: @brand; 64 + white-space: nowrap; 65 + font-size: 16px; 66 + font-weight: 600; 67 + line-height: 1.3; 68 + text-decoration: none; 43 43 70 + i { 71 + width: 20px; 72 + flex: 0 0 20px; 73 + color: @brand; 74 + text-align: center; 75 + font-size: 15px; 76 + } 77 + 44 44 &:hover, 45 - &:focus { 79 + &:focus, 80 + &:active { 46 46 color: @brand-strong; 47 - background: @brand-bg; 48 48 text-decoration: none; 83 + outline: none; 49 49 50 - .menu-icon{85 + i { 51 51 color: @brand-strong; 52 - background: fade(@brand, 14%); 53 - border-color: fade(@brand, 28%); 54 54 } 88 + } 89 + } 55 55 56 - strong { 57 - color: @brand-strong; 58 - } 91 + > .active > a { 92 + color: @brand-strong; 59 59 60 - small { 61 - color: @muted; 62 - } 94 + i { 95 + color: @brand-strong; 63 63 } 64 64 } 65 65 66 66 .divider { 67 67 margin: 8px 0; 68 - background-color: @ line;101 + background-color: fade(@brand, 16%); 69 69 } 103 +} 70 70 71 - .menu-icon { 72 - width: 34px; 73 - height: 34px; 74 - border-radius: 50%; 75 - background: fade(@brand, 8%); 76 - border: 1px solid fade(@brand, 18%); 77 - color: @brand; 78 - display: flex; 79 - align-items: center; 105 +/* Mobile */ 106 + 107 +@media (max-width: 767px) { 108 + .site-nav { 109 + margin-left: 0; 80 80 justify-content: center; 81 - flex-shrink: 0; 82 - transition: color .15s ease, background .15s ease, border-color .15s ease; 111 + flex-wrap: wrap; 83 83 } 84 84 85 - .menu-text { 86 - display: flex; 87 - flex-direction: column; 88 - line-height: 1.25; 89 - 90 - strong { 91 - color: @brand; 92 - font-size: 14px; 93 - font-weight: 600; 114 + .agnease-menu-item, 115 + .agnease-menu-link { 116 + > a, 117 + > .dropdown-toggle { 118 + font-size: 16px; 119 + padding-top: 9px; 120 + padding-bottom: 9px; 94 94 } 95 - 96 - small { 97 - color: @muted; 98 - font-size: 12px; 99 - margin-top: 2px; 100 - font-weight: 400; 101 - } 102 102 } 103 -} 104 104 105 -@media (max-width: 767px) { 106 - .agnease-services-dropdown { 124 + .agnease-dropdown { 107 107 min-width: 0; 108 108 width: 100%; 109 - padding: 6px; 127 + padding: 4px 8px 8px 18px; 128 + border: 0; 110 110 border-radius: 0; 111 111 box-shadow: none; 131 + background: transparent; 112 112 113 113 > li > a { 114 - padding: 10px; 134 + padding: 8px 10px; 135 + white-space: normal; 136 + font-size: 15px; 137 + 138 + i { 139 + width: 18px; 140 + flex-basis: 18px; 141 + } 115 115 } 143 + 144 + .divider { 145 + margin: 5px 0; 146 + } 116 116 } 117 117 } 118 -/* Keep the top-level Services menu visually clean when hovered/open/focused */ 119 -.navbar-nav > li.agnease-services-menu > a, 120 -.navbar-nav > li.agnease-services-menu > a:hover, 121 -.navbar-nav > li.agnease-services-menu > a:focus, 122 -.navbar-nav > li.agnease-services-menu.open > a, 123 -.navbar-nav > li.agnease-services-menu.open > a:hover, 124 -.navbar-nav > li.agnease-services-menu.open > a:focus { 125 - background: transparent; 126 - background-color: transparent; 127 - color: @brand-strong; 128 - box-shadow: none; 129 -}
- XWiki.StyleSheetExtension[2]
-
- cache
-
... ... @@ -1,1 +1,0 @@ 1 -long - code
-
... ... @@ -1,174 +1,0 @@ 1 -/* ========== Resource / Article Pages ========== */ 2 - 3 -.resource-page { 4 - padding-top: 34px; 5 -} 6 - 7 -.resource-header { 8 - padding: 40px 0 30px; 9 - border-top: none; 10 - background: 11 - radial-gradient(42rem 14rem at 50% 0%, @brand-bg 0%, transparent 70%); 12 - 13 - .resource-kicker { 14 - display: inline-flex; 15 - align-items: center; 16 - gap: 8px; 17 - color: @brand; 18 - background: fade(@brand, 8%); 19 - border: 1px solid fade(@brand, 18%); 20 - border-radius: 999px; 21 - padding: 6px 12px; 22 - margin-bottom: 14px; 23 - font-size: 13px; 24 - font-weight: 700; 25 - } 26 - 27 - h1 { 28 - max-width: 820px; 29 - margin: 0 auto 14px; 30 - text-align: center; 31 - line-height: 1.18; 32 - } 33 - 34 - .resource-summary { 35 - max-width: 780px; 36 - margin: 0 auto; 37 - color: @muted; 38 - text-align: center; 39 - font-size: 18px; 40 - line-height: 1.55; 41 - } 42 -} 43 - 44 -.resource-layout { 45 - display: grid; 46 - grid-template-columns: minmax(0, 760px) 280px; 47 - gap: 42px; 48 - max-width: 1080px; 49 - margin: 0 auto; 50 - align-items: start; 51 -} 52 - 53 -.resource-content { 54 - color: @text; 55 - font-size: 16px; 56 - line-height: 1.68; 57 - 58 - h2 { 59 - text-align: left; 60 - margin: 34px 0 12px; 61 - line-height: 1.28; 62 - } 63 - 64 - h3 { 65 - margin: 24px 0 8px; 66 - line-height: 1.3; 67 - } 68 - 69 - p { 70 - margin: 0 0 16px; 71 - } 72 - 73 - ul, 74 - ol { 75 - margin: 0 0 18px; 76 - padding-left: 22px; 77 - } 78 - 79 - li { 80 - margin: 6px 0; 81 - } 82 - 83 - strong { 84 - color: @text; 85 - } 86 -} 87 - 88 -.resource-note { 89 - border-left: 4px solid @brand; 90 - background: @brand-bg; 91 - padding: 16px 18px; 92 - margin: 22px 0; 93 - border-radius: 0 @radius @radius 0; 94 - 95 - p:last-child { 96 - margin-bottom: 0; 97 - } 98 -} 99 - 100 -.resource-checklist { 101 - margin: 18px 0 24px; 102 - padding: 0; 103 - list-style: none; 104 - 105 - li { 106 - position: relative; 107 - padding: 10px 0 10px 34px; 108 - border-bottom: 1px solid @line; 109 - 110 - &:before { 111 - content: "\f00c"; 112 - font-family: FontAwesome; 113 - position: absolute; 114 - left: 0; 115 - top: 11px; 116 - color: @brand; 117 - } 118 - } 119 -} 120 - 121 -.resource-sidebar { 122 - position: sticky; 123 - top: 96px; 124 - border: 1px solid @line; 125 - border-radius: @radius; 126 - padding: 18px; 127 - background: #fff; 128 - box-shadow: @shadow-sm; 129 - 130 - h4 { 131 - margin: 0 0 10px; 132 - } 133 - 134 - ul { 135 - margin: 0; 136 - padding-left: 18px; 137 - color: @muted; 138 - } 139 - 140 - li { 141 - margin: 8px 0; 142 - } 143 - 144 - a { 145 - color: @brand; 146 - font-weight: 600; 147 - } 148 -} 149 - 150 -.resource-cta { 151 - margin-top: 36px; 152 - padding: 22px; 153 - border: 1px solid fade(@brand, 20%); 154 - border-radius: @radius; 155 - background: @brand-bg; 156 - 157 - h3 { 158 - margin-top: 0; 159 - } 160 - 161 - p { 162 - color: @muted; 163 - } 164 -} 165 - 166 -@media (max-width: 900px) { 167 - .resource-layout { 168 - grid-template-columns: 1fr; 169 - } 170 - 171 - .resource-sidebar { 172 - position: static; 173 - } 174 -} - contentType
-
... ... @@ -1,1 +1,0 @@ 1 -LESS - name
-
... ... @@ -1,1 +1,0 @@ 1 -resources - use
-
... ... @@ -1,1 +1,0 @@ 1 -onDemand