From 6065dc8c302a078ab7914af49fd3d5a00983f14d Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 18 Oct 2019 13:40:14 +0200
Subject: [PATCH] layout tweaks

---
 README.md                      | 5 +++--
 src/Layout.module.css          | 1 +
 src/components/Info.module.css | 4 ++++
 src/pages/index.module.css     | 7 +++----
 src/styles/global.css          | 8 --------
 5 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index 82d81bc..ea21571 100644
--- a/README.md
+++ b/README.md
@@ -5,8 +5,9 @@
 > 👩🏽‍🚀 Ocean Protocol's public IPFS node & gateway.
 > [ipfs.oceanprotocol.com](https://ipfs.oceanprotocol.com)
 
-[![Build Status](https://travis-ci.com/oceanprotocol/ipfs.svg?branch=master)](https://travis-ci.com/oceanprotocol/ipfs)
-[![js oceanprotocol](https://img.shields.io/badge/js-oceanprotocol-7b1173.svg)](https://github.com/oceanprotocol/eslint-config-oceanprotocol)
+[![Build Status](https://flat.badgen.net/travis/oceanprotocol/ipfs?icon=travis)](https://travis-ci.com/oceanprotocol/ipfs)
+[![Now deployment](https://flat.badgen.net/badge/now/auto-deployment/21c4dd?icon=now)](https://zeit.co/oceanprotocol/ipfs)
+[![js oceanprotocol](https://flat.badgen.net/badge/js/oceanprotocol/7b1173)](https://github.com/oceanprotocol/eslint-config-oceanprotocol)
 
 This repo holds a simple React app built with [Next.js](https://nextjs.org) serving as the frontpage of [ipfs.oceanprotocol.com](https://ipfs.oceanprotocol.com) from where you can add files to IPFS via drag and drop.
 
diff --git a/src/Layout.module.css b/src/Layout.module.css
index 1b81cd8..e567a25 100644
--- a/src/Layout.module.css
+++ b/src/Layout.module.css
@@ -7,6 +7,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
+  min-height: calc(100vh - (var(--spacer) * 2));
 }
 
 @media screen and (min-width: 640px) {
diff --git a/src/components/Info.module.css b/src/components/Info.module.css
index 352c6bd..03f7369 100644
--- a/src/components/Info.module.css
+++ b/src/components/Info.module.css
@@ -9,3 +9,7 @@
   font-size: var(--font-size-large);
   color: var(--brand-grey-light);
 }
+
+.info code {
+  font-size: 90%;
+}
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 988071d..31c9968 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -9,20 +9,19 @@
 
 @media screen and (min-width: 1140px) {
   .grid {
-    max-width: 70rem;
+    max-width: 75rem;
     text-align: left;
     grid-template-columns: 2fr 1fr;
   }
 
   .grid > aside {
-    margin-top: calc(var(--spacer) * 2);
+    margin-top: calc(var(--spacer) * 3);
   }
 }
 
 .header {
   width: 100%;
-  max-width: 40rem;
-  margin: 0 auto calc(var(--spacer) * 2) auto;
+  margin-bottom: calc(var(--spacer) * 2);
 }
 
 .header svg {
diff --git a/src/styles/global.css b/src/styles/global.css
index 1beb6c9..78f94a7 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,14 +1,6 @@
 @import '_variables.css';
 
-html,
-body,
-#__next {
-  height: 100%;
-  max-height: calc(100vh - (var(--page-frame) * 2));
-}
-
 html {
-  height: 100%;
   font-size: var(--font-size-root);
 }