adhesiones-jekyll-theme 0.2.0 → 0.2.2

data/_includes/picture.html

@@ -0,0 +1,23 @@
+{% comment %}
+Imágenes responsive.  Esto logra que solo se carguen las versiones de
+las imágenes con el ancho máximo de la pantalla.
+
+TODO: Las imágenes en md y superior nunca llegan al ancho máximo así
+que tienen una resolución de más.
+{% endcomment %}
+{%- assign image = include.image.path | default: 'public/placeholder.png' %}
+{%- assign height = include.height | default: site.i18n.post.height -%}
+{%- assign width = include.width | default: '100' -%}
+
+<picture>
+  {% for size in site.images.sizes %}
+    <source srcset="{{ image | thumbnail: size }}" media="(max-width: {{ size }}px)" />
+  {% endfor %}
+
+  <img
+    class="u-photo w-{{ width }} {{ include.cover | equals: false | value_unless: 'fit-cover' }} h-{{ height }} {{ include.extra }}"
+    loading="lazy"
+    itemprop="image"
+    src="{{ image | thumbnail: 1140 }}"
+    alt="{{ include.image.description | include.default_description }}" />
+</picture>

data/_includes/preload_font.html

@@ -0,0 +1 @@
+<link rel="preload" as="font" type="font/woff2" crossorigin href="{{ include.font }}" />

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

@@ -7,9 +7,29 @@
     <meta content="width=device-width, initial-scale=1.0" name="viewport">
     <meta name="theme-color" content="white"/>
     <meta name="color-scheme" content="light"/>
+    <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>
 
@@ -63,13 +63,23 @@ layout: default
     <div class="col-12 col-lg-6 pt-5">
       {%- assign forms = 'adhesion,adhesion_individual' | split: ',' -%}
       {% for form in forms %}
-        <input type="radio" name="adhesiones" id="toggler-{{ form }}" class="toggler" autocomplete="off" {% cycle 'checked','' %} />
+        <input
+          type="radio"
+          name="adhesiones"
+          id="toggler-{{ form }}"
+          class="toggler"
+          autocomplete="off"
+          {% if form == site.i18n.home.form.default %}checked{% endif %}
+          />
         <label class="btn border position-absolute top {% cycle 'left','right' %}" for="toggler-{{ form }}">
           {{ site.i18n.home.form[form] }}
         </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 -%}
@@ -82,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>
@@ -119,7 +133,8 @@ layout: default
 </section>
 
 {%- assign adhesiones = site.posts | where: 'layout', 'adhesion' -%}
-{%- assign adhesiones_individuales = site.posts | where: 'layout', 'adhesion_individual' -%}
+{%- assign adhesiones_individuales = site.posts | where: 'layout', 'adhesion_individual' | size -%}
+{%- assign total = adhesiones | size | plus: adhesiones_individuales -%}
 
 <section class="mt-5" id="adhesiones">
   <header class="row align-items-center justify-content-between">
@@ -129,7 +144,7 @@ layout: default
 
     <div class="col-6 col-lg-4">
       <p>
-        <span class="font-weight-bold font-bigger">{{ adhesiones | size }}</span>
+        <span class="font-weight-bold font-bigger">{{ total }}</span>
         {{ site.i18n.home.metric }}
         <i class="fa fa-line-chart"></i>
       </p>
@@ -158,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;
+      }
+    }
+  }
+}