Skip to content

Commit c1bf9c2

Browse files
floriankozikowskifloriankozikowski
committed
handle darkmode, change to .rst instead of pure html for better accessibility, fix tab title
1 parent 4968541 commit c1bf9c2

File tree

2 files changed

+490
-162
lines changed

2 files changed

+490
-162
lines changed

‎doc/_static/style.css‎

Lines changed: 293 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ html[data-theme="light"] {
3030
--pst-color-inline-code: #2c608f;
3131
--pst-color-inline-code-background: #f0f8ff;
3232
--pst-color-announcement-background: #fff7ec;
33-
--pst-color-secondary-bg: #fff7ec;
33+
--pst-color-secondary-bg: #F8FAFC;
3434
}
3535

3636
/* Dark theme overrides */
@@ -54,44 +54,310 @@ code {
5454
font-family: monospace;
5555
}
5656

57-
/* Announcement banner styling */
58-
.bd-header-announcement {
59-
background-color: var(--pst-color-secondary-bg) !important;
60-
color: var(--pst-color-primary) !important;
61-
font-weight: bold;
62-
text-align: center;
57+
/* Remove underline from rubric elements */
58+
.rubric {
59+
border-bottom: none !important;
60+
padding-bottom: 0 !important;
61+
margin-bottom: 0 !important;
6362
}
6463

65-
.hero-section {
66-
text-align: center;
67-
padding: 4rem 2rem;
64+
/*-------------------------------------------------------------*/
65+
/*Landing Page Layout*/
66+
67+
68+
/* Override style for top-level heading */
69+
/* Hide only the first h1 visually */
70+
/* Hide only the <h1> directly inside the landing section on the index page */
71+
section#skglm>h1 {
72+
position: absolute;
73+
left: -9999px;
74+
}
75+
76+
/* Universal image background and border reset for landing images */
77+
.hero-gallery-img,
78+
.feature-icon,
79+
.application-icon,
80+
.sponsor-logo {
81+
background-color: transparent !important;
82+
border: none;
83+
}
84+
85+
86+
/*Hero Section Layout*/
87+
88+
.hero-title {
89+
font-size: 3rem;
90+
font-weight: 800;
91+
color: var(--pst-color-primary);
92+
margin-bottom: 1rem;
93+
margin-top: 0;
94+
}
95+
96+
/* Hero Section Layout */
97+
.hero-container {
98+
display: flex;
99+
align-items: center;
100+
justify-content: space-between;
101+
flex-wrap: wrap;
102+
padding: 0;
68103
background-color: var(--pst-color-background);
69104
color: var(--pst-color-text);
70105
}
71106

72-
.hero-logo {
73-
width: 150px;
74-
margin-bottom: 1rem;
107+
/* Text Block */
108+
.hero-text {
109+
flex: 1;
110+
min-width: 300px;
111+
padding: 0.5rem;
75112
}
76113

77-
.hero-button {
78-
display: inline-block;
79-
margin-top: 2rem;
80-
padding: 0.75rem 1.5rem;
114+
/* Paragraph Styling */
115+
.hero-description {
116+
font-size: 1.25rem;
117+
line-height: 1.6;
118+
max-width: 40rem;
119+
color: var(--pst-color-text);
120+
}
121+
122+
/* Optional orange emphasis text */
123+
.highlight-orange,
124+
.rst-content .orange {
125+
color: var(--pst-color-secondary);
126+
}
127+
128+
/* Buttons */
129+
.hero-buttons {
130+
margin-top: 1.5rem;
131+
}
132+
133+
.hero-buttons a {
134+
padding: 0.75rem 1.25rem;
81135
background-color: var(--pst-color-primary);
82-
color: white !important;
83-
border-radius: 0.5rem;
136+
color: white;
137+
border-radius: 6px;
84138
text-decoration: none;
85-
font-weight: bold;
139+
font-weight: 600;
140+
display: inline-block;
141+
transition: background-color 0.2s ease;
142+
}
143+
144+
.hero-buttons a:hover {
145+
color: var(--pst-color-secondary);
146+
background-color: var(--pst-color-link-hover);
147+
}
148+
149+
/* Gallery Section */
150+
.hero-gallery {
151+
flex: 1;
152+
min-width: 300px;
153+
text-align: center;
154+
background-color: transparent !important;
155+
padding: 4rem;
156+
}
157+
158+
.hero-gallery-img {
159+
max-width: 100%;
160+
height: auto;
161+
border-radius: 2rem;
162+
transition: transform 0.2s ease;
163+
}
164+
165+
.hero-gallery-img:hover {
166+
transform: scale(1.03);
167+
}
168+
169+
.highlight-orange,
170+
.rst-content .highlight-orange {
171+
color: var(--pst-color-secondary);
172+
}
173+
174+
175+
/* Key Features Section */
176+
/* Section spacing (replaces <hr> and margin-top) */
177+
.section-spacer {
178+
margin-top: 3rem;
179+
}
180+
181+
/* Title */
182+
.section-title {
183+
font-size: 2.5rem;
184+
font-weight: 600;
185+
color: var(--pst-color-text);
186+
text-align: center;
187+
margin-bottom: 0.25rem;
188+
}
189+
190+
/* Subtitle paragraph */
191+
.section-subtitle {
192+
font-size: 1.25rem;
193+
font-weight: 400;
194+
color: var(--pst-color-text-muted, #4a4a4a);
195+
max-width: 52rem;
196+
margin: 0 auto 2.5rem auto;
197+
text-align: center;
198+
}
199+
200+
/* Optional: add fallback for muted text in dark mode */
201+
html[data-theme="dark"] .section-subtitle {
202+
color: #c0c0c0;
203+
}
204+
205+
206+
207+
/* Feature grid styles */
208+
.features-grid {
209+
display: grid;
210+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
211+
gap: 2rem 3rem;
212+
margin-top: 2rem;
213+
}
214+
215+
.feature-box {
216+
background-color: var(--pst-color-secondary-bg);
217+
padding: 0.5rem;
218+
border-radius: 1rem;
219+
height: 100%;
220+
display: flex;
221+
align-items: center;
222+
gap: 1.5rem;
223+
}
224+
225+
.feature-icon {
226+
margin-left: 0.5rem !important;
227+
width: 4.5rem;
228+
height: 4.5rem;
229+
}
230+
231+
.feature-title {
232+
font-size: 1.2rem;
233+
color: var(--pst-color-primary);
234+
margin-bottom: 0.5rem;
235+
margin-top: 0;
236+
font-weight: 600;
237+
}
238+
239+
.feature-text {
240+
padding-right: 1rem !important;
241+
}
242+
243+
html[data-theme="dark"] .feature-box {
244+
background-color: #2e2e2e;
245+
}
246+
247+
/* Support us section */
248+
249+
250+
.support-box {
251+
background-color: var(--pst-color-secondary-bg);
252+
padding: 2rem;
253+
border-radius: 8px;
254+
text-align: center;
255+
margin-top: 1.5rem;
256+
}
257+
258+
html[data-theme="dark"] .support-box {
259+
background-color: #2e2e2e;
260+
}
261+
262+
.support-title {
263+
font-size: 1.2rem;
264+
font-weight: 600;
265+
color: var(--pst-color-primary);
266+
margin: 0 0 0.5rem 0;
267+
}
268+
269+
270+
/* Citation block styling inside support-box */
271+
.support-box pre {
272+
font-size: 0.85rem;
273+
background-color: var(--pst-color-inline-code-background);
274+
color: var(--pst-color-inline-code);
275+
padding: 1rem 2rem !important;
276+
border-radius: 6px;
277+
overflow-x: auto;
278+
text-align: left;
279+
white-space: pre-wrap;
280+
word-break: break-word;
281+
max-width: 100%;
282+
max-width: calc(100% - 4rem) !important;
283+
margin: 1rem auto 0 auto !important;
284+
}
285+
286+
html[data-theme="light"] .highlight {
287+
background: var(--pst-color-secondary-bg) !important;
288+
}
289+
290+
html[data-theme="dark"] .support-box pre {
291+
background-color: #2e2e2e;
292+
padding: 1rem 2rem;
293+
max-width: calc(100% - 4rem);
294+
margin: 1rem auto 0 auto;
295+
}
296+
297+
298+
/* Applications Grid Section */
299+
.applications-grid {
300+
display: grid;
301+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
302+
gap: 2rem;
303+
max-width: 1000px;
304+
margin: 0 auto;
305+
text-align: center;
306+
}
307+
308+
.application-box {
309+
background-color: var(--pst-color-secondary-bg);
310+
padding: 1.5rem;
311+
border-radius: 8px;
312+
margin: 1.5rem;
313+
}
314+
315+
html[data-theme="dark"] .application-box {
316+
background-color: #2e2e2e;
317+
}
318+
319+
.application-icon {
320+
width: 5rem;
321+
height: 5rem;
322+
}
323+
324+
.application-title {
325+
font-size: 1.1rem;
326+
font-weight: 600;
327+
margin-bottom: 0.5rem;
328+
margin-top: 0.75rem;
329+
color: var(--pst-color-text);
330+
}
331+
332+
333+
/* Sponsor banner styles */
334+
.sponsor-banner {
335+
margin-top: 4rem;
336+
padding: 1.5rem 2rem;
337+
background-color: var(--pst-color-secondary-bg);
338+
display: flex;
339+
align-items: center;
340+
justify-content: center;
341+
gap: 1rem;
342+
flex-wrap: wrap;
343+
border-radius: 8px;
344+
font-size: 1.1rem;
345+
color: var(--pst-color-text);
346+
text-align: center;
347+
}
348+
349+
.sponsor-logo {
350+
height: 30px;
86351
}
87352

88-
.hero-button:hover {
89-
background-color: var(--pst-color-primary-hover);
90-
color: #ec9b4c !important;
353+
html[data-theme="dark"] .sponsor-banner {
354+
background-color: #2e2e2e;
91355
}
92356

93-
.hero-text strong {
94-
color: #1f77b4;
95-
/* Primary blue color */
96-
font-weight: 700;
357+
.sponsor-inline {
358+
display: flex;
359+
align-items: center;
360+
justify-content: center;
361+
gap: 1rem;
362+
flex-wrap: wrap;
97363
}

0 commit comments

Comments
 (0)