Fix intro to fit full height

SpectraHackathon · Apr 4, 2016 · 3b35ae4 · 3b35ae4
1 parent 720cb0c
commit 3b35ae4
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 27 deletions.
diff --git a/css/main.css b/css/main.css
@@ -1,6 +1,8 @@
-body {
+body, html {
   font-family: 'Roboto', sans-serif;
   font-weight: 100;
+  height: 100%;
+  width: 100%;
 }
 
 
@@ -34,35 +36,24 @@ body {
 
 /* LOGO */
 
-.jumbotron {
+.intro {
+  display: table;
   background: url('../images/spectra-background.jpg');
-  height: 400px;
-}
-
-.jumbotron img {
-  margin-top: 100px;
+  background-size: cover;
+  height: 75%;
+  width: 100%;
 }
 
 /* Small */
 @media screen and (min-width: 768px) {
-  .jumbotron {
-    height: 500px;
-  }
-
-  .jumbotron img {
-    margin-top: 125px;
+  .intro {
+    height: 100%;
   }
 }
 
-/* Medium */
-@media screen and (min-width: 992px) {
-  .jumbotron {
-    height: 700px;
-  }
-
-  .jumbotron img {
-    margin-top: 150px;
-  }
+.intro-body {
+  display: table-cell;
+  vertical-align: middle;
 }
 
 
@@ -177,6 +168,7 @@ footer a {
 
 .social-icons a {
   font-size: 30px;
+  text-decoration: none !important;
 }
 
 /* Small */

diff --git a/index.html b/index.html
@@ -45,11 +45,13 @@
       </div>
     </nav>
 
-    <header class="jumbotron">
-      <div class="container">
-        <div class="row row-header">
-          <div class="col-xs-12">
-            <img class="img-responsive" src="./images/spectra-logo.png" />
+    <header class="intro">
+      <div class="intro-body">
+        <div class="container">
+          <div class="row row-header">
+            <div class="col-xs-12">
+              <img class="img-responsive" src="./images/spectra-logo.png" />
+            </div>
           </div>
         </div>
       </div>