Changes for page Public Web Site
Last modified by Alex Cotiugă on 2026/05/02 12:23
From version 4.7
edited by Alex Cotiugă
on 2026/05/01 13:03
on 2026/05/01 13:03
Change comment:
There is no comment for this version
To version 3.73
edited by Alex Cotiugă
on 2025/11/24 15:58
on 2025/11/24 15:58
Change comment:
There is no comment for this version
Summary
-
Page properties (1 modified, 0 added, 0 removed)
-
Objects (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -5,22 +5,21 @@ 5 5 ## HERO 6 6 <section class="hero hero-centered" aria-labelledby="hero-title"> 7 7 <div class="container hero-inner"> 8 - <h1 id="hero-title">Keep Your XWiki Platform Secure, Stable and Up-to-Date</h1> 9 - <p class="lead">Helping organizations safely upgrade and maintain their XWiki environments.</p> 10 - <ul class="benefits"> 11 - <li><a href="$xwiki.getURL('services.xwiki-upgrades')">Smooth upgrades</a></li> 12 - <li>Reliable support plans</li> 13 - <li>Custom integrations</li> 14 - <li>Secure, optimized platforms</li> 15 - </ul> 8 + <h1 id="hero-title">Professional XWiki solutions, from setup to long-term stability</h1> 9 + <p class="lead">Need your XWiki upgraded, secured, or improved? Let’s make it happen.</p> 16 16 <div class="hero-cta"> 17 - <a href="mailto:alex@agnease.com">Contact Agnease</a> 18 - #*<a class="btn btn-primary" href="#contact" aria-label="Request a consultation" data-toggle="modal" data-target="#requestConsultation"> 11 + <a class="btn btn-primary" href="#contact" aria-label="Request a consultation" data-toggle="modal" data-target="#requestConsultation"> 19 19 Request a consultation 20 20 </a> 21 - #requestConsultationModal() *#14 + #requestConsultationModal() 22 22 ##data-toggle="modal" data-target="#requestConsultationModal" 23 23 </div> 17 + <ul class="benefits"> 18 + <li>Smooth upgrades</li> 19 + <li>Reliable support plans</li> 20 + <li>Custom integrations</li> 21 + <li>Secure, optimized platforms</li> 22 + </ul> 24 24 </div> 25 25 </section> 26 26 ## WHY CHOOSE ... ... @@ -61,7 +61,6 @@ 61 61 ## SERVICES 62 62 #set ($servicesSectionData = [{ 63 63 'title': 'Upgrades', 64 - 'reference': 'services.xwiki-upgrades', 65 65 'icon': 'refresh', 66 66 'content': 'Stay current with the latest XWiki LTS and keep your instance reliable.', 67 67 'items': [ ... ... @@ -127,13 +127,7 @@ 127 127 <i class="fa fa-$entry.icon" aria-hidden="true"></i> 128 128 </div> 129 129 <div class="service-body"> 130 - <h4> 131 - #if ("$!entry.reference" != '') 132 - <a href="$xwiki.getURL($entry.reference)">$entry.title</a> 133 - #else 134 - $entry.title 135 - #end 136 - </h4> 128 + <h4>$entry.title</h4> 137 137 <p>$entry.content</p> 138 138 <ul> 139 139 #foreach ($item in $entry.items) ... ... @@ -181,7 +181,7 @@ 181 181 #end 182 182 183 183 #macro (stripHTMLMacro $displayOutput) 184 - $stringtool.removeEnd($stringtool.removeStart($displayOutput, '{{html clean="false" wiki="false"}}'), '{{/html}}').replace('Agnease.Code.Lead.LeadClass_0_', ' acl-')176 + $stringtool.removeEnd($stringtool.removeStart($displayOutput, '{{html clean="false" wiki="false"}}'), '{{/html}}').replace('Agnease.Code.Lead.LeadClass_0_', '') 185 185 #end 186 186 187 187 #macro (displayFormFromSheetCode) ... ... @@ -196,23 +196,21 @@ 196 196 <div class="xform"> 197 197 <dl> 198 198 #foreach ($property in $xclass.properties) 199 - #if ($property.name != 'status') 200 - <dt #if (!$editing) 201 - class="editableProperty" 202 - #set ($xobjectPropertyReference = $xobject.getPropertyReference($property.name)) 203 - data-property="$escapetool.xml($services.model.serialize($xobjectPropertyReference))" 204 - data-property-type="object"#end> 205 - ## This must match the id generated by the $doc.display() method below. 206 - #set ($propertyId = "acl-$property.name") 207 - <label#if ($editing) for="$escapetool.xml($propertyId)"#end> 208 - $escapetool.xml($property.translatedPrettyName) 209 - </label> 210 - ## Support for specifying a translation key as hint in the property definition. 211 - <span class="xHint">$!escapetool.xml($services.localization.render($property.hint))</span> 212 - </dt> 213 - #set ($displayOutput = $doc.display($property.name, 'edit')) 214 - <dd>#stripHTMLMacro($displayOutput)</dd> 215 - #end 191 + <dt #if (!$editing) 192 + class="editableProperty" 193 + #set ($xobjectPropertyReference = $xobject.getPropertyReference($property.name)) 194 + data-property="$escapetool.xml($services.model.serialize($xobjectPropertyReference))" 195 + data-property-type="object"#end> 196 + ## This must match the id generated by the $doc.display() method below. 197 + #set ($propertyId = "${xclass.name}_${xobject.number}_$property.name") 198 + <label#if ($editing) for="$escapetool.xml($propertyId)"#end> 199 + $escapetool.xml($property.translatedPrettyName) 200 + </label> 201 + ## Support for specifying a translation key as hint in the property definition. 202 + <span class="xHint">$!escapetool.xml($services.localization.render($property.hint))</span> 203 + </dt> 204 + #set ($displayOutput = $doc.display($property.name, 'edit')) 205 + <dd>#stripHTMLMacro($displayOutput)</dd> 216 216 #end 217 217 #if (!$xclass.properties || $xclass.properties.size() == 0) 218 218 ## Keep the empty definition term in order to have valid HTML.
- XWiki.StyleSheetExtension[0]
-
- code
-
... ... @@ -1,11 +1,9 @@ 1 -/* ========== Agnease Public Website Theme ========== */ 2 - 1 +/* ========== Agnease Landing (no Bootstrap grid) ========== */ 3 3 @brand: #00937D; 4 4 @brand-strong: #007B6A; 5 5 @text: #2D3A34; 6 6 @muted: #5B6B64; 7 7 @line: #E4ECE9; 8 -@soft: #F6FBF9; 9 9 @radius: 16px; 10 10 @shadow-sm: 0 6px 20px rgba(0,0,0,.06); 11 11 @shadow: 0 12px 36px rgba(0,0,0,.08); ... ... @@ -17,26 +17,13 @@ 17 17 18 18 .container { 19 19 max-width: @maxw; 20 - margin-left: auto; 21 - margin-right: auto; 22 22 } 23 23 24 -.text-center { 25 - text-align: center; 26 -} 27 - 28 28 .lead { 29 29 color: @muted; 30 30 text-align: center; 31 - line-height: 1.5; 32 32 } 33 - 34 -.page-lead { 35 - max-width: 760px; 36 - margin: 0 auto; 37 - color: @muted; 38 - font-size: 18px; 39 - line-height: 1.5; 24 +h2 { 40 40 text-align: center; 41 41 } 42 42 ... ... @@ -49,145 +49,70 @@ 49 49 } 50 50 } 51 51 52 -h1, h2, h3, h4 { 53 - color: @text; 54 -} 37 +/* ===== HERO ===== */ 38 +.hero { 39 + overflow: hidden; 40 + background-repeat: no-repeat; 41 + background-attachment: scroll; 55 55 56 -h2 { 57 - text-align: center; 58 -} 43 + &.hero-centered { 44 + text-align: center; 45 + background: 46 + radial-gradient(50rem 18rem at 50% -10%, #E7FFF8 0%, transparent 60%), 47 + radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%); 48 + display: flex; 49 + align-items: center; 50 + justify-content: center; 51 + min-height: 350px; 52 + } 59 59 60 -/* ===== Buttons / links ===== */ 61 - 62 -.btn-main, 63 -.btn-secondary { 64 - display: inline-block; 65 - border-radius: 8px; 66 - padding: 9px 14px; 67 - font-weight: 700; 68 - text-decoration: none; 69 - line-height: 1.2; 70 -} 71 - 72 -.btn-main { 73 - color: #fff; 74 - background: @brand; 75 - 76 - &:hover, 77 - &:focus { 78 - color: #fff; 79 - background: @brand-strong; 80 - text-decoration: none; 54 + .hero-inner { 55 + max-width: 850px; 56 + margin: 0 auto; 57 + display: flex; 58 + flex-direction: column; 59 + align-items: center; 81 81 } 82 -} 83 83 84 -.btn-secondary { 85 - color: @brand; 86 - background: fade(@brand, 8%); 87 - border: 1px solid fade(@brand, 20%); 88 - 89 - &:hover, 90 - &:focus { 91 - color: @brand-strong; 92 - background: fade(@brand, 12%); 93 - text-decoration: none; 62 + .hero-cta { 63 + display: flex; 64 + gap: 0.8rem; 65 + flex-wrap: wrap; 66 + justify-content: center; 67 + margin-top: 0.3rem; 94 94 } 95 -} 96 96 97 -.cta-row { 98 - display: flex; 99 - gap: 10px; 100 - flex-wrap: wrap; 101 - justify-content: center; 102 - margin-top: 16px; 103 -} 70 + .benefits { 71 + display: flex; 72 + flex-wrap: wrap; 73 + justify-content: center; 74 + list-style: none; 75 + padding: 0; 76 + margin: 0.8rem 0 0; 77 + color: @muted; 78 + font-size: 14px; 104 104 105 -/* ===== Landing page hero ===== */ 80 + li + li::before { 81 + content: "•"; 82 + margin: 0 5px; 83 + } 106 106 107 -.landing-hero { 108 - text-align: center; 109 - min-height: 340px; 110 - display: flex; 111 - align-items: center; 112 - justify-content: center; 113 - background: 114 - radial-gradient(50rem 18rem at 50% -10%, #E7FFF8 0%, transparent 60%), 115 - radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%); 85 + @media (max-width: 640px) { 86 + li + li::before { 87 + content: none; 88 + } 89 + li:nth-child(1)::after, 90 + li:nth-child(3)::after { 91 + content: "•"; 92 + margin: 0 5px; 93 + } 94 + } 95 + } 116 116 } 117 117 118 -.landing-hero-inner { 119 - max-width: 860px; 120 - margin: 0 auto; 121 -} 122 - 123 -.landing-hero h1 { 124 - margin: 0 0 10px; 125 - font-size: 36px; 126 - line-height: 1.18; 127 -} 128 - 129 -.landing-hero .lead { 130 - margin: 0 auto 12px; 131 - max-width: 760px; 132 - font-size: 18px; 133 -} 134 - 135 -/* ===== Compact page header for section pages ===== */ 136 - 137 -.page-header-compact { 138 - padding: 34px 0 28px; 139 - text-align: center; 140 - border-top: none; 141 - background: 142 - radial-gradient(42rem 12rem at 50% -20%, #E7FFF8 0%, transparent 65%); 143 -} 144 - 145 -.page-header-compact .container { 146 - max-width: 850px; 147 -} 148 - 149 -.page-eyebrow { 150 - margin: 0 0 8px; 151 - color: @brand; 152 - font-size: 12px; 153 - font-weight: 800; 154 - text-transform: uppercase; 155 - letter-spacing: .08em; 156 -} 157 - 158 -.page-header-compact h1 { 159 - margin: 0 0 10px; 160 - font-size: 34px; 161 - line-height: 1.15; 162 -} 163 - 164 -/* ===== Benefits / chips ===== */ 165 - 166 -.benefits, 167 -.inline-benefits { 168 - display: flex; 169 - flex-wrap: wrap; 170 - justify-content: center; 171 - gap: 8px; 172 - list-style: none; 173 - padding: 0; 174 - margin: 12px 0 0; 175 -} 176 - 177 -.benefits li, 178 -.inline-benefits li { 179 - color: @muted; 180 - font-size: 13px; 181 - background: fade(@brand, 8%); 182 - border: 1px solid fade(@brand, 18%); 183 - border-radius: 999px; 184 - padding: 4px 10px; 185 -} 186 - 187 -/* ===== Cards ===== */ 188 - 98 +/* ===== WHY CHOOSE (cards) ===== */ 189 189 .widgets { 190 - margin-top: 1 6px;100 + margin-top: 12px; 191 191 display: grid; 192 192 grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); 193 193 grid-gap: 16px; ... ... @@ -216,16 +216,8 @@ 216 216 padding-bottom: 6px; 217 217 margin-bottom: 8px; 218 218 border-bottom: 1px solid fade(@line, 60%); 219 - 220 - i { 221 - color: @brand; 222 - } 223 - 224 - h4 { 225 - margin: 0; 226 - line-height: 1.2; 227 - color: @text; 228 - } 129 + i { color: @brand; } 130 + h4 { margin: 0; line-height: 1.2; color: @text; } 229 229 } 230 230 231 231 p { ... ... @@ -233,278 +233,101 @@ 233 233 color: @muted; 234 234 line-height: 1.45; 235 235 } 236 - 237 - .card-link { 238 - margin-top: 12px; 239 - 240 - a { 241 - color: @brand; 242 - font-weight: 700; 243 - text-decoration: none; 244 - 245 - &:hover { 246 - color: @brand-strong; 247 - text-decoration: underline; 248 - } 249 - } 250 - } 251 251 } 252 252 253 -/* ===== Service / listing rows ===== */ 140 +/* ===== SERVICES ===== */ 141 +.services { 142 + .services-grid { 143 + margin-top: 20px; 144 + display: flex; 145 + flex-wrap: wrap; 146 + gap: 24px; 254 254 255 -.services-grid { 256 - margin-top: 20px; 257 - display: flex; 258 - flex-wrap: wrap; 259 - gap: 24px; 260 - max-width: 960px; 261 - margin-left: auto; 262 - margin-right: auto; 263 - justify-content: center; 264 -} 265 - 266 -.service { 267 - flex: 0 1 calc(50% - 12px); 268 - display: flex; 269 - align-items: flex-start; 270 - gap: 16px; 271 - margin-bottom: 8px; 272 -} 273 - 274 -.service-icon { 275 - width: 42px; 276 - height: 42px; 277 - border-radius: 50%; 278 - display: flex; 279 - align-items: center; 280 - justify-content: center; 281 - color: @brand; 282 - background: fade(@brand, 10%); 283 - flex-shrink: 0; 284 - margin-top: 3px; 285 -} 286 - 287 -.service-body { 288 - h4 { 289 - margin: 0 0 4px; 290 - font-size: 1.125rem; 291 - font-weight: 800; 292 - 293 - a { 294 - color: @text; 295 - text-decoration: none; 296 - 297 - &:hover { 298 - color: @brand; 299 - text-decoration: underline; 300 - } 301 - } 148 + /* center the whole block under the heading */ 149 + max-width: 960px; 150 + margin-left: auto; 151 + margin-right: auto; 152 + justify-content: center; 302 302 } 303 303 304 - p { 305 - margin: 0 0 6px; 306 - color: @text; 307 - line-height: 1.5; 308 - } 155 + .service { 156 + flex: 0 1 calc(50% - 12px); 157 + display: flex; 158 + align-items: flex-start; 159 + gap: 16px; 160 + margin-bottom: 8px; 309 309 310 - ul { 311 - margin: .45rem 0 0; 312 - padding-left: 1.1rem; 313 - color: @muted; 314 - font-size: 13px; 315 - } 316 - 317 - li { 318 - margin: .25rem 0; 319 - line-height: 1.45; 320 - } 321 - 322 - .service-link { 323 - margin-top: .45rem; 324 - font-size: 13px; 325 - 326 - a { 162 + .service-icon { 163 + width: 42px; 164 + height: 42px; 165 + border-radius: 50%; 166 + display: flex; 167 + align-items: center; 168 + justify-content: center; 169 + font-size: 18px; 327 327 color: @brand; 328 - font-weight: 700; 329 - text-decoration: none; 171 + background: fade(@brand, 10%); 172 + flex-shrink: 0; 173 + margin-top: 3px; 174 + } 330 330 331 - &:hover { 332 - color: @brand-strong; 333 - text-decoration: underline; 176 + .service-body { 177 + h4 { 178 + margin: 0 0 4px; 179 + font-size: 1.125rem; 180 + font-weight: 800; 334 334 } 182 + p { 183 + margin: 0 0 6px; 184 + color: @text; 185 + line-height: 1.5; 186 + } 187 + ul { 188 + margin: .45rem 0 0; 189 + padding-left: 1.1rem; 190 + color: @muted; 191 + font-size: 13px; 192 + } 193 + li { 194 + margin: .25rem 0; 195 + line-height: 1.45; 196 + } 335 335 } 336 336 } 337 -} 338 338 339 -/* ===== Split section ===== */ 200 + /* ==== Center last item on its own row while keeping 50% width ==== */ 201 + .service-center { 202 + /* same width as siblings */ 203 + flex: 0 1 calc(55% - 12px); 340 340 341 -.split-section { 342 - display: grid; 343 - grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); 344 - gap: 32px; 345 - align-items: start; 346 - max-width: 960px; 347 - margin: 0 auto; 348 -} 349 - 350 -.panel { 351 - background: #fff; 352 - border: 1px solid @line; 353 - border-radius: @radius; 354 - box-shadow: @shadow-sm; 355 - padding: 20px; 356 -} 357 - 358 -.panel h3 { 359 - margin-top: 0; 360 -} 361 - 362 -/* ===== Contact / form page ===== */ 363 - 364 -.contact-layout { 365 - display: grid; 366 - grid-template-columns: minmax(0, .85fr) minmax(320px, 1.15fr); 367 - gap: 32px; 368 - max-width: 1000px; 369 - margin: 0 auto; 370 - align-items: start; 371 -} 372 - 373 -.contact-card { 374 - background: #fff; 375 - border: 1px solid @line; 376 - border-radius: @radius; 377 - box-shadow: @shadow-sm; 378 - padding: 20px; 379 -} 380 - 381 -.contact-card h3 { 382 - margin-top: 0; 383 -} 384 - 385 -.contact-list { 386 - list-style: none; 387 - padding: 0; 388 - margin: 12px 0 0; 389 - 390 - li { 391 - margin: 8px 0; 392 - color: @muted; 205 + /* push to center */ 206 + margin-left: auto; 207 + margin-right: auto; 393 393 } 394 394 395 - i { 396 - color: @brand; 397 - margin-right: 8px; 398 - } 210 + /* Mobile: 1 per row */ 211 + @media (max-width: 767px) { 212 + .services-grid { 213 + gap: 16px; 214 + max-width: 100%; 215 + } 399 399 400 - a { 401 - color: @brand; 217 + .service, 218 + .service-center { 219 + flex: 0 1 100%; 220 + margin-left: 0; 221 + margin-right: 0; 222 + } 402 402 } 403 403 } 404 404 405 -.form-panel { 406 - background: #fff; 407 - border: 1px solid @line; 408 - border-radius: @radius; 409 - box-shadow: @shadow-sm; 410 - padding: 22px; 411 -} 412 - 413 -.form-panel .xform dl { 414 - margin: 0; 415 -} 416 - 417 -.form-panel .xform dt { 418 - margin-top: 12px; 419 -} 420 - 421 -.form-panel .xform dt:first-child { 422 - margin-top: 0; 423 -} 424 - 425 -.form-panel .xform label { 426 - color: @text; 427 - font-weight: 700; 428 -} 429 - 430 -.form-panel .xform .xHint { 431 - display: block; 432 - color: @muted; 433 - font-size: 12px; 434 - margin-top: 2px; 435 -} 436 - 437 -.form-panel .xform dd { 438 - margin-left: 0; 439 - margin-bottom: 10px; 440 -} 441 - 442 -.form-panel input[type="text"], 443 -.form-panel input[type="email"], 444 -.form-panel textarea, 445 -.form-panel select { 446 - width: 100%; 447 - max-width: 100%; 448 - border: 1px solid @line; 449 - border-radius: 8px; 450 - padding: 8px 10px; 451 -} 452 - 453 453 /* ===== CTA ===== */ 454 - 455 455 .cta-section { 456 456 padding: 24px 0 16px; 457 -} 458 458 459 -.contact-inline { 460 - margin: 0; 461 - color: @muted; 462 - 463 - a { 464 - color: @brand; 465 - font-weight: 700; 230 + .contact-inline { 231 + margin: 0; 232 + color: @muted; 233 + a { color: @brand; } 466 466 } 467 467 } 468 - 469 -/* ===== Compact sections ===== */ 470 - 471 -.compact-section { 472 - padding: 28px 0; 473 -} 474 - 475 -.compact-section h2 { 476 - margin-top: 0; 477 - margin-bottom: 14px; 478 -} 479 - 480 -/* ===== Responsive ===== */ 481 - 482 -@media (max-width: 767px) { 483 - section { 484 - padding: 26px 0; 485 - } 486 - 487 - .landing-hero { 488 - min-height: 280px; 489 - } 490 - 491 - .landing-hero h1, 492 - .page-header-compact h1 { 493 - font-size: 28px; 494 - } 495 - 496 - .page-lead, 497 - .landing-hero .lead { 498 - font-size: 16px; 499 - } 500 - 501 - .service { 502 - flex: 0 1 100%; 503 - } 504 - 505 - .split-section, 506 - .contact-layout { 507 - grid-template-columns: 1fr; 508 - gap: 20px; 509 - } 510 -}