ClearML/clearml-docs
1
0
Fork 0
mirror of https://github.com/clearml/clearml-docs synced 2025-06-25 09:36:48 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Fix icon links

Browse Source
This commit is contained in:
allegroai 2021-05-19 03:12:21 +03:00
parent 3e1916c620
commit 010b7ac372
3 changed files with 42 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/integrations/storage.md
View File

@ -2,7 +2,6 @@
title: Storage title: Storage
--- ---
import ImageSwitcher from '/ImageSwitcher.js';
ClearML is able to interface with the most popular storage solutions in the market for storing model checkpoints, artifacts ClearML is able to interface with the most popular storage solutions in the market for storing model checkpoints, artifacts
and charts. and charts.
@ -10,8 +9,8 @@ and charts.
Supported storage mediums include: Supported storage mediums include:
<ImageSwitcher alt="ClearML Supported Storage" <ImageSwitcher alt="ClearML Supported Storage"
lightImageSrc="/icons/ClearML_Supported_Storage--on-light.png" lightImageSrc="/docs/latest/icons/ClearML_Supported_Storage--on-light.png"
darkImageSrc="/icons/ClearML_Supported_Storage--on-dark.png" darkImageSrc="/docs/latest/icons/ClearML_Supported_Storage--on-dark.png"
/> />
:::note :::note

42
src/css/custom.css
View File

@ -181,17 +181,17 @@ html[data-theme="light"] .hero .button.button--primary{
/* header social icons */ /* header social icons */
.header-ico--github { .header-ico--github {
background-image: url(docs/latest/img/ico-github.svg); background-image: url('/docs/latest/img/ico-github.svg');
margin-right: calc(var(--ifm-navbar-item-padding-horizontal) * 2); margin-right: calc(var(--ifm-navbar-item-padding-horizontal) * 2);
} }
.header-ico--twitter { .header-ico--twitter {
background-image: url(docs/latest/img/ico-twitter.svg); background-image: url('/docs/latest/img/ico-twitter.svg');
} }
.header-ico--youtube { .header-ico--youtube {
background-image: url(docs/latest/img/ico-youtube.svg); background-image: url('/docs/latest/img/ico-youtube.svg');
} }
.header-ico--slack { .header-ico--slack {
background-image: url(docs/latest/img/ico-slack.svg); background-image: url('/docs/latest/img/ico-slack.svg');
} }
.header-ico { .header-ico {
width:24px; width:24px;
@ -255,7 +255,7 @@ html[data-theme="light"] .hero .button.button--primary{
html[data-theme="light"] [class^="sidebarLogo"] { html[data-theme="light"] [class^="sidebarLogo"] {
background: url(docs/latest/img/logo--on-light.svg) 1rem center no-repeat; background: url('/docs/latest/img/logo--on-light.svg') 1rem center no-repeat;
background-size: 6rem; background-size: 6rem;
} }
html[data-theme="light"] [class^="sidebarLogo"] > img { html[data-theme="light"] [class^="sidebarLogo"] > img {
@ -283,7 +283,7 @@ html[data-theme="dark"] .navbar-sidebar {
background-color: #141722; background-color: #141722;
} }
html[data-theme="light"] .navbar-sidebar .navbar__brand { html[data-theme="light"] .navbar-sidebar .navbar__brand {
background: url(docs/latest/img/logo--on-light.svg) 0 center no-repeat; background: url('/docs/latest/img/logo--on-light.svg') 0 center no-repeat;
background-size: 5.5rem; background-size: 5.5rem;
} }
html[data-theme="light"] .navbar-sidebar .navbar__logo { html[data-theme="light"] .navbar-sidebar .navbar__logo {
@ -315,16 +315,16 @@ html[data-theme="dark"] .navbar-sidebar .menu__link.header-ico--slack:before {
.navbar-sidebar .menu__link.header-ico--slack:hover { .navbar-sidebar .menu__link.header-ico--slack:hover {
background: url(docs/latest/img/ico-slack.svg) no-repeat center; background: url('/docs/latest/img/ico-slack.svg') no-repeat center;
} }
.navbar-sidebar .menu__link.header-ico--twitter:hover { .navbar-sidebar .menu__link.header-ico--twitter:hover {
background: url(docs/latest/img/ico-twitter.svg) no-repeat center; background: url('/docs/latest/img/ico-twitter.svg') no-repeat center;
} }
.navbar-sidebar .menu__link.header-ico--github:hover { .navbar-sidebar .menu__link.header-ico--github:hover {
background: url(docs/latest/img/ico-github.svg) no-repeat center; background: url('/docs/latest/img/ico-github.svg') no-repeat center;
} }
.navbar-sidebar .menu__link.header-ico--youtube:hover { .navbar-sidebar .menu__link.header-ico--youtube:hover {
background: url(docs/latest/img/ico-youtube.svg) no-repeat center; background: url('/docs/latest/img/ico-youtube.svg') no-repeat center;
} }
.menu__link.header-ico { .menu__link.header-ico {
@ -414,22 +414,22 @@ html[data-theme="dark"] .footer__copyright {
/* social links icons */ /* social links icons */
.footer__link-item[href*="slack"] { .footer__link-item[href*="slack"] {
padding-left: 1.4rem; padding-left: 1.4rem;
background: url(docs/latest/img/ico-slack.svg) no-repeat left center; background: url('/docs/latest/img/ico-slack.svg') no-repeat left center;
background-size: 1rem; background-size: 1rem;
} }
.footer__link-item[href*="youtube"] { .footer__link-item[href*="youtube"] {
padding-left: 1.4rem; padding-left: 1.4rem;
background: url(docs/latest/img/ico-youtube.svg) no-repeat left center; background: url('/docs/latest/img/ico-youtube.svg') no-repeat left center;
background-size: 1rem; background-size: 1rem;
} }
.footer__link-item[href*="twitter"] { .footer__link-item[href*="twitter"] {
padding-left: 1.4rem; padding-left: 1.4rem;
background: url(docs/latest/img/ico-twitter.svg) no-repeat left center; background: url('/docs/latest/img/ico-twitter.svg') no-repeat left center;
background-size: 1rem; background-size: 1rem;
} }
.footer__link-item[href*="stackoverflow"] { .footer__link-item[href*="stackoverflow"] {
padding-left: 1.4rem; padding-left: 1.4rem;
background: url(docs/latest/img/ico-stackoverflow.svg) no-repeat left center; background: url('/docs/latest/img/ico-stackoverflow.svg') no-repeat left center;
background-size: 1rem; background-size: 1rem;
} }
@ -582,7 +582,7 @@ html[data-theme="light"] .icon {
height: 24px; height: 24px;
transform: rotate(0); transform: rotate(0);
transition: 0.25s; transition: 0.25s;
background: url(docs/latest/icons/ico-chevron-down.svg) no-repeat center; background: url('/docs/latest/icons/ico-chevron-down.svg') no-repeat center;
} }
/* expansion content */ /* expansion content */
@ -594,23 +594,23 @@ html[data-theme="light"] .icon {
/* icon types */ /* icon types */
/* -> info */ /* -> info */
.cml-expansion-panel.info .cml-expansion-panel-summary:before { .cml-expansion-panel.info .cml-expansion-panel-summary:before {
background-image: url(docs/latest/icons/ico-info-circle.svg); background-image: url('/docs/latest/icons/ico-info-circle.svg');
} }
/* -> tips */ /* -> tips */
.cml-expansion-panel.tips .cml-expansion-panel-summary:before { .cml-expansion-panel.tips .cml-expansion-panel-summary:before {
background-image: url(docs/latest/icons/ico-tips.svg); background-image: url('/docs/latest/icons/ico-tips.svg');
} }
/* -> alert */ /* -> alert */
.cml-expansion-panel.alert .cml-expansion-panel-summary:before { .cml-expansion-panel.alert .cml-expansion-panel-summary:before {
background-image: url(docs/latest/icons/ico-alert.svg); background-image: url('/docs/latest/icons/ico-alert.svg');
} }
/* -> screenshot */ /* -> screenshot */
.cml-expansion-panel.screenshot .cml-expansion-panel-summary:before { .cml-expansion-panel.screenshot .cml-expansion-panel-summary:before {
background-image: url(docs/latest/icons/ico-image.svg); background-image: url('/docs/latest/icons/ico-image.svg');
} }
/* -> configuration */ /* -> configuration */
.cml-expansion-panel.configuration .cml-expansion-panel-summary:before { .cml-expansion-panel.configuration .cml-expansion-panel-summary:before {
background-image: url(docs/latest/icons/ico-config.svg); background-image: url('/docs/latest/icons/ico-config.svg');
} }
/* light mode */ /* light mode */
@ -701,7 +701,7 @@ html[data-theme="dark"] .alert--info {
/* show visual identification for external links */ /* show visual identification for external links */
.markdown a[href^="https://"] { .markdown a[href^="https://"] {
background: url(docs/latest/icons/ico-open-in-new.svg) center right no-repeat; background: url('/docs/latest/icons/ico-open-in-new.svg') center right no-repeat;
background-size: 0.9rem; background-size: 0.9rem;
margin-right: 0.4rem; margin-right: 0.4rem;
padding-right: 1rem; padding-right: 1rem;

12
src/theme/ImageSwitcher.js Normal file
View File

@ -0,0 +1,12 @@
import React from 'react';
import useThemeContext from '@theme/hooks/useThemeContext';
const ImageSwitcher = ({lightImageSrc, darkImageSrc, alt}) => {
const { isDarkTheme } = useThemeContext();
return (
<img src={isDarkTheme ? darkImageSrc : lightImageSrc} alt={alt} className="img-swt" />
)
}
export default ImageSwitcher;