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, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -10,17 +10,13 @@ 10 10 Your trusted partner for professional XWiki services 11 11 </div> 12 12 13 - <h1 id="hero-title"> ReliableXWiki engineeringfor organizations thatdependon their knowledgeplatform</h1>13 + <h1 id="hero-title">Professional XWiki engineering and support</h1> 14 14 15 15 <p class="lead"> 16 - Agnease helps companies keep XWiki secure, stable, up-to-date and adapted to real business processes. 16 + Agnease helps organizations upgrade, maintain, secure and extend XWiki so production platforms stay stable, 17 + up-to-date and adapted to real business processes. 17 17 </p> 18 18 19 - <p class="hero-support"> 20 - From LTS upgrades and maintenance to custom applications, integrations, workflows and migrations, 21 - Agnease provides focused XWiki expertise with practical delivery and long-term care. 22 - </p> 23 - 24 24 <ul class="benefits"> 25 25 <li>Safe LTS upgrades</li> 26 26 <li>Support and recovery</li> ... ... @@ -146,7 +146,7 @@ 146 146 </div> 147 147 </section> 148 148 149 - <section class="resource-strip" aria-labelledby="resources-title"> 145 + <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
-
... ... @@ -12,6 +12,9 @@ 12 12 @shadow: 0 12px 36px rgba(0, 0, 0, .08); 13 13 @maxw: 1140px; 14 14 15 +@section-padding: 30px 0; 16 +@section-padding-mobile: 28px 0; 17 + 15 15 /* ========== Base ========== */ 16 16 17 17 #mainContentArea { ... ... @@ -31,7 +31,7 @@ 31 31 } 32 32 33 33 section { 34 - padding: 42px 0;37 + padding: @section-padding; 35 35 border-top: 1px solid @line; 36 36 37 37 &:first-of-type { ... ... @@ -251,7 +251,6 @@ 251 251 .trust-strip { 252 252 padding: 18px 0; 253 253 border-top: 1px solid @line; 254 - border-bottom: 1px solid @line; 255 255 background: #fff; 256 256 257 257 ul { ... ... @@ -296,7 +296,7 @@ 296 296 .services-grid { 297 297 grid-template-columns: repeat(3, minmax(0, 1fr)); 298 298 max-width: 1040px; 299 - margin-top: 2 6px;301 + margin-top: 22px; 300 300 } 301 301 302 302 .resource-grid { ... ... @@ -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; ... ... @@ -624,10 +624,81 @@ 624 624 } 625 625 } 626 626 617 +/* ========== Homepage Resource Strip ========== */ 618 + 619 +.homepage-resource-strip { 620 + background: 621 + radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 70%); 622 + 623 + .resource-grid { 624 + max-width: 1040px; 625 + margin: 22px auto 0; 626 + display: grid; 627 + grid-template-columns: repeat(2, minmax(0, 1fr)); 628 + grid-gap: 22px; 629 + align-items: stretch; 630 + } 631 + 632 + .resource-card { 633 + display: flex; 634 + flex-direction: column; 635 + min-width: 0; 636 + min-height: 100%; 637 + padding: 26px; 638 + } 639 + 640 + .resource-card h4 { 641 + margin: 0 0 10px; 642 + color: @text; 643 + font-size: 21px; 644 + line-height: 1.25; 645 + font-weight: 700; 646 + } 647 + 648 + .resource-card p { 649 + margin: 0 0 18px; 650 + color: @muted; 651 + font-size: 15px; 652 + line-height: 1.6; 653 + } 654 + 655 + .resource-card a { 656 + margin-top: auto; 657 + color: @brand; 658 + font-weight: 700; 659 + text-decoration: underline; 660 + 661 + &:hover, 662 + &:focus { 663 + color: @brand-strong; 664 + } 665 + } 666 +} 667 + 668 +@media (max-width: 980px) { 669 + .homepage-resource-strip { 670 + .resource-grid { 671 + grid-template-columns: 1fr; 672 + } 673 + } 674 +} 675 + 676 +@media (max-width: 640px) { 677 + .homepage-resource-strip { 678 + .resource-card { 679 + padding: 22px; 680 + } 681 + 682 + .resource-card h4 { 683 + font-size: 19px; 684 + } 685 + } 686 +} 687 + 627 627 /* ========== CTA ========== */ 628 628 629 629 .cta-section { 630 - padding: 32px 0 24px;691 + padding: @section-padding; 631 631 632 632 .contact-inline { 633 633 margin: 0; ... ... @@ -726,7 +726,7 @@ 726 726 727 727 @media (max-width: 640px) { 728 728 section { 729 - padding: 34px 0;790 + padding: @section-padding-mobile; 730 730 } 731 731 732 732 .widgets, ... ... @@ -751,14 +751,15 @@ 751 751 padding: 24px 20px; 752 752 } 753 753 } 815 + 754 754 /* ========== Resource / Article Pages ========== */ 755 755 756 756 .resource-page { 757 - padding-top: 34px;819 + padding-top: 0; 758 758 } 759 759 760 760 .resource-header { 761 - padding: 40px 0 30px;823 + padding: @section-padding; 762 762 border-top: none; 763 763 background: 764 764 radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%), ... ... @@ -911,10 +911,11 @@ 911 911 position: static; 912 912 } 913 913 } 976 + 914 914 /* ========== Products / Extensions Pages ========== */ 915 915 916 916 .product-index-section { 917 - padding: 52px 0 56px;980 + padding: @section-padding; 918 918 919 919 h2 { 920 920 margin-bottom: 10px; ... ... @@ -923,7 +923,7 @@ 923 923 924 924 .product-card-grid { 925 925 max-width: 840px; 926 - margin: 2 8px auto 0;989 + margin: 22px auto 0; 927 927 display: grid; 928 928 grid-template-columns: 1fr; 929 929 grid-gap: 18px; ... ... @@ -939,13 +939,7 @@ 939 939 grid-template-columns: 68px 1fr; 940 940 grid-gap: 22px; 941 941 align-items: start; 942 - transition: transform .18s ease, box-shadow .18s ease; 943 943 944 - &:hover { 945 - transform: translateY(-2px); 946 - box-shadow: @shadow; 947 - } 948 - 949 949 .product-card-icon { 950 950 width: 58px; 951 951 height: 58px; ... ... @@ -1064,7 +1064,7 @@ 1064 1064 grid-template-columns: repeat(3, minmax(0, 1fr)); 1065 1065 grid-gap: 18px; 1066 1066 max-width: 1040px; 1067 - margin: 2 6px auto 0;1124 + margin: 22px auto 0; 1068 1068 } 1069 1069 1070 1070 .product-feature { ... ... @@ -1073,13 +1073,7 @@ 1073 1073 border-radius: @radius; 1074 1074 box-shadow: @shadow-sm; 1075 1075 padding: 22px; 1076 - transition: transform .18s ease, box-shadow .18s ease; 1077 1077 1078 - &:hover { 1079 - transform: translateY(-2px); 1080 - box-shadow: @shadow; 1081 - } 1082 - 1083 1083 .feature-icon { 1084 1084 width: 46px; 1085 1085 height: 46px; ... ... @@ -1173,141 +1173,142 @@ 1173 1173 padding: 20px; 1174 1174 } 1175 1175 } 1227 + 1176 1176 /* ========== Resources Index ========== */ 1177 1177 1178 1178 .resources-index-page { 1179 - padding: 56px 0 72px;1231 + padding: @section-padding; 1180 1180 background: @brand-bg; 1181 -} 1182 1182 1183 -.resources-intro { 1184 - max-width: 820px; 1185 - margin: 0 auto 32px; 1186 - text-align: center; 1187 -} 1234 + .resources-intro { 1235 + max-width: 820px; 1236 + margin: 0 auto 32px; 1237 + text-align: center; 1188 1188 1189 -.resources-intro p { 1190 - color: @muted; 1191 - font-size: 17px; 1192 - line-height: 1.7; 1193 - margin: 0; 1194 -} 1239 + p { 1240 + color: @muted; 1241 + font-size: 17px; 1242 + line-height: 1.7; 1243 + margin: 0; 1244 + } 1245 + } 1195 1195 1196 -.resources-grid { 1197 - display: grid; 1198 - grid-template-columns: repeat(2, minmax(0, 1fr)); 1199 - gap: 24px; 1200 - margin-bottom: 36px; 1201 -} 1247 + .resources-grid { 1248 + display: grid; 1249 + grid-template-columns: repeat(2, minmax(0, 1fr)); 1250 + gap: 24px; 1251 + margin-bottom: 36px; 1252 + } 1202 1202 1203 -.resource-card { 1204 - display: flex; 1205 - gap: 18px; 1206 - background: #fff; 1207 - border: 1px solid @line; 1208 - border-radius: @radius; 1209 - box-shadow: @shadow-sm; 1210 - padding: 24px; 1211 -} 1254 + .resource-card { 1255 + display: flex; 1256 + gap: 18px; 1257 + background: #fff; 1258 + border: 1px solid @line; 1259 + border-radius: @radius; 1260 + box-shadow: @shadow-sm; 1261 + padding: 24px; 1262 + } 1212 1212 1213 -.resource-card-icon { 1214 - flex: 0 0 46px; 1215 - width: 46px; 1216 - height: 46px; 1217 - border-radius: 14px; 1218 - background: @brand-soft; 1219 - color: @brand-strong; 1220 - display: flex; 1221 - align-items: center; 1222 - justify-content: center; 1223 - font-size: 20px; 1224 -} 1264 + .resource-card-icon { 1265 + flex: 0 0 46px; 1266 + width: 46px; 1267 + height: 46px; 1268 + border-radius: 14px; 1269 + background: @brand-soft; 1270 + color: @brand-strong; 1271 + display: flex; 1272 + align-items: center; 1273 + justify-content: center; 1274 + font-size: 20px; 1275 + } 1225 1225 1226 -.resource-card-label { 1227 - color: @brand-strong; 1228 - font-size: 13px; 1229 - font-weight: 700; 1230 - text-transform: uppercase; 1231 - letter-spacing: .04em; 1232 - margin-bottom: 8px; 1233 -} 1277 + .resource-card-label { 1278 + color: @brand-strong; 1279 + font-size: 13px; 1280 + font-weight: 700; 1281 + text-transform: uppercase; 1282 + letter-spacing: .04em; 1283 + margin-bottom: 8px; 1284 + } 1234 1234 1235 -.resource-card h2 { 1236 - font-size: 22px; 1237 - line-height: 1.25; 1238 - margin: 0 0 12px; 1239 -} 1286 + .resource-card h2 { 1287 + font-size: 22px; 1288 + line-height: 1.25; 1289 + margin: 0 0 12px; 1290 + } 1240 1240 1241 -.resource-card h2 a { 1242 - color: @text; 1243 - text-decoration: none; 1244 -} 1292 + .resource-card h2 a { 1293 + color: @text; 1294 + text-decoration: none; 1245 1245 1246 -.resource-card h2 a:hover { 1247 - color: @brand-strong; 1248 - text-decoration: none; 1249 -} 1296 + &:hover { 1297 + color: @brand-strong; 1298 + text-decoration: none; 1299 + } 1300 + } 1250 1250 1251 -.resource-card p { 1252 - color: @muted; 1253 - font-size: 15px; 1254 - line-height: 1.65; 1255 - margin: 0 0 16px; 1256 -} 1302 + .resource-card p { 1303 + color: @muted; 1304 + font-size: 15px; 1305 + line-height: 1.65; 1306 + margin: 0 0 16px; 1307 + } 1257 1257 1258 -.resource-card-link { 1259 - color: @brand-strong; 1260 - font-weight: 700; 1261 - text-decoration: none; 1262 -} 1309 + .resource-card-link { 1310 + color: @brand-strong; 1311 + font-weight: 700; 1312 + text-decoration: none; 1263 1263 1264 -.resource-card-link:hover { 1265 - color: @brand; 1266 - text-decoration: none; 1267 -} 1314 + &:hover { 1315 + color: @brand; 1316 + text-decoration: none; 1317 + } 1318 + } 1268 1268 1269 -.resources-next { 1270 - max-width: 820px; 1271 - margin: 0 auto 32px; 1272 - text-align: center; 1273 -} 1320 + .resources-next { 1321 + max-width: 820px; 1322 + margin: 0 auto 32px; 1323 + text-align: center; 1274 1274 1275 - .resources-nexth2 {1276 - font-size: 26px; 1277 - margin: 0 0 10px; 1278 -} 1325 + h2 { 1326 + font-size: 26px; 1327 + margin: 0 0 10px; 1328 + } 1279 1279 1280 -.resources-next p { 1281 - color: @muted; 1282 - font-size: 16px; 1283 - line-height: 1.7; 1284 - margin: 0; 1330 + p { 1331 + color: @muted; 1332 + font-size: 16px; 1333 + line-height: 1.7; 1334 + margin: 0; 1335 + } 1336 + } 1285 1285 } 1286 1286 1287 1287 @media (max-width: 767px) { 1288 1288 .resources-index-page { 1289 - padding: 36px 0 52px; 1290 - } 1341 + padding: @section-padding-mobile; 1291 1291 1292 - .resources-intro { 1293 - text-align: left; 1294 - margin-bottom: 24px; 1295 - } 1343 + .resources-intro { 1344 + text-align: left; 1345 + margin-bottom: 24px; 1346 + } 1296 1296 1297 - .resources-grid { 1298 - grid-template-columns: 1fr; 1299 - gap: 18px; 1300 - } 1348 + .resources-grid { 1349 + grid-template-columns: 1fr; 1350 + gap: 18px; 1351 + } 1301 1301 1302 - .resource-card { 1303 - padding: 20px; 1304 - } 1353 + .resource-card { 1354 + padding: 20px; 1355 + } 1305 1305 1306 - .resource-card h2 { 1307 - font-size: 20px; 1308 - } 1357 + .resource-card h2 { 1358 + font-size: 20px; 1359 + } 1309 1309 1310 - .resources-next { 1311 - text-align: left; 1361 + .resources-next { 1362 + text-align: left; 1363 + } 1312 1312 } 1313 1313 }
- XWiki.StyleSheetExtension[1]
-
- code
-
... ... @@ -1,32 +1,34 @@ 1 1 /* ========== Agnease Public Top Menu ========== */ 2 2 3 -/* Keep the public menu aligned to the right on desktop */ 4 -@media (min-width: 768px) { 5 - .navbar-nav { 6 - float: right; 7 - } 8 - 9 - .site-nav { 10 - margin-left: auto; 11 - justify-content: flex-end; 12 - } 3 +/* Desktop alignment */ 4 +#menuview .navbar-nav { 5 + float: right !important; 13 13 } 14 14 15 15 /* Top-level menu items */ 16 16 17 -.agnease-menu-item { 18 - .dropdown-toggle { 10 +.agnease-menu-item, 11 +.agnease-menu-link { 12 + > a, 13 + > .dropdown-toggle { 19 19 color: @brand; 20 - font-weight: 600; 21 21 font-size: 17px; 16 + font-weight: 600; 22 22 padding-left: 16px; 23 23 padding-right: 16px; 24 - background: transparent !important; 25 - background-color: transparent !important; 26 - background-image: none !important; 27 - box-shadow: none !important; 19 + text-decoration: none; 28 28 } 29 29 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 + 30 30 .caret { 31 31 margin-left: 5px; 32 32 border-top-color: @brand; ... ... @@ -33,67 +33,18 @@ 33 33 border-bottom-color: @brand; 34 34 } 35 35 36 - &.open > .dropdown-toggle, 37 - &.active > .dropdown-toggle, 38 - .dropdown-toggle:hover, 39 - .dropdown-toggle:focus, 40 - .dropdown-toggle:active { 41 - color: @brand-strong; 42 - background: transparent !important; 43 - background-color: transparent !important; 44 - background-image: none !important; 45 - box-shadow: none !important; 46 - outline: none; 47 - } 48 - 49 - &.open > .dropdown-toggle .caret, 50 - &.active > .dropdown-toggle .caret, 51 - .dropdown-toggle:hover .caret, 52 - .dropdown-toggle:focus .caret, 53 - .dropdown-toggle:active .caret { 38 + > a:hover .caret, 39 + > a:focus .caret, 40 + > a:active .caret, 41 + &.open > a .caret, 42 + &.active > a .caret { 54 54 border-top-color: @brand-strong; 55 55 border-bottom-color: @brand-strong; 56 56 } 57 57 } 58 58 59 -/* Remove Bootstrap/XWiki gray backgroundsfrom top-levelnav states*/48 +/* Dropdown panel */ 60 60 61 -.navbar-nav > li > a, 62 -.navbar-nav > li > a:hover, 63 -.navbar-nav > li > a:focus, 64 -.navbar-nav > li > a:active, 65 -.navbar-nav > li.open > a, 66 -.navbar-nav > li.open > a:hover, 67 -.navbar-nav > li.open > a:focus, 68 -.navbar-nav > li.open > a:active, 69 -.navbar-nav > li.active > a, 70 -.navbar-nav > li.active > a:hover, 71 -.navbar-nav > li.active > a:focus, 72 -.navbar-nav > li.active > a:active, 73 -.nav .open > a, 74 -.nav .open > a:hover, 75 -.nav .open > a:focus { 76 - background: transparent !important; 77 - background-color: transparent !important; 78 - background-image: none !important; 79 - box-shadow: none !important; 80 -} 81 - 82 -/* Contact item should visually match the dropdown top-level entries */ 83 -.navbar-nav > li > a { 84 - color: @brand; 85 - font-size: 17px; 86 - font-weight: 600; 87 -} 88 - 89 -.navbar-nav > li > a:hover, 90 -.navbar-nav > li > a:focus, 91 -.navbar-nav > li > a:active { 92 - color: @brand-strong; 93 -} 94 - 95 -/* Dropdown panels */ 96 - 97 97 .agnease-dropdown { 98 98 min-width: 310px; 99 99 padding: 10px 8px; ... ... @@ -107,16 +107,12 @@ 107 107 align-items: center; 108 108 gap: 12px; 109 109 padding: 11px 14px; 110 - border-radius: 0; 111 111 color: @brand; 112 - background: transparent !important; 113 - background-color: transparent !important; 114 - background-image: none !important; 115 115 white-space: nowrap; 116 116 font-size: 16px; 117 117 font-weight: 600; 118 118 line-height: 1.3; 119 - box-shadow: none!important;68 + text-decoration: none; 120 120 121 121 i { 122 122 width: 20px; ... ... @@ -130,12 +130,8 @@ 130 130 &:focus, 131 131 &:active { 132 132 color: @brand-strong; 133 - background: transparent !important; 134 - background-color: transparent !important; 135 - background-image: none !important; 136 136 text-decoration: none; 137 137 outline: none; 138 - box-shadow: none !important; 139 139 140 140 i { 141 141 color: @brand-strong; ... ... @@ -143,16 +143,8 @@ 143 143 } 144 144 } 145 145 146 - > .active > a, 147 - > .active > a:hover, 148 - > .active > a:focus, 149 - > .active > a:active { 91 + > .active > a { 150 150 color: @brand-strong; 151 - background: transparent !important; 152 - background-color: transparent !important; 153 - background-image: none !important; 154 - text-decoration: none; 155 - box-shadow: none !important; 156 156 157 157 i { 158 158 color: @brand-strong; ... ... @@ -165,39 +165,23 @@ 165 165 } 166 166 } 167 167 168 -.agnease-products-dropdown, 169 -.agnease-resources-dropdown { 170 - min-width: 290px; 171 -} 105 +/* Mobile */ 172 172 173 -/* Remove Bootstrap/XWiki gray backgrounds from dropdown entries globally */ 174 - 175 -.dropdown-menu > li > a, 176 -.dropdown-menu > li > a:hover, 177 -.dropdown-menu > li > a:focus, 178 -.dropdown-menu > li > a:active, 179 -.dropdown-menu > .active > a, 180 -.dropdown-menu > .active > a:hover, 181 -.dropdown-menu > .active > a:focus, 182 -.dropdown-menu > .active > a:active { 183 - background: transparent !important; 184 - background-color: transparent !important; 185 - background-image: none !important; 186 - box-shadow: none !important; 187 -} 188 - 189 -/* ========== Mobile Menu ========== */ 190 - 191 191 @media (max-width: 767px) { 192 - .navbar-nav { 193 - float: none; 108 + .site-nav { 109 + margin-left: 0; 110 + justify-content: center; 111 + flex-wrap: wrap; 194 194 } 195 195 196 - .navbar-nav > li > a, 197 - .agnease-menu-item .dropdown-toggle { 198 - font-size: 16px; 199 - padding-top: 9px; 200 - padding-bottom: 9px; 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; 121 + } 201 201 } 202 202 203 203 .agnease-dropdown { ... ... @@ -213,25 +213,15 @@ 213 213 padding: 8px 10px; 214 214 white-space: normal; 215 215 font-size: 15px; 216 - color: @brand; 217 - background: transparent !important; 218 218 219 219 i { 220 220 width: 18px; 221 221 flex-basis: 18px; 222 222 } 223 - 224 - &:hover, 225 - &:focus, 226 - &:active { 227 - color: @brand-strong; 228 - background: transparent !important; 229 - } 230 230 } 231 231 232 232 .divider { 233 233 margin: 5px 0; 234 - background-color: fade(@brand, 16%); 235 235 } 236 236 } 237 237 }