Skip to content

Commit a3eae25

Browse files
SimonBlankeSimonBlanke
committed
[DOC] add section for integrations
1 parent 82f9e36 commit a3eae25

2 files changed

Lines changed: 145 additions & 52 deletions

File tree

‎docs/source/_static/css/custom.css‎

Lines changed: 106 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,14 @@
3131
--optuna-light: #3b82c4;
3232
--sklearn-orange: #F7931E;
3333
--sklearn-blue: #29ABE2;
34+
35+
/* Integration brand colors */
36+
--sktime-blue: #0075b7;
37+
--sktime-teal: #00a890;
38+
--skpro-blue: #0076b7;
39+
--skpro-teal: #01ab90;
40+
--pytorch-orange: #ee4c2c;
41+
--pytorch-yellow: #eaa700;
3442
}
3543

3644
html[data-theme="dark"] {
@@ -389,32 +397,115 @@ html[data-theme="dark"] .algo-card {
389397
}
390398

391399
/* ============================================
392-
Integration Cards
400+
Integration Cards (horizontal, two-part)
393401
============================================ */
402+
.integration-grid {
403+
display: grid;
404+
grid-template-columns: repeat(2, 1fr);
405+
gap: 1.25rem;
406+
margin: 1.5rem 0;
407+
}
408+
409+
@media (max-width: 768px) {
410+
.integration-grid {
411+
grid-template-columns: 1fr;
412+
}
413+
}
414+
394415
.integration-card {
395-
background: var(--hyperactive-gradient);
396-
border-radius: 12px;
397-
padding: 1.5rem;
398-
text-align: center;
399-
color: white;
400-
transition: all 0.3s ease;
416+
background: var(--pst-color-surface);
417+
border-radius: 8px;
418+
display: flex;
401419
box-shadow: var(--card-shadow);
420+
position: relative;
421+
overflow: hidden;
402422
}
403423

404-
.integration-card:hover {
405-
transform: scale(1.05);
406-
box-shadow: var(--card-shadow-hover);
424+
.integration-card::before {
425+
content: '';
426+
position: absolute;
427+
left: 0;
428+
top: 0;
429+
bottom: 0;
430+
width: 5px;
407431
}
408432

409-
.integration-name {
410-
font-size: 1.25rem;
433+
.integration-left {
434+
padding: 1.25rem 1.5rem;
435+
display: flex;
436+
align-items: center;
437+
min-width: 140px;
438+
}
439+
440+
.integration-left a {
441+
font-size: 1.1rem;
411442
font-weight: 600;
412-
margin-bottom: 0.5rem;
443+
text-decoration: none;
444+
transition: opacity 0.2s ease;
445+
}
446+
447+
.integration-left a:hover {
448+
text-decoration: underline;
449+
}
450+
451+
.integration-right {
452+
flex: 1;
453+
display: flex;
454+
align-items: center;
455+
border-left: 1px solid var(--pst-color-border);
456+
position: relative;
457+
transition: background 0.2s ease;
458+
}
459+
460+
.integration-right a {
461+
display: flex;
462+
align-items: center;
463+
padding: 1.25rem 1.5rem;
464+
width: 100%;
465+
height: 100%;
466+
text-decoration: none;
467+
color: inherit;
468+
transition: all 0.2s ease;
469+
}
470+
471+
.integration-right a::after {
472+
content: "→";
473+
margin-left: auto;
474+
padding-left: 1rem;
475+
opacity: 0;
476+
transform: translateX(-8px);
477+
transition: all 0.2s ease;
478+
}
479+
480+
.integration-right:hover {
481+
background: var(--pst-color-background);
482+
}
483+
484+
.integration-right:hover a::after {
485+
opacity: 0.6;
486+
transform: translateX(0);
413487
}
414488

415489
.integration-desc {
416-
font-size: 0.85rem;
417-
opacity: 0.9;
490+
font-size: 0.95rem;
491+
line-height: 1.4;
492+
}
493+
494+
/* Integration card colors */
495+
.integration-card.sklearn::before {
496+
background: linear-gradient(to bottom, var(--sklearn-orange) 50%, var(--sklearn-blue) 50%);
497+
}
498+
499+
.integration-card.sktime::before {
500+
background: linear-gradient(to bottom, var(--sktime-blue) 0%, var(--sktime-teal) 100%);
501+
}
502+
503+
.integration-card.skpro::before {
504+
background: linear-gradient(to bottom, var(--skpro-blue) 0%, var(--skpro-teal) 100%);
505+
}
506+
507+
.integration-card.pytorch::before {
508+
background: linear-gradient(to bottom, var(--pytorch-orange) 50%, var(--pytorch-yellow) 50%);
418509
}
419510

420511
/* ============================================

‎docs/source/index.rst‎

Lines changed: 39 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -215,48 +215,50 @@ Choose the one that best fits your needs, or switch between them effortlessly.
215215
Integrations
216216
============
217217

218-
.. grid:: 1 2 4 4
219-
:gutter: 4
220-
221-
.. grid-item::
222-
:class: integration-item
223-
224-
.. raw:: html
218+
.. raw:: html
225219

226-
<div class="integration-card">
227-
<div class="integration-name">scikit-learn</div>
228-
<div class="integration-desc">Cross-validation experiments</div>
220+
<div class="integration-grid">
221+
<div class="integration-card sklearn">
222+
<div class="integration-left">
223+
<a href="https://github.com/scikit-learn/scikit-learn" target="_blank">scikit-learn</a>
229224
</div>
230-
231-
.. grid-item::
232-
:class: integration-item
233-
234-
.. raw:: html
235-
236-
<div class="integration-card">
237-
<div class="integration-name">sktime</div>
238-
<div class="integration-desc">Time series forecasting</div>
225+
<div class="integration-right">
226+
<a href="user_guide/integrations.html#scikit-learn-integration">
227+
<span class="integration-desc">Tune estimators with OptCV cross-validation</span>
228+
</a>
239229
</div>
240-
241-
.. grid-item::
242-
:class: integration-item
243-
244-
.. raw:: html
245-
246-
<div class="integration-card">
247-
<div class="integration-name">skpro</div>
248-
<div class="integration-desc">Probabilistic regression</div>
230+
</div>
231+
<div class="integration-card sktime">
232+
<div class="integration-left">
233+
<a href="https://github.com/sktime/sktime" target="_blank">sktime</a>
249234
</div>
250-
251-
.. grid-item::
252-
:class: integration-item
253-
254-
.. raw:: html
255-
256-
<div class="integration-card">
257-
<div class="integration-name">PyTorch</div>
258-
<div class="integration-desc">Deep learning models</div>
235+
<div class="integration-right">
236+
<a href="user_guide/integrations.html#time-series-with-sktime">
237+
<span class="integration-desc">Optimize forecasters and transformers</span>
238+
</a>
239+
</div>
240+
</div>
241+
<div class="integration-card skpro">
242+
<div class="integration-left">
243+
<a href="https://github.com/sktime/skpro" target="_blank">skpro</a>
244+
</div>
245+
<div class="integration-right">
246+
<a href="user_guide/integrations.html#probabilistic-models-with-skpro">
247+
<span class="integration-desc">Tune probabilistic regressors</span>
248+
</a>
259249
</div>
250+
</div>
251+
<div class="integration-card pytorch">
252+
<div class="integration-left">
253+
<a href="https://github.com/pytorch/pytorch" target="_blank">PyTorch</a>
254+
</div>
255+
<div class="integration-right">
256+
<a href="user_guide/integrations.html#deep-learning-with-pytorch">
257+
<span class="integration-desc">Optimize architectures and training parameters</span>
258+
</a>
259+
</div>
260+
</div>
261+
</div>
260262

261263
----
262264

0 commit comments

Comments
 (0)