diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index f07a7d2be..e478f25c6 100755
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -43,18 +43,30 @@ module.exports = {
position: 'right',
className: 'navbar-icon navbar-icon-github',
'aria-label': 'GitHub repository',
+ html: ``,
},
{
href: 'https://discord.gg/BZuXW2gJy9',
position: 'right',
className: 'navbar-icon navbar-icon-discord',
'aria-label': 'Discord channel',
+ html: ``,
},
{
href: 'https://twitter.com/yangshunz',
position: 'right',
className: 'navbar-icon navbar-icon-twitter',
'aria-label': 'Twitter page',
+ html: ``,
},
],
},
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index bddaed644..c75dd580c 100755
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -125,40 +125,19 @@ div[class^='announcementBar_'] {
flex-shrink: 0;
}
-.navbar-icon:before {
- background-repeat: no-repeat;
- content: '';
+.navbar-icon {
+ border-radius: 50%;
display: flex;
- height: 24px;
- width: 24px;
- transition: all 300ms ease-in-out;
+ height: 32px;
+ width: 32px;
+ align-items: center;
+ justify-content: center;
+ margin-right: 12px;
+ padding: 0;
+ transition: background var(--ifm-transition-fast);
}
.navbar-icon:hover {
- opacity: 0.6;
-}
-
-.navbar-icon-github:before {
- background-image: url('/img/icons8-github.svg');
-}
-
-html[data-theme='dark'] .navbar-icon-github:before {
- background-image: url('/img/icons8-github-light.svg');
-}
-
-.navbar-icon-twitter:before {
- background-image: url('/img/icons8-twitter.svg');
-}
-
-html[data-theme='dark'] .navbar-icon-twitter:before {
- background-image: url('/img/icons8-twitter-light.svg');
-}
-
-.navbar-icon-discord:before {
- background-image: url('/img/discord.svg');
- width: 31px;
-}
-
-html[data-theme='dark'] .navbar-icon-discord:before {
- background-image: url('/img/discord-light.svg');
+ background: var(--ifm-color-emphasis-200);
+ color: inherit;
}