Revision General de Detalles

LuisValladaresC · Jan 21, 2019 · 9e6c1c1 · 9e6c1c1
1 parent b52111a
commit 9e6c1c1
Show file tree

Hide file tree

Showing 14 changed files with 195 additions and 171 deletions.
diff --git a/assets/images/movi/movie.jpg b/assets/images/movi/movie.jpg
diff --git a/css/generales.css b/css/generales.css
@@ -11,5 +11,5 @@ body {
 }
 
 .container {
-    min-width: 320px;
+    min-width: 350px;
 }
diff --git a/css/instagram.css b/css/instagram.css
@@ -43,18 +43,16 @@
                 height: 100%;
                 font-weight: 600;
 
-                display: grid;
-                grid-template: 100% / auto 30px auto;
+                display: flex;
+                justify-content: center;
                 align-items: center;
             }
             .instagram-capa-texto:hover {
                 color: white;
             }
-            .instagram-capa-texto span:first-child {
-                justify-self: self-end;
-            }
-            .instagram-capa-texto span:last-child {
-                grid-column-start: 3;
+
+            .instagram-capa-texto span {
+                margin: 0 15px;
             }
 
 /* ----- MEDIA QUERIES ----- */
@@ -63,23 +61,15 @@
 
     .instagram-grilla {
         grid-gap: 3px;
-        padding: 6px 0;
+        padding: 10px 5px;
     }
 
-    .instagram-capa-texto:hover {
-        grid-template: 1fr 1fr / 100%;
-        align-items: initial;
-        justify-items: center;
+    .instagram-capa-texto {
+        flex-direction: column
     }
 
-    .instagram-capa-texto span:first-child {
-        justify-self: initial;
-        align-self: flex-end;
-        margin-bottom: 3px
-    }
-    .instagram-capa-texto span:last-child {
-        grid-column-start: initial;
-        margin-top: 3px;
+    .instagram-capa-texto span {
+        margin: 1px 0;
     }
 }
 

diff --git a/css/movies.css b/css/movies.css
@@ -7,18 +7,18 @@
     margin: 0 auto;
 
     display: grid;
-    grid-template: auto auto / 90px auto;
-    grid-template-areas: "navbar peliculas" "navbar peliculas";
+    grid-template: calc(100vh - 65px) / 90px 1fr;
+    grid-template-areas: "navbar peliculas";
 }
 
 
     .movies-navbar {
-        grid-area: navbar;
-        height: calc(100vh - 65px);
+        height: 100%;
         background-color: #b63f3f;
         padding: 7px 0;
         box-sizing: border-box;
 
+        grid-area: navbar;
         display: grid;
         grid-template-rows: 90px 90px 90px 1fr 90px;
     }
@@ -49,15 +49,15 @@
             }
 
     .movies-peliculas {
-        grid-area: peliculas;
-        height: calc(100vh - 65px);
-        padding-left: 15px;
+        height: 100%;
+        margin: 0 15px;
         padding-bottom: 20px;
         box-sizing: border-box;
-
-        display: grid;
-        grid-template-rows: repeat(3, minmax(auto, 60px) minmax(213px, auto));
         overflow: auto;
+
+        grid-area: peliculas;
+        display: grid;
+        grid-template-rows: repeat(3, minmax(min-content, 60px) minmax(min-content, 225px));
     }
 
         .peliculas-titulo {
@@ -68,15 +68,13 @@
         }
 
         .peliculas-seccion {
-            padding-right: 15px;
-
             display: grid;
             grid-auto-flow: column;
             grid-auto-columns: 320px;
             column-gap: 40px;
         }
 
-            .pelicula-contenedor-imagen {
+            .pelicula-contenedor {
                 margin: 0;
                 position: relative;
                 cursor: pointer;
@@ -114,13 +112,12 @@
 @media screen and (max-width: 768px) {
 
     .movies-grilla {
-        grid-template: auto 55px / 55px auto;
-        grid-template-areas: "peliculas peliculas" "navbar navbar"
+        grid-template: calc(100vh - 110px) 55px / 1fr;
+        grid-template-areas: "peliculas" "navbar"
     }
 
         .movies-navbar {
-            height: 55px;
-            grid-template: 100% / 1fr 1fr 1fr 1fr;
+            grid-template: 100% / repeat(4, 1fr);
             padding: 0;
         }
         .movies-navbar-link:last-of-type {
@@ -135,10 +132,10 @@
             }
 
         .movies-peliculas {
-            height: calc(100vh - 110px);
-            padding-left: 5px;
+            margin: 0 5px;
             padding-bottom: 10px;
-            grid-template-rows: repeat(3, minmax(auto, 60px) minmax(199px, auto));
+
+            grid-template-rows: repeat(3, minmax(min-content, 50px) minmax(min-content, 210px));
         }
 
             .peliculas-titulo {
@@ -169,11 +166,10 @@
 @media screen and (max-width: 480px) {
 
     .movies-grilla {
-        grid-template: auto 45px / 45px auto;
+        grid-template: calc(100vh - 90px) 45px / 1fr;
     }
 
         .movies-navbar {
-            height: 45px;
             border-top: solid 1.5px #cecece;
             box-sizing: border-box;
         }
@@ -186,9 +182,9 @@
             }
 
         .movies-peliculas {
-            height: calc(100vh - 90px);
             padding-bottom: 5px;
-            grid-template-rows: repeat(3, minmax(auto, 60px) minmax(186px, auto));
+
+            grid-template-rows: repeat(3, minmax(min-content, 40px) minmax(min-content, 200px));
         }
 
             .peliculas-titulo {
@@ -199,7 +195,6 @@
             }
 
             .peliculas-seccion {
-                padding-left: 5px;
                 grid-auto-columns: 280px;
                 column-gap: 10px;
             }

diff --git a/css/navbar.css b/css/navbar.css
@@ -4,16 +4,17 @@
 
 header {
     background-color: #343a40;
+    box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.6);
 }
 
 .navbar {
-    max-width: 1024px;
+    max-width: 1050px;
     height: 65px;
     margin: 0 auto;
     background-color: #343a40;
 
     display: grid;
-    grid-template-columns: 3fr 2fr; 
+    grid-template-columns: auto 1fr; 
     align-items: center;
 
 }
@@ -51,6 +52,9 @@ header {
             .elemento-lista .enlace:hover {
                 color: #c9ccbe;
             }
+            .enlace-activo {
+                color: white !important;
+            }
 
 /* ----- MEDIA QUERIES ----- */
 
@@ -61,11 +65,11 @@ header {
     }
 
         .navbar-titulo {
-            font-size: 1.4em;
+            font-size: 1.45em;
         }
 
             .elemento-lista .enlace {
-                font-size: 0.9em;
+                font-size: 0.95em;
                 padding: 0 15px;
             } 
 }
@@ -77,11 +81,11 @@ header {
     }
 
         .navbar-titulo {
-            font-size: 1.1em;
+            font-size: 1.4em;
         }
 
             .elemento-lista .enlace {
-                font-size: 0.7em;
+                font-size: 0.9em;
                 padding: 0 10px;
             } 
 }
diff --git a/assets/images/instagram/compu.jpg → images/instagram/compu.jpg b/assets/images/instagram/compu.jpg → images/instagram/compu.jpg
diff --git a/assets/images/instagram/compu2.jpg → images/instagram/compu2.jpg b/assets/images/instagram/compu2.jpg → images/instagram/compu2.jpg
diff --git a/assets/images/instagram/compu3.jpg → images/instagram/compu3.jpg b/assets/images/instagram/compu3.jpg → images/instagram/compu3.jpg
diff --git a/images/movi/movie.jpg b/images/movi/movie.jpg
diff --git a/assets/images/pinterest/house.jpg → images/pinterest/house.jpg b/assets/images/pinterest/house.jpg → images/pinterest/house.jpg
diff --git a/assets/images/pinterest/landing.jpg → images/pinterest/landing.jpg b/assets/images/pinterest/landing.jpg → images/pinterest/landing.jpg
diff --git a/assets/images/pinterest/tshirt.jpg → images/pinterest/tshirt.jpg b/assets/images/pinterest/tshirt.jpg → images/pinterest/tshirt.jpg