From eac7fd285587ffdf313742e91146f8556e1dcaed Mon Sep 17 00:00:00 2001
From: Marcel Klehr <mklehr@gmx.net>
Date: Tue, 7 Aug 2012 08:29:58 +0200
Subject: [PATCH] Add responsive layout.

---
 css/index.css | 124 ++++++++++++++++++++++++++++++++++++++++++++++++--
 index.html    |   6 +--
 2 files changed, 121 insertions(+), 9 deletions(-)

diff --git a/css/index.css b/css/index.css
index 936bdeb12..330f3ce7f 100644
--- a/css/index.css
+++ b/css/index.css
@@ -39,7 +39,7 @@ h6 {
 /* middling everything */
 
 .wrap {
-  width: 1008px;
+  width: 25.5cm;
   margin: 0 auto;
   position: relative;
 }
@@ -77,11 +77,10 @@ div#header div#nav {
 }
 div#header div#nav li {
   display: inline-block;
-  margin: 0 8px;
 }
 div#header div#nav li a,
 div#header div#nav li a:active {
-  -moz-transition: all 0.25s linear 0s;
+  -moz-transition: color 0.25s linear 0s;
   color: #fff;
   font-size: 0.6cm;
   line-height: 55px;
@@ -106,7 +105,7 @@ div#downloadbutton {
   width: 7cm;
   padding: 8px 25px;
   margin: 0 15px 0 0;
-  -moz-transition: all 0.25s linear 0s;
+  -moz-transition: background-color 0.25s linear 0s;
   background-color: #272;
   color: #fff;
   font-size: 12px;
@@ -169,6 +168,13 @@ div.showcase h1 {
   color: #000;
 }
 
+div.showcase .feature  {
+  float:left;
+  margin: 0 15px 10px 0;
+  width: 420px;
+  height: 235px;
+}
+
 
 /* links */
 
@@ -210,4 +216,112 @@ div#footer {
   padding-bottom: 40px;
   padding-top: 60px;
   text-align: center;
-}
\ No newline at end of file
+}
+
+/*
+-------------------------
+*/
+
+@media screen and (min-width: 35cm) {
+  .wrap {
+    width: 35cm;
+  }
+  
+  div#header div#nav li a,
+  div#header div#nav li a:active {
+    font-size: 0.6cm;
+  }
+  
+  div.showcase .feature  {
+    width: 600px;
+    height: 350px;
+  }
+}
+
+@media screen and (max-width: 26cm) {
+  .wrap {
+    width: 18cm;
+  }
+  
+  div#header div#nav li a,
+  div#header div#nav li a:active {
+    font-size: 0.5cm;
+    padding: 16px;
+  }
+  
+  div.showcase .feature  {
+    width: 310px;
+    height: 215px;
+  }
+}
+
+@media screen and (max-width: 18.5cm) {
+  .wrap {
+    width: 15cm;
+  }
+  
+  div#header div#nav li a,
+  div#header div#nav li a:active {
+    font-size: 0.45cm;
+    padding: 10px;
+  }
+  
+  div.showcase h1 {
+    font-size: 0.7cm;
+  }
+  
+  div.showcase .feature  {
+    width: 300px;
+    height: 200px;
+  }
+  
+  div#downloadbutton a,
+  div#downloadbutton a:active {
+    font-size: 0.6cm;
+  }
+  div#downloadbutton {
+    width: 6.5cm;
+    margin-bottom: 10px;
+  }
+}
+
+@media screen and (max-width: 15.5cm) {
+  .wrap {
+    width: 8cm;
+  }
+  
+  div#header {
+    height: 195px;
+  }
+  
+  a.scroll-point {
+    top: -180px;
+  }
+  
+  div#header + * {
+  padding-top: 210px !important;
+}
+  
+  div#header div#nav{
+    padding-top: 0;
+  }
+  
+  div#header div#nav li a,
+  div#header div#nav li a:active {
+    font-size: 0.45cm;
+    padding: 10px;
+  }
+  
+  div.showcase div#downloadbutton {
+    float: left;
+    margin-left: 0;
+  }
+  div#downloadbutton {
+    width: 6.5cm;
+  }
+  
+  ul.links li {
+    width: 8cm;
+  }
+}
+
diff --git a/index.html b/index.html
index b10ad35bd..a699cadd9 100644
--- a/index.html
+++ b/index.html
@@ -42,9 +42,7 @@ This iconic web font was used extensively around the site.
   </div>
   <div class="content showcase">
     <div class="wrap">
-      <div style="margin: 0 15px 10px 0; float:left;">
-        <iframe width="420" height="235" src="https://www.youtube-nocookie.com/embed/X_SO7K6ef6g?rel=0" frameborder="0" allowfullscreen></iframe>
-      </div>
+      <iframe class="feature" src="https://www.youtube-nocookie.com/embed/X_SO7K6ef6g?rel=0" frameborder="0" allowfullscreen></iframe>
       <h1><strong>Etherpad</strong> is an <strong>Open Source</strong> online editor providing collaborative editing in really <strong>real-time</strong> powered by <strong>Node.js</strong></h1>
       <div id="downloadbutton"><a href="#download"><i class="icon-download-alt"></i>DOWNLOAD</a><br/><span>Version 1.1</span></div>
     </div>
@@ -98,7 +96,7 @@ This iconic web font was used extensively around the site.
   </div>
   
   <div id="footer" class="wrap">
-    <p>Copyright © 2012 The Etherpad Foundation | Design by Marcel Klehr</p>
+    <p>Copyright&nbsp;©&nbsp;2012&nbsp;The&nbsp;Etherpad&nbsp;Foundation | Design by Marcel Klehr</p>
   </div>
 </body>
 </html>
\ No newline at end of file