diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index cf9a9fab..89ba0f52 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -74,9 +74,17 @@ const config = { height: 32, }, items: [ - { href: "/", label: "Templates", position: "left" }, + { + href: "/", + label: "Templates", + position: "left", + }, - { to: "/about", label: "Getting Started", position: "left" }, + { + to: "/about", + label: "Getting Started", + position: "left", + }, { to: "https://learn.microsoft.com/azure/developer/azure-developer-cli/", label: "Docs", @@ -94,6 +102,13 @@ const config = { docId: "intro", }, + { + href: "https://github.com/Azure/repo/awesome-azd", + position: "right", + className: "header-github-link", + "aria-label": "GitHub repository", + }, + // CONFIG: // Make sure you have class defined in src/css/custom.css { @@ -187,9 +202,9 @@ const config = { // CONFIG: theme = currently using `classic` // See: https://docusaurus.io/docs/api/themes/@docusaurus/theme-classic - // theme: { - // customCss: require.resolve('./src/css/custom.css'), - // }, + theme: { + customCss: require.resolve("./src/css/custom.css"), + }, }), ], ], diff --git a/website/src/css/custom.css b/website/src/css/custom.css index f73216aa..952b9a15 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -6,7 +6,7 @@ /* You can override the default Infima variables here. */ :root { - --ifm-color-primary: #245e94; + --ifm-color-primary: #7160E8; --ifm-color-primary-dark: #205585; --ifm-color-primary-darker: #1f507e; --ifm-color-primary-darkest: #194268; @@ -17,9 +17,51 @@ --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); } +.navbar{ + font-size: 16px; +} + +.navbar .navbar__inner .navbar__items .navbar__link--active{ + text-decoration-line: underline; + text-underline-offset: 20px; + text-decoration-thickness: 4px; +} + +/* .navbar .navbar__inner .navbar__items .navbar_item .navbar__link .templatePage{ + text-decoration-line: underline; + text-underline-offset: 20px; + text-decoration-thickness: 4px; +} */ + +.templatePage:hover::before{ + text-decoration-line: underline; + text-underline-offset: 20px; + text-decoration-thickness: 4px; + color:var(--ifm-color-primary); + +} + +.header-github-link:hover { + opacity: 0.6; +} + +.header-github-link:before { + content: ''; + width: 24px; + height: 24px; + display: flex; + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") + no-repeat; +} + +html[data-theme='dark'] .header-github-link:before { + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") + no-repeat; +} + /* For readability concerns, you should choose a lighter palette in dark mode. */ -[data-theme='dark'] { - --ifm-color-primary: #33d4f4; +/* [data-theme='dark'] { + --ifm-color-primary: #7160E8; --ifm-color-primary-dark: #17cef2; --ifm-color-primary-darker: #0dc9ee; --ifm-color-primary-darkest: #0ba5c4; @@ -27,16 +69,9 @@ --ifm-color-primary-lighter: #5dddf6; --ifm-color-primary-lightest: #87e6f9; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); -} +} */ /* For readability - FIXME: is there a better way to handle it? */ -[data-theme='dark'] .navbar__brand { - color: black; -} -[data-theme='dark'] .navbar__link { - color: black; -} - .docusaurus-highlight-code-line { background-color: rgba(0, 0, 0, 0.1); display: block; diff --git a/website/src/pages/about/index.module.css b/website/src/pages/about/index.module.css index 9f71a5da..07a221ab 100644 --- a/website/src/pages/about/index.module.css +++ b/website/src/pages/about/index.module.css @@ -8,6 +8,8 @@ text-align: center; position: relative; overflow: hidden; + background-color: #245e94; + color:#245e94; } @media screen and (max-width: 996px) { diff --git a/website/src/theme/Navbar/Content/index.js b/website/src/theme/Navbar/Content/index.js index b2a00ac3..a6500994 100644 --- a/website/src/theme/Navbar/Content/index.js +++ b/website/src/theme/Navbar/Content/index.js @@ -15,8 +15,6 @@ import NavbarMobileSidebarToggle from "@theme/Navbar/MobileSidebar/Toggle"; import NavbarLogo from "@theme/Navbar/Logo"; import NavbarSearch from "@theme/Navbar/Search"; import styles from "./styles.module.css"; -import clsx from "clsx"; -import useBaseUrl from "@docusaurus/useBaseUrl"; function useNavbarItems() { // TODO temporary casting until ThemeConfig type is improved return useThemeConfig().navbar.items; @@ -55,7 +53,6 @@ export default function NavbarContent() { const items = useNavbarItems(); const [leftItems, rightItems] = splitNavbarItems(items); const searchBarItem = items.find((item) => item.type === "search"); - const { colorMode, setColorMode } = useColorMode(); return ( {!mobileSidebar.disabled && } - {colorMode != "dark" ? ( -
- ) : ( -
- )} } @@ -76,22 +68,6 @@ export default function NavbarContent() { // Ask the user to add the respective navbar items => more flexible <> -
- -
{!searchBarItem && ( diff --git a/website/static/img/github.svg b/website/static/img/github.svg deleted file mode 100644 index 56cd2a32..00000000 --- a/website/static/img/github.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/website/static/img/githubLight.svg b/website/static/img/githubLight.svg deleted file mode 100644 index 03ab3fde..00000000 --- a/website/static/img/githubLight.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - -