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,27 +27,24 @@
27	27	display: block;
28	28	}
29	29
30		- .container {
31		- max-width: @maxw;
32		- padding: 0;
33		- }
34		-
35	35	.lead {
36	36	color: @muted;
37		- text-align: center;
	34	+ max-width: 72ch;
38	38	}
39		- h2 {
40		- text-align: center;
	36	+
	37	+ /* Keep Bootstrap container behavior, just cap width */
	38	+ .container {
	39	+ max-width: @maxw;
41	41	}
42	42
	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		- }
50	50	}
	47	+ section:first-of-type {
	48	+ border-top: none;
	49	+ }
51	51
52	52	/* Buttons */
53	53	.btn {
...	...	@@ -78,9 +78,9 @@
78	78	}
79	79	}
80	80
81		- /* ===== HERO ===== */
	80	+ /* ========== HERO ========== */
82	82	.hero {
83		- overflow: hidden;
	82	+ overflow: hidden; /* contain gradients, prevent overflow */
84	84	background-repeat: no-repeat;
85	85	background-attachment: scroll;
86	86
...	...	@@ -96,11 +96,11 @@
96	96	}
97	97
98	98	.hero-inner {
99		- max-width: 850px;
100		- margin: 0 auto;
	98	+ margin: auto;
101	101	display: flex;
102	102	flex-direction: column;
103	103	align-items: center;
	102	+ gap: 1rem;
104	104	}
105	105
106	106	.hero-cta {
...	...	@@ -123,9 +123,10 @@
123	123
124	124	li + li::before {
125	125	content: "•";
126		- margin: 0 5px;
	125	+ margin: 0 5px 0 0;
127	127	}
128	128
	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,21 +133,20 @@
133	133	li:nth-child(1)::after,
134	134	li:nth-child(3)::after {
135	135	content: "•";
136		- margin: 0 5px;
	136	+ margin-left: 5px;
137	137	}
138	138	}
139	139	}
140	140	}
141	141
142		- /* ===== WHY CHOOSE (cards) ===== */
	142	+ /* ========== WHY CHOOSE (widgets) ========== */
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;
148	148	}
149	149
150	150	.widget {
	148	+ /* This div is also a Bootstrap col-*, so we don't touch width */
	149	+ margin-bottom: 16px;
151	151	padding: 18px;
152	152	background: #fff;
153	153	border: 1px solid @line;
...	...	@@ -181,27 +181,17 @@
181	181	}
182	182	}
183	183
184		- /* ===== SERVICES ===== */
	183	+ /* ========== SERVICES ========== */
185	185	.services {
186	186	.services-grid {
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;
	186	+ margin-top: 12px;
197	197	}
198	198
199	199	.service {
200		- flex: 0 1 calc(50% - 12px);
201		- display: flex;
	190	+ margin-bottom: 24px;
	191	+ display: flex; /* horizontal: icon + body */
202	202	align-items: flex-start;
203	203	gap: 16px;
204		- margin-bottom: 8px;
205	205
206	206	.service-icon {
207	207	width: 42px;
...	...	@@ -213,8 +213,8 @@
213	213	font-size: 18px;
214	214	color: @brand;
215	215	background: fade(@brand, 10%);
216		- flex-shrink: 0;
217	217	margin-top: 3px;
	206	+ flex-shrink: 0;
218	218	}
219	219
220	220	.service-body {
...	...	@@ -223,11 +223,13 @@
223	223	font-size: 1.125rem;
224	224	font-weight: 800;
225	225	}
	215	+
226	226	p {
227	227	margin: 0 0 6px;
228	228	color: @text;
229	229	line-height: 1.5;
230	230	}
	221	+
231	231	ul {
232	232	margin: .45rem 0 0;
233	233	padding-left: 1.1rem;
...	...	@@ -234,6 +234,7 @@
234	234	color: @muted;
235	235	font-size: 13px;
236	236	}
	228	+
237	237	li {
238	238	margin: .25rem 0;
239	239	line-height: 1.45;
...	...	@@ -241,33 +241,20 @@
241	241	}
242	242	}
243	243
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 */
255	255	@media (max-width: 767px) {
256		- .services-grid {
257		- gap: 16px;
258		- max-width: 100%;
	237	+ .service {
	238	+ margin-bottom: 20px;
259	259	}
260	260
261		- .service,
262		- .service-center {
263		- flex: 0 1 100%;
264		- margin-left: 0;
265		- margin-right: 0;
	241	+ .service-icon {
	242	+ width: 36px;
	243	+ height: 36px;
	244	+ font-size: 16px;
266	266	}
267	267	}
268	268	}
269	269
270		- /* ===== CTA ===== */
	249	+ /* ========== CTA inline ========== */
271	271	.cta-section {
272	272	padding: 24px 0 16px;
273	273