From fe8330ef6319e9abe6429d299ae92a893ab3c3b4 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 18 Oct 2019 15:31:24 +0200 Subject: [PATCH] typography tweaks & mobile fixes --- src/Layout.module.css | 8 +++--- src/components/Add.module.css | 8 ------ src/components/Add.tsx | 1 - src/components/Info.mdx | 6 ++--- src/components/Info.module.css | 7 +++++- src/components/Spinner.module.css | 2 +- src/hooks/use-ipfs-api.tsx | 30 +++++++++++----------- src/pages/index.module.css | 12 ++++++--- src/styles/_code.css | 16 ++---------- src/styles/global.css | 41 +++++++++++++++++++++++++++++++ 10 files changed, 80 insertions(+), 51 deletions(-) diff --git a/src/Layout.module.css b/src/Layout.module.css index e567a25..dd93ecd 100644 --- a/src/Layout.module.css +++ b/src/Layout.module.css @@ -3,17 +3,17 @@ .app { padding: var(--spacer); background: var(--brand-black); - height: 100%; display: flex; flex-wrap: wrap; justify-content: center; - min-height: calc(100vh - (var(--spacer) * 2)); + min-height: 100vh; } @media screen and (min-width: 640px) { .app { - padding: var(--spacer) calc(var(--spacer) * 2); + padding: calc(var(--spacer) * 2); + padding-bottom: var(--spacer); height: auto; - min-height: calc(100vh - (var(--page-frame) * 2) - (var(--spacer) * 2)); + min-height: calc(100vh - var(--page-frame) * 2); } } diff --git a/src/components/Add.module.css b/src/components/Add.module.css index 1dbf320..58bf6bb 100644 --- a/src/components/Add.module.css +++ b/src/components/Add.module.css @@ -7,14 +7,6 @@ word-break: break-all; } -.title { - font-size: var(--font-size-base); - color: var(--brand-grey-lighter); - margin-bottom: calc(var(--spacer) / 2); - margin-top: 0; - text-align: left; -} - .error { font-size: var(--font-size-small); color: var(--red); diff --git a/src/components/Add.tsx b/src/components/Add.tsx index 4f45aef..36f01a4 100644 --- a/src/components/Add.tsx +++ b/src/components/Add.tsx @@ -78,7 +78,6 @@ export default function Add() { return (
-

Add a file to IPFS

{loading ? ( ) : fileHash ? ( diff --git a/src/components/Info.mdx b/src/components/Info.mdx index cb04400..dae7dc3 100644 --- a/src/components/Info.mdx +++ b/src/components/Info.mdx @@ -1,6 +1,8 @@ import styles from './Info.module.css' - diff --git a/src/components/Info.module.css b/src/components/Info.module.css index 03f7369..df0fb26 100644 --- a/src/components/Info.module.css +++ b/src/components/Info.module.css @@ -3,11 +3,16 @@ .info { font-size: var(--font-size-small); text-align: left; + opacity: 0.8; + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-word; } .info h2 { - font-size: var(--font-size-large); + font-size: var(--font-size-base); color: var(--brand-grey-light); + margin-top: var(--spacer); } .info code { diff --git a/src/components/Spinner.module.css b/src/components/Spinner.module.css index c8eafe3..d92db25 100644 --- a/src/components/Spinner.module.css +++ b/src/components/Spinner.module.css @@ -3,7 +3,7 @@ .spinner { position: relative; text-align: center; - margin-top: calc(var(--spacer) * var(--line-height)); + margin-top: calc(var(--spacer) * 4); margin-bottom: calc(var(--spacer) / 2); line-height: 1.3; } diff --git a/src/hooks/use-ipfs-api.tsx b/src/hooks/use-ipfs-api.tsx index 0ce0ae7..dff85d2 100644 --- a/src/hooks/use-ipfs-api.tsx +++ b/src/hooks/use-ipfs-api.tsx @@ -14,22 +14,22 @@ export default function useIpfsApi(config: IpfsConfig) { const [isIpfsReady, setIpfsReady] = useState(Boolean(ipfs)) const [ipfsError, setIpfsError] = useState('') - async function initIpfs() { - if (ipfs !== null) return - // eslint-disable-next-line - ipfs = await ipfsClient(config) - - try { - const version = await ipfs.version() - ipfsVersion = version.version - } catch (error) { - setIpfsError(`IPFS connection error: ${error.message}`) - return - } - setIpfsReady(Boolean(await ipfs.id())) - } - useEffect(() => { + async function initIpfs() { + if (ipfs !== null) return + // eslint-disable-next-line + ipfs = await ipfsClient(config) + + try { + const version = await ipfs.version() + ipfsVersion = version.version + } catch (error) { + setIpfsError(`IPFS connection error: ${error.message}`) + return + } + setIpfsReady(Boolean(await ipfs.id())) + } + initIpfs() }, [config]) diff --git a/src/pages/index.module.css b/src/pages/index.module.css index 31c9968..5dc48d2 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -4,23 +4,22 @@ display: grid; gap: calc(var(--spacer) * 3); max-width: 40rem; - margin: calc(var(--spacer) * 2) auto var(--spacer) auto; + margin-top: calc(var(--spacer) * 2) auto var(--spacer) auto; } @media screen and (min-width: 1140px) { .grid { - max-width: 75rem; + max-width: 70rem; text-align: left; grid-template-columns: 2fr 1fr; } .grid > aside { - margin-top: calc(var(--spacer) * 3); + margin-top: calc(var(--spacer) * var(--line-height)); } } .header { - width: 100%; margin-bottom: calc(var(--spacer) * 2); } @@ -32,6 +31,7 @@ @media screen and (min-width: 1140px) { .header svg { margin-left: 0; + margin-right: 0; } } @@ -46,7 +46,11 @@ } } +.header a, .description { font-size: var(--font-size-large); +} + +.description { color: var(--brand-grey-lighter); } diff --git a/src/styles/_code.css b/src/styles/_code.css index 8218021..bf1093e 100644 --- a/src/styles/_code.css +++ b/src/styles/_code.css @@ -17,24 +17,12 @@ pre { display: block; margin: calc(var(--spacer) / 2) 0; padding: 0; - position: relative; border: 1px solid var(--brand-grey-dark); border-radius: var(--border-radius); - - overflow: auto; - -webkit-overflow-scrolling: touch; - max-height: 800px; - width: 100%; } pre code { - background: none; - padding: calc(var(--spacer) / 1.5); - white-space: pre; + padding: calc(var(--spacer) / 2); display: block; - overflow-wrap: normal; - word-wrap: normal; - word-break: normal; - float: left; - width: 100%; + white-space: pre-wrap; } diff --git a/src/styles/global.css b/src/styles/global.css index 78f94a7..ef03267 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,5 +1,19 @@ @import '_variables.css'; +*, +*:before, +*:after { + box-sizing: border-box; +} + +html, +body { + width: 100%; + height: 100%; + margin: 0; + padding: 0; +} + html { font-size: var(--font-size-root); } @@ -80,4 +94,31 @@ picture { display: block; } +ul { + margin-top: 0; + margin-bottom: calc(var(--spacer) / var(--line-height)); + padding-left: 0; + list-style: none; + padding-left: calc(var(--spacer) / var(--line-height)); +} + +ul li { + position: relative; + display: block; + margin-bottom: 0; +} + +ul li + li { + margin-top: calc(var(--spacer) / 4); +} + +ul li:before { + content: ' \25AA'; + top: -2px; + position: absolute; + left: -1rem; + color: var(--brand-grey-light); + user-select: none; +} + @import '_code.css';