typography tweaks & mobile fixes

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);
   }
 }

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);

src/components/Add.tsx

@@ -78,7 +78,6 @@ export default function Add() {
 
   return (
     <div className={styles.add}>
-      <h2 className={styles.title}>Add a file to IPFS</h2>
       {loading ? (
         <Spinner message={message} />
       ) : fileHash ? (

src/components/Info.mdx

@@ -1,6 +1,8 @@
 import styles from './Info.module.css'
 
-<aside className={styles.info}>
+export default ({ children }) => (
+  <aside className={styles.info}>{children}</aside>
+)
 
 ## Gateway
 
@@ -28,5 +30,3 @@ const ipfs = ipfsClient({
   protocol: 'https'
 })
 ```
-
-</aside>

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 {

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;
 }

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])
 

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);
 }

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;
 }

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';