diff --git a/gatsby-browser.js b/gatsby-browser.js index 9306848..1ed0245 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -2,14 +2,9 @@ require("prismjs/themes/prism-okaidia.css"); require("./src/theme/assets/scss/theme.scss"); require('./src/theme/assets/fontawesome/css/all.css'); require('./src/theme/assets/search/algolia.css'); -const smoothScroll = require('smooth-scroll'); const Layout = require('./src/components/Layout').default; const React = require('react'); -if (typeof window !== "undefined") { - smoothScroll('a[href*="#"]') - } - exports.wrapPageElement = ({ element, props }) => { return {element} }; diff --git a/gatsby-config.js b/gatsby-config.js index 3528239..29b3256 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -16,7 +16,7 @@ module.exports = { resolve: `gatsby-source-git`, options: { name: `4`, - remote: `/Users/acarlino/Sites/gatsby-docs-4`, + remote: `https://github.com/silverstripe/silverstripe-framework.git`, branch: `4`, patterns: `docs/en/**` } diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 88c2e7f..8d650e0 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -36,10 +36,11 @@ const Header: StatelessComponent = ({ handleSidebarToggle }): React - - - Documentation + + Silverstripe CMS Documentation + + Documentation @@ -50,7 +51,7 @@ const Header: StatelessComponent = ({ handleSidebarToggle }): React - + Version: diff --git a/src/components/SearchBox.tsx b/src/components/SearchBox.tsx index af48263..63004a4 100644 --- a/src/components/SearchBox.tsx +++ b/src/components/SearchBox.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { StatelessComponent, ReactElement, useEffect } from 'react'; +import { StatelessComponent, ReactElement, useEffect, useState } from 'react'; import { navigateTo } from "gatsby-link" import { getCurrentVersion } from '../utils/nodes'; @@ -17,6 +17,7 @@ const autocompleteSelected = (e) => { }; const SearchBox: StatelessComponent = ({ identifier }): ReactElement|null => { + const [ isFocused, setFocus ] = useState(false); useEffect(() => { if (typeof window === 'undefined') return; @@ -40,13 +41,21 @@ const SearchBox: StatelessComponent = ({ identifier }): ReactEle }, []); + const handleFocus = () => setFocus(true); + const handleBlur = () => setFocus(false); + + return ( + <> + Search... + > ) }; diff --git a/src/theme/assets/scss/ss-docs.scss b/src/theme/assets/scss/ss-docs.scss index a09ae3e..6d8887a 100644 --- a/src/theme/assets/scss/ss-docs.scss +++ b/src/theme/assets/scss/ss-docs.scss @@ -14,11 +14,30 @@ body { .search-form { width: 75%; margin: 0 auto; + position: relative; + label { + position: absolute; + left: 0; + top: calc(50% - 0.5rem); + font-size: 1rem; + z-index: 100; + transition: all 0.3s; + cursor: text; + &.hide { + transform: translateY(-15px); + opacity: 0; + } + } + .search-input { - border-radius: 5px; - background: $gray-200; + border: 1px solid $gray-900; + border-width: 0 0 1px 0; + border-radius: 0; + padding: 1rem 0; &:focus { color: $gray-900; + border-color: $gray-900; + box-shadow: none; } } } @@ -82,26 +101,37 @@ code { display: flex; justify-content: flex-start; align-items: center; - padding: 0 1rem; .site-logo { + display: flex; + align-items: center; + justify-content: space-between; + width: 215px; + padding-left: 1rem; .navbar-brand { font-size: 1rem; + background-size: cover; + background-repeat: no-repeat; + width: 32px; + height: 32px; + text-indent: -9999em; + display: inline-block; padding: 0; margin: 0; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - span { - text-transform: uppercase; - font-size: 0.8rem; - color: $gray-850; + } + span { + &:nth-child(2) { + width: 1px; + background: $gray-700; + height: 32px; + } + &:nth-child(3) { + font-size: 1.25rem; + color: darken($gray-850, 5%); + font-weight: bold; + justify-self: flex-end; } } - img { - width: 7rem; - height: 1.5rem; - } + } } .docs-top-utilities { @@ -110,9 +140,12 @@ code { margin: 0; width: 25%; li { - margin: 0; + margin: 0 1rem; width: auto; height: auto; + a { + color: $gray-850; + } } .version-select { display: flex; @@ -123,21 +156,29 @@ code { line-height: 1; color: $gray-800; label { - font-size: 0.7rem; + font-size: 0.75rem; margin: 0 0.5rem; - color: $gray-900; + color: $gray-800; + text-transform: uppercase; } select { appearance: none; border: 0; color: $gray-800; - background: none; + background: $theme-color-primary; + border-radius: 100px; + color: #fff; + padding: 0.25rem 1rem 0.25rem 0.5rem; + width: 62px; padding-right: 2rem; - flex-shrink: 0; + flex-shrink: 0; + font-size: 1rem; } i { pointer-events: none; - margin-left: -1rem; + margin: 5px 0 0 -1.25rem; + color: #fff; + font-size: 0.8rem; } } } @@ -211,14 +252,23 @@ h1, h2, h3 { width: auto; left: 0; right: 0; - } - /* purgecss ignore */ - .algolia-autocomplete .ds-dropdown-menu { - min-width: 400px; + /* purgecss ignore */ + .algolia-autocomplete .ds-dropdown-menu { + min-width: 350px; + max-width: 470px; + } } .search-form { width: auto; } + .docs-logo-wrapper { + .site-logo { + width: 180px; + span:nth-child(3) { + font-size: 0.9rem; + } + } + } } code[class*="language-"], pre[class*="language-"] { @@ -229,9 +279,14 @@ code[class*="language-"], pre[class*="language-"] { background: #f5f6f8; color: #5d6778; text-shadow: none; -} -.algolia-autocomplete { - width: 100%; +} +header { + .algolia-autocomplete { + width: 100%; + .ds-dropdown-menu { + min-width: 535px; + } + } } .gatsby-highlight { margin: 2rem 0;