herramientas de css

_sass/helpers.scss

@@ -1,11 +1,12 @@
-/*
+// En este archivo colocamos todos las herramientas que nos hagan falta,
- * Usar en animaciones, empiezan rápido y desaceleran hacia el final.
+// de forma que podamos generar clases específicas que sean combinables
- */
+// con otras, en lugar de escribir clases específicas para cada
-$bezier: cubic-bezier(0.75, 0, 0.25, 1);
+// elemento.
+//
+// Cada clase tiene su versión responsive de acuerdo a los parámetros de
+// Bootstrap.
 
-/*
+// Ocultar la barra de scroll, útil para sliders horizontales.
- * Ocultar la barra de scroll, útil para sliders horizontales.
- */
 .no-scrollbar {
   scrollbar-width: none;
   -webkit-overflow-scrolling: touch;
@@ -13,48 +14,157 @@ $bezier: cubic-bezier(0.75, 0, 0.25, 1);
   &::-webkit-scrollbar { display: none; }
 }
 
+// El elemento no se puede cliquear
+.click-through {
+  pointer-events: none;
+}
+
+// Agrega una transición a cualquier modificación de atributos
+.transition {
+  @include transition($transition-base);
+}
+
+// Ajustes de imagen y video con respecto al contenedor
+@each $keyword in (contain, cover, fill, none, scale-down) {
+  .fit-#{$keyword} {
+    object-fit: #{$keyword};
+  }
+
+  @each $grid-breakpoint, $_ in $grid-breakpoints {
+    @include media-breakpoint-up($grid-breakpoint) {
+      .fit-#{$grid-breakpoint}-#{$keyword} {
+        object-fit: #{$keyword};
+      }
+    }
+  }
+}
+
+// Cursores
 @each $cursor in (pointer none) {
   .cursor-#{$cursor} {
     cursor: $cursor;
   }
 }
 
-@each $direction in (top, right, bottom, left) {
+// Overflow
-  .#{$direction}-0 {
+@each $value in (auto, hidden, scroll) {
-    #{$direction}: 0
+  .overflow-#{$value} {
+    overflow: $value !important;
+  }
+
+  @each $axis in (y, x) {
+    .overflow-#{$axis}-#{$value} {
+      overflow-#{$axis}: $value !important;
+    }
+  }
+
+  @each $grid-breakpoint, $_ in $grid-breakpoints {
+    @include media-breakpoint-up($grid-breakpoint) {
+      .overflow-#{$grid-breakpoint}-#{$value} {
+        overflow: $value !important;
+      }
+
+      @each $axis in (y, x) {
+        .overflow-#{$grid-breakpoint}-#{$axis}-#{$value} {
+          overflow-#{$axis}: $value !important;
+        }
+      }
+    }
   }
 }
 
-@each $value in $overflows {
+@each $spacer, $length in $spacers {
-  .overflow-#{$value} { overflow: $value !important; }
+  // Poder aumentar o disminuir el alto de la tipografía
-}
+  .f-#{$spacer} {
-
-@each $axis in (y, x) {
-  @each $value in $overflows {
-    .overflow-#{$axis}-#{$value} { overflow-#{$axis}: $value !important; }
-  }
-}
-
-/*
- * Poder aumentar o disminuir el alto de la tipografía, se usa de la
- * misma forma que los modificadores de padding y margin.
- */
-@each $size, $length in $spacers {
-  .f-#{$size} {
     font-size: $length !important;
   }
 
-  .text-column-#{$size} {
+  // Columnas de texto
-    column-count: $size;
+  .text-column-#{$spacer} {
+    column-count: $spacer;
+  }
+
+  // Limitar la cantidad de líneas de un bloque de texto
+  .line-clamp-#{$spacer} {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: $spacer;
+    -webkit-box-orient: vertical;
+  }
+
+  // Ubicación absoluta, usar con position-*
+  @each $direction in (top, right, bottom, left) {
+    .#{$direction}-#{$spacer} {
+      #{$direction}: $length
+    }
+  }
+
+  @each $grid-breakpoint, $_ in $grid-breakpoints {
+    @include media-breakpoint-up($grid-breakpoint) {
+      // Poder aumentar o disminuir el alto de la tipografía
+      .f-#{$grid-breakpoint}-#{$spacer} {
+        font-size: $length !important;
+      }
+
+      // Columnas de texto
+      .text-column-#{$grid-breakpoint}-#{$spacer} {
+        column-count: $spacer;
+      }
+
+      // Limitar la cantidad de líneas de un bloque de texto
+      .line-clamp-#{$grid-breakpoint}-#{$spacer} {
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: $spacer;
+        -webkit-box-orient: vertical;
+      }
+
+      // Ubicación absoluta, usar con position-*
+      @each $direction in (top, right, bottom, left) {
+        .#{$direction}-#{$grid-breakpoint}-#{$spacer} {
+          #{$direction}: $length
+        }
+      }
+    }
   }
 }
 
-/*
+// anchos y altos
- * Modificadores de Bootstrap que no tienen versión responsive.
+@each $prop, $abbrev in (width: w, height: h) {
- */
+  @each $size, $length in $sizes {
+    .#{$abbrev}-#{$size} { #{$prop}: $length; }
+    .min-#{$abbrev}-#{$size} { min-#{$prop}: $length; }
+    .max-#{$abbrev}-#{$size} { max-#{$prop}: $length; }
+
+    @each $grid-breakpoint, $_ in $grid-breakpoints {
+      @include media-breakpoint-up($grid-breakpoint) {
+        .#{$abbrev}-#{$grid-breakpoint}-#{$size} { #{$prop}: $length; }
+        .min-#{$abbrev}-#{$grid-breakpoint}-#{$size} { min-#{$prop}: $length; }
+        .max-#{$abbrev}-#{$grid-breakpoint}-#{$size} { max-#{$prop}: $length; }
+      }
+    }
+  }
+}
+
+@each $scroll in (auto, smooth) {
+  .scroll-#{$scroll} {
+    scroll-behavior: #{$scroll};
+  }
+
+  @each $grid-breakpoint, $_ in $grid-breakpoints {
+    @include media-breakpoint-up($grid-breakpoint) {
+      .scroll-#{$grid-breakpoint}-#{$scroll} {
+        scroll-behavior: #{$scroll};
+      }
+    }
+  }
+}
+
+// Versiones responsive de utilidades Bootstrap
 @each $grid-breakpoint, $_ in $grid-breakpoints {
   @include media-breakpoint-up($grid-breakpoint) {
-    // border
+    // Bordes
+    // node_modules/bootstrap/scss/utilities/_borders.scss
     .border-#{$grid-breakpoint}         { border: $border-width solid $border-color !important; }
     .border-#{$grid-breakpoint}-top     { border-top: $border-width solid $border-color !important; }
     .border-#{$grid-breakpoint}-right   { border-right: $border-width solid $border-color !important; }
@@ -66,49 +176,34 @@ $bezier: cubic-bezier(0.75, 0, 0.25, 1);
     .border-#{$grid-breakpoint}-bottom-0 { border-bottom: 0 !important; }
     .border-#{$grid-breakpoint}-left-0   { border-left: 0 !important; }
 
-    // alineación
+    // Alineación
     .text-#{$grid-breakpoint}-left   { text-align: left !important; }
     .text-#{$grid-breakpoint}-right  { text-align: right !important; }
     .text-#{$grid-breakpoint}-center { text-align: center !important; }
 
-    // posición
+    // Posicionamiento
     @each $position in $positions {
       .position-#{$grid-breakpoint}-#{$position} { position: $position !important; }
     }
 
-    // anchos y altos
+    // Anchos y altos
     @each $prop, $abbrev in (width: w, height: h) {
       @each $size, $length in $sizes {
         .#{$abbrev}-#{$grid-breakpoint}-#{$size} { #{$prop}: $length !important; }
-      }
+        .min-#{$abbrev}-#{$grid-breakpoint}-#{$size} { min-#{$prop}: $length !important; }
-    }
-
-    // versión responsive de f
-    @each $size, $length in $spacers {
-      .f-#{$grid-breakpoint}-#{$size} {
-        font-size: $length !important;
-      }
-
-      .text-column-#{$grid-breakpoint}-#{$size} {
-        column-count: $size;
       }
     }
   }
 }
 
-/*
+// Crea una propiedad con prefijos de navegador
- * Crea una propiedad con prefijos de navegador
- */
-$vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
 @mixin vendor-prefix($property, $definition...) {
   @each $prefix in $vendor-prefixes {
     #{$prefix}$property: $definition;
   }
 }
 
-/*
+// Colores
- * Crea clases para asignar colores según la lista de colores.
- */
 @each $color, $_ in $colors {
   .background-#{$color} {
     background-color: var(--#{$color});
@@ -118,6 +213,17 @@ $vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
     }
   }
 
+  @each $attr in (stroke, fill) {
+    .#{$attr}-#{$color} {
+      svg {
+        * {
+          #{$attr}: var(--#{$color});
+        }
+      }
+    }
+  }
+
+  // Barras de scroll de colores
   .scrollbar-#{$color} {
     scrollbar-color: var(--#{$color}) transparent;
     scrollbar-width: thin;
@@ -133,22 +239,28 @@ $vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
     }
   }
 
+  // Bordes
   .border-#{$color} {
     border-color: var(--#{$color}) !important;
   }
 
+  // Cambiar el fondo al pasar por encima o hacer foco
   .hover-bg-#{$color} {
     &:hover {
+    &:focus-within,
       background-color: var(--#{$color});
     }
   }
 
+  // Cambiar el color al pasar por encima o hacer foco
   .hover-#{$color} {
-    &:hover {
+    &:hover,
+    &:focus-within {
       color: var(--#{$color});
     }
   }
 
+  // Cambiar el color
   .#{$color} {
     color: var(--#{$color});
 
@@ -156,18 +268,14 @@ $vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
       color: var(--#{$color});
     }
 
+    // Invertir el color en la selección
     ::-moz-selection,
     ::selection {
       background: var(--#{$color});
       color: white;
     }
 
-    svg {
+    // Ajustes para Bootstrap
-      * {
-        fill: var(--#{$color});
-      }
-    }
-
     .form-control {
       border-color: var(--#{$color});
       color: var(--#{$color});
@@ -176,9 +284,5 @@ $vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
     hr {
       border-color: var(--#{$color});
     }
-
-    a {
-      color: var(--#{$color});
-    }
   }
 }

_sass/snap.scss

@@ -9,7 +9,7 @@ $snap-points: (start, end, center, none);
     .snap-#{$snap-type}-#{$snap-direction} {
       scroll-snap-points-#{$snap-direction}: repeat(100%);
       scroll-snap-destination: 0 0;
-      @each $prefix in $prefixes {
+      @each $prefix in $vendor-prefixes {
         #{$prefix}scroll-snap-type: #{$snap-direction} #{$snap-type};
         #{$prefix}scroll-snap-type: #{$snap-type};
       }

assets/css/styles.scss

@@ -3,8 +3,8 @@
 ---
 
 $debug: {{ jekyll.environment | not: 'production' }};
-$prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
+$vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
-$overflows: auto, hidden, scroll;
+$bezier: cubic-bezier(0.75, 0, 0.25, 1);
 
 /*
  * Redefinir variables de Boostrap acá.  Se las puede ver en