diff --git a/gatsby-config.js b/gatsby-config.js index 9977d10d1..cdea5d5f3 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -172,23 +172,25 @@ module.exports = { { resolve: 'gatsby-transform-md-docs', options: { - slugPrefix: 'docs', langConfig: { langs: CONFIGURED_LOCALES, defaultLangKey, prefixDefaultLangKey, - } + }, + projects: ['colonyJS', 'colonyNetwork', 'colonyStarter', 'purser', 'tailor'], + slugPrefix: 'docs', } }, { resolve: 'gatsby-transform-md-tutorials', options: { - slugPrefix: 'tutorials', langConfig: { langs: CONFIGURED_LOCALES, defaultLangKey, prefixDefaultLangKey, - } + }, + projects: ['colonyTutorials'], + slugPrefix: 'tutorials', } }, { diff --git a/src/modules/core/components/Heading/Heading.jsx b/src/modules/core/components/Heading/Heading.jsx index a3f866cd9..01a0ef800 100644 --- a/src/modules/core/components/Heading/Heading.jsx +++ b/src/modules/core/components/Heading/Heading.jsx @@ -11,8 +11,8 @@ import { getChildrenOrText } from '~utils/strings'; import styles from './Heading.module.css'; export type Appearance = {| - theme?: 'dark' | 'light' | 'invert' | 'primary', - margin?: 'none' | 'tiny' | 'small' | 'double', + theme?: 'dark' | 'light' | 'invert' | 'primary' | 'grey', + margin?: 'none' | 'tiny' | 'small' | 'medium' | 'large' | 'double', size?: | 'tiny' | 'small' diff --git a/src/modules/core/components/Heading/Heading.module.css b/src/modules/core/components/Heading/Heading.module.css index a0edf4018..feff2de25 100644 --- a/src/modules/core/components/Heading/Heading.module.css +++ b/src/modules/core/components/Heading/Heading.module.css @@ -1,3 +1,5 @@ +@value mediumDown from '~styles/breakpoints.css'; + .main { color: rgba(0, 0, 0, 0.8); } @@ -16,6 +18,14 @@ margin-bottom: 6px !important; } +.marginMedium { + margin-bottom: 12px !important; +} + +.marginLarge { + margin-bottom: 24px !important; +} + .marginDouble { margin-bottom: 40px; } @@ -47,7 +57,7 @@ .sizeLarge { font-size: 32px; - line-height: 45px; + line-height: 50px; } .sizeHuge { @@ -71,6 +81,10 @@ color: #289BDC; } +.themeGrey { + color: #2E4153; +} + /* Weights */ .weightThin { font-family: 'Avenir Next Light'; @@ -83,3 +97,10 @@ .weightBold { font-weight: 500; } + +@media (mediumDown) { + .sizeLarge { + letter-spacing: .2px; + line-height: 1.2em; + } +} diff --git a/src/modules/core/components/Link/Link.module.css b/src/modules/core/components/Link/Link.module.css index ff792fa54..30fbe5f31 100644 --- a/src/modules/core/components/Link/Link.module.css +++ b/src/modules/core/components/Link/Link.module.css @@ -7,6 +7,7 @@ font-size: 14px; transition-duration: .2s; width: 14px; + font-family: 'Avenir Next Light'; } .left::before { diff --git a/src/modules/core/components/NavigationToggle/NavigationToggle.module.css b/src/modules/core/components/NavigationToggle/NavigationToggle.module.css index a6f8c4b3e..c1c475a91 100644 --- a/src/modules/core/components/NavigationToggle/NavigationToggle.module.css +++ b/src/modules/core/components/NavigationToggle/NavigationToggle.module.css @@ -1,16 +1,16 @@ @value smallUp, mediumUp, largeUp from '~styles/breakpoints.css'; .main { - height: 24px; - width: 28px; + height: 18px; + width: 20px; position: relative; } .mobileIcon { background: none; border: none; - width: 28px; - height: 24px; + width: 20px; + height: 18px; padding: 0; position: absolute; top: 0; @@ -25,7 +25,7 @@ left: 0; position: absolute; width: 100%; - height: 4px; + height: 2px; transition: all 200ms ease-out; } @@ -35,7 +35,7 @@ .mobileIcon .mobileIconLine:nth-child(2), .mobileIcon .mobileIconLine:nth-child(3) { - top: 10px; + top: 8px; } .mobileIcon .mobileIconLine:nth-child(4) { diff --git a/src/modules/core/components/Search/algolia-overrides.css b/src/modules/core/components/Search/algolia-overrides.css index 350c00064..3096f5682 100644 --- a/src/modules/core/components/Search/algolia-overrides.css +++ b/src/modules/core/components/Search/algolia-overrides.css @@ -3,14 +3,34 @@ } .algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content { - background-color: rgb(240, 245, 250); + background-color: #f0f5f7; } .algolia-autocomplete .algolia-docsearch-suggestion--highlight { color: currentColor; - background-color: rgb(105, 220, 210); + background-color: transparent; } .algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight { - box-shadow: inset 0 -2px 0 0 rgb(105, 220, 210); + box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, .3); +} + +.algolia-autocomplete .algolia-docsearch-suggestion--title { + color: #2E4153; + font-weight: normal; +} + +.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column { + padding-left: 0; + padding-right: 0; + text-align: left; + width: 25%; +} + +.algolia-autocomplete .algolia-docsearch-suggestion--content { + width: 75%; +} + +.ds-suggestion:not(:first-of-type) .algolia-docsearch-suggestion--category-header { + margin-top: 18px; } diff --git a/src/modules/layouts/components/DeveloperPortalLayout/DeveloperPortalLayout.jsx b/src/modules/layouts/components/DeveloperPortalLayout/DeveloperPortalLayout.jsx index 940a5f436..238b22aa0 100644 --- a/src/modules/layouts/components/DeveloperPortalLayout/DeveloperPortalLayout.jsx +++ b/src/modules/layouts/components/DeveloperPortalLayout/DeveloperPortalLayout.jsx @@ -7,9 +7,12 @@ import { graphql, useStaticQuery } from 'gatsby'; import type { Project } from '~types'; +import { transformProjectData } from '~utils/docs'; + import Header from './Header'; import Footer from './Footer'; -import { transformProjectData } from '~utils/docs'; + +import styles from './DeveloperPortalLayout.module.css'; type Props = {| children: Node, @@ -39,7 +42,7 @@ const DeveloperPortalLayout = ({ children, intl: { locale } }: Props) => { coreProjects={coreProjects} openSourceProjects={openSourceProjects} /> -
{children}
+
{children}