mobile finished

roddds · Aug 13, 2013 · cb03b2c · cb03b2c
1 parent ddd3cfb
commit cb03b2c
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 68 deletions.
diff --git a/static/css/main.css b/static/css/main.css
@@ -16,28 +16,32 @@ body {
     body .jumbotron h1 {
       font-size: 72px;
       line-height: 1; }
-  body .navlist a:hover {
-    text-decoration: none; }
-  body .navlist ul {
-    background-color: rgba(0, 0, 0, 0.4);
-    list-style: none;
-    margin: 0 auto;
-    max-width: 536px;
-    padding: 20px; }
-    body .navlist ul li {
-      padding: 10px;
-      display: inline; }
-    body .navlist ul .short {
-      padding-right: 10px;
-      padding-left: 5px; }
+  body .center {
+    text-align: center; }
+  body .navlist {
+    display: inline-block; }
+    body .navlist a:hover {
+      text-decoration: none; }
+    body .navlist ul {
+      padding: 0 20px 0 20px;
+      margin: auto;
+      background-color: rgba(0, 0, 0, 0.4);
+      list-style: none; }
+      body .navlist ul li {
+        display: inline; }
+        body .navlist ul li img {
+          padding: 20px 10px 20px 10px; }
   body .flask {
     position: fixed;
     top: 5px;
     right: 5px;
     opacity: 0.3; }
 
 @media all and (max-width: 699px) {
-  body ul li {
-    margin: auto; }
-    body ul li img {
-      width: 50px; } }
+  body {
+    padding-top: 10%; }
+    body .navlist ul li img {
+      width: 20%;
+      padding: 4% 2% 4% 2%; }
+    body .flask {
+      display: none; } }
diff --git a/static/css/main.scss b/static/css/main.scss
@@ -15,31 +15,34 @@ body {
 
     /* Main marketing message and sign up button */
     .jumbotron {
-    margin: 60px 0;
-    text-align: center;
-        h1 {
-        font-size: 72px;
-        line-height: 1;
-        }
+        margin: 60px 0;
+        text-align: center;
+            h1 {
+            font-size: 72px;
+            line-height: 1;
+            }
+    }
+
+    .center {
+        text-align: center;
     }
 
     .navlist {
+        // width: 90%;
+        display: inline-block;
         a:hover {
             text-decoration: none;
         }
         ul {
+            padding: 0 20px 0 20px;
+            margin: auto;
             background-color: rgba(0, 0, 0, 0.4);
             list-style: none;
-            margin: 0 auto;
-            max-width: 536px;
-            padding: 20px;
             li {
-                padding: 10px;
                 display:inline;
-            }
-            .short {
-                padding-right: 10px;
-                padding-left: 5px;
+                img {
+                    padding: 20px 10px 20px 10px;
+                }
             }
         }
     }
@@ -53,15 +56,20 @@ body {
 }
 
 @media all and (max-width: 699px) {
-  body {
-        ul {
-
-            li {
-                margin: auto;
-                img {
-                    width: 50px;
+    body {
+        padding-top: 10%;
+        .navlist {
+            ul {
+                li {
+                    img {
+                        width: 20%;
+                        padding: 4% 2% 4% 2%;
+                    }
                 }
             }
         }
-  }
+        .flask {
+            display: none;
+        }
+    }
 }
diff --git a/templates/main.html b/templates/main.html
@@ -43,36 +43,38 @@ <h1>Rodrigo Deodoro</h1>
       </div>
 
       <hr>
+
+    <div class="center">
+        <span class="navlist">
+            <ul>
+                <li>
+                    <a href="mailto:[email protected]">
+                        <img src="/static/img/gmail.png" alt="logo gmail" title="email">
+                    </a>
+                </li>
+
+                <li>
+                    <a href="http://facebook.com/thisisrod">
+                        <img src="/static/img/facebook.png" alt="logo facebook" title="facebook">
+                    </a>
+                </li>
+
+                <li>
+                    <a href="http://www.linkedin.com/profile/view?id=46681796">
+                        <img src="/static/img/linkedin.png" alt="logo linkedin" title="linkedin">
+                    </a>
+                </li>
+
+                <li>
+                    <a href="https://github.com/roddds">
+                        <img src="/static/img/github.png" alt="logo github" title="github">
+                    </a>
+                </li>
+            </ul>
+        </span>
+    </div>
 
     </div> <!-- /container -->
-
-    <div class="navlist">
-    <ul>
-        <li class="short">
-            <a href="mailto:[email protected]">
-                <img src="/static/img/gmail.png" alt="logo gmail" title="email">
-            </a>
-        </li>
-
-        <li>
-            <a href="http://facebook.com/thisisrod">
-                <img src="/static/img/facebook.png" alt="logo facebook" title="facebook">
-            </a>
-        </li>
-
-        <li>
-            <a href="http://www.linkedin.com/profile/view?id=46681796">
-                <img src="/static/img/linkedin.png" alt="logo linkedin" title="linkedin">
-            </a>
-        </li>
-
-        <li>
-            <a href="https://github.com/roddds">
-                <img src="/static/img/github.png" alt="logo github" title="github">
-            </a>
-        </li>
-    </ul>
-    </div>
 
     </body>