Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: CSS fixes and their propagations #1586

Merged
merged 1 commit into from
Nov 2, 2024
Merged

Docs: CSS fixes and their propagations #1586

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions docs/footerConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
const footer = {
links: [
{
items: [
{
html: `
links: [
{
items: [
{
html: `
<div style="display: flex; gap: 20px; max-width: 50%">
<a href="https://slack.com/terms-of-service/user">Terms of Service</a>
<a href="https://slack.com/trust/privacy/privacy-policy">Privacy Information</a>
</div>
©2024 Slack Technologies, LLC, a Salesforce company. All rights reserved. Various trademarks held by their respective owners.
`,
},
],
},
],
},
],
},
],
};

module.exports = footer;
169 changes: 85 additions & 84 deletions docs/navbarConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,88 +1,89 @@
const navbar = {
title: "Slack Developer Tools",
logo: {
src: "img/slack-logo.svg",
},
items: [
{
type: "dropdown",
label: "Bolt",
position: "left",
items: [
{
label: "Java",
to: "https://tools.slack.dev/java-slack-sdk/guides/bolt-basics",
target: "_self",
},
{
label: "JavaScript",
to: "https://tools.slack.dev/bolt-js",
target: "_self",
},
{
label: "Python",
to: "https://tools.slack.dev/bolt-python",
target: "_self",
},
],
},
{
type: "dropdown",
label: "SDKs",
position: "left",
items: [
{
label: "Java Slack SDK",
to: "https://tools.slack.dev/java-slack-sdk/",
target: "_self",
},
{
label: "Node Slack SDK",
to: "https://tools.slack.dev/node-slack-sdk/",
target: "_self",
},
{
label: "Python Slack SDK",
to: "https://tools.slack.dev/python-slack-sdk/",
target: "_self",
},
{
label: "Deno Slack SDK",
to: "https://api.slack.com/automation/quickstart",
target: "_self",
},
],
},
{
type: "dropdown",
label: "Community",
position: "left",
items: [
{
label: "Community tools",
to: "https://tools.slack.dev/community-tools",
target: "_self",
},
{
label: "Slack Community",
to: "https://slackcommunity.com/",
target: "_self",
},
],
},
{
to: "https://api.slack.com/docs",
label: "API Docs",
target: "_self",
},
{
"aria-label": "GitHub Repository",
className: "navbar-github-link",
href: "https://github.com/slackapi",
position: "right",
target: "_self",
},
],
title: 'Slack Developer Tools',
logo: {
src: 'img/slack-logo.svg',
href: 'https://tools.slack.dev',
},
items: [
{
type: 'dropdown',
label: 'Bolt',
position: 'left',
items: [
{
label: 'Java',
to: 'https://tools.slack.dev/java-slack-sdk/guides/bolt-basics',
target: '_self',
},
{
label: 'JavaScript',
to: 'https://tools.slack.dev/bolt-js',
target: '_self',
},
{
label: 'Python',
to: 'https://tools.slack.dev/bolt-python',
target: '_self',
},
],
},
{
type: 'dropdown',
label: 'SDKs',
position: 'left',
items: [
{
label: 'Java Slack SDK',
to: 'https://tools.slack.dev/java-slack-sdk/',
target: '_self',
},
{
label: 'Node Slack SDK',
to: 'https://tools.slack.dev/node-slack-sdk/',
target: '_self',
},
{
label: 'Python Slack SDK',
to: 'https://tools.slack.dev/python-slack-sdk/',
target: '_self',
},
{
label: 'Deno Slack SDK',
to: 'https://api.slack.com/automation/quickstart',
target: '_self',
},
],
},
{
type: 'dropdown',
label: 'Community',
position: 'left',
items: [
{
label: 'Community tools',
to: 'https://tools.slack.dev/community-tools',
target: '_self',
},
{
label: 'Slack Community',
to: 'https://slackcommunity.com/',
target: '_self',
},
],
},
{
to: 'https://api.slack.com/docs',
label: 'API Docs',
target: '_self',
},
{
'aria-label': 'GitHub Repository',
className: 'navbar-github-link',
href: 'https://github.com/slackapi',
position: 'right',
target: '_self',
},
],
};

module.exports = navbar;
138 changes: 86 additions & 52 deletions docs/src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,75 +1,72 @@
/**
* Any CSS included here will be global. The classic template
* bundles Infima by default. Infima is a CSS framework designed to
* work well for content-centric websites.
*/

:root {
/* set hex colors here pls */
--aubergine: #4a154b;

/* aubergine-active is used in light mode.
use something like #853c8c if you use as a link vs black text ( 3:1 contr) */
--aubergine-active: #7c3085;

/* aubergine-light is used in dark mode. #b681b5 is another one. i just made both up */
--aubergine-light: #ce70cc;

/* horchata is that beige color we use a lot */
--horchata: #f4ede4;

/* slack-blue is 36C5F0. used for dark-mode links */
--slack-link: #36c5f0;
--slack-blue: #36c5f0;
/* cloud blue from slack.dev. used for dark-mode links */
--slack-cloud-blue: #1ab9ff;
/* slack marketing color for links 1264A3. used for light-mode links */
--slack-dark-blue: #1264a3;

--grey: #868686;
--white: #FFFFFF;
--dim: #eef2f6;
}

/* resets striped tables that hurt me eyes */
table tr:nth-child(even) {
background-color: inherit;
}

p a {
text-decoration: underline;
color: var(--slack-link);
/* changing the links to blue for accessibility */
p a, .markdown a {
color: var(--slack-cloud-blue);
}

.markdown a {
color: var(--slack-link);
text-decoration: underline;
a:hover {
color: var(--slack-cloud-blue);
}

/* adjusting for light and dark modes */
[data-theme="light"] {
--docusaurus-highlighted-code-line-bg: var(--dim);
--ifm-color-primary: var(--aubergine-active);
--ifm-footer-background-color: var(--horchata);
--slack-link: var(--slack-dark-blue);
--ifm-footer-color: black;
--slack-cloud-blue: var(--slack-dark-blue);
--ifm-table-stripe-background: var(--horchata);
}

[data-theme="dark"] {
--ifm-color-primary: var(--aubergine-light);
--ifm-navbar-background-color: var(--aubergine);
--ifm-footer-background-color: var(--aubergine);
--slack-link: var(--slack-blue);
}

html[data-theme="dark"] {
--docusaurus-highlighted-code-line-bg: rgb(0 0 0 / 30%);
--ifm-color-primary: var(--slack-cloud-blue);
--ifm-navbar-background-color: var(--aubergine) !important;
--ifm-footer-background-color: var(--aubergine) !important;
--ifm-footer-color: white;
}

/* bolding Toc for contrast */
/* bolding ToC for contrast */
.table-of-contents__link--active {
font-weight: bold;
}

/* only uncomment for home page -- colors white space on v tall screens */
/* .main-wrapper {
background: var(--horchata);
} */
/* removing ToC line */
.table-of-contents__left-border {
border-left: none !important;
}

/* increasing name of SDK in sidebar */
.sidebar-title {
font-size: 1.25em; /* Adjust the size as needed */
font-weight: bold;
color: #000;
}

/* removing sidebar line and adding space to match ToC */
.theme-doc-sidebar-container {
border-right: none !important;
margin-right: 2rem;
}

/* announcement bar up top */
div[class^="announcementBar_"] {
Expand All @@ -78,17 +75,7 @@ div[class^="announcementBar_"] {
background: var(--horchata);
}

/* navbar */

.sidebar-item-overview a {
font-size: 1.2em; /* Adjust size as needed */
font-weight: bold;
}

html[data-theme='light'] .sidebar-item-overview a {
--ifm-menu-color: #000;
}

/* navbar github link */
.navbar-github-link {
width: 32px;
height: 32px;
Expand Down Expand Up @@ -116,8 +103,55 @@ html[data-theme="dark"] .navbar-github-link::before {
no-repeat;
}

.sidebar-title {
font-size: 1.25em; /* Adjust the size as needed */
font-weight: bold;
color: #000;
/* Delineate tab blocks */
.tabs-container {
border: 1px solid var(--ifm-color-primary); /* Adjust the color and thickness as needed */
border-radius: 5px; /* To give rounded corners */
padding: 0.5em; /* To add spacing inside the tab */
}

/* Docs code bubbles */
[data-theme="light"] {
--code-link-background: #CFE9FE;
--code-link-text: rgb(21, 50, 59);

--method-link-background: #CDEFC4;
--method-link-text: rgb(0, 41, 0);

--scope-link-background: #FBF3E0;
--scope-link-text: rgb(63, 46, 0);

--event-link-background: #FDDDE3;
--event-link-text: rgb(74, 21, 75);
}

[data-theme="dark"] {
--code-link-text: white;
--method-link-text: white;
--scope-link-text: white;
--event-link-text: white;
--code-link-background: #1AB9FF50;
--method-link-background: #41B65850;
--scope-link-background: #FCC00350;
--event-link-background: #E3066A50;
}

a code {
background-color: var(--code-link-background);
color: var(--code-link-text);
}

a[href^="https://api.slack.com/methods"] > code {
background-color: var(--method-link-background);
color: var(--method-link-text);
}

a[href^="https://api.slack.com/scopes"] > code {
background-color: var(--scope-link-background);
color: var(--scope-link-text);
}

a[href^="https://api.slack.com/events"] > code {
background-color: var(--event-link-background);
color: var(--event-link-text);
}
Loading