[FIX] responsive & new contents

Author: dbollini

charts/adhoc-defaultbackend/v0.1.7/Chart.yaml

@@ -6,7 +6,7 @@ description: El "backend predeterminado" es un servicio que maneja todas las rut
 
 type: application
 
-version: 0.1.6
+version: 0.1.7
 
 appVersion: "stable-alpine"
 
@@ -18,5 +18,7 @@ maintainers:
     email: dib@adhoc.com.ar
   - name: jjscarafia
     email: jjs@adhoc.com.ar
+  - name: azacchino
+    email: az@adhoc.com.ar
 
 icon: "https://github.com/adhoc-dev/helm-charts/raw/master/img/nginx.png"

charts/adhoc-defaultbackend/v0.1.7/index.html

@@ -10,9 +10,19 @@
 /*--------------------------------------------------------------
 # General
 --------------------------------------------------------------*/
+html {
+  height: 100%;
+}
+
 body {
+  height: 100vh; /* Cambiado a vh en lugar de % */
   color: #1a1919;
   background-color: #b5a9b2;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
 }
 
 .bloque_texto {
@@ -33,18 +43,36 @@ a:hover {
   text-decoration: none;
 }
 
-
 /*--------------------------------------------------------------
 # Hero Section
 --------------------------------------------------------------*/
 #hero {
   width: 100%;
-  height: 70vh;
-  margin-top: 30px;
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 20px 0;
+}
+
+@media (min-width: 1024px) {
+  #hero {
+    background-attachment: fixed;
+    min-height: 0; /* Eliminamos min-height en pantallas grandes */
+    height: auto; /* Dejamos que se ajuste al contenido */
+  }
+  
+  body {
+    overflow-y: hidden; /* Prevenimos scroll en pantallas grandes */
+  }
+}
+
+#hero h1, #hero h2 {
+  margin: 0;
+  padding: 0;
 }
 
 #hero h1 {
-  margin: 0 0 10px 0;
   font-size: 48px;
   font-weight: 700;
   line-height: 56px;
@@ -61,15 +89,9 @@ a:hover {
   animation: up-down 2s ease-in-out infinite alternate-reverse both;
 }
 
-@media (min-width: 1024px) {
-  #hero {
-    background-attachment: fixed;
-  }
-}
-
 @media (max-width: 991px) {
   #hero {
-    height: 100vh;
+    min-height: auto;
   }
 
   #hero .animated {
@@ -82,81 +104,58 @@ a:hover {
   }
 
   #hero .hero-img img {
-    width: 120%;
-  }
-}
-
-@media (max-width: 768px) {
-  #hero {
-    margin-top: 20px;
-  }
-
-  #hero h1 {
-    font-size: 28px;
-    line-height: 36px;
-  }
-
-  #hero h2 {
-    font-size: 18px;
-    line-height: 24px;
-    margin-bottom: 30px;
-  }
-
-  #hero .hero-img img {
-    width: 70%;
+    width: 100%;
   }
-}
-
-@media (max-width: 575px) {
-  #hero .hero-img img {
-    width: 80%;
-  }
-}
-
-@-webkit-keyframes up-down {
-  0% {
-    transform: translateY(10px);
-  }
-
-  100% {
-    transform: translateY(-10px);
-  }
-}
-
-@keyframes up-down {
-  0% {
-    transform: translateY(10px);
-  }
-
-  100% {
-    transform: translateY(-10px);
+  
+  body {
+    overflow-y: auto; /* Permitimos scroll en pantallas pequeñas */
   }
 }
 
-
 /*--------------------------------------------------------------
 # Footer
 --------------------------------------------------------------*/
 footer {
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 100vw;
-  display: flex;
-  flex-flow: row wrap;
-  padding: 30px 30px 27px 30px;
+  width: 100%;
   background-color: rgb(43, 40, 63);
-  margin-bottom: 0;
+  padding: 20px 30px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
 
+/* Nuevo contenedor para el logo */
+.footer__logo {
+  order: 3; /* Mueve el logo al final */
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
 }
 
-footer > * {
-  flex:  1 100%;
+.footer__logo img {
+  max-width: 150px; /* Ajusta según el tamaño de tu logo */
+  height: auto;
 }
 
 .footer__addr {
+  order: 1;
   margin-right: 1.25em;
-  margin-bottom: 10.25em;
+  margin-bottom: 1em;
+  flex: 1;
+}
+
+.footer__nav {
+  order: 2;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  flex: 2;
+}
+
+.footer__nav > * {
+  flex: 1;
+  min-width: 200px;
 }
 
 .nav__title {
@@ -166,72 +165,41 @@ footer > * {
   text-transform: uppercase;
 }
 
-.footer__btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 36px;
-  max-width: max-content;
-  background-color: rgb(33, 33, 33, 0.07);
-  border-radius: 100px;
-  color: #2f2f2f;
-  line-height: 0;
-  margin: 0.6em 0;
-  font-size: 1rem;
-  padding: 0 0em;
-}
-
-footer ul {
+.nav__ul {
   list-style: none;
-  padding-left: 0;
-}
-
-footer li {
-  line-height: 2em;
-}
-
-footer a {
-  text-decoration: none;
-}
-
-.footer__nav {
-  display: flex;
-    flex-flow: row wrap;
-}
-
-.footer__nav > * {
-  flex: 1 50%;
-  margin-right: 1.25em;
+  padding: 0;
 }
 
 .nav__ul li a {
   color: azure;
   font-weight: lighter;
+  line-height: 2;
 }
 
 .legal {
-  display: inline;
-  flex-wrap: wrap;
   color: rgb(213, 212, 212);
   text-align: right;
-}
-  
-@media screen and (min-width: 24.375em) {
-  .legal {
-    margin-left: auto;
-  }
+  margin-top: 1em;
+  width: 100%;
+  order: 4; /* Asegura que el texto legal esté al final */
 }
 
-@media screen and (min-width: 40.375em) {
-  .footer__nav > * {
-    flex: 1;
+@media screen and (max-width: 768px) {
+  footer {
+    flex-direction: column;
+  }
+  
+  .footer__logo {
+    order: 1; /* En móvil, ponemos el logo primero */
+    justify-content: center;
+    margin-bottom: 1em;
   }
 
   .footer__addr {
-    flex: 1 0px;
+    order: 2;
   }
 
   .footer__nav {
-    flex: 2 0px;
+    order: 3;
   }
 }