Changes for page Home

Summary

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

Details

Page properties

Content

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

XWiki.StyleSheetExtension[0]

Code

...	...	@@ -1,4 +1,4 @@
1		-/* ========== Agnease Landing (scoped to .agnease-landing) ========== */
	1	+/* ========== Agnease Landing (no Bootstrap grid) ========== */
2	2	@brand: #00937D;
3	3	@brand-strong: #007B6A;
4	4	@text: #2D3A34;
...	...	@@ -10,9 +10,7 @@
10	10	@maxw: 1140px;
11	11
12	12	.agnease-landing {
13		- /* Base typography */
14	14	color: @text;
15		- font: 16px/1.6 Inter, Segoe UI, Roboto, system-ui, -apple-system, Arial, sans-serif;
16	16
17	17	a {
18	18	color: @brand;
...	...	@@ -29,24 +29,27 @@
29	29	display: block;
30	30	}
31	31
	30	+ .container {
	31	+ max-width: @maxw;
	32	+ padding: 0 20px;
	33	+ }
	34	+
32	32	.lead {
33	33	color: @muted;
34		- max-width: 72ch;
	37	+ text-align: center;
35	35	}
36		-
37		- /* Keep Bootstrap container behavior, just cap width */
38		- .container {
39		- max-width: @maxw;
	39	+ h2 {
	40	+ text-align: center;
40	40	}
41	41
42		- /* Global sections */
43	43	section {
44	44	padding: 32px 0;
45	45	border-top: 1px solid @line;
	46	+
	47	+ &:first-of-type {
	48	+ border-top: none;
	49	+ }
46	46	}
47		- section:first-of-type {
48		- border-top: none;
49		- }
50	50
51	51	/* Buttons */
52	52	.btn {
...	...	@@ -77,9 +77,9 @@
77	77	}
78	78	}
79	79
80		- /* ========== HERO ========== */
	81	+ /* ===== HERO ===== */
81	81	.hero {
82		- overflow: hidden; /* contain gradients, prevent overflow */
	83	+ overflow: hidden;
83	83	background-repeat: no-repeat;
84	84	background-attachment: scroll;
85	85
...	...	@@ -95,11 +95,11 @@
95	95	}
96	96
97	97	.hero-inner {
98		- margin: auto;
	99	+ max-width: 850px;
	100	+ margin: 0 auto;
99	99	display: flex;
100	100	flex-direction: column;
101	101	align-items: center;
102		- gap: 1rem;
103	103	}
104	104
105	105	.hero-cta {
...	...	@@ -122,10 +122,9 @@
122	122
123	123	li + li::before {
124	124	content: "•";
125		- margin: 0 5px 0 0;
	126	+ margin: 0 5px;
126	126	}
127	127
128		- /* Mobile: only bullets between items 1–2 and 3–4 */
129	129	@media (max-width: 640px) {
130	130	li + li::before {
131	131	content: none;
...	...	@@ -133,20 +133,21 @@
133	133	li:nth-child(1)::after,
134	134	li:nth-child(3)::after {
135	135	content: "•";
136		- margin-left: 5px;
	136	+ margin: 0 5px;
137	137	}
138	138	}
139	139	}
140	140	}
141	141
142		- /* ========== WHY CHOOSE (widgets) ========== */
	142	+ /* ===== WHY CHOOSE (cards) ===== */
143	143	.widgets {
144	144	margin-top: 12px;
	145	+ display: grid;
	146	+ grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	147	+ grid-gap: 16px;
145	145	}
146	146
147	147	.widget {
148		- /* This div is also a Bootstrap col-*, so we don't touch width */
149		- margin-bottom: 16px;
150	150	padding: 18px;
151	151	background: #fff;
152	152	border: 1px solid @line;
...	...	@@ -180,17 +180,27 @@
180	180	}
181	181	}
182	182
183		- /* ========== SERVICES ========== */
	184	+ /* ===== SERVICES ===== */
184	184	.services {
185	185	.services-grid {
186		- margin-top: 12px;
	187	+ margin-top: 20px;
	188	+ display: flex;
	189	+ flex-wrap: wrap;
	190	+ gap: 24px;
	191	+
	192	+ /* center the whole block under the heading */
	193	+ max-width: 960px;
	194	+ margin-left: auto;
	195	+ margin-right: auto;
	196	+ justify-content: center;
187	187	}
188	188
189	189	.service {
190		- margin-bottom: 24px;
191		- display: flex; /* horizontal: icon + body */
	200	+ flex: 0 1 calc(50% - 12px);
	201	+ display: flex;
192	192	align-items: flex-start;
193	193	gap: 16px;
	204	+ margin-bottom: 8px;
194	194
195	195	.service-icon {
196	196	width: 42px;
...	...	@@ -202,8 +202,8 @@
202	202	font-size: 18px;
203	203	color: @brand;
204	204	background: fade(@brand, 10%);
205		- margin-top: 3px;
206	206	flex-shrink: 0;
	217	+ margin-top: 3px;
207	207	}
208	208
209	209	.service-body {
...	...	@@ -212,13 +212,11 @@
212	212	font-size: 1.125rem;
213	213	font-weight: 800;
214	214	}
215		-
216	216	p {
217	217	margin: 0 0 6px;
218	218	color: @text;
219	219	line-height: 1.5;
220	220	}
221		-
222	222	ul {
223	223	margin: .45rem 0 0;
224	224	padding-left: 1.1rem;
...	...	@@ -225,7 +225,6 @@
225	225	color: @muted;
226	226	font-size: 13px;
227	227	}
228		-
229	229	li {
230	230	margin: .25rem 0;
231	231	line-height: 1.45;
...	...	@@ -233,20 +233,33 @@
233	233	}
234	234	}
235	235
	244	+ /* ==== Center last item on its own row while keeping 50% width ==== */
	245	+ .service-center {
	246	+ /* same width as siblings */
	247	+ flex: 0 1 calc(55% - 12px);
	248	+
	249	+ /* push to center */
	250	+ margin-left: auto;
	251	+ margin-right: auto;
	252	+ }
	253	+
	254	+ /* Mobile: 1 per row */
236	236	@media (max-width: 767px) {
237		- .service {
238		- margin-bottom: 20px;
	256	+ .services-grid {
	257	+ gap: 16px;
	258	+ max-width: 100%;
239	239	}
240	240
241		- .service-icon {
242		- width: 36px;
243		- height: 36px;
244		- font-size: 16px;
	261	+ .service,
	262	+ .service-center {
	263	+ flex: 0 1 100%;
	264	+ margin-left: 0;
	265	+ margin-right: 0;
245	245	}
246	246	}
247	247	}
248	248
249		- /* ========== CTA inline ========== */
	270	+ /* ===== CTA ===== */
250	250	.cta-section {
251	251	padding: 24px 0 16px;
252	252