diff --git a/site/docusaurus.config.js b/site/docusaurus.config.js index 59dec420..2b583ae3 100644 --- a/site/docusaurus.config.js +++ b/site/docusaurus.config.js @@ -55,19 +55,21 @@ const config = { }, items: [ { - label: 'Blog', - to: 'https://verygood.ventures/blog', + to: '/docs/overview', + label: 'Get Started', position: 'right', + className: 'button nav-button', }, { - label: 'OSS', - to: 'https://github.com/VeryGoodOpenSource', + label: 'VGV.DEV', + to: 'https://vgv.dev', position: 'right', }, { - label: 'VGV', - to: 'https://verygood.ventures', + href: 'https://verygood.ventures', position: 'right', + className: 'navbar-vgv-icon', + 'aria-label': 'VGV website', }, { href: 'https://github.com/verygoodopensource/very_good_cli', diff --git a/site/src/css/custom.css b/site/src/css/custom.css index 3130b3af..e25131c5 100644 --- a/site/src/css/custom.css +++ b/site/src/css/custom.css @@ -25,7 +25,7 @@ --hero-image-background-color: var(--colors-off-white); --title-text-color: var(--colors-dark-blue); - /* Informa Variables */ + /* Infima Variables */ --ifm-color-primary: #2a48df; --ifm-color-primary-dark: #1f3ccf; --ifm-color-primary-darker: #1d39c4; @@ -45,7 +45,7 @@ /* Custom Variables */ --hero-image-background-color: var(--colors-darker-grey); - /* Infirma Variables */ + /* Infima Variables */ --ifm-color-primary: #66fbd1; --ifm-color-primary-dark: #44fac7; --ifm-color-primary-darker: #32fac1; @@ -73,6 +73,19 @@ html[data-theme='dark'] .footer { background-color: var(--ifm-footer-background-color); } +/* Get Started button in Navbar */ +.nav-button { + background-color: var(--ifm-color-primary); + color: var(--ifm-button-color); + font-weight: 600; + padding: 8px 16px; +} + +.nav-button:hover { + color: var(--ifm-button-color); + background-color: var(--ifm-color-primary-dark); +} + /* GitHub Navbar Icon */ .navbar-github-icon:hover { opacity: 0.6; @@ -110,3 +123,11 @@ html[data-theme='dark'] .navbar-vgv-icon:before { background: url('../../static/img/vgv_logo_fill.svg') no-repeat; background-size: 24px; } + +@media screen and (max-width: 996px) { + .nav-button { + color: var(--ifm-button-color); + background-color: var(--ifm-color-primary); + max-width: 8em; + } +}