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.131 to 7.130 From 7.152 to 7.151

From version 7.151

edited by Alex Cotiugă
on 2025/11/17 11:45

Change comment: There is no comment for this version

To version 7.131

edited by Alex Cotiugă
on 2025/11/17 08:57

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

@@ -109,17 +109,9 @@
        <p class="lead">
          All the XWiki services you need, delivered with precision and care
        </p>
--
--      #set ($servicesSize = $servicesSectionData.size())
        <div class="services-grid">
          #foreach ($entry in $servicesSectionData)
--          #set ($classes = "service")
--          ## If this is the last item AND the total number is odd, center it
--          #if ($foreach.count == $servicesSize && ($servicesSize % 2) == 1)
--            #set ($classes = "service service-center")
--          #end
--
--          <article class="$classes">
++          <article class="service">
              <div class="service-icon">
                <i class="fa fa-$entry.icon" aria-hidden="true"></i>
              </div>

XWiki.StyleSheetExtension[0]

Code

@@ -29,16 +29,14 @@
    .container {
      max-width: @maxw;
--    padding: 0;
++    margin: 0 auto;
++    padding: 0 16px;
    }
    .lead {
      color: @muted;
--    text-align: center;
++    max-width: 72ch;
    }
--  h2 {
--    text-align: center;
--  }
    section {
      padding: 32px 0;
@@ -101,6 +101,7 @@
        display: flex;
        flex-direction: column;
        align-items: center;
++      gap: 1rem;
      }
      .hero-cta {
@@ -182,88 +182,66 @@
    }
    /* ===== SERVICES ===== */
--  .services {
--    .services-grid {
--      margin-top: 20px;
--      display: flex;
--      flex-wrap: wrap;
--      gap: 24px;
++  .services-grid {
++    margin-top: 12px;
++    display: grid;
++    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
++    grid-gap: 24px;
++  }
--      /* center the whole block under the heading */
--      max-width: 960px;
--      margin-left: auto;
--      margin-right: auto;
++  .service {
++    display: flex;
++    align-items: flex-start;
++    gap: 16px;
++
++    .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;
      }
--    .service {
--      flex: 0 1 calc(50% - 12px);
--      display: flex;
--      align-items: flex-start;
--      gap: 16px;
--      margin-bottom: 8px;
++    .service-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%);
--        flex-shrink: 0;
--        margin-top: 3px;
++      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;
--        }
--        p {
--          margin: 0 0 6px;
--          color: @text;
--          line-height: 1.5;
--        }
--        ul {
--          margin: .45rem 0 0;
--          padding-left: 1.1rem;
--          color: @muted;
--          font-size: 13px;
--        }
--        li {
--          margin: .25rem 0;
--          line-height: 1.45;
--        }
++      ul {
++        margin: .45rem 0 0;
++        padding-left: 1.1rem;
++        color: @muted;
++        font-size: 13px;
        }
--    }
--    /* ==== Center last item on its own row while keeping 50% width ==== */
--    .service-center {
--      /* same width as siblings */
--      flex: 0 1 calc(55% - 12px);
--
--      /* push to center */
--      margin-left: auto;
--      margin-right: auto;
++      li {
++        margin: .25rem 0;
++        line-height: 1.45;
++      }
      }
++  }
--    /* Mobile: 1 per row */
--    @media (max-width: 767px) {
--      .services-grid {
--        gap: 16px;
--        max-width: 100%;
++  @media (max-width: 767px) {
++    .service {
++      .service-icon {
++        width: 36px;
++        height: 36px;
++        font-size: 16px;
        }
--
--      .service,
--      .service-center {
--        flex: 0 1 100%;
--        margin-left: 0;
--        margin-right: 0;
--      }
      }
    }