Now with responsive goodness

maxdjohnson · Nov 8, 2013 · d91a726 · d91a726
1 parent c6d2b17
commit d91a726
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -3,21 +3,25 @@
     <head>
         <meta charset=”utf-8”> 
         <title>Ragemas - 2013</title>
+        <meta name="viewport" content="width=device-width, minimumscale=
+1.0, maximum-scale=1.0" />
         <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.13.0/build/cssreset/cssreset-min.css">
         <!--<link rel="stylesheet" href="css/bootstrap.css"  type="text/css"/>-->
         <link href='http://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'>
         <link rel="stylesheet" href="style.css"  type="text/css"/>
     </head>
     <body>
-        <div class="container">
-            <div class="navbar-custom">
+        <div class="navbar-custom">
+            <div class="container">
                 <a class="brand" href="#"><img src="img/ragemas_img_logo.svg" alt="Ragemas" /></a>
                 <ul class="nav">
-                    <li><a href="#">The Story</a></li>
-                    <li><a href="#">Event Details</a></li>
+                    <li class="story"><a href="#">The Story</a></li>
+                    <li class="details"><a href="#">Event Details</a></li>
                     <li class="join"><a href="#">Join</a></li>
                 </ul>
             </div>
+        </div>
+        <div class="container">
             <div class="row">
                 <div class="col60">
                     <img class="tagline" src="img/ragemas_img_tagline.svg" alt="Naughty Meets Nice" />

diff --git a/style.css b/style.css
@@ -1,6 +1,13 @@
 html, body {
     margin: 0;
     padding: 0;
+}
+
+body {
+    background-color: rgba(26, 30, 35, 1.0);
+    background-image: url(img/ragemas_img_bg.jpg);
+    background-size: 100% auto;
+    background-repeat: no-repeat;
     font-family: "Raleway";
     font-weight: 400;
     color: white;
@@ -20,19 +27,27 @@ a:active {
     color: white;
 }
 
+.top-bar {
+    background-color: rgba(0, 0, 0, 0.4);
+    height: 72px;
+    position:absolute;
+    top:0;
+    left:0;
+    right:0;
+    bottom:72px;
+    width: 100%;
+}
+
 .navbar-custom {
     background-color: rgba(0, 0, 0, 0.4);
     height: 72px;
 }
 
 .container {
-    background-color: rgba(26, 30, 35, 1.0);
-    background-image: url(img/ragemas_img_bg.jpg);
-    background-size: 100% auto;
-    background-repeat: no-repeat;
     width: 100%;
-    margin: 0;
-    padding: 0;
+    max-width: 1280px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .brand {
@@ -59,6 +74,7 @@ a:active {
     line-height: 72px;
     padding-left: 16px;
     padding-right: 32px;
+    font-size: 12pt;
 }
 
 .nav li.join a {
@@ -82,6 +98,7 @@ a:active {
 .tagline {
     display: block;
     width: 580px;
+    max-width: 80%;
     margin-left: auto;
     margin-right: auto;
     margin-top: 88px;
@@ -138,7 +155,12 @@ a:active {
 .footer {
     padding-top: 80px;
     text-align: center;
-    padding-bottom: 40px;
+    padding-bottom: 20px;
+}
+
+.footer p {
+    color: lightgrey;
+    padding-bottom: 20px;
 }
 
 .btn-join {
@@ -218,6 +240,28 @@ a:active {
     padding-right: 30px;
 } 
 
+@media only screen and (max-width: 767px) {
+    .col60 {
+        width: 100%;
+        float: none;
+    }
+    .tagline {
+        margin-top: 60px;
+    }
+    .col40 {
+        width: 100%;
+        float: none;
+    }
+    .container-promo {
+        margin-top: 60px;
+    }
+}
+@media only screen and (max-width: 510px) {
+    li.story, li.details {
+        display: none;
+    }
+}
+
 
 /*