Skip to content

Commit ec4e2b8

Browse files
claudiacodacyclaudiacodacy
committed
navbar theme
1 parent e3a129a commit ec4e2b8

File tree

11 files changed

+138
-91
lines changed

11 files changed

+138
-91
lines changed

‎docusaurus/TODO‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ MVP
1414
## 0) Apply new theme!
1515
- [ ] Homepage
1616
- [ ] Sidebar
17-
- [ ] Navbar
17+
- [x] Navbar
1818
- [ ] Search
1919
- [ ] Footer
2020
- [ ] Nav buttons
@@ -28,6 +28,7 @@ MVP
2828
- [x] Confirm MkDocs `include-markdown` usage is fully replaced with `_includes/*.mdx` imports/usages
2929
- [x] Confirm admonitions render as expected (MkDocs `!!! note|tip|warning` ➜ Docusaurus admonitions / MDX syntax)
3030
- [ ] Confirm heading IDs/anchors are stable (MkDocs `toc` permalink + custom `{:#id}` usage)
31+
- [ ] Fix all the links
3132

3233
## 2) Navigation & information architecture
3334
- [ ] Review `docusaurus/sidebars.ts` vs MkDocs `nav:` in `mkdocs.yml` for:

‎docusaurus/docusaurus.config.ts‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,17 +77,24 @@ const config: Config = {
7777
respectPrefersColorScheme: true,
7878
},
7979
navbar: {
80+
title: 'Docs',
8081
logo: {
8182
alt: 'Codacy Docs',
8283
src: 'img/codacy-logo.svg',
8384
srcDark: 'img/codacy-logo-white.svg',
8485
},
8586
items: [
87+
{
88+
to: '/',
89+
label: 'Home',
90+
position: 'left',
91+
exact: true,
92+
},
8693
{
8794
type: 'docSidebar',
8895
sidebarId: 'documentationSidebar',
8996
position: 'left',
90-
label: 'Docs',
97+
label: 'Documentation',
9198
},
9299
{
93100
type: 'docSidebar',
@@ -105,6 +112,26 @@ const config: Config = {
105112
theme: prismThemes.github,
106113
darkTheme: prismThemes.dracula,
107114
},
115+
footer: {
116+
style: 'dark',
117+
links: [
118+
{
119+
title: 'Docs',
120+
items: [
121+
{label: 'Documentation', to: '/'},
122+
{label: 'Release notes', to: '/release-notes/'},
123+
],
124+
},
125+
{
126+
title: 'Codacy',
127+
items: [
128+
{label: 'Website', href: 'https://www.codacy.com'},
129+
{label: 'Status', href: 'https://status.codacy.com'},
130+
],
131+
},
132+
],
133+
copyright: `Copyright © ${new Date().getFullYear()} Codacy`,
134+
},
108135
} satisfies Preset.ThemeConfig,
109136
};
110137

‎docusaurus/sidebars.ts‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import {releaseNotesSidebarOrder} from './docs/release-notes/_order';
2525
*/
2626
const sidebars: SidebarsConfig = {
2727
documentationSidebar: [
28-
{type: 'doc', id: 'index', label: 'Documentation home'},
2928
{
3029
type: 'category',
3130
label: 'Getting started',
@@ -84,19 +83,6 @@ const sidebars: SidebarsConfig = {
8483
'special-thanks',
8584
],
8685
releaseNotesSidebar: releaseNotesSidebarOrder,
87-
88-
// But you can create a sidebar manually
89-
/*
90-
tutorialSidebar: [
91-
'intro',
92-
'hello',
93-
{
94-
type: 'category',
95-
label: 'Tutorial',
96-
items: ['tutorial-basics/create-a-document'],
97-
},
98-
],
99-
*/
10086
};
10187

10288
export default sidebars;

‎docusaurus/src/css/custom.css‎

Lines changed: 9 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,16 @@
55
*/
66
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
77

8-
@import './imports/codacy-variables.css';
9-
@import './imports/ifm-overrides.css';
10-
@import './imports/search.css';
11-
12-
/* You can override the default Infima variables here. */
13-
:root {
14-
--ifm-font-size-base: 87.5%;
15-
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
16-
--ifm-font-family-base: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
17-
18-
--ifm-toc-border-color: var(--ifm-color-emphasis-200);
19-
20-
/* overriding the arrow in the sidebar */
21-
--ifm-menu-link-sublist-icon: url("data:image/svg+xml;utf8,<svg viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M21.5397 17.5397C20.9261 18.1534 19.9311 18.1534 19.3174 17.5397L11 9.22234L2.6826 17.5397C2.06892 18.1534 1.07394 18.1534 0.460263 17.5397C-0.153418 16.9261 -0.153418 15.9311 0.460263 15.3174L9.88883 5.88883C10.5025 5.27515 11.4975 5.27515 12.1112 5.88883L21.5397 15.3174C22.1534 15.9311 22.1534 16.9261 21.5397 17.5397Z' fill='%237689AD'/></svg>");
22-
}
8+
/* variables reset */
9+
@import './imports/variables/codacy-variables.css';
10+
@import './imports/variables/ifm-overrides.css';
11+
12+
/* components */
13+
@import './imports/components/search.css';
14+
@import './imports/components/navbar.css';
15+
@import './imports/components/nav-multistep.css';
16+
2317

24-
/* For readability concerns, you should choose a lighter palette in dark mode. */
25-
[data-theme='dark'] {
26-
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
27-
--ifm-toc-border-color: var(--ifm-color-empaphis-200);
28-
}
2918

3019
.table-of-contents__left-border {
3120
border: none;
@@ -36,11 +25,6 @@
3625
background-repeat: no-repeat;
3726
}
3827

39-
.navbar {
40-
box-shadow: none;
41-
border-bottom: 1px solid var(--ifm-toc-border-color);
42-
}
43-
4428
.menu {
4529
padding: 0.5rem
4630
}

docusaurus/src/css/imports/nav-multistep.css renamed to docusaurus/src/css/imports/components/nav-multistep.css

File renamed without changes.

‎docusaurus/src/css/imports/components/navbar.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
:root {
2+
--ifm-navbar-padding-vertical: 1rem;
3+
--ifm-navbar-padding-horizontal: 2rem;
4+
--ifm-navbar-height: 4.5rem;
5+
}
6+
7+
.navbar {
8+
box-shadow: none;
9+
border-bottom: 1px solid var(--ifm-toc-border-color);
10+
}
11+
12+
.navbar__title {
13+
font-size: 1.125rem;
14+
font-weight: 600;
15+
letter-spacing: 0.01em;
16+
position:relative;
17+
top: 1px;
18+
color: var(--ifm-color-emphasis-800)
19+
}
20+
21+
.navbar__brand {
22+
border-right: 1px solid var(--ifm-toc-border-color);
23+
padding-right: 1rem;
24+
}
25+
26+
.navbar__link {
27+
color: var(--ifm-color-emphasis-800);
28+
font-weight: var(--ifm-font-weight-normal);
29+
}
30+
31+
.navbar__link:hover {
32+
color: var(--ifm-color-emphasis-700)
33+
}
34+
35+
.navbar__link--active, .navbar__link--active:hover {
36+
color: inherit;
37+
font-weight: var(--ifm-font-weight-semibold);
38+
}

‎docusaurus/src/css/imports/components/search.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
2+
/* Local search (navbar) sizing: keep input and dropdown consistent */
3+
:root {
4+
--codacy-search-width: min(30rem, 50vw);
5+
--codacy-search-width-collapsed: 14rem;
6+
--search-local-modal-width: var(--codacy-search-width);
7+
--ifm-navbar-search-input-background-color: var(--ifm-background-color);
8+
}
9+
10+
@media (max-width: 576px) {
11+
:root {
12+
--codacy-search-width: min(22rem, calc(100vw - 15rem - var(--ifm-navbar-padding-horizontal) * 2));
13+
--codacy-search-width-collapsed: 10rem;
14+
}
15+
}
16+
17+
.navbar .navbar__search {
18+
min-width: var(--codacy-search-width-collapsed);
19+
}
20+
21+
.navbar .navbar__search-input {
22+
background: var(--ifm-navbar-search-input-background-color) var(--ifm-navbar-search-input-icon) no-repeat 0.75rem center / 1rem 1rem;
23+
width: var(--codacy-search-width-collapsed);
24+
transition: width 160ms ease;
25+
border: 1px solid var(--ifm-color-emphasis-300);
26+
border-radius: 0.5rem;
27+
height: 2.5rem;
28+
}
29+
30+
.navbar .navbar__search-input:focus {
31+
width: var(--codacy-search-width);
32+
}
33+

‎docusaurus/src/css/imports/search.css‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

docusaurus/src/css/imports/codacy-variables.css renamed to docusaurus/src/css/imports/variables/codacy-variables.css

File renamed without changes.

docusaurus/src/css/imports/ifm-overrides.css renamed to docusaurus/src/css/imports/variables/ifm-overrides.css

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,18 @@
2525
--ifm-color-gray-500: var(--codacy-grey-70);
2626
--ifm-color-gray-600: var(--codacy-grey-60);
2727
--ifm-color-gray-700: var(--codacy-grey-50);
28-
--ifm-color-gray-800: var(--codacy-grey-40);
28+
--ifm-color-gray-800: var(--codacy-grey-30);
2929
--ifm-color-gray-900: var(--codacy-grey-15);
3030
--ifm-color-gray-1000: var(--codacy-grey-00);
31+
32+
--ifm-font-size-base: 87.5%;
33+
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
34+
--ifm-font-family-base: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
35+
36+
--ifm-toc-border-color: var(--ifm-color-emphasis-200);
37+
38+
/* overriding the arrow in the sidebar */
39+
--ifm-menu-link-sublist-icon: url("data:image/svg+xml;utf8,<svg viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M21.5397 17.5397C20.9261 18.1534 19.9311 18.1534 19.3174 17.5397L11 9.22234L2.6826 17.5397C2.06892 18.1534 1.07394 18.1534 0.460263 17.5397C-0.153418 16.9261 -0.153418 15.9311 0.460263 15.3174L9.88883 5.88883C10.5025 5.27515 11.4975 5.27515 12.1112 5.88883L21.5397 15.3174C22.1534 15.9311 22.1534 16.9261 21.5397 17.5397Z' fill='%237689AD'/></svg>");
3140
}
3241

3342
[data-theme='dark'] {
@@ -44,4 +53,7 @@
4453
--ifm-color-success: var(--codacy-green-60);
4554
--ifm-color-warning: var(--codacy-yellow-60);
4655
--ifm-color-danger: var(--codacy-red-60);
56+
57+
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
58+
--ifm-toc-border-color: var(--ifm-color-emphasis-200);
4759
}

0 commit comments

Comments
 (0)