recursero-jekyll-theme 0.1.3 → 0.3.0

data/_layouts/license.html

@@ -0,0 +1,45 @@
+---
+layout: default
+---
+
+{% assign date_format = site.i18n.date.format | default: "%b %-d, %Y" %}
+
+<article class="h-entry" itemscope itemtype="http://schema.org/Article">
+  <header>
+    <h1 class="p-name" itemprop="name headline">{{ page.title | default: '' | escape }}</h1>
+
+    {%- if page.description -%}
+      <p class="lead p-summary" itemprop="description">{{ page.description | default: '' | escape }}</p>
+    {%- endif -%}
+
+    <p>
+      {{ site.i18n.published_at }}
+
+      <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
+        {{ page.date | date_local: date_format }}
+      </time>
+
+      {% if page.last_modified_at %}
+        {{ site.i18n.last_modified_at }}
+
+        <time class="dt-published" datetime="{{ page.last_modified_at | date_to_xmlschema }}" itemprop="datePublished">
+          {{ page.last_modified_at | date_local: date_format }}
+        </time>
+      {% endif %}
+    </p>
+  </header>
+
+  <div class="e-content" itemprop="articleBody">
+    {{ content }}
+  </div>
+
+  <footer>
+    <a class="u-url" itemprop="url" href="{{ page.url }}" hidden>
+      {{ site.url }}{{ page.url }}
+    </a>
+
+    {%- if page.uuid -%}
+      <span hidden itemprop="identifier">{{ page.uuid }}</span>
+    {%- endif -%}
+  </footer>
+</article>

data/_layouts/page.html

@@ -28,7 +28,7 @@ layout: default
 
     <p>
       <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
-        {%- assign date_format = site.i18n.date | default: "%b %-d, %Y" -%}
+        {%- assign date_format = site.i18n.date.format | default: "%b %-d, %Y" -%}
         {{ page.date | date: date_format }}
       </time>
       {%- for author in page.author -%}

data/_layouts/place.html

@@ -28,7 +28,7 @@ layout: default
 
     <p>
       <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
-        {%- assign date_format = site.i18n.date | default: "%b %-d, %Y" -%}
+        {%- assign date_format = site.i18n.date.format | default: "%b %-d, %Y" -%}
         {{ page.date | date: date_format }}
       </time>
       {%- for author in page.author -%}

data/_layouts/post.html

@@ -28,8 +28,8 @@ layout: default
 
     <p>
       <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
-        {%- assign date_format = site.i18n.date | default: "%b %-d, %Y" -%}
-        {{ page.date | date: date_format }}
+        {%- assign date_format = site.i18n.date.format | default: "%b %-d, %Y" -%}
+        {{ page.date | date_local: date_format }}
       </time>
       {%- for author in page.author -%}
         •

data/_layouts/privacy_policy.html

@@ -0,0 +1,45 @@
+---
+layout: default
+---
+
+{% assign date_format = site.i18n.date.format | default: "%b %-d, %Y" %}
+
+<article class="h-entry" itemscope itemtype="http://schema.org/Article">
+  <header>
+    <h1 class="p-name" itemprop="name headline">{{ page.title | default: '' | escape }}</h1>
+
+    {%- if page.description -%}
+      <p class="lead p-summary" itemprop="description">{{ page.description | default: '' | escape }}</p>
+    {%- endif -%}
+
+    <p>
+      {{ site.i18n.published_at }}
+
+      <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
+        {{ page.date | date_local: date_format }}
+      </time>
+
+      {% if page.last_modified_at %}
+        {{ site.i18n.last_modified_at }}
+
+        <time class="dt-published" datetime="{{ page.last_modified_at | date_to_xmlschema }}" itemprop="datePublished">
+          {{ page.last_modified_at | date_local: date_format }}
+        </time>
+      {% endif %}
+    </p>
+  </header>
+
+  <div class="e-content" itemprop="articleBody">
+    {{ content }}
+  </div>
+
+  <footer>
+    <a class="u-url" itemprop="url" href="{{ page.url }}" hidden>
+      {{ site.url }}{{ page.url }}
+    </a>
+
+    {%- if page.uuid -%}
+      <span hidden itemprop="identifier">{{ page.uuid }}</span>
+    {%- endif -%}
+  </footer>
+</article>

data/_sass/accessibility.scss

@@ -1,13 +1,54 @@
-* {
-  scroll-behavior: smooth;
-}
+////
+/// Accesibilidad
+/// @group Accesibilidad
+////
+
+/// La navegación es suave.  Esto hace que al navegar a elementos dentro
+/// de la misma página no haga un salto, sino que haya una transición.
+///
+/// Es especialmente útil en sliders.
+///
+/// Sin embargo puede producir mareos a algunas personas.
+* { scroll-behavior: smooth; }
 
-/*
- * Deshabilita animaciones si la usuaria las tiene deshabilitadas
- */
+/// Aquí se aplica la opción `prefers-reduced-motion: reduce`, pero
+/// SassDoc no la estaría mostrando.
 @media (prefers-reduced-motion: reduce) {
+/// Si les usuaries prefirieron reducir las animaciones de los sitios,
+/// deshabilitamos la navegación suavizada y las animaciones.
   * {
-    scroll-behavior: auto;
+    scroll-behavior: auto !important;
     animation: none !important;
   }
 }
+
+/// Utilizamos Axe para poder marcarnos cuáles elementos no cumplen con
+/// parámetros de accesibilidad durante el desarrollo.  Esta clase
+/// muestra un borde rojo alrededor de los elementos inaccesibles y al
+/// obtener el foco, muestra los mensajes de error generados por Axe.js.
+///
+/// @link _packs/entry.js
+.inaccesible {
+  outline: $red 1px solid;
+
+  @extend .position-relative;
+
+  &:focus::after {
+    @extend .position-fixed;
+    @extend .background-red;
+    @extend .white;
+    @extend .p-3;
+
+    left: 0;
+    bottom: 0;
+    width: 100vw;
+    font-size: 1rem;
+
+    word-wrap: normal;
+    line-break: auto;
+    white-space: pre-line;
+
+    /// El contenido se trae desde el ariaLabel del elemento.
+    content: attr(aria-label);
+  }
+}

data/_sass/editor.scss

@@ -0,0 +1,17 @@
+////
+/// Estilos del editor de Sutty
+/// @group Editor
+///
+
+/// Alineaciones soportadas.  No soportamos justificado porque es
+/// difícil que quede bien en web.
+$aligns: (left,center,right);
+
+/// Recorrer las alineaciones.
+/// @name Alineaciones
+@each $align in $aligns {
+  /// El editor coloca la alineación en un atributo data-align,
+  /// recorriendo cada una de las alineaciones disponibles.
+  /// @todo Lograr que SassDoc muestre el código completo.
+  div[data-align="#{$align}"] { text-align: $align; }
+}

data/_sass/embed.scss

@@ -1,3 +1,11 @@
+////
+/// Recursos externos
+/// @group Recursos externos
+///
+
+/// Los `<iframe>` ocupan todo el ancho del contenedor y tienen un alto
+/// mínimo de 480px.
+/// @link jekyll-embed-urls
 iframe {
   border: 0;
   width: 100%;

data/_sass/floating_alert.scss

@@ -0,0 +1,48 @@
+////
+/// Alertas flotantes
+/// @group Alertas flotantes
+////
+
+/// Posiciones posibles
+$positions: (top, right, bottom, left);
+
+/// Las alertas flotantes son notificaciones emergentes que desaparecen
+/// por su cuenta, como los "Toast" de Android.  Tienen opciones de
+/// accesibilidad para que los lectores de pantalla también las
+/// notifiquen.
+/// @link _packs/controllers/notification_controller.js
+/// @link _includes/floating_alert.html
+/// @example html
+///   <div class="floating-alert floating-alert-default floating-alert-bottom">
+///     <div class="floating-alert-content"></div>
+///   </div>
+.floating-alert {
+  /// No se puede interactuar
+  @extend .pointer-event-none;
+
+  /// El estilo por defecto las coloca centradas y con una transición al
+  /// aparecer o desaparecer.  Si no usamos esta clase podemos darle
+  /// nuestro propio estilo.
+  &.floating-alert-default {
+    @extend .d-flex;
+    @extend .justify-content-center;
+    @extend .w-100;
+    @extend .position-fixed;
+    @extend .fade;
+    @extend .hide;
+  }
+
+  @each $position in $positions {
+    /// Pueden tener una posición fija
+    &.floating-alert-#{$position} {
+      #{$position}: 2rem;
+    }
+  }
+
+  /// Tienen un borde redondeado y un padding para parecerse a un toast.
+  /// El color de fondo se lo da una clase background-*
+  .floating-alert-content {
+    border-radius: 2rem;
+    padding: .5rem 1rem;
+  }
+}

data/_sass/helpers.scss

@@ -1,54 +1,350 @@
-$bezier: cubic-bezier(0.75, 0, 0.25, 1);
+////
+/// @group Utilidades
+////
 
-/*
- * Crea una propiedad con prefijos de navegador
- */
-$vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
+/// Direcciones posibles
+$directions: (top, right, bottom, left);
+
+/// 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;
   }
 }
 
-/*
- * Crea clases para asignar colores según la lista de colores.
- */
-@each $color, $_ in $colors {
-  .background-#{$color} {
-    background-color: var(--#{$color});
-  }
+@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);
+
+/// 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; }
+    }
 
-  .#{$color} {
-    color: var(--#{$color});
+/// Un elemento cuadrado
+///
+/// @example html
+///   <div class="square-lg"></div>
+    .square#{$infix} {
+      position: relative !important;
+      padding-bottom: 100%;
 
-    ::-moz-selection,
-    ::selection {
-      background: var(--#{$color});
-      color: white;
+      & > * {
+        position: absolute !important;
+        top: 0 !important;
+        left: 0 !important;
+        height: 100% !important;
+      }
     }
 
-    svg {
-      * {
-        fill: var(--#{$color});
+/// Cursores
+    $cursors: (pointer, none);
+    @each $cursor in $cursors {
+/// El elemento va a tener un cursor
+///
+/// @example html
+///   <div class="cursor-pointer"></div>
+      .cursor#{$infix}-#{$cursor} {
+        cursor: $cursor;
       }
     }
 
-    .form-control {
-      border-color: var(--#{$color});
+/// Eventos del cursor
+    $events: (none, auto);
+    @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;
+      }
     }
 
-    .btn {
-      background-color: var(--#{$color});
-      color: white;
-      border-color: var(--#{$color});
+/// Agrega una transición a cualquier modificación de atributos
+    .transition#{$infix} {
+      @include transition($transition-base);
     }
 
-    hr {
-      border-color: var(--#{$color});
+/// Valores posibles para la propiedad `object-fit`
+    $objects: (contain, cover, fill, none, scale-down);
+    @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};
+      }
     }
 
-    a {
-      color: var(--#{$color});
+/// _Overflow_, qué hacer cuando el contenido sobrepasa los límites del
+/// contenedor.
+    $overflows: (auto, hidden, scroll);
+/// También puede ser solo dentro de un eje
+    $overflow-axis: (x, y);
+    @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 {
+/// Poder aumentar o disminuir el alto de la tipografía.  Los
+/// `spacers` están definidos en Bootstrap y pueden ser extendidos
+/// desde styles.scss
+///
+/// @link assets/css/styles.scss
+/// @example html
+///   <h1 class="f-3"></h1>
+      .f#{$infix}-#{$spacer} {
+        font-size: $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
+    $scrolls: (auto, smooth);
+    @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"></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; }
+    }
+
+    $aligns: (left,center,right);
+    @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});
+        }
+      }
+
+      @each $opacity, $degree in $opacities {
+/// 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);
+        }
+      }
+
+/// Atributos de SVG
+      $svg-attributes: (stroke, fill);
+      @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});
+        }
+      }
+
+/// Cambiar el color, también aplica a la selección de texto.
+///
+/// @example html
+///   <div class="black hover-red"></div>
+      .#{$color} {
+        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});
+        }
+      }
     }
   }
 }

data/_sass/menu.scss

@@ -0,0 +1,36 @@
+/// El menú hamburguesa se expande cuando obtiene el foco y se oculta
+/// cuando lo pierde.  Esto nos permite tener un menú dinámico sin
+/// necesidad de JS.
+/// 
+/// @group Menú
+/// @link _includes/menu.html
+/// @todo En realidad el evento del foco está puesto en toda la navbar
+/// en lugar de solo en el ícono de hamburguesa.
+/// @example html
+///   <nav class="navbar">
+///     <button class="navbar-toggler">
+///       <span class="navbar-toggler-icon"></span>
+///     </button>
+///   
+///     <div class="collapse navbar-collapse" id="menu"></div>
+///   </nav>
+.navbar {
+  &:focus-within {
+    .navbar-collapse {
+      @extend .d-block;
+    }
+  }
+
+  .dropdown {
+    .dropdown-menu {
+      @extend .d-none;
+    }
+
+    &:hover,
+    &:focus-within {
+      .dropdown-menu {
+        @extend .d-block;
+      }
+    }
+  }
+}