Docs: responsive header and footer

MoOx · May 23, 2016 · 45941a4 · 45941a4
1 parent f693355
commit 45941a4
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 17 deletions.
diff --git 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
@@ -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;
+  }
 }