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; }