Skip to content

Commit 3dd8cfe

Browse files
THMKAEstijnmoreels
THMKAE
and
stijnmoreels
authored
docs: feature/brand updates (#374)
* 💄 updated branding of docs * 🐛 fix favicon + 💄 small title update * 💄 add border on dark footer in dark theme Co-authored-by: Stijn Moreels <[email protected]>
1 parent ad6670a commit 3dd8cfe

File tree

8 files changed

+327
-48
lines changed

8 files changed

+327
-48
lines changed

‎docs/docusaurus.config.js

+14-16
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
const lightCodeTheme = require('prism-react-renderer/themes/github');
2-
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
1+
const lightCodeTheme = require('./src/prism/light');
2+
const darkCodeTheme = require('./src/prism/dark');
33

44
/** @type {import('@docusaurus/types').DocusaurusConfig} */
55
module.exports = {
@@ -8,7 +8,7 @@ module.exports = {
88
baseUrl: '/',
99
onBrokenLinks: 'throw',
1010
onBrokenMarkdownLinks: 'warn',
11-
favicon: 'img/arcus.png',
11+
favicon: 'img/favicon.ico',
1212
organizationName: 'arcus-azure', // Usually your GitHub org/user name.
1313
projectName: 'Arcus - Security', // Usually your repo name.
1414
themeConfig: {
@@ -18,7 +18,7 @@ module.exports = {
1818
logo: {
1919
alt: 'Arcus',
2020
src: 'img/arcus.png',
21-
srcDark: 'img/arcus.png'
21+
srcDark: 'img/arcus_for_dark.png',
2222
},
2323
items: [
2424
{
@@ -74,30 +74,28 @@ module.exports = {
7474
path: 'preview',
7575
sidebarCollapsible: false,
7676
// Please change this to your repo.
77-
editUrl:
78-
'https://github.com/arcus-azure/arcus.security/edit/master/docs',
77+
editUrl: 'https://github.com/arcus-azure/arcus.security/edit/master/docs',
7978
includeCurrentVersion: process.env.CONTEXT !== 'production',
80-
sidebarItemsGenerator: async function ({
81-
defaultSidebarItemsGenerator,
82-
...args
83-
}) {
79+
sidebarItemsGenerator: async function ({ defaultSidebarItemsGenerator, ...args }) {
8480
const sidebarItems = await defaultSidebarItemsGenerator(args);
8581
const capitalizeLabels = (items) => {
86-
return items?.map(item => ({
82+
return items?.map((item) => ({
8783
...item,
8884
label: item.label?.charAt(0).toUpperCase() + item.label?.slice(1),
89-
items: item.items ? capitalizeLabels(item.items) : null
85+
items: item.items ? capitalizeLabels(item.items) : null,
9086
}));
91-
}
87+
};
9288

93-
return capitalizeLabels(sidebarItems)
94-
}
89+
return capitalizeLabels(sidebarItems);
90+
},
9591
},
9692
theme: {
9793
customCss: require.resolve('./src/css/custom.css'),
9894
},
9995
},
10096
],
10197
],
102-
98+
stylesheets: [
99+
'https://fonts.googleapis.com/css2?family=Bitter:wght@700&family=Inter:wght@400;500&display=swap',
100+
],
103101
};

‎docs/src/css/custom.css

+91-32
Original file line numberDiff line numberDiff line change
@@ -7,30 +7,44 @@
77

88
/* You can override the default Infima variables here. */
99
:root {
10-
--ifm-color-primary: #0098CC;
11-
--ifm-color-primary-dark: #0076AF;
12-
--ifm-color-primary-darker: #005892;
13-
--ifm-color-primary-darkest: #003F76;
14-
--ifm-color-primary-light: #38C1E0;
15-
--ifm-color-primary-lighter: #5FDFEF;
16-
--ifm-color-primary-lightest: #95F5F9;
17-
18-
--ifm-color-secondary: #CACAD2;
19-
--ifm-color-secondary-dark: #9F9FAC;
20-
--ifm-color-secondary-darker: #9F9FAC;
10+
--ifm-color-primary: #248eff;
11+
--ifm-color-primary-dark: #078fff;
12+
--ifm-color-primary-darker: #0088f7;
13+
--ifm-color-primary-darkest: #006cc6;
14+
--ifm-color-primary-light: #47acff;
15+
--ifm-color-primary-lighter: #55b2ff;
16+
--ifm-color-primary-lightest: #81c6ff;
17+
18+
--ifm-color-secondary: #cacad2;
19+
--ifm-color-secondary-dark: #9f9fac;
20+
--ifm-color-secondary-darker: #9f9fac;
2121
--ifm-color-secondary-darkest: #666675;
22-
--ifm-color-secondary-light: #E9E9F0;
23-
--ifm-color-secondary-lighter: #F4F4F7;
24-
--ifm-color-secondary-lightest: #F4F4F7;
22+
--ifm-color-secondary-light: #e9e9f0;
23+
--ifm-color-secondary-lighter: #f4f4f7;
24+
--ifm-color-secondary-lightest: #f4f4f7;
2525

26-
--ifm-color-warning: #FF970F;
27-
--ifm-color-warning-dark: #DB770A;
28-
--ifm-color-warning-darker: #B75B07;
26+
--ifm-color-warning: #ff970f;
27+
--ifm-color-warning-dark: #db770a;
28+
--ifm-color-warning-darker: #b75b07;
2929
--ifm-color-warning-darkest: #934304;
30-
--ifm-color-warning-light: #FFB84B;
31-
--ifm-color-warning-lighter: #FFCD6F;
32-
--ifm-color-warning-lightest: #FFE29F;
30+
--ifm-color-warning-light: #ffb84b;
31+
--ifm-color-warning-lighter: #ffcd6f;
32+
--ifm-color-warning-lightest: #ffe29f;
3333
--ifm-code-font-size: 95%;
34+
35+
--ifm-color-gray-100: #e9edfa;
36+
--ifm-color-gray-200: #d5daec;
37+
--ifm-color-gray-300: #ccd1e3;
38+
--ifm-color-gray-400: #a6aecb;
39+
--ifm-color-gray-500: #8b95b8;
40+
--ifm-color-gray-600: #575f82;
41+
--ifm-color-gray-700: #444b6d;
42+
--ifm-color-gray-800: #242b47;
43+
--ifm-color-gray-900: #1d2338;
44+
45+
--ifm-navbar-shadow: 0 1px 2px 0 var(--ifm-color-primary);
46+
--ifm-toc-border-color: var(--ifm-color-primary);
47+
--ifm-global-spacing: 1.5rem;
3448
}
3549

3650
.docusaurus-highlight-code-line {
@@ -41,34 +55,79 @@
4155
}
4256

4357
.alert {
44-
background-color: var(--ifm-alert-background-color)!important;
58+
background-color: var(--ifm-alert-background-color) !important;
4559
}
4660

4761
html[data-theme='dark'] .docusaurus-highlight-code-line {
48-
background-color: rgba(0, 0, 0, 0.3);
62+
background-color: var(--ifm-color-gray-800);
4963
}
5064

51-
html[data-theme='dark'] .prism-code {
52-
background-color: rgb(45, 51, 59)!important;
65+
html[data-theme='dark'] code {
66+
background-color: var(--ifm-color-gray-800);
5367
}
5468

55-
html[data-theme='dark'] main img[src$=".png"] {
56-
background-color:white;
69+
html[data-theme='dark'] main img[src$='.png'] {
70+
background-color: white;
5771
}
5872

59-
6073
html[data-theme='dark'] {
61-
--ifm-background-color: rgb(34, 39, 46);
62-
--ifm-color-primary:#0098cc;
74+
--ifm-background-color: var(--ifm-color-gray-900);
75+
--ifm-color-primary: #249cff;
76+
77+
--ifm-navbar-background-color: var(--ifm-color-gray-800);
78+
}
6379

64-
--ifm-navbar-background-color: rgb(45, 51, 59)
80+
.footer--dark {
81+
background-color: var(--ifm-color-gray-800);
6582
}
6683

6784
html[data-theme='dark'] .footer--dark {
68-
background-color: rgb(45, 51, 59);
85+
background-color: var(--ifm-color-gray-800);
86+
border-top: 1px solid var(--ifm-color-primary);
6987
}
7088

7189
.navbar__brand img {
72-
width: 75px;
90+
width: 110px;
7391
height: auto;
92+
margin-right: 10px;
93+
margin-bottom: 5px;
94+
}
95+
96+
html {
97+
font-family: 'Inter';
98+
font-weight: normal;
99+
}
100+
101+
h1,
102+
h2,
103+
h3,
104+
h4,
105+
h5 {
106+
font-family: 'Bitter';
107+
line-height: 110%;
108+
}
109+
110+
h1 {
111+
margin-top: 0.25rem;
112+
}
113+
114+
p,
115+
.theme-doc-markdown li {
116+
font-size: 1.1rem;
117+
line-height: 150%;
118+
}
119+
120+
strong,
121+
.navbar__title {
122+
font-family: 'Bitter';
123+
}
124+
125+
.navbar__title {
126+
font-size: 1rem;
127+
align-self: baseline;
128+
margin-top: 8px;
129+
}
130+
131+
nav.menu {
132+
padding: 1rem;
74133
}

‎docs/src/prism/dark.js

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
('use strict');
2+
3+
// Original: https://github.com/sdras/night-owl-vscode-theme
4+
5+
var theme = {
6+
plain: {
7+
color: '#e9edfa',
8+
backgroundColor: '#19203d',
9+
},
10+
styles: [
11+
{
12+
types: ['changed'],
13+
style: {
14+
color: 'rgb(162, 191, 252)',
15+
fontStyle: 'italic',
16+
},
17+
},
18+
{
19+
types: ['deleted'],
20+
style: {
21+
color: 'hsl(5, 74%, 69%)',
22+
fontStyle: 'italic',
23+
},
24+
},
25+
{
26+
types: ['inserted', 'attr-name'],
27+
style: {
28+
color: 'hsl(119, 34%, 67%)',
29+
fontStyle: 'italic',
30+
},
31+
},
32+
{
33+
types: ['comment'],
34+
style: {
35+
color: 'hsl(230, 4%, 74%)',
36+
fontStyle: 'italic',
37+
},
38+
},
39+
{
40+
types: ['string', 'url'],
41+
style: {
42+
color: 'hsl(119, 34%, 67%)',
43+
},
44+
},
45+
{
46+
types: ['variable'],
47+
style: {
48+
color: '#47acff',
49+
},
50+
},
51+
{
52+
types: ['number'],
53+
style: {
54+
color: 'hsl(35, 99%, 66%)',
55+
},
56+
},
57+
{
58+
types: ['builtin', 'char', 'constant', 'function', 'operator'],
59+
style: {
60+
color: '#47acff',
61+
},
62+
},
63+
{
64+
// This was manually added after the auto-generation
65+
// so that punctuations are not italicised
66+
types: ['punctuation'],
67+
style: {
68+
color: '#e9edfa',
69+
},
70+
},
71+
{
72+
types: ['selector', 'doctype'],
73+
style: {
74+
color: '#e9edfa',
75+
fontStyle: 'italic',
76+
},
77+
},
78+
{
79+
types: ['class-name'],
80+
style: {
81+
color: 'hsl(35, 99%, 66%)',
82+
},
83+
},
84+
{
85+
types: ['tag', 'keyword'],
86+
style: {
87+
color: 'hsl(301, 63%, 80%)',
88+
},
89+
},
90+
{
91+
types: ['boolean'],
92+
style: {
93+
color: 'hsl(35, 99%, 66%)',
94+
},
95+
},
96+
{
97+
types: ['property'],
98+
style: {
99+
color: 'hsl(5, 74%, 69%)',
100+
},
101+
},
102+
{
103+
types: ['namespace'],
104+
style: {
105+
opacity: 0.8,
106+
},
107+
},
108+
],
109+
};
110+
111+
module.exports = theme;

0 commit comments

Comments
 (0)