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
-
... ... @@ -329,11 +329,10 @@ 329 329 border: 1px solid @line; 330 330 border-radius: @radius; 331 331 box-shadow: @shadow-sm; 332 - transition: transform .18s ease,box-shadow .18s ease;332 + transition: box-shadow .18s ease; 333 333 334 334 &:hover { 335 - transform: translateY(-2px); 336 - box-shadow: @shadow; 335 + box-shadow: @shadow-sm; 337 337 } 338 338 } 339 339 ... ... @@ -599,6 +599,102 @@ 599 599 } 600 600 } 601 601 601 +.resource-content { 602 + order: 1; 603 +} 604 + 605 +.resource-sidebar { 606 + order: 2; 607 +} 608 + 609 +@media (max-width: 767px) { 610 + .resource-layout { 611 + display: flex; 612 + flex-direction: column; 613 + } 614 + 615 + .resource-sidebar { 616 + order: 0; 617 + position: static; 618 + width: 100%; 619 + } 620 + 621 + .resource-content { 622 + order: 1; 623 + } 624 +} 625 + 626 +/* ========== Homepage Resource Strip ========== */ 627 + 628 +.homepage-resource-strip { 629 + background: 630 + radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 70%); 631 + 632 + .resource-grid { 633 + max-width: 1040px; 634 + margin: 26px auto 0; 635 + display: grid; 636 + grid-template-columns: repeat(2, minmax(0, 1fr)); 637 + grid-gap: 22px; 638 + align-items: stretch; 639 + } 640 + 641 + .resource-card { 642 + display: flex; 643 + flex-direction: column; 644 + min-width: 0; 645 + min-height: 100%; 646 + padding: 26px; 647 + } 648 + 649 + .resource-card h4 { 650 + margin: 0 0 10px; 651 + color: @text; 652 + font-size: 21px; 653 + line-height: 1.25; 654 + font-weight: 700; 655 + } 656 + 657 + .resource-card p { 658 + margin: 0 0 18px; 659 + color: @muted; 660 + font-size: 15px; 661 + line-height: 1.6; 662 + } 663 + 664 + .resource-card a { 665 + margin-top: auto; 666 + color: @brand; 667 + font-weight: 700; 668 + text-decoration: underline; 669 + 670 + &:hover, 671 + &:focus { 672 + color: @brand-strong; 673 + } 674 + } 675 +} 676 + 677 +@media (max-width: 980px) { 678 + .homepage-resource-strip { 679 + .resource-grid { 680 + grid-template-columns: 1fr; 681 + } 682 + } 683 +} 684 + 685 +@media (max-width: 640px) { 686 + .homepage-resource-strip { 687 + .resource-card { 688 + padding: 22px; 689 + } 690 + 691 + .resource-card h4 { 692 + font-size: 19px; 693 + } 694 + } 695 +} 696 + 602 602 /* ========== CTA ========== */ 603 603 604 604 .cta-section { ... ... @@ -726,3 +726,563 @@ 726 726 padding: 24px 20px; 727 727 } 728 728 } 824 +/* ========== Resource / Article Pages ========== */ 825 + 826 +.resource-page { 827 + padding-top: 34px; 828 +} 829 + 830 +.resource-header { 831 + padding: 40px 0 30px; 832 + border-top: none; 833 + background: 834 + radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%), 835 + radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%); 836 + 837 + h1 { 838 + margin: 0 auto 14px; 839 + text-align: center; 840 + line-height: 1.18; 841 + } 842 + 843 + .resource-summary { 844 + max-width: 780px; 845 + margin: 0 auto; 846 + color: @muted; 847 + text-align: center; 848 + font-size: 18px; 849 + line-height: 1.55; 850 + } 851 +} 852 + 853 +.resource-layout { 854 + display: grid; 855 + grid-template-columns: minmax(0, 760px) 280px; 856 + gap: 42px; 857 + max-width: 1080px; 858 + margin: 0 auto; 859 + align-items: start; 860 +} 861 + 862 +.resource-content { 863 + color: @text; 864 + font-size: 16px; 865 + line-height: 1.68; 866 + 867 + h2 { 868 + text-align: left; 869 + margin: 34px 0 12px; 870 + line-height: 1.28; 871 + } 872 + 873 + h3 { 874 + margin: 24px 0 8px; 875 + line-height: 1.3; 876 + } 877 + 878 + p { 879 + margin: 0 0 16px; 880 + } 881 + 882 + ul, 883 + ol { 884 + margin: 0 0 18px; 885 + padding-left: 22px; 886 + } 887 + 888 + li { 889 + margin: 6px 0; 890 + } 891 + 892 + strong { 893 + color: @text; 894 + } 895 +} 896 + 897 +.resource-note { 898 + border-left: 4px solid @brand; 899 + background: @brand-bg; 900 + padding: 16px 18px; 901 + margin: 22px 0; 902 + border-radius: 0 @radius @radius 0; 903 + 904 + p:last-child { 905 + margin-bottom: 0; 906 + } 907 +} 908 + 909 +.resource-checklist { 910 + margin: 18px 0 24px; 911 + padding: 0; 912 + list-style: none; 913 + 914 + li { 915 + position: relative; 916 + padding: 10px 0 10px 34px; 917 + border-bottom: 1px solid @line; 918 + 919 + &:before { 920 + content: "\f00c"; 921 + font-family: FontAwesome; 922 + position: absolute; 923 + left: 0; 924 + top: 11px; 925 + color: @brand; 926 + } 927 + } 928 +} 929 + 930 +.resource-sidebar { 931 + position: sticky; 932 + top: 96px; 933 + border: 1px solid @line; 934 + border-radius: @radius; 935 + padding: 18px; 936 + background: #fff; 937 + box-shadow: @shadow-sm; 938 + 939 + h4 { 940 + margin: 0 0 10px; 941 + } 942 + 943 + ul { 944 + margin: 0; 945 + padding-left: 18px; 946 + color: @muted; 947 + } 948 + 949 + li { 950 + margin: 8px 0; 951 + } 952 + 953 + a { 954 + color: @brand; 955 + font-weight: 600; 956 + } 957 +} 958 + 959 +.resource-cta { 960 + margin-top: 36px; 961 + padding: 22px; 962 + border: 1px solid fade(@brand, 20%); 963 + border-radius: @radius; 964 + background: @brand-bg; 965 + 966 + h3 { 967 + margin-top: 0; 968 + } 969 + 970 + p { 971 + color: @muted; 972 + } 973 +} 974 + 975 +@media (max-width: 900px) { 976 + .resource-layout { 977 + grid-template-columns: 1fr; 978 + } 979 + 980 + .resource-sidebar { 981 + position: static; 982 + } 983 +} 984 +/* ========== Products / Extensions Pages ========== */ 985 + 986 +.product-index-section { 987 + padding: 52px 0 56px; 988 + 989 + h2 { 990 + margin-bottom: 10px; 991 + } 992 +} 993 + 994 +.product-card-grid { 995 + max-width: 840px; 996 + margin: 28px auto 0; 997 + display: grid; 998 + grid-template-columns: 1fr; 999 + grid-gap: 18px; 1000 +} 1001 + 1002 +.product-card { 1003 + background: #fff; 1004 + border: 1px solid @line; 1005 + border-radius: @radius; 1006 + box-shadow: @shadow-sm; 1007 + padding: 28px; 1008 + display: grid; 1009 + grid-template-columns: 68px 1fr; 1010 + grid-gap: 22px; 1011 + align-items: start; 1012 + transition: transform .18s ease, box-shadow .18s ease; 1013 + 1014 + &:hover { 1015 + transform: translateY(-2px); 1016 + box-shadow: @shadow; 1017 + } 1018 + 1019 + .product-card-icon { 1020 + width: 58px; 1021 + height: 58px; 1022 + border-radius: 50%; 1023 + background: fade(@brand, 10%); 1024 + border: 1px solid fade(@brand, 20%); 1025 + color: @brand; 1026 + display: flex; 1027 + align-items: center; 1028 + justify-content: center; 1029 + font-size: 22px; 1030 + flex-shrink: 0; 1031 + } 1032 + 1033 + h3 { 1034 + margin: 0 0 10px; 1035 + color: @text; 1036 + font-size: 23px; 1037 + line-height: 1.25; 1038 + font-weight: 800; 1039 + } 1040 + 1041 + p { 1042 + color: @muted; 1043 + line-height: 1.6; 1044 + } 1045 + 1046 + .card-link { 1047 + margin: 0; 1048 + 1049 + a { 1050 + font-weight: 700; 1051 + } 1052 + } 1053 +} 1054 + 1055 +.product-card-kicker { 1056 + margin-bottom: 10px; 1057 + padding: 5px 10px; 1058 + font-size: 12px; 1059 + text-transform: uppercase; 1060 + letter-spacing: .04em; 1061 +} 1062 + 1063 +.product-highlights { 1064 + margin: 14px 0 20px; 1065 + padding-left: 18px; 1066 + color: @muted; 1067 + 1068 + li { 1069 + margin: 6px 0; 1070 + line-height: 1.45; 1071 + } 1072 +} 1073 + 1074 +/* ========== Individual Product Pages ========== */ 1075 + 1076 +.product-layout { 1077 + display: grid; 1078 + grid-template-columns: 1.1fr .9fr; 1079 + grid-gap: 36px; 1080 + max-width: 1040px; 1081 + margin: 0 auto; 1082 + align-items: start; 1083 +} 1084 + 1085 +.product-summary-card, 1086 +.product-info-card, 1087 +.product-gallery-panel { 1088 + background: #fff; 1089 + border: 1px solid @line; 1090 + border-radius: @radius; 1091 + box-shadow: @shadow-sm; 1092 +} 1093 + 1094 +.product-summary-card { 1095 + padding: 26px; 1096 + 1097 + h2 { 1098 + text-align: left; 1099 + margin-top: 0; 1100 + } 1101 + 1102 + p { 1103 + color: @muted; 1104 + line-height: 1.6; 1105 + } 1106 + 1107 + p:last-child { 1108 + margin-bottom: 0; 1109 + } 1110 +} 1111 + 1112 +.product-info-card { 1113 + padding: 22px; 1114 + 1115 + h3 { 1116 + margin-top: 0; 1117 + margin-bottom: 12px; 1118 + } 1119 + 1120 + ul { 1121 + margin: 0; 1122 + padding-left: 20px; 1123 + color: @muted; 1124 + } 1125 + 1126 + li { 1127 + margin: 8px 0; 1128 + line-height: 1.45; 1129 + } 1130 +} 1131 + 1132 +.product-feature-grid { 1133 + display: grid; 1134 + grid-template-columns: repeat(3, minmax(0, 1fr)); 1135 + grid-gap: 18px; 1136 + max-width: 1040px; 1137 + margin: 26px auto 0; 1138 +} 1139 + 1140 +.product-feature { 1141 + background: #fff; 1142 + border: 1px solid @line; 1143 + border-radius: @radius; 1144 + box-shadow: @shadow-sm; 1145 + padding: 22px; 1146 + transition: transform .18s ease, box-shadow .18s ease; 1147 + 1148 + &:hover { 1149 + transform: translateY(-2px); 1150 + box-shadow: @shadow; 1151 + } 1152 + 1153 + .feature-icon { 1154 + width: 46px; 1155 + height: 46px; 1156 + border-radius: 50%; 1157 + background: fade(@brand, 10%); 1158 + color: @brand; 1159 + display: flex; 1160 + align-items: center; 1161 + justify-content: center; 1162 + margin-bottom: 14px; 1163 + font-size: 18px; 1164 + } 1165 + 1166 + h3 { 1167 + margin: 0 0 8px; 1168 + color: @text; 1169 + font-size: 18px; 1170 + line-height: 1.25; 1171 + } 1172 + 1173 + p { 1174 + margin: 0; 1175 + color: @muted; 1176 + line-height: 1.5; 1177 + } 1178 +} 1179 + 1180 +.product-gallery-panel { 1181 + max-width: 1040px; 1182 + margin: 20px auto 0; 1183 + padding: 26px; 1184 + 1185 + h2 { 1186 + margin-top: 0; 1187 + text-align: center; 1188 + } 1189 + 1190 + .gallery-note { 1191 + max-width: 700px; 1192 + margin: 0 auto 18px; 1193 + color: @muted; 1194 + text-align: center; 1195 + line-height: 1.55; 1196 + } 1197 +} 1198 + 1199 +.product-gallery-placeholder { 1200 + min-height: 260px; 1201 + padding: 28px; 1202 + border: 1px dashed fade(@brand, 40%); 1203 + border-radius: @radius; 1204 + background: fade(@brand, 5%); 1205 + color: @muted; 1206 + text-align: center; 1207 + display: flex; 1208 + align-items: center; 1209 + justify-content: center; 1210 +} 1211 + 1212 +.product-section-muted { 1213 + background: 1214 + radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%); 1215 +} 1216 + 1217 +@media (max-width: 980px) { 1218 + .product-layout, 1219 + .product-feature-grid { 1220 + grid-template-columns: 1fr; 1221 + } 1222 + 1223 + .product-summary-card h2 { 1224 + text-align: center; 1225 + } 1226 +} 1227 + 1228 +@media (max-width: 640px) { 1229 + .product-card { 1230 + grid-template-columns: 1fr; 1231 + padding: 22px; 1232 + text-align: left; 1233 + 1234 + .product-card-icon { 1235 + margin-bottom: 2px; 1236 + } 1237 + } 1238 + 1239 + .product-summary-card, 1240 + .product-info-card, 1241 + .product-feature, 1242 + .product-gallery-panel { 1243 + padding: 20px; 1244 + } 1245 +} 1246 +/* ========== Resources Index ========== */ 1247 + 1248 +.resources-index-page { 1249 + padding: 56px 0 72px; 1250 + background: @brand-bg; 1251 +} 1252 + 1253 +.resources-intro { 1254 + max-width: 820px; 1255 + margin: 0 auto 32px; 1256 + text-align: center; 1257 +} 1258 + 1259 +.resources-intro p { 1260 + color: @muted; 1261 + font-size: 17px; 1262 + line-height: 1.7; 1263 + margin: 0; 1264 +} 1265 + 1266 +.resources-grid { 1267 + display: grid; 1268 + grid-template-columns: repeat(2, minmax(0, 1fr)); 1269 + gap: 24px; 1270 + margin-bottom: 36px; 1271 +} 1272 + 1273 +.resource-card { 1274 + display: flex; 1275 + gap: 18px; 1276 + background: #fff; 1277 + border: 1px solid @line; 1278 + border-radius: @radius; 1279 + box-shadow: @shadow-sm; 1280 + padding: 24px; 1281 +} 1282 + 1283 +.resource-card-icon { 1284 + flex: 0 0 46px; 1285 + width: 46px; 1286 + height: 46px; 1287 + border-radius: 14px; 1288 + background: @brand-soft; 1289 + color: @brand-strong; 1290 + display: flex; 1291 + align-items: center; 1292 + justify-content: center; 1293 + font-size: 20px; 1294 +} 1295 + 1296 +.resource-card-label { 1297 + color: @brand-strong; 1298 + font-size: 13px; 1299 + font-weight: 700; 1300 + text-transform: uppercase; 1301 + letter-spacing: .04em; 1302 + margin-bottom: 8px; 1303 +} 1304 + 1305 +.resource-card h2 { 1306 + font-size: 22px; 1307 + line-height: 1.25; 1308 + margin: 0 0 12px; 1309 +} 1310 + 1311 +.resource-card h2 a { 1312 + color: @text; 1313 + text-decoration: none; 1314 +} 1315 + 1316 +.resource-card h2 a:hover { 1317 + color: @brand-strong; 1318 + text-decoration: none; 1319 +} 1320 + 1321 +.resource-card p { 1322 + color: @muted; 1323 + font-size: 15px; 1324 + line-height: 1.65; 1325 + margin: 0 0 16px; 1326 +} 1327 + 1328 +.resource-card-link { 1329 + color: @brand-strong; 1330 + font-weight: 700; 1331 + text-decoration: none; 1332 +} 1333 + 1334 +.resource-card-link:hover { 1335 + color: @brand; 1336 + text-decoration: none; 1337 +} 1338 + 1339 +.resources-next { 1340 + max-width: 820px; 1341 + margin: 0 auto 32px; 1342 + text-align: center; 1343 +} 1344 + 1345 +.resources-next h2 { 1346 + font-size: 26px; 1347 + margin: 0 0 10px; 1348 +} 1349 + 1350 +.resources-next p { 1351 + color: @muted; 1352 + font-size: 16px; 1353 + line-height: 1.7; 1354 + margin: 0; 1355 +} 1356 + 1357 +@media (max-width: 767px) { 1358 + .resources-index-page { 1359 + padding: 36px 0 52px; 1360 + } 1361 + 1362 + .resources-intro { 1363 + text-align: left; 1364 + margin-bottom: 24px; 1365 + } 1366 + 1367 + .resources-grid { 1368 + grid-template-columns: 1fr; 1369 + gap: 18px; 1370 + } 1371 + 1372 + .resource-card { 1373 + padding: 20px; 1374 + } 1375 + 1376 + .resource-card h2 { 1377 + font-size: 20px; 1378 + } 1379 + 1380 + .resources-next { 1381 + text-align: left; 1382 + } 1383 +}
- 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