Skip to Content

Wiki source code of why-upgrade-xwiki

Version 1.5 by Agnease on 2026/05/12 14:48
Show last authors
1 /* ========== Resource / Article Pages ========== */
2
3 .resource-page {
4 padding-top: 34px;
5 }
6
7 .resource-header {
8 padding: 40px 0 30px;
9 border-top: none;
10 background:
11 radial-gradient(42rem 14rem at 50% 0%, @brand-bg 0%, transparent 70%);
12
13 .resource-kicker {
14 display: inline-flex;
15 align-items: center;
16 gap: 8px;
17 color: @brand;
18 background: fade(@brand, 8%);
19 border: 1px solid fade(@brand, 18%);
20 border-radius: 999px;
21 padding: 6px 12px;
22 margin-bottom: 14px;
23 font-size: 13px;
24 font-weight: 700;
25 }
26
27 h1 {
28 max-width: 820px;
29 margin: 0 auto 14px;
30 text-align: center;
31 line-height: 1.18;
32 }
33
34 .resource-summary {
35 max-width: 780px;
36 margin: 0 auto;
37 color: @muted;
38 text-align: center;
39 font-size: 18px;
40 line-height: 1.55;
41 }
42 }
43
44 .resource-layout {
45 display: grid;
46 grid-template-columns: minmax(0, 760px) 280px;
47 gap: 42px;
48 max-width: 1080px;
49 margin: 0 auto;
50 align-items: start;
51 }
52
53 .resource-content {
54 color: @text;
55 font-size: 16px;
56 line-height: 1.68;
57
58 h2 {
59 text-align: left;
60 margin: 34px 0 12px;
61 line-height: 1.28;
62 }
63
64 h3 {
65 margin: 24px 0 8px;
66 line-height: 1.3;
67 }
68
69 p {
70 margin: 0 0 16px;
71 }
72
73 ul,
74 ol {
75 margin: 0 0 18px;
76 padding-left: 22px;
77 }
78
79 li {
80 margin: 6px 0;
81 }
82
83 strong {
84 color: @text;
85 }
86 }
87
88 .resource-note {
89 border-left: 4px solid @brand;
90 background: @brand-bg;
91 padding: 16px 18px;
92 margin: 22px 0;
93 border-radius: 0 @radius @radius 0;
94
95 p:last-child {
96 margin-bottom: 0;
97 }
98 }
99
100 .resource-checklist {
101 margin: 18px 0 24px;
102 padding: 0;
103 list-style: none;
104
105 li {
106 position: relative;
107 padding: 10px 0 10px 34px;
108 border-bottom: 1px solid @line;
109
110 &:before {
111 content: "\f00c";
112 font-family: FontAwesome;
113 position: absolute;
114 left: 0;
115 top: 11px;
116 color: @brand;
117 }
118 }
119 }
120
121 .resource-sidebar {
122 position: sticky;
123 top: 96px;
124 border: 1px solid @line;
125 border-radius: @radius;
126 padding: 18px;
127 background: #fff;
128 box-shadow: @shadow-sm;
129
130 h4 {
131 margin: 0 0 10px;
132 }
133
134 ul {
135 margin: 0;
136 padding-left: 18px;
137 color: @muted;
138 }
139
140 li {
141 margin: 8px 0;
142 }
143
144 a {
145 color: @brand;
146 font-weight: 600;
147 }
148 }
149
150 .resource-cta {
151 margin-top: 36px;
152 padding: 22px;
153 border: 1px solid fade(@brand, 20%);
154 border-radius: @radius;
155 background: @brand-bg;
156
157 h3 {
158 margin-top: 0;
159 }
160
161 p {
162 color: @muted;
163 }
164 }
165
166 @media (max-width: 900px) {
167 .resource-layout {
168 grid-template-columns: 1fr;
169 }
170
171 .resource-sidebar {
172 position: static;
173 }
174 }