Merge pull request #106 from satanas/empezando_responsive

Empezando a hacer la página responsive (de verdad)

Author: nhomar

.gitignore

@@ -37,3 +37,5 @@ nosetests.xml
 =======
 # -*- mode: gitignore; -*-
 *~
+
+.DS_Store

assets/css/style.css

@@ -40,25 +40,29 @@ h1, h2, h3, h4, h5, h6 {
     font-weight: 700;
 }
 
-p { 
-    padding: 0; 
-    margin-bottom: 12px; 
+h5 {
+  font-size: 1.7rem;
+}
+
+p {
+    padding: 0;
+    margin-bottom: 12px;
     font-family: 'Lato', sans-serif;
     font-weight: 400;
     line-height: 24px;
-    color: #1c212b; 
-    margin-top: 10px; 
+    color: #1c212b;
+    margin-top: 10px;
 }
 
 img {
     height: auto;
     max-width: 100%;
 }
 
-a { 
+a {
     padding: 0;
     margin: 0;
-    text-decoration: none; 
+    text-decoration: none;
     -webkit-transition: background-color .4s linear, color .4s linear;
     -moz-transition: background-color .4s linear, color .4s linear;
     -o-transition: background-color .4s linear, color .4s linear;
@@ -98,7 +102,7 @@ a:focus {
 .navbar-brand {
     font-family: 'Flux', sans-serif;
     font-weight: 900;
-    font-size: 75px;
+    font-size: 6rem;
 }
 
 .navbar-header .navbar-brand {
@@ -168,9 +172,9 @@ a:focus {
 
 #headerwrap {
     background-color: #306896;
-    padding-top: 130px;
-    padding-bottom: 20px;
     text-align: center;
+    padding-top: 3rem;
+    padding-bottom: 3rem;
 }
 
 #headerwrap h3, h5 {
@@ -187,19 +191,36 @@ a:focus {
     margin: 0 auto;
 }
 
+#python-logo {
+    width: 270px;
+    height: 82px;
+    background-image: url('/img/python-logo.png');
+}
+
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+    #python-logo {
+        background: no-repeat center url('/img/[email protected]');
+        background-size: 270px 82px;
+    }
+}
+
 /* Features Wrap */
 #features {
     margin-top: 4em;
 }
 
 #features i {
     color: #558AB7;
-    font-size: 60px;
-    padding: 15px;
+    font-size: 6rem;
+    padding: 1rem;
 }
 
 #features .row {
-  margin-bottom: 4em;
+    margin-bottom: 4rem;
+}
+
+#features .feature {
+    margin-bottom: 1.5rem;
 }
 
 /* Footer */
@@ -234,3 +255,74 @@ footer h4 {
    background-color: #2D628D;
    border-color: #2D628D;
 }
+
+#pyve-logo {
+  height: 60px;
+}
+
+
+
+/* Dejemos los media queries al final para que pueda sobreescribir cualquier otro atributo
+ * definido previamente – Wil
+ */
+
+/* Extra small devices (less than 768px) */
+@media only screen and (max-width: 767px) {
+    body {
+        font-size: 0.7rem;
+    }
+    h1 {
+      font-size: 2.2rem;
+    }
+    h5 {
+      font-size: 1.3rem;
+    }
+    #headerwrap {
+        padding: 1.5rem 0;
+    }
+    .navbar-brand {
+        font-size: 4rem;
+    }
+    #features i {
+        font-size: 4rem;
+        padding: 1rem;
+    }
+    #features .feature p {
+        font-size: 1.2rem;
+    }
+}
+
+/* Small devices (tablets, 768px and up) */
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+    body {
+       font-size: 0.9rem;
+    }
+    h1 {
+      font-size: 3rem;
+    }
+    h5 {
+      font-size: 1.5rem;
+    }
+    #headerwrap {
+        padding-top: 2rem;
+        padding-bottom: 2rem;
+    }
+    .navbar-brand {
+        font-size: 5rem;
+    }
+    #features i {
+        font-size: 5rem;
+        padding: 1rem;
+    }
+    #features .feature p {
+        font-size: 1.5rem;
+    }
+}
+
+/* Medium devices (desktops, 992px and up) */
+@media only screen and (min-width: 992px) and (max-width: 1199px) {
+}
+
+/* Large devices (large desktops, 1200px and up) */
+@media only screen and (min-width: 1200px) {
+}

assets/img/python-logo.png

@@ -14,7 +14,7 @@ body:
           </div>
 
           <div class="col-lg-8 col-lg-offset-2">
-            <img src="/img/python-logo.png" class="img-responsive">
+            <div id="python-logo" class="img-responsive"></div>
           </div>
 
           <div class="col-lg-8 col-lg-offset-2">
@@ -29,55 +29,52 @@ body:
     <div id="features">
       <div class="container">
         <div class="row centered">
-          <div class="col-md-4">
+          <div class="col-xs-12 col-sm-6 col-md-4 feature">
             <i class="fa fa-book"></i>
             <h4>Recursos sobre Python</h4>
             <p>En PyVe hemos recopilado una serie de recursos que consideramos
             fundamentales al momento de desarrollar con Python.</p>
-            <p><br/><a href="https://github.com/pyve/awesome-pyve" class="btn btn-theme">Awesome PyVe</a></p>
+            <p><a href="https://github.com/pyve/awesome-pyve" class="btn btn-theme">Awesome PyVe</a></p>
           </div>
 
-          <div class="col-md-4">
+          <div class="col-xs-12 col-sm-6 col-md-4 feature">
             <i class="fa fa-envelope"></i>
             <h4>Lista de Correos</h4>
             <p>Acá encontrarás la información necesaria para suscribirte a nuestra
             lista de correos, el canal principal de comunicación de la comunidad.</p>
-            <p><br/>
-            <a href="lista-de-correos/" class="btn btn-theme">Lista de Correos</a></p>
+            <p> <a href="lista-de-correos/" class="btn btn-theme">Lista de Correos</a></p>
           </div>
 
-          <div class="col-md-4">
+          <div class="col-xs-12 col-sm-6 col-md-4 feature">
             <i class="fa fa-github"></i>
             <h4>Proyectos</h4>
             <p>Dale un vistazo a los proyectos que hemos desarrollado como comunidad o 
             que han sido desarrollados por nuestros miembros.</p>
-            <p><br/><a href="https://github.com/pyve" class="btn btn-theme">Github</a></p>
+            <p><a href="https://github.com/pyve" class="btn btn-theme">Github</a></p>
           </div>
-        </div>
 
-        <div class="row centered">
-          <div class="col-md-4">
+          <div class="col-xs-12 col-sm-6 col-md-4 feature">
             <i class="fa fa-calendar"></i>
             <h4>Eventos</h4>
             <p>Infórmate sobre las diversas actividades que llevamos a cabo para 
             la promoción del uso de Python como herramienta de desarrollo.</p>
-            <p><br/><a href="/eventos" class="btn btn-theme">Eventos</a></p>
+            <p><a href="/eventos" class="btn btn-theme">Eventos</a></p>
           </div>
 
-          <div class="col-md-4">
+          <div class="col-xs-12 col-sm-6 col-md-4 feature">
             <i class="fa fa-group"></i>
             <h4>¿Quiénes Somos?</h4>
             <p>Somos nerds y estamos orgullosos de eso. Mira los perfiles de las personas 
             que hacen vida en la comunidad de Python Venezuela.</p>
-            <p><br/><a href="#" class="btn btn-theme disabled">Miembros</a></p>
+            <p><a href="#" class="btn btn-theme disabled">Miembros</a></p>
           </div>
 
-          <div class="col-md-4">
+          <div class="col-xs-12 col-sm-6 col-md-4 feature">
             <i class="fa fa-briefcase"></i>
             <h4>Ofertas Laborales</h4>
             <p>Revisa la guía que hemos creado con recomendaciones para sacarle 
             el máximo provecho a tu oferta.</p>
-            <p><br/><a href="#" class="btn btn-theme disabled">Recomendaciones</a></p>
+            <p><a href="#" class="btn btn-theme disabled">Recomendaciones</a></p>
           </div>
         </div>
       </div><!--/container -->

assets/img/[email protected]

@@ -53,8 +53,10 @@
             <li><a href="{{'/fundacion/'|url}}" class="btn btn-theme-navbar">Fundación PyVE</a></li>
             <li><a href="{{'/contactos/'|url}}" class="active btn btn-theme-navbar">Contacto</a></li>
           </ul>
-          
-          <div class="navbar-logo"><img title="pyve Logo" src="{{'/img/pyve-logo.png'|url}}" width="90" /></div>
+
+          <div class="navbar-logo visible-md-block visible-lg-block">
+            <img id="pyve-logo" title="PyVe Logo" src="{{'/img/pyve-logo.png'|url}}" />
+          </div>
         </div><!--/.nav-collapse -->
       </div>
     </nav> 
@@ -64,7 +66,7 @@
    <footer>
       <div class="container">
         <div class="row">
-          <div class="col-lg-3">
+          <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
             <h4>Redes Sociales</h4>
             <div class="hline-w"></div>
             <p>
@@ -74,7 +76,7 @@ <h4>Redes Sociales</h4>
               Para los que prefieren <a href="https://plus.google.com/101468780661156563423">Google+</a><br/>
             </p>
           </div>
-          <div class="col-lg-3">
+          <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
             <h4>Chats y Correos</h4>
             <div class="hline-w"></div>
             <p>
@@ -84,7 +86,7 @@ <h4>Chats y Correos</h4>
               Al <a href="https://telegram.me/joinchat/BG6gzwGzSvRriv6QHXp3Mg">Telegram</a> si la cosa es ligth<br/>
             </p>
           </div>
-          <div class="col-lg-3">
+          <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
             <h4>Repositorios</h4>
             <div class="hline-w"></div>
             <p>
@@ -94,7 +96,7 @@ <h4>Repositorios</h4>
               <a href="https://github.com/pyve/materiales-eventos">Materiales de los eventos</a> realizados<br/>
             </p>
           </div>
-          <div class="col-lg-3">
+          <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
             <h4>Reclutamiento</h4>
             <div class="hline-w"></div>
             <p>