Añadiendo extends y getmaps a SASS

alvarezlmatias · Oct 14, 2023 · 44b980b · 44b980b
1 parent 1934e75
commit 44b980b
Show file tree

Hide file tree

Showing 14 changed files with 92 additions and 69 deletions.
diff --git a/CSS/maps.css.map b/CSS/maps.css.map
diff --git a/CSS/style.css b/CSS/style.css
diff --git a/CSS/style.css.map b/CSS/style.css.map
diff --git a/scss/_contacto.scss b/scss/_contacto.scss
@@ -2,7 +2,7 @@
 
 .body-contacto {
     overflow-x: hidden !important;
-    width: 100% !important;
+    width: map-get($ancho, total) !important;
 }
 
 /*** Imagen de fondo de la página ***/
@@ -45,7 +45,7 @@
 }
 
 .foto-proyecto {
-    width: 90%;
+    width: map-get($ancho, noventa);
 }
 
 /*** Fin de Secciones Miembros y Proyectos ***/
@@ -128,7 +128,7 @@
     button {
         background-color: $color-titulo-seccion;
         border-radius: $margen-xs;
-        width: 120px;
+        width: map-get($ancho, botonpequenio);
         height: $margen-m;
         margin-top: $margen-xsss;
         border-color: $color-borde-punteado;

diff --git a/scss/_estrategias.scss b/scss/_estrategias.scss
@@ -27,9 +27,8 @@
 
 .articulo-estrategias {
     @extend %formato-articulo;
+    @extend %estilo-borde-inferior;
     margin-bottom: $margen-s;
-    border-bottom: dashed;
-    border-color: $color-borde-inferior;
     .titulo-articulo-estrategias {
         text-align: center;
         color: $color-titulo-articulo;
@@ -56,10 +55,9 @@
 /*** Botón y texto Leer más ***/
 
 .leer-mas {
+    @extend %formato-texto;
     text-decoration: none !important;
     font-size: large;
-    font-weight: bold;
-    text-align: center;
     color: $color-fondo-botones;
     text-indent: $margen-xxss;
     &:hover {

diff --git a/scss/_extend.scss b/scss/_extend.scss
@@ -1,3 +1,12 @@
+/* DISPLAY */
+
+%display {
+    display: grid;
+    place-items: center;
+}
+
+/* FIN DE DISPLAY */
+
 /* IMÁGENES DE FONDO */
 
 %imagen-fondo {
@@ -41,6 +50,15 @@
 
 /* FIN DE ARTÍCULOS */
 
+/* TEXTOS */
+
+%formato-texto {
+    text-align: center;
+    font-weight: bold;
+}
+
+/* FIN DE TEXTOS */
+
 /* BORDES */
 
 %estilo-borde {
@@ -49,6 +67,11 @@
     border-color: $color-borde-punteado;
 }
 
+%estilo-borde-inferior {
+    border-bottom: dashed;
+    border-color: $color-borde-inferior;    
+}
+
 /* FIN DE BORDES */
 
 /* CARDS */

diff --git a/scss/_generales.scss b/scss/_generales.scss
@@ -13,8 +13,7 @@
 
 .titulo-seccion, .subtitulo-seccion {
     color: $color-titulo-seccion !important;
-    text-align: center;
-    font-weight: bold;
+    @extend %formato-texto;
 }
 
 .titulo-seccion {
@@ -36,9 +35,8 @@
     color: $color-white;
     padding: $margen-xsss;
     text-decoration: none;
-    font-weight: bold;
-    text-align: center;
     max-width: fit-content;
+    @extend %formato-texto;
     &:hover {
         background: $color-hover-botones !important;
     }    

diff --git a/scss/_inicio.scss b/scss/_inicio.scss
@@ -45,8 +45,7 @@
 /*** Secciones secundarias ***/
 
 .elemento-seccion {
-    display: grid;
-    place-items: center;
+    @extend %display;
     .imgseccion {
         &:hover {
             filter: opacity(50%);

diff --git a/scss/_maingenerales.scss b/scss/_maingenerales.scss
@@ -3,7 +3,7 @@
 /*** Banner ***/
 
 .banner {
-    width: 100%;
+    width: map-get($ancho, total);
     margin-top: $margen-s;
     border-top-style: solid;
     border-bottom-style: solid;
@@ -16,7 +16,7 @@
 /*** Videos embebidos ***/
 
 .video {
-    width: 560px;
+    width: map-get($ancho, video);
     height: 360px;
     border-radius: $margen-l;
     @extend %estilo-borde; 

diff --git a/scss/_maps.scss b/scss/_maps.scss
@@ -0,0 +1,17 @@
+/* WIDTH */
+
+$ancho:(
+    total: 100%,
+    noventaycinco: 95%,
+    noventa: 90%,
+    ochenta: 80%,
+    video: 560px,
+    videomediano: 400px,
+    videopequenio: 350px,
+    videomobile: 280px,
+    botongrande: 200px,
+    botoncomun: 150px,
+    botonpequenio: 120px
+);
+
+/* FIN DE WIDTH */