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