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,17 +109,9 @@
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())
114	114	<div class="services-grid">
115	115	#foreach ($entry in $servicesSectionData)
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">
	114	+ <article class="service">
123	123	<div class="service-icon">
124	124	<i class="fa fa-$entry.icon" aria-hidden="true"></i>
125	125	</div>

XWiki.StyleSheetExtension[0]

Code

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