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.69 to 7.70 From 7.96 to 7.97

From version 7.70

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

Change comment: There is no comment for this version

To version 7.96

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

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,16 +50,16 @@
      <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="widgets" role="list">
++      <div class="row widgets" role="list">
          #foreach ($entry in $whySectionData)
--          <article class="widget" role="listitem">
++          <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>
--          </article>
--       #end
++          </div>
++        #end
        </div>
      </div>
    </section>
@@ -67,7 +67,7 @@
    #set ($servicesSectionData = [{
      'title': 'Upgrades',
      'icon': 'refresh',
--    'content': 'Stay current with the latest XWiki LTS and keep your instance secure and stable.',
++    'content': 'Stay current with the latest XWiki LTS and keep your instance reliable.',
      'items': [
        'Audit setup, extensions, and configurations',
        'Test upgrades with backups and validation',
@@ -113,12 +113,24 @@
    <section class="services" aria-labelledby="services-title">
      <div class="container">
        <h2 id="services-title">Services</h2>
--      <p class="services-sub">All the XWiki services you need, delivered with precision and care</p>
--      <div class="services-grid">
++      <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">
          #foreach ($entry in $servicesSectionData)
--          <article class="service">
--            <i class="fa fa-$entry.icon" aria-hidden="true"></i>
--            <div class="body">
++          #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">
                <h4>$entry.title</h4>
                <p>$entry.content</p>
                <ul>
@@ -127,7 +127,7 @@
                  #end
                </ul>
              </div>
--          </article>
++          </div>
          #end
        </div>
      </div>

XWiki.StyleSheetExtension[0]

Code

@@ -120,181 +120,144 @@
      }
    }
--  /* === WHY CHOOSE (widgets with inline icon + title) === */
++  /* === WHY CHOOSE (widgets using Bootstrap grid) === */
    .widgets {
--    display: grid;
--    gap: 16px;
--    grid-template-columns: 1fr;
++    margin-top: 12px;
--    @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;
++    /* Flex layout for equal-height and spacing */
      display: flex;
--    flex-direction: column;
--    justify-content: flex-start;
--    gap: 8px;
--    text-align: left;
--    transition: transform 0.18s ease, box-shadow 0.18s ease;
++    flex-wrap: wrap;
++    justify-content: space-between;
--    &:hover {
--      transform: translateY(-2px);
--      box-shadow: @shadow;
--    }
++    .widget {
++      box-sizing: border-box;
--    /* The icon + title row */
--    .icon {
++      /* Desktop (md+) – 4 per row */
++      flex: 0 0 24%;
++      max-width: 24%;
++      margin-bottom: 16px;
++
++      /* Card look */
        display: flex;
--      align-items: center;
--      gap: 10px;
--      padding: 6px 0;
--      border-bottom: 1px solid fade(@line, 60%);
--      margin-bottom: 6px;
++      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;
--      i {
--        color: @brand;
++      &:hover {
++        transform: translateY(-2px);
++        box-shadow: @shadow;
        }
--      h4 {
--        /*font-weight: 700; */
++      .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 {
          margin: 0;
--        color: @text;
--        line-height: 1.2;
++        color: @muted;
++        line-height: 1.45;
        }
      }
--    /* Body paragraph */
--    p {
--      color: @muted;
--      margin: 0;
--      line-height: 1.45;
++    /* Tablet (sm–md) – 2 per row */
++    @media (max-width: 991px) {
++      .widget {
++        flex: 0 0 48%;
++        max-width: 48%;
++      }
      }
++
++    /* 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 {
--      display: flex;
--      flex-wrap: wrap;
--      gap: 32px 36px;          // row gap, column gap
--    }
++      margin-top: 12px;
--    .service {
--      display: grid;
--      grid-template-columns: 48px 1fr;
--      gap: 16px;
--      padding: 18px 0;
--      border-top: 1px solid @line;
++      .service {
++        margin-bottom: 24px;
--      /* 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%;
++        /* icon + text side by side */
          display: flex;
--        align-items: center;
--        justify-content: center;
--        font-size: 18px;
--        color: @brand;
--        background: fade(@brand, 10%);
--        margin-top: 3px;
--      }
++        align-items: flex-start;
++        gap: 16px;
--      .body {
--        h4 {
--          margin: 0 0 4px;
--          font-size: 1.125rem;
--          font-weight: 800;
++        .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;
          }
--        p {
--          margin: 0 0 6px;
--          color: @text;
--          line-height: 1.5;
--        }
++        .service-body {
++          h4 {
++            margin: 0 0 4px;
++            font-size: 1.125rem;
++            font-weight: 800;
++          }
--        ul {
--          margin: .45rem 0 0;
--          padding-left: 1.1rem;
--          color: @muted;
--          font-size: .95rem;
--        }
++          p {
++            margin: 0 0 6px;
++            color: @text;
++            line-height: 1.5;
++          }
--        li {
--          margin: .25rem 0;
--          line-height: 1.45;
++          ul {
++            margin: .45rem 0 0;
++            padding-left: 1.1rem;
++            color: @muted;
++            font-size: .95rem;
++          }
++
++          li {
++            margin: .25rem 0;
++            line-height: 1.45;
++          }
          }
        }
      }
--    /* 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) {
++    @media (max-width: 767px) {
        .services-grid {
--        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 {
++          margin-bottom: 20px;
          }
--        > i {
++        .service-icon {
            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);