Add BasicNarrow layout

BasicNarrow behaves like basic, but the spacing is narrower. This is
best for login screens.

src/index.ts

@@ -1,4 +1,5 @@
 export * as Basic from './layouts/Basic'
+export * as BasicNarrow from './layouts/BasicNarrow'
 export * as LeftSidebarWithMenu from './layouts/LeftSidebarWithMenu'
 export * as LeftSidebar from './layouts/LeftSidebar'
 export * as RightSidebarStatic from './layouts/RightSidebarStatic'

src/layouts/BasicNarrow/index.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react'
+import styled, { createGlobalStyle } from 'styled-components'
+import TopBar from '../../widgets/TopBar'
+import {configVar, loadConfig} from '../../utilities/helpers'
+
+const Config = createGlobalStyle({
+	...loadConfig(),
+})
+
+const ContentBase = styled('main')({
+	boxSizing: 'border-box',
+})
+
+export const ContentContainer = styled('div')({
+	padding: '0 1rem',
+	boxSizing: 'border-box',
+	margin: '0 auto',
+	maxWidth: configVar('base-width'),
+	width: '100%',
+})
+
+type Props = {
+	brand?: React.ReactNode,
+	userLink?: React.ReactNode,
+	topBarCenter?: React.ReactChild,
+}
+
+export const Layout: React.FC<Props> = ({
+	brand,
+	userLink,
+	topBarCenter,
+	children,
+}) => {
+	return (
+		<>
+			<Config />
+			<TopBar
+				brand={brand}
+				userLink={userLink}
+			>
+				{topBarCenter}
+			</TopBar>
+			<ContentBase>
+				{children}
+			</ContentBase>
+		</>
+	)
+}