make some things responsive

pandaproject · Oct 6, 2013 · cebf1b5 · cebf1b5
1 parent df6b3e4
commit cebf1b5
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 4 deletions.
diff --git a/about/index.html b/about/index.html
@@ -6,7 +6,7 @@
 <article>
     <div class="container">
         <header>
-            <h1>We built PANDA because&nbsp;we&nbsp;needed&nbsp;it.</h1>
+            <h1>We built PANDA because&nbsp;we needed&nbsp;it.</h1>
         </header>
 
         <section>

diff --git a/index.html b/index.html
@@ -45,7 +45,9 @@ <h2>PANDA makes data journalism easier.</h2>
 
 <article id="screencast">
     <div class="container">
-        <iframe src="http://player.vimeo.com/video/47684166?title=0&amp;byline=0&amp;portrait=0&amp;api=1&amp;player_id=video" id="video" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+        <div class="screencast-wrapper">
+            <iframe src="http://player.vimeo.com/video/47684166?title=0&amp;byline=0&amp;portrait=0&amp;api=1&amp;player_id=video" id="video" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+        </div>
     </div>
 </article>
 

diff --git a/stylesheets/main.css b/stylesheets/main.css
@@ -106,6 +106,19 @@ footer {
     background-color: #e0e0e0;
 }
 
+.screencast-wrapper {
+    position: relative;
+    padding-bottom: 56.25%; /* 16:9 */
+    height: 0;
+}
+.screencast-wrapper iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
 footer {
     padding: 3em 0 1em;
     clear:left;
@@ -262,6 +275,42 @@ ol > li:before {
 }
 
 #docs-home li a {
-    text-decoration:none;
-    font-size:.9em;
+    text-decoration: none;
+    font-size: .9em;
+}
+
+@media only screen and (max-width: 1040px) {
+    .container {
+        margin: 1.5em;
+    }
+    a.go-home {
+        margin-left: 0;
+    }
+    #hero h1 {
+        font-size: 6em;
+    }
+    header h2 {
+        font-size: 2.5em;
+    }
+}
+
+@media only screen and (max-width: 870px) {
+    body {
+        font-size: 18px;
+    }
+    #how ol {
+        padding: 0;
+    }
+}
+
+@media only screen and (max-width: 640px) {
+    body {
+        font-size: 16px;
+    }
+    #hero h1 {
+        font-size: 5em;
+    }
+    header h2 {
+        font-size: 2.2em;
+    }
 }