editorial-autogestiva-jekyll-theme 0.5.0rc0 → 0.5.0rc1

data/_sass/utilities.scss

@@ -0,0 +1,547 @@
+////
+/// @group Utilidades
+////
+
+/// Crea una propiedad con prefijos de navegador, cuando no es
+/// soportada por estándares, por ejemplo el guionado de texto.
+@mixin vendor-prefix($property, $definition...) {
+  @each $prefix in $vendor-prefixes {
+    #{$prefix}#{$property}: $definition;
+  }
+}
+
+/// Los recursos que cargan a demanda muestran el espacio que ocupan.
+[loading="lazy"] {
+  background: linear-gradient(215deg, #{$white} 0%, #{$primary} 100%);
+}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+/// Obtiene el sufijo para cada clase responsive usando mixins de
+/// Bootstrap.  Valores posibles:
+/// `""` (nada, aplica a todas las resoluciones), `-xs`, `-sm`,
+/// `-md`, `-lg`, `-xl`.
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+/// Z-Indexes según Bootstrap
+    .z-index#{$infix}-dropdown { z-index: $zindex-dropdown !important; }
+    .z-index#{$infix}-sticky { z-index: $zindex-sticky !important; }
+    .z-index#{$infix}-fixed { z-index: $zindex-fixed !important; }
+    .z-index#{$infix}-backdrop { z-index: $zindex-modal-backdrop !important; }
+    .z-index#{$infix}-modal { z-index: $zindex-modal !important; }
+    .z-index#{$infix}-popover { z-index: $zindex-popover !important; }
+    .z-index#{$infix}-tooltip { z-index: $zindex-tooltip !important; }
+
+/// Guionado, complemento para .text-justify
+    @each $hyphen in $hyphens {
+      .hyphens#{$infix}-#{$hyphen} {
+        hyphens: $hyphen;
+      }
+    }
+
+/// Grilla en CSS, soporta armar una cantidad de columnas, indicar las
+/// columnas que ocupan los elementos descendientes e incluso
+/// solapamiento.
+///
+/// @example html
+///   <div class="d-grid grid-cols-5">
+///     <div class="grid-row-1 grid-col-1-to-2"></div>
+///     <div class="grid-row-2 grid-col-2-to-3"></div>
+///   </div>
+    .d#{$infix}-grid {
+      display: grid !important;
+
+      @each $spacer, $_ in $spacers {
+        &.grid-cols#{$infix}-#{$spacer} {
+          grid-template-columns: repeat($spacer, 1fr) !important;
+        }
+
+        & > .grid-row#{$infix}-#{$spacer} {
+          grid-row: $spacer !important;
+        }
+
+        & > .grid-col#{$infix}-#{$spacer} {
+          grid-column: $spacer !important;
+        }
+
+        @each $spacer_to, $_ in $spacers {
+          & > .grid-col#{$infix}-#{$spacer}-to-#{$spacer_to} {
+            grid-column: #{$spacer} / #{$spacer_to} !important;
+          }
+        }
+      }
+    }
+
+/// Ocultar la barra de scroll, útil para sliders horizontales.
+///
+/// @example html
+///   <div class="no-scrollbar-md"></div>
+    .no-scrollbar#{$infix} {
+      scrollbar-width: none;
+      -webkit-overflow-scrolling: touch;
+
+      &::-webkit-scrollbar { display: none; }
+    }
+
+    :enabled {
+      .show-when-disabled#{$infix} {
+        display: none !important;
+      }
+    }
+
+    :disabled {
+      .hide-when-disabled#{$infix} {
+        display: none !important;
+      }
+    }
+
+/// Asigna decoración al texto, pudiendo combinarlas!
+    @each $text-decoration in $text-decoration-lines {
+      .text-decoration#{$infix}-#{$text-decoration} {
+        text-decoration-line: $text-decoration !important;
+      }
+
+      @each $text-decoration-2 in $text-decoration-lines {
+        .text-decoration#{$infix}-#{$text-decoration}-#{$text-decoration-2} {
+          text-decoration-line: $text-decoration $text-decoration-2 !important;
+        }
+      }
+    }
+
+    @each $text-decoration in $text-decoration-styles {
+      .text-decoration#{$infix}-#{$text-decoration} {
+        text-decoration-style: $text-decoration !important;
+      }
+    }
+
+/// Cursores
+    @each $cursor in $cursors {
+/// El elemento va a tener un cursor
+///
+/// @example html
+///   <div class="cursor-pointer"></div>
+      .cursor#{$infix}-#{$cursor} {
+        cursor: $cursor !important;
+      }
+    }
+
+/// Eventos del cursor
+    @each $event in $events {
+/// Habilita o deshabilita recibir eventos al tocar o clickear.
+///
+/// @example html
+///   <div class="pointer-event-none"></div>
+      .pointer-event#{$infix}-#{$event} {
+        pointer-events: $event;
+      }
+    }
+
+/// Agrega una transición a cualquier modificación de atributos
+    .transition#{$infix} {
+      @include transition($transition-base);
+    }
+
+/// Valores posibles para la propiedad `object-fit`
+    @each $object in $objects {
+/// Ajustes de imagen y video con respecto al contenedor
+///
+/// @example html
+///   <img class="object-cover object-lg-contain"/>
+      .fit#{$infix}-#{$object} {
+        object-fit: #{$object};
+      }
+    }
+
+/// _Overflow_, qué hacer cuando el contenido sobrepasa los límites del
+/// contenedor.
+/// También puede ser solo dentro de un eje
+    @each $overflow in $overflows {
+/// Manejar el contenido sobre cualquier eje
+///
+/// @example html
+///   <div class="overflow-hidden overflow-scroll-md"></div>
+      .overflow#{$infix}-#{$overflow} {
+        overflow: $overflow !important;
+      }
+
+      @each $axis in $overflow-axis {
+/// Manejar el contenido sobre un eje particular
+///
+/// @example html
+///   <div class="overflow-hidden-y overflow-scroll-x"></div>
+        .overflow-#{$axis}#{$infix}-#{$overflow} {
+          overflow-#{$axis}: $overflow !important;
+        }
+      }
+    }
+
+    @each $spacer, $length in $spacers {
+/// Border radius
+///
+/// @example html
+///   <h1 class="f-3"></h1>
+      .f#{$infix}-#{$spacer} {
+        font-size: $length !important;
+
+        &,
+        & p,
+        & li {
+          min-height: #{$length * $line-height-base};
+        }
+      }
+
+///   <div class="rounded-3"></div>
+      .rounded#{$infix}-#{$spacer} {
+        border-radius: $length !important;
+      }
+
+/// Columnas de texto
+///
+/// @example html
+///   <div class="text-column-1 text-column-md-3"></div>
+      .text-column#{$infix}-#{$spacer} {
+        column-count: $spacer;
+      }
+
+/// Limitar la cantidad de líneas de un bloque de texto,
+/// reemplazando el sobrante por puntos suspensivos.  Es útil cuando
+/// el diseño solo pide una cantidad de líneas pero no sabemos cuál
+/// va a ser el largo.
+///
+/// @example html
+///   <h1 class="line-clamp-1"></h1>
+      .line-clamp#{$infix}-#{$spacer} {
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: $spacer;
+        -webkit-box-orient: vertical;
+      }
+
+      @each $direction in $directions {
+/// Ubicación absoluta, usar con position-*
+///
+/// @example html
+///   <div class="position-absolute top-0 left-3"></div>
+        .#{$direction}#{$infix}-#{$spacer} {
+          #{$direction}: $length
+        }
+      }
+    }
+
+    /// Anchos y altos en base a `$sizes` definido por Bootstrap.  Para
+    /// personalizar los tamaños, modificarlos o agregarlos en `styles.scss`
+    ///
+    /// @link assets/css/styles.scss
+    @each $prop, $abbrev in (width: w, height: h) {
+      @each $size, $length in $sizes {
+        .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
+        .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
+        .min-#{$abbrev}#{$infix}-#{$size} { min-#{$prop}: $length !important; }
+        .max-#{$abbrev}#{$infix}-#{$size} { max-#{$prop}: $length !important; }
+      }
+    }
+
+/// Tipos de _scroll_ posible
+    @each $scroll in $scrolls {
+/// Poder modificar el tipo de _scroll_ de forma _responsive_
+///
+/// @example html
+///   <div class="scroll-auto scroll-md-smooth"></div>
+      .scroll#{$infix}-#{$scroll} {
+        scroll-behavior: #{$scroll};
+      }
+    }
+
+/// Bordes.  Bootstrap no define bordes _responsive_
+///
+/// @link node_modules/bootstrap/scss/utilities/_borders.scss
+/// @example html
+///   <div class="border border-md-top-0 border-3"></div>
+    .border#{$infix}   { border: $border-width solid $border-color !important; }
+    .border#{$infix}-0 { border: 0 !important; }
+
+    @each $direction in $directions {
+      .border#{$infix}-#{$direction}   { border-#{$direction}: $border-width solid $border-color !important; }
+      .border#{$infix}-#{$direction}-0 { border-#{$direction}: 0 !important; }
+    }
+
+    @each $border-width, $length in $border-widths {
+      .border#{$infix}-#{$border-width}   { border-width: $length !important; }
+    }
+
+    @each $align in $aligns {
+/// Alineación _responsive_
+///
+/// @example html
+///   <div class="text-center text-md-right"></div>
+      .text#{$infix}-#{$align} { text-align: $align !important; }
+    }
+
+    @each $position in $positions {
+/// Posicionamiento
+///
+/// @example html
+///   <div class="position-relative position-md-absolute"></div>
+      .position#{$infix}-#{$position} { position: $position !important; }
+    }
+
+    @each $color, $rgb in $colors {
+/// Colores de fondo.  Es raro que usemos versiones _responsive_, pero
+/// no está de más tenerlas.
+///
+/// @link assets/css/styles.scss
+/// @example html
+///   <div class="background-red"></div>
+      .background#{$infix}-#{$color} {
+        background-color: var(--#{$color});
+
+        &:focus {
+          background-color: var(--#{$color});
+        }
+      }
+
+/// Color de la decoración del texto
+      .text-decoration#{$infix}-#{$color} {
+        text-decoration-color: $rgb !important;
+      }
+
+      @each $opacity, $degree in $opacities {
+        .o#{$infix}-#{$opacity} {
+          opacity: calc(#{$degree} + 100%) !important;
+        }
+
+        .hover-o#{$infix}-#{$opacity} {
+          &:hover,
+          &:focus,
+          &:active {
+            opacity: calc(#{$degree} + 100%) !important;
+          }
+        }
+
+/// Color de fondo con transparencia (opacidad)
+///
+/// @example html
+///   <div class="background-red-t2"></div>
+        .background#{$infix}-#{$color}-t#{$opacity} {
+          background-color: scale-color($rgb, $alpha: $degree);
+        }
+
+        .hover-background#{$infix}-#{$color}-t#{$opacity} {
+          &:hover,
+          &:focus,
+          &:active {
+            background-color: scale-color($rgb, $alpha: $degree);
+          }
+        }
+      }
+
+/// Atributos de SVG
+      @each $attr in $svg-attributes {
+/// Poder cambiar el relleno o la línea de un SVG
+///
+/// @example html
+///   <div class="stroke-black fill-red">
+///     <svg/>
+///   </div>
+        .#{$attr}#{$infix}-#{$color} {
+          svg {
+            * {
+              #{$attr}: var(--#{$color});
+            }
+          }
+        }
+      }
+
+/// Barras de _scroll_ de colores
+///
+/// @example html
+///   <div class="scrollbar-green"></div>
+      .scrollbar#{$infix}-#{$color} {
+        scrollbar-color: var(--#{$color}) transparent;
+        scrollbar-width: thin;
+
+        &::-webkit-scrollbar {
+          width: 5px;
+          height: 8px;
+          background-color: transparent;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background: var(--#{$color});
+        }
+      }
+
+/// Bordes de color
+///
+/// @example html
+///   <div class="border-red"></div>
+      .border#{$infix}-#{$color} {
+        border-color: var(--#{$color}) !important;
+      }
+
+/// Cambiar el fondo al pasar por encima o hacer foco
+///
+/// @example html
+///   <div class="background-black background-hover-red"></div>
+      .background-hover#{$infix}-#{$color} {
+        &:hover,
+        &:focus-within {
+          background-color: var(--#{$color});
+        }
+      }
+
+/// Cambiar el color al pasar por encima o hacer foco
+///
+/// @example html
+///   <div class="black hover-red"></div>
+      .hover-#{$color} {
+        &:hover,
+        &:focus-within {
+          color: var(--#{$color}) !important;
+        }
+      }
+
+/// Oscurecer un link al pasarle por encima con el cursor, en base a su color original
+///
+/// @example html
+///   <div class="pink"></div>
+      a.#{$color}#{$infix}:hover {
+        color: darken($rgb, 15%);
+      }
+
+/// Cambiar el color, también aplica a la selección de texto.
+///
+/// @example html
+///   <div class="black hover-red"></div>
+      .#{$color}#{$infix} {
+        color: var(--#{$color});
+
+        &:focus {
+          color: var(--#{$color});
+        }
+
+/// Invertir el color en la selección, con el mismo color de fondo y
+/// texto en blanco.
+        ::-moz-selection,
+        ::selection {
+          background: var(--#{$color});
+          color: white;
+        }
+
+/// Si el contenedor tiene un color, también aplica a los bordes de los
+/// elementos de un formulario.
+///
+/// @todo Evaluar si es realmente necesario hacerlo así, porque no
+/// aplica a las sombras.
+        .form-control {
+          border-color: var(--#{$color});
+          color: var(--#{$color});
+        }
+
+/// Los `<hr/>` también cambian de color.
+///
+/// @example html
+///   <div class="red">
+///     <hr/>
+///   </div>
+        hr {
+          border-color: var(--#{$color});
+        }
+      }
+    }
+
+    /// Espacio entre caracteres
+    ///
+    /// @example html
+    ///   <div class="letter-spacing-2"></div>
+    @each $letter-spacing, $value in $letter-spacings {
+      .letter-spacing#{$infix}-#{$letter-spacing} {
+        letter-spacing: $value !important;
+      }
+    }
+
+    .lead#{$infix} {
+      font-size: $lead-font-size !important;
+    }
+
+    .display#{$infix}-1 {
+      font-size: $display1-size !important;
+    }
+
+    .display#{$infix}-2 {
+      font-size: $display2-size !important;
+    }
+
+    .display#{$infix}-3 {
+      font-size: $display3-size !important;
+    }
+
+    .display#{$infix}-4 {
+      font-size: $display4-size !important;
+    }
+
+    @each $font-size, $value in $font-sizes {
+      .f#{$infix}-#{$font-size} {
+        font-size: $font-size-base * $value !important;
+      }
+    }
+
+    @each $transform-scale, $value in $transform-scales {
+      .transform-scale#{$infix}-#{$transform-scale} {
+        transform: scale($value) !important;
+      }
+
+      .transform-scale-hover#{$infix}-#{$transform-scale} {
+        &:hover, &:focus {
+          transform: scale($value) !important;
+        }
+      }
+    }
+
+    @each $background-size, $value in $background-sizes {
+      /// Tamaño de imagen de fondo
+      ///
+      /// @example html
+      ///   <div class="background-size-md-cover"></div>
+      .background-size#{$infix}-#{$background-size} {
+        background-size: $value !important;
+      }
+    }
+
+    @each $x in $background-positions-x {
+      @each $y in $background-positions-y {
+        .background-position#{$infix}-#{$x}-#{$y} {
+          background-position: $x $y;
+        }
+      }
+    }
+
+    @each $background-image, $value in $background-images {
+      .background-image#{$infix}-#{$background-image} {
+        background-image: url("#{$value}");
+      }
+    }
+
+    .font-weight#{$infix}-lighter  { font-weight: $font-weight-lighter !important; }
+
+    .font-weight#{$infix}-light  { font-weight: $font-weight-light !important; }
+
+    .font-weight#{$infix}-normal  { font-weight: $font-weight-normal !important; }
+
+    .font-weight#{$infix}-medium  { font-weight: $font-weight-medium !important; }
+
+    .font-weight#{$infix}-semibold  { font-weight: $font-weight-semibold !important; }
+
+    .font-weight#{$infix}-bold  { font-weight: $font-weight-bold !important; }
+
+    .font-weight#{$infix}-bolder  { font-weight: $font-weight-bolder !important; }
+  }
+}
+
+b,
+strong {
+  font-weight: $font-weight-bold;
+}
+
+.zindex-modal-backdrop { z-index: 1040; }
+.zindex-modal { z-index: 1050; }

data/assets/css/styles.scss

@@ -1,5 +1,4 @@
 ---
-# Ponemos un frontmatter porque queremos que Jekyll procese este archivo
 ---
 
 {%- assign theme = site.posts | find: "layout", "theme" -%}
@@ -12,39 +11,28 @@ $debug: {{ jekyll.environment | not: 'production' }};
 $vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
 $bezier: cubic-bezier(0.75, 0, 0.25, 1);
 
-$colors: (
-  "black": black
-);
+// Convertir datos editables desde el panel en variables para usar directamente
 
-$opacities: (
-  0: -100%,
-  1: -80%,
-  2: -60%,
-  3: -40%,
-  4: -20%,
-  5: 0%
-);
+{{ site.posts | find: "layout", "theme" | yaml_to_scss: site.data.layouts.theme }}
 
 $sizes: (
   300: 300px
 );
 
-/*
- * Redefinir variables de Boostrap acá.  Se las puede ver en
- * node_modules/bootstrap/scss/_variables.scss
- */
+/// Redefinir variables de Boostrap en _data/theme.yml - Se las puede ver en
+/// node_modules/bootstrap/scss/_variables.scss
+
+{{ site.data.theme | yaml_to_scss }}
 
-/*
- * XXX: Solo importar los archivos necesarios de bootstrap para
- * facilitar la reducción de CSS.  Por ahora pedimos todo para poder
- * empezar a trabajar en el HTML sin pensar en CSS.
- */
+/// @todo Solo importar los archivos necesarios de bootstrap para
+/// facilitar la reducción de CSS.  Por ahora pedimos todo para poder
+/// empezar a trabajar en el HTML sin pensar en CSS.
 @import "bootstrap/scss/bootstrap";
 @import "fork-awesome/scss/fork-awesome";
 @import "typography";
 @import "navbar";
 @import "accessibility";
-@import "helpers";
+@import "utilities";
 @import "toggler";
 @import "share_box";
 @import "embed";
@@ -52,12 +40,8 @@ $sizes: (
 @import "editor";
 @import "menu";
 @import "logic";
+@import "content";
+@import "fonts";
 @import "floating_alert";
 
-@if $debug {
-  /*
-   * Mostrar un borde alrededor de todos los elementos para poder
-   * trabajar.
-   */
-  * { outline: 1px solid pink; }
-}
+.turbo-progress-bar { background-color: $primary; }