0 Votes

Changes for page Home

Last modified by Alex Cotiugă on 2026/01/13 13:12

Manage
- Copy
Actions
- Export
- Print Preview
Viewers
- Source
- Children
- Content
- Comments
- Attachments
- History
- Information
- Likes

From 7.71 to 7.70 From 7.96 to 7.95

From version 7.95

edited by Alex Cotiugă
on 2025/11/13 21:52

Change comment: There is no comment for this version

To version 7.71

edited by Alex Cotiugă
on 2025/11/13 20:28

Change comment: There is no comment for this version

Raw
Rendered

Summary

Page properties (1 modified, 0 added, 0 removed)
Objects (1 modified, 0 added, 0 removed)
- XWiki.StyleSheetExtension[0]

Details

Page properties

Content

@@ -50,14 +50,17 @@
      <div class="container">
        <h2 id="why-title">Why choose Agnease</h2>
        <p class="lead">10+ years of XWiki expertise with structured delivery and lasting collaboration</p>
++
        <div class="row widgets" role="list">
          #foreach ($entry in $whySectionData)
--          <div class="widget col-sm-6 col-md-3" role="listitem">
--            <div class="icon" aria-hidden="true">
--              <i class="fa fa-$entry.icon"></i>
--              <h4>$entry.title</h4>
--            </div>
--            <p>$entry.content</p>
++          <div class="col-sm-6 col-md-3">
++            <article class="widget" role="listitem">
++              <div class="icon" aria-hidden="true">
++                <i class="fa fa-$entry.icon"></i>
++                <h4>$entry.title</h4>
++              </div>
++              <p>$entry.content</p>
++            </article>
            </div>
          #end
        </div>
@@ -67,7 +67,7 @@
    #set ($servicesSectionData = [{
      'title': 'Upgrades',
      'icon': 'refresh',
--    'content': 'Stay current with the latest XWiki LTS and keep your instance secure',
++    'content': 'Stay current with the latest XWiki LTS and keep your instance secure and stable.',
      'items': [
        'Audit setup, extensions, and configurations',
        'Test upgrades with backups and validation',
@@ -113,24 +113,12 @@
    <section class="services" aria-labelledby="services-title">
      <div class="container">
        <h2 id="services-title">Services</h2>
--      <p class="lead">
--        All the XWiki services you need, delivered with precision and care
--      </p>
--
--      #set ($servicesSize = $servicesSectionData.size())
--      <div class="row services-grid" role="list">
++      <p class="services-sub">All the XWiki services you need, delivered with precision and care</p>
++      <div class="services-grid">
          #foreach ($entry in $servicesSectionData)
--          #set ($classes = "service col-xs-12 col-sm-6")
--          ## If this is the last item and the number of services is odd,
--          ## center it on its own row on small+ screens
--          #if ($foreach.count == $servicesSize && ($servicesSize % 2) == 1)
--            #set ($classes = "$classes col-sm-offset-3")
--          #end
--          <div class="$classes" role="listitem">
--            <div class="service-icon">
--              <i class="fa fa-$entry.icon" aria-hidden="true"></i>
--            </div>
--            <div class="service-body">
++          <article class="service">
++            <i class="fa fa-$entry.icon" aria-hidden="true"></i>
++            <div class="body">
                <h4>$entry.title</h4>
                <p>$entry.content</p>
                <ul>
@@ -139,7 +139,7 @@
                  #end
                </ul>
              </div>
--          </div>
++          </article>
          #end
        </div>
      </div>

XWiki.StyleSheetExtension[0]

Code

@@ -120,144 +120,181 @@
      }
    }
--  /* === WHY CHOOSE (widgets using Bootstrap grid) === */
++  /* === WHY CHOOSE (widgets with inline icon + title) === */
    .widgets {
--    margin-top: 12px;
++    display: grid;
++    gap: 16px;
++    grid-template-columns: 1fr;
--    /* Flex layout for equal-height and spacing */
++    @media (min-width: 860px) {
++      grid-template-columns: repeat(4, 1fr);
++    }
++  }
++
++  .widget {
++    background: #fff;
++    border: 1px solid @line;
++    border-radius: @radius;
++    padding: 18px;
++    box-shadow: @shadow-sm;
      display: flex;
--    flex-wrap: wrap;
--    justify-content: space-between;
++    flex-direction: column;
++    justify-content: flex-start;
++    gap: 8px;
++    text-align: left;
++    transition: transform 0.18s ease, box-shadow 0.18s ease;
--    .widget {
--      box-sizing: border-box;
++    &:hover {
++      transform: translateY(-2px);
++      box-shadow: @shadow;
++    }
--      /* Desktop (md+) – 4 per row */
--      flex: 0 0 24%;
--      max-width: 24%;
--      margin-bottom: 16px;
--
--      /* Card look */
++    /* The icon + title row */
++    .icon {
        display: flex;
--      flex-direction: column;
--      height: 100%;
--      padding: 18px;
--      background: #fff;
--      border: 1px solid @line;
--      border-radius: @radius;
--      box-shadow: @shadow-sm;
--      transition: transform .18s ease, box-shadow .18s ease;
++      align-items: center;
++      gap: 10px;
++      padding: 6px 0;
++      border-bottom: 1px solid fade(@line, 60%);
++      margin-bottom: 6px;
--      &:hover {
--        transform: translateY(-2px);
--        box-shadow: @shadow;
++      i {
++        color: @brand;
        }
--      .icon {
--        display: flex;
--        align-items: center;
--        gap: 10px;
--        padding-bottom: 6px;
--        margin-bottom: 8px;
--        border-bottom: 1px solid fade(@line, 60%);
--        i  { color: @brand; }
--        h4 { margin: 0; line-height: 1.2; color: @text; }
--      }
--
--      p {
++      h4 {
++        /*font-weight: 700; */
          margin: 0;
--        color: @muted;
--        line-height: 1.45;
++        color: @text;
++        line-height: 1.2;
        }
      }
--    /* Tablet (sm–md) – 2 per row */
--    @media (max-width: 991px) {
--      .widget {
--        flex: 0 0 48%;
--        max-width: 48%;
--      }
++    /* Body paragraph */
++    p {
++      color: @muted;
++      margin: 0;
++      line-height: 1.45;
      }
--
--    /* Mobile (xs) – 1 per row */
--    @media (max-width: 767px) {
--      .widget {
--        flex: 0 0 100%;
--        max-width: 100%;
--      }
--    }
    }
    /* SERVICES */
++ /* SERVICES */
    .services {
++    h2 {
++      margin: 0 0 .3rem;
++    }
++
++    .services-sub {
++      margin: 0 0 1.75rem;
++      color: @muted;
++    }
++
++    /* Flex layout: 2 per row on desktop */
      .services-grid {
--      margin-top: 12px;
++      display: flex;
++      flex-wrap: wrap;
++      gap: 32px 36px;          // row gap, column gap
++    }
--      .service {
--        margin-bottom: 24px;
++    .service {
++      display: grid;
++      grid-template-columns: 48px 1fr;
++      gap: 16px;
++      padding: 18px 0;
++      border-top: 1px solid @line;
--        /* icon + text side by side */
++      /* two per row */
++      flex: 1 1 calc(50% - 18px);
++      max-width: calc(50% - 18px);
++
++      /* first row: no top border */
++      &:nth-of-type(-n + 2) {
++        border-top: none;
++      }
++
++      > i {
++        width: 42px;
++        height: 42px;
++        border-radius: 50%;
          display: flex;
--        align-items: flex-start;
--        gap: 16px;
++        align-items: center;
++        justify-content: center;
++        font-size: 18px;
++        color: @brand;
++        background: fade(@brand, 10%);
++        margin-top: 3px;
++      }
--        .service-icon {
--          width: 42px;
--          height: 42px;
--          border-radius: 50%;
--          display: flex;
--          align-items: center;
--          justify-content: center;
--          font-size: 18px;
--          color: @brand;
--          background: fade(@brand, 10%);
--          margin-top: 3px;
--          flex-shrink: 0;
++      .body {
++        h4 {
++          margin: 0 0 4px;
++          font-size: 1.125rem;
++          font-weight: 800;
          }
--        .service-body {
--          h4 {
--            margin: 0 0 4px;
--            font-size: 1.125rem;
--            font-weight: 800;
--          }
++        p {
++          margin: 0 0 6px;
++          color: @text;
++          line-height: 1.5;
++        }
--          p {
--            margin: 0 0 6px;
--            color: @text;
--            line-height: 1.5;
--          }
++        ul {
++          margin: .45rem 0 0;
++          padding-left: 1.1rem;
++          color: @muted;
++          font-size: .95rem;
++        }
--          ul {
--            margin: .45rem 0 0;
--            padding-left: 1.1rem;
--            color: @muted;
--            font-size: .95rem;
--          }
--
--          li {
--            margin: .25rem 0;
--            line-height: 1.45;
--          }
++        li {
++          margin: .25rem 0;
++          line-height: 1.45;
          }
        }
      }
--    @media (max-width: 767px) {
++    /* If there is an odd number of services, center the last one */
++    .services-grid > .service:last-child:nth-child(odd) {
++      flex-basis: 100%;
++      max-width: 680px;
++      margin-left: auto;
++      margin-right: auto;
++    }
++
++    /* Mobile: single column, full-width */
++    @media (max-width: 760px) {
        .services-grid {
--        .service {
--          margin-bottom: 20px;
++        gap: 20px;
++      }
++
++      .service {
++        grid-template-columns: 40px 1fr;
++        flex: 1 1 100%;
++        max-width: 100%;
++
++        /* reset border for all, then remove only on first */
++        border-top: 1px solid @line;
++
++        &:nth-of-type(1) {
++          border-top: none;
          }
--        .service-icon {
++        > i {
            width: 36px;
            height: 36px;
            font-size: 16px;
          }
        }
++
++      /* On mobile, last item behaves like all others */
++      .services-grid > .service:last-child:nth-child(odd) {
++        flex-basis: 100%;
++        max-width: 100%;
++        margin-left: 0;
++        margin-right: 0;
++      }
      }
    }
--
    /* METRICS */
    .metrics {
      display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr);