adhesiones-jekyll-theme 0.2.1 → 0.2.2

data/_includes/search.html

@@ -0,0 +1,25 @@
+{%- assign param = include.param | default: 'search' -%}
+
+<form method="get" action="" class="form-inline" data-controller="search" data-action="search#search">
+  <div class="form-group">
+    <label for="{{ param }}_q" class="sr-only">{{ site.i18n.search.label }}</label>
+
+    <div class="input-group flex-nowrap">
+      <div class="input-group-prepend">
+        <span class="input-group-text fa fa-search border-0 pt-2"></span>
+      </div>
+
+      <input
+        class="border-0 form-control"
+        type="search"
+        required
+        id="{{ param }}_q"
+        name="q"
+        placeholder="{{ site.i18n.search.submit }}"
+        data-target="search.q"
+        autocomplete="off" />
+    </div>
+  </div>
+
+  <input class="sr-only" type="submit" value="{{ site.i18n.search.submit }}" />
+</form>

data/_includes/share.html

@@ -1,10 +1,11 @@
 {% capture url %}{{ site.url }}{{ include.url }}{% endcapture %}
 
 {% unless include.share.url == '%url' %}
-  {% assign url = url | cgi_escape %}
+  {% assign url = url | default: '' | cgi_escape %}
 {% endunless %}
-{% assign title = include.title | cgi_escape %}
+{% assign title = include.title | default: '' | cgi_escape %}
 {% assign description = include.description | default: '' | cgi_escape %}
+{% assign tags = include.tags | join: ',' | default: '' | cgi_escape %}
 
 <a
   {% if include.share.url == '%url' %}
@@ -12,10 +13,10 @@
   {% else %}
     target="_blank"
   {% endif %}
-  rel="nofollow"
+  rel="noopener nofollow"
   title="{{ include.share.title }}"
   class="d-flex flex-column align-items-center p-3"
-  href="{{ include.share.url | replace: '%url', url | replace: '%title', title | replace: '%description', description }}">
+  href="{{ include.share.url | replace: '%url', url | replace: '%title', title | replace: '%description', description | replace: '%tags', tags }}">
   <i class="fa fa-fw fa-2x fa-{{ include.share.icon }}"></i>
   <span>{{ include.share.title }}</span>
 </a>

data/_includes/submit.html

@@ -1 +1,5 @@
-<input type="submit" class="btn btn-success" value="{{ include.field[1].label[site.locale] }}" />
+<input
+  data-target="contact.submit"
+  type="submit"
+  class="btn btn-success"
+  value="{{ include.field[1].label[site.locale] }}" />

data/_layouts/default.html

@@ -10,7 +10,26 @@
     <meta name="referrer" content="strict-origin-when-cross-origin" />
 
     <link href="assets/css/styles.css" rel="stylesheet">
-    <script defer type="text/javascript" src="assets/js/script.js"></script>
+
+    {% comment %}
+    Webpack.  La configuración se pasa por variables de entorno, en
+    desarrollo hay que evitar el archivo .env (copiarlo de .env.example
+    si no existe.
+    {% endcomment %}
+    <link rel="preload" as="script" type="text/javascript" href="env.js" />
+    <script type="text/javascript" src="env.js"></script>
+    <script defer type="text/javascript" src="assets/js/pack.js"></script>
+
+    {% comment %}
+    Agregar otras tipografías.  Esto hace que las tipografías se carguen
+    lo más rápido posible y minimizar el tiempo en que se ven las del
+    navegador.  En Firefox todavía no está soportado.
+    {% endcomment %}
+    {% include_cached preload_font.html font='assets/fonts/forkawesome-webfont.woff2' %}
+
+    <link rel="icon" type="image/svg+xml" href="public/favicon.svg">
+    <link rel="alternate icon" href="public/favicon.ico">
+    <link rel="mask-icon" href="public/favicon.svg" color="white">
 
     {% seo %}
     {% feed_meta %}

data/_layouts/home.html

@@ -27,7 +27,7 @@ layout: default
           <h1 class="font-weight-bold">{{ documento.title }}</h1>
           &mdash;
           <time datetime="{{ documento.date }}">
-            {{ documento.date | date: site.i18n.date }}
+            {{ documento.date | date: site.i18n.date.format }}
           </time>
         </div>
 
@@ -76,7 +76,10 @@ layout: default
         </label>
 
         <div class="toggled collapsed fade">
-          <form action="{{ site.sutty }}v1/sites/{{ site.hostname }}/posts/{{ form }}" method="post" enctype="multipart/form-data">
+          <form
+            data-controller="contact"
+            data-delay="30"
+            action="{{ site.sutty }}v1/sites/{{ site.hostname }}/posts/{{ form }}" method="post" enctype="multipart/form-data">
             <div class="row justify-content-center">
               {%- for field in site.data.layouts[form] -%}
                 {%- if field[1].skip -%}{% continue %}{%- endif -%}
@@ -89,6 +92,10 @@ layout: default
 
               <div class="col-12">
                 <input type="submit" value="{{ site.i18n.home.form.submit }}" class="btn btn-success btn-block" />
+                <small
+                  class="form-text text-muted">
+                  {{ site.i18n.home.form.submit_help }}
+                </small>
               </div>
             </div>
           </form>
@@ -166,7 +173,7 @@ layout: default
 
 
         <time datetime="{{ adhesion.date }}">
-          {{ adhesion.date | date: site.i18n.date }}
+          {{ adhesion.date | date: site.i18n.date.format }}
         </time>
       </header>
 

data/_layouts/post.html

@@ -4,10 +4,10 @@ layout: default
 
 <article class="h-entry" itemscope itemtype="http://schema.org/Article">
   <header>
-    <h1 class="p-name" itemprop="name headline">{{ page.title | escape }}</h1>
+    <h1 class="p-name" itemprop="name headline">{{ page.title | default: '' | escape }}</h1>
 
     {%- if page.description -%}
-      <p class="lead p-summary" itemprop="description">{{ page.description | escape }}</p>
+      <p class="lead p-summary" itemprop="description">{{ page.description | default: '' | escape }}</p>
     {%- endif -%}
 
     {%- if page.image.path -%}
@@ -22,14 +22,14 @@ 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 -%}
         •
         <span itemprop="author" itemscope itemtype="http://schema.org/Person">
           <span class="p-author h-card" itemprop="name">
-            {{ author | escape }}
+            {{ author | default: '' | escape }}
           </span>
         </span>
       {%- endfor -%}

data/_sass/accessibility.scss

@@ -11,3 +11,27 @@
     animation: none !important;
   }
 }
+
+.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;
+
+    content: attr(aria-label);
+  }
+}

data/_sass/editor.scss

@@ -0,0 +1,8 @@
+/*
+ * Estilos del editor de Sutty
+ */
+
+// Alineación
+div[data-align="left"] { text-align: left; }
+div[data-align="center"] { text-align: center; }
+div[data-align="right"] { text-align: right; }

data/_sass/embed.scss

@@ -0,0 +1,5 @@
+iframe {
+  border: 0;
+  width: 100%;
+  min-height: 480px;
+}

data/_sass/floating_alert.scss

@@ -0,0 +1,10 @@
+.floating-alert {
+  &.floating-alert-bottom {
+    bottom: 2rem;
+  }
+
+  .floating-alert-content {
+    border-radius: 2rem;
+    padding: .5rem 1rem;
+  }
+}

data/_sass/helpers.scss

@@ -1,54 +1,318 @@
-$bezier: cubic-bezier(0.75, 0, 0.25, 1);
+// En este archivo colocamos todos las herramientas que nos hagan falta,
+// de forma que podamos generar clases específicas que sean combinables
+// con otras, en lugar de escribir clases específicas para cada
+// elemento.
+//
+// Cada clase tiene su versión responsive de acuerdo a los parámetros de
+// Bootstrap.
 
-/*
- * Crea una propiedad con prefijos de navegador
- */
-$vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
+// Ocultar la barra de scroll, útil para sliders horizontales.
+.no-scrollbar {
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+
+  &::-webkit-scrollbar { display: none; }
+}
+
+// Mismo alto que ancho
+.square {
+  @extend .position-relative;
+  padding-bottom: 100%;
+
+  & > * {
+    @extend .position-absolute;
+    @extend .top-0;
+    @extend .left-0;
+    @extend .h-100;
+  }
+}
+
+// Eventos del cursor
+@each $event in (none, auto) {
+  .pointer-event-#{$event} {
+    pointer-events: $event;
+  }
+
+  @each $grid-breakpoint, $_ in $grid-breakpoints {
+    @include media-breakpoint-up($grid-breakpoint) {
+      .pointer-event-#{$grid-breakpoint}-#{$event} {
+        pointer-events: $event;
+      }
+    }
+  }
+}
+
+// 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;
+  }
+}
+
+// Overflow
+@each $value in (auto, hidden, scroll) {
+  .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 $spacer, $length in $spacers {
+  // Poder aumentar o disminuir el alto de la tipografía
+  .f-#{$spacer} {
+    font-size: $length !important;
+  }
+
+  // Columnas de texto
+  .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
+@each $prop, $abbrev in (width: w, height: h) {
+  @each $size, $length in $sizes {
+    .#{$abbrev}-#{$size} { #{$prop}: $length; }
+    .#{$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) {
+    // 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; }
+    .border-#{$grid-breakpoint}-bottom  { border-bottom: $border-width solid $border-color !important; }
+    .border-#{$grid-breakpoint}-left    { border-left: $border-width solid $border-color !important; }
+    .border-#{$grid-breakpoint}-0        { border: 0 !important; }
+    .border-#{$grid-breakpoint}-top-0    { border-top: 0 !important; }
+    .border-#{$grid-breakpoint}-right-0  { border-right: 0 !important; }
+    .border-#{$grid-breakpoint}-bottom-0 { border-bottom: 0 !important; }
+    .border-#{$grid-breakpoint}-left-0   { border-left: 0 !important; }
+
+    // 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; }
+
+    // Posicionamiento
+    @each $position in $positions {
+      .position-#{$grid-breakpoint}-#{$position} { position: $position !important; }
+    }
+
+    // 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; }
+      }
+    }
+  }
+}
+
+// Crea una propiedad con prefijos de navegador
 @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 {
+// Colores
+@each $color, $rgb in $colors {
   .background-#{$color} {
     background-color: var(--#{$color});
+
+    &:focus {
+      background-color: var(--#{$color});
+    }
   }
 
+  @each $opacity, $degree in $opacities {
+    .background-#{$color}-t#{$opacity} {
+      background-color: scale-color($rgb, $alpha: $degree);
+    }
+  }
+
+  @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;
+
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 8px;
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var(--#{$color});
+    }
+  }
+
+  // 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,
+    &:focus-within {
+      color: var(--#{$color});
+    }
+  }
+
+  // Cambiar el color
   .#{$color} {
     color: var(--#{$color});
 
+    &:focus {
+      color: var(--#{$color});
+    }
+
+    // Invertir el color en la selección
     ::-moz-selection,
     ::selection {
       background: var(--#{$color});
       color: white;
     }
 
-    svg {
-      * {
-        fill: var(--#{$color});
-      }
-    }
-
+    // Ajustes para Bootstrap
     .form-control {
       border-color: var(--#{$color});
-    }
-
-    .btn {
-      background-color: var(--#{$color});
-      color: white;
-      border-color: var(--#{$color});
+      color: var(--#{$color});
     }
 
     hr {
       border-color: var(--#{$color});
     }
-
-    a {
-      color: var(--#{$color});
-    }
   }
 }

data/_sass/menu.scss

@@ -0,0 +1,20 @@
+.navbar {
+  &:focus-within {
+    .navbar-collapse {
+      @extend .d-block;
+    }
+  }
+
+  .dropdown {
+    .dropdown-menu {
+      @extend .d-none;
+    }
+
+    &:hover,
+    &:focus-within {
+      .dropdown-menu {
+        @extend .d-block;
+      }
+    }
+  }
+}

data/_sass/snap.scss

@@ -0,0 +1,58 @@
+$snap-types: (none, mandatory, proximity);
+$snap-directions: (y, x);
+$snap-points: (start, end, center, none);
+
+// TODO: Escribir un mixin
+@each $snap-type in $snap-types {
+  @each $snap-direction in $snap-directions {
+    // El contenedor indica la dirección y obligatoriedad del snap
+    .snap-#{$snap-type}-#{$snap-direction} {
+      scroll-snap-points-#{$snap-direction}: repeat(100%);
+      scroll-snap-destination: 0 0;
+      @each $prefix in $vendor-prefixes {
+        #{$prefix}scroll-snap-type: #{$snap-direction} #{$snap-type};
+        #{$prefix}scroll-snap-type: #{$snap-type};
+      }
+
+      // Lxs hijxs directos se alinean al contenedor
+      @each $snap-point in $snap-points {
+        & > .snap-#{$snap-point} {
+          scroll-snap-align: #{$snap-point};
+        }
+      }
+
+      // Poder modificar el snap según el punto de corte
+      @each $grid-breakpoint, $_ in $grid-breakpoints {
+        @include media-breakpoint-up($grid-breakpoint) {
+          @each $snap-point in $snap-points {
+            & > .snap-#{$grid-breakpoint}-#{$snap-point} {
+              scroll-snap-align: #{$snap-point};
+            }
+          }
+        }
+      }
+    }
+
+    @each $grid-breakpoint, $_ in $grid-breakpoints {
+      @include media-breakpoint-up($grid-breakpoint) {
+        .snap-#{$snap-type}-#{$grid-breakpoint}-#{$snap-direction} {
+          // XXX: Esto está duplicado porque SCSS no nos deja extender
+          // dentro de un @include.
+          // @extend .snap-#{$snap-type}-#{$snap-direction};
+          scroll-snap-points-#{$snap-direction}: repeat(100%);
+          scroll-snap-destination: 0 0;
+          @each $prefix in $vendor-prefixes {
+            #{$prefix}scroll-snap-type: #{$snap-direction} #{$snap-type};
+            #{$prefix}scroll-snap-type: #{$snap-type};
+          }
+
+          @each $snap-point in $snap-points {
+            .snap-#{$snap-point} {
+              scroll-snap-align: #{$snap-point};
+            }
+          }
+        }
+      }
+    }
+  }
+}