Skip to content

Commit 73b2132

Browse files
zackkatzzackkatz
committed
Update CSS & logos for docs
1 parent 443267e commit 73b2132

File tree

4 files changed

+128
-22
lines changed

4 files changed

+128
-22
lines changed

‎docs/docusaurus.config.js

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,12 @@ const config = {
3838
themeConfig: /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
3939
({
4040
navbar: {
41-
title: 'Docs Home',
41+
title: 'Home',
42+
logo: {
43+
alt: 'DataKit Logo',
44+
src: 'img/logo.svg',
45+
srcDark: 'img/logo-dark.svg',
46+
},
4247
items: [
4348
{
4449
type: 'doc',
@@ -52,6 +57,38 @@ const config = {
5257
},
5358
],
5459
},
60+
footer: {
61+
style: 'dark',
62+
links: [
63+
{
64+
title: 'Docs',
65+
items: [
66+
{
67+
label: 'SDK',
68+
to: '/SDK/creating-dataviews',
69+
}, {
70+
label: 'WordPress Plugin',
71+
to: '/Plugin/getting-started',
72+
},
73+
],
74+
}, {
75+
title: 'More',
76+
items: [
77+
{
78+
label: 'DataKit.org',
79+
href: 'https://www.datakit.org',
80+
}, {
81+
label: 'Email',
82+
href: 'mailto:[email protected]',
83+
}, {
84+
label: 'GitHub',
85+
href: 'https://github.com/UseDataKit/',
86+
},
87+
],
88+
},
89+
],
90+
copyright: `Copyright © ${new Date().getFullYear()} Katz Web Services, Inc.`,
91+
},
5592
prism: {
5693
theme: lightCodeTheme,
5794
darkTheme: darkCodeTheme,

‎docs/src/css/custom.css

Lines changed: 88 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,93 @@
66

77
/* You can override the default Infima variables here. */
88
:root {
9-
--ifm-color-primary: #2e8555;
10-
--ifm-color-primary-dark: #29784c;
11-
--ifm-color-primary-darker: #277148;
12-
--ifm-color-primary-darkest: #205d3b;
13-
--ifm-color-primary-light: #33925d;
14-
--ifm-color-primary-lighter: #359962;
15-
--ifm-color-primary-lightest: #3cad6e;
9+
--ifm-color-primary: #1B2B59;
10+
--ifm-color-primary-dark: #2c4073;
11+
--ifm-color-primary-darker: #0a1021;
12+
--ifm-color-primary-darkest: #030309;
13+
--ifm-color-primary-mediumest: hsl(225, 90%, 33%);
14+
--ifm-color-primary-medium: hsl(225, 63%, 45%);
15+
--ifm-color-primary-light: #1099D6;
16+
--ifm-color-primary-lighter: hsl(198, 86%, 55%);
17+
--ifm-color-primary-lightest: hsl(198, 86%, 75%);
1618
--ifm-code-font-size: 95%;
17-
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
18-
}
19-
20-
/* For readability concerns, you should choose a lighter palette in dark mode. */
21-
[data-theme='dark'] {
22-
--ifm-color-primary: #25c2a0;
23-
--ifm-color-primary-dark: #21af90;
24-
--ifm-color-primary-darker: #1fa588;
25-
--ifm-color-primary-darkest: #1a8870;
26-
--ifm-color-primary-light: #29d5b0;
27-
--ifm-color-primary-lighter: #32d8b4;
28-
--ifm-color-primary-lightest: #4fddbf;
29-
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
19+
--ifm-navbar-height: 80px;
20+
--ifm-container-width-xl: 1480px;
21+
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.05);
22+
--docusaurus-highlighted-toc-item-bg: rgba(0, 0, 0, 0.05);
23+
}
24+
25+
html[data-theme='dark'] {
26+
--ifm-color-primary: var( --ifm-color-primary-light );
27+
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, .2);
28+
}
29+
.footer__link-item:hover {
30+
color: var(--ifm-color-primary-lightest);
31+
}
32+
33+
article a:link,
34+
article a:visited {
35+
color: var(--ifm-color-primary-medium);
36+
}
37+
article a:hover {
38+
color: var( --ifm-color-primary-medium );
39+
text-decoration: underline;
40+
}
41+
article a:active {
42+
color: var( --ifm-color-primary-darkest );
43+
}
44+
45+
/** Give more space to the list items. */
46+
.markdown li {
47+
margin: calc( var( --ifm-list-item-margin ) * 4 ) 0;
48+
}
49+
50+
.markdown li li {
51+
margin: calc( var( --ifm-list-item-margin ) * 3 ) 0;
52+
}
53+
54+
html[data-theme='dark'] article a:link,
55+
html[data-theme='dark'] article a:visited {
56+
color: var( --ifm-color-primary-light );
57+
}
58+
59+
.navbar__logo {
60+
height: 40px;
61+
margin-bottom: 0;
62+
margin-right: 1.5em;
63+
}
64+
65+
/*.navbar__title {
66+
position: absolute;
67+
left: -99999px;
68+
overflow: hidden;
69+
}*/
70+
71+
.docusaurus-highlight-code-line {
72+
background-color: var( --docusaurus-highlighted-code-line-bg );
73+
display: block;
74+
margin: 0 calc(-1 * var(--ifm-pre-padding));
75+
padding: 0 var(--ifm-pre-padding);
76+
}
77+
78+
html[data-theme='dark'] .docusaurus-highlight-code-line {
79+
background-color: rgba(0, 0, 0, 0.3);
80+
}
81+
82+
.table-of-contents li a {
83+
font-size: calc( var(--ifm-font-size-base) * 1.1);
84+
font-weight: var(--ifm-font-weight-semibold);
85+
margin: calc( var( --ifm-list-item-margin ) * 3 ) 0;
86+
}
87+
88+
.table-of-contents li a.table-of-contents__link--active {
89+
font-weight: var(--ifm-font-weight-bold);
90+
/*background: var(--docusaurus-highlighted-toc-item-bg);*/
91+
/*padding-top: calc( var(--ifm-list-margin) / 3 );
92+
padding-bottom: calc( var(--ifm-list-margin) / 3 );*/
93+
}
94+
95+
.table-of-contents li li a {
96+
font-weight: var(--ifm-font-weight-normal);
97+
margin: var( --ifm-list-item-margin );
3098
}

‎docs/static/img/logo-dark.svg

Lines changed: 1 addition & 0 deletions
Loading

‎docs/static/img/logo.svg

Lines changed: 1 addition & 1 deletion
Loading

0 commit comments

Comments
 (0)