From 45941a48ba39b796b229f2c56de276144ab9a08d Mon Sep 17 00:00:00 2001
From: Maxime Thirouin <m@moox.io>
Date: Mon, 23 May 2016 09:03:19 +0200
Subject: [PATCH] Docs: responsive header and footer

---
 docs/web_modules/Footer/index.css |  7 ++++++
 docs/web_modules/Header/index.css | 42 ++++++++++++++++++-------------
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/docs/web_modules/Footer/index.css b/docs/web_modules/Footer/index.css
index 8c635be47..a9c1cebbe 100644
--- a/docs/web_modules/Footer/index.css
+++ b/docs/web_modules/Footer/index.css
@@ -1,6 +1,7 @@
 .footer {
   margin-top: 2rem;
   text-align: center;
+  line-height: 3rem;
 }
 
 .link {
@@ -15,4 +16,10 @@
 .separator {
   padding: 1rem;
   color: color(#fff a(0.4));
+
+  @media (width < 60rem) {
+    display: block;
+    height: 1px;
+    opacity: 0;
+  }
 }
diff --git a/docs/web_modules/Header/index.css b/docs/web_modules/Header/index.css
index 05257854b..c248bc5f2 100644
--- a/docs/web_modules/Header/index.css
+++ b/docs/web_modules/Header/index.css
@@ -11,23 +11,21 @@
 .header :global .SVGInline-svg { vertical-align: middle; }
 
 .nav {
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
-  justify-content: space-between;
-  flex-wrap: wrap;
+  @media (width >= 60rem) {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
 }
 
 .logo {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  width: 12rem;
-  margin-right: 2rem;
+  text-align: center;
 }
 
 .logoLink {
+  max-width: 12rem;
   display: inline-flex;
 }
 
@@ -36,6 +34,8 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
 }
 
 .link {
@@ -60,13 +60,21 @@
 }
 
 .version {
+  font-size: 0.8rem;
+  text-decoration: none;
+  color: #08b09b;
+
+  display: inline-flex;
+
   position: absolute;
-  top: 6rem;
+  top: 1rem;
   right: 1rem;
-  padding: 1rem;
 
-  color: #fff;
-  opacity: 0.5;
-  font-size: 0.8rem;
-  text-decoration: none;
+  @media (width >= 60rem) {
+    top: 5rem;
+    padding: 1rem;
+
+    color: #fff;
+    opacity: 0.5;
+  }
 }