diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 47c95fbf..27e41592 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -102,7 +102,8 @@ const config = { customCss: [ require.resolve('./src/css/custom.scss'), require.resolve('./src/css/tippy-discord.css'), - require.resolve('./src/css/discordjs.scss') + require.resolve('./src/css/discordjs.scss'), + require.resolve('./src/css/font.scss') ] } }) @@ -166,6 +167,9 @@ const config = { { property: 'og:url', content: BaseUrl } ], navbar: { + logo: { + src: '/svgs/mini_logo.svg' + }, items: [ { to: '/', diff --git a/website/src/components/Home/HeadTags.tsx b/website/src/components/Home/HeadTags.tsx index 0d48604b..e83b53dd 100644 --- a/website/src/components/Home/HeadTags.tsx +++ b/website/src/components/Home/HeadTags.tsx @@ -21,12 +21,6 @@ const HeadTags: FC = () => ( - - ); diff --git a/website/src/components/Home/HomePageHeader.module.css b/website/src/components/Home/HomePageHeader.module.css index 5a525228..ccd9ad2e 100644 --- a/website/src/components/Home/HomePageHeader.module.css +++ b/website/src/components/Home/HomePageHeader.module.css @@ -12,9 +12,8 @@ } .logo { - margin-top: -4rem; - margin-bottom: -4rem; - max-height: 24rem; + margin-bottom: 2rem; + max-height: 12rem; } .fontSemiTitle { @@ -22,11 +21,6 @@ } @media screen and (max-width: 966px) { - .logo { - padding-top: 4rem; - padding-bottom: 4rem; - } - .fontSemiTitle { font-size: 1.5rem; } diff --git a/website/src/css/custom.scss b/website/src/css/custom.scss index 2d97ca05..b1004aa2 100644 --- a/website/src/css/custom.scss +++ b/website/src/css/custom.scss @@ -74,15 +74,13 @@ footer > .container { } .markdown__logo { - margin-top: -8rem; - margin-bottom: -8rem; + max-height: 12rem; + margin-top: 1rem; + margin-bottom: 2rem; } -@media screen and (max-width: 966px) { - .markdown__logo { - padding-top: 6rem; - padding-bottom: 6rem; - } +.navbar__logo { + margin: 0; } .navbar__logo > img { @@ -114,7 +112,8 @@ footer > .container { padding-left: 1rem; } -.navbar__item { +.navbar__item, +.navbar__brand { margin-right: 2rem; font-size: 14px; height: 100%; @@ -122,7 +121,8 @@ footer > .container { border-radius: 0.375rem; } -.navbar__item:hover { +.navbar__item:hover, +.navbar__brand:hover { background-color: rgba($color: #000000, $alpha: 0.3); border-radius: 0.375rem; } diff --git a/website/src/css/font.scss b/website/src/css/font.scss new file mode 100644 index 00000000..f78038c6 --- /dev/null +++ b/website/src/css/font.scss @@ -0,0 +1 @@ +@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap'); diff --git a/website/static/svgs/logo_long_blurple.svg b/website/static/svgs/logo_long_blurple.svg index 971a7c06..9ff0d30a 100644 --- a/website/static/svgs/logo_long_blurple.svg +++ b/website/static/svgs/logo_long_blurple.svg @@ -1,22 +1,23 @@ - + - - - - - - - - + - - - - -DISCORD + + + + + + + + - + + + + + + diff --git a/website/static/svgs/mini_logo.svg b/website/static/svgs/mini_logo.svg new file mode 100644 index 00000000..d699f5df --- /dev/null +++ b/website/static/svgs/mini_logo.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + +