observatorio-jekyll-theme 0.1.2

data/_layouts/product.html

@@ -0,0 +1,110 @@
+---
+layout: default
+---
+
+<article
+  itemscope itemtype="http://schema.org/Product"
+  class="w-100 pb-5 h-entry">
+  <div class="m-auto row no-gutters justify-content-center">
+    <div class="col-10 col-lg-6">
+      <picture>
+        <img
+          itemprop="image"
+          class="img-fluid"
+          src="{{ page.image.path | thumbnail: 316 }}"
+          alt="{{ page.image.description | default: page.title }}" />
+      </picture>
+
+      <div class="w-lg-50">
+        <h4 class="sr-only">{{ site.i18n.libro.ficha }}</h4>
+
+        <ul class="border-bottom border-tl list-unstyled pt-5 gray-600">
+          <li>
+            <time
+              class="dt-published"
+              itemprop="datePublished"
+              datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date_local: '%B %Y' }}</time>
+          </li>
+
+          {% if page.width > 0 %}
+            <li itemprop="width" itemscope="https://schema.org/QuantitativeValue">
+              <span class="font-weight-bold">{{ site.data.layouts.product.width.label[site.lang] }}</span>
+              <span itemprop="value">{{ page.width }}</span>
+              <span itemprop="unitText">{{ site.cart.length_unit | default: site.data.layouts.cart.length_unit.default[site.lang] }}</span>
+            </li>
+          {% endif %}
+
+          {% if page.height > 0 %}
+            <li itemprop="height" itemscope="https://schema.org/QuantitativeValue">
+              <span class="font-weight-bold">{{ site.data.layouts.product.height.label[site.lang] }}</span>
+              <span itemprop="value">{{ page.height }}</span>
+              <span itemprop="unitText">{{ site.cart.length_unit | default: site.data.layouts.cart.length_unit.default[site.lang] }}</span>
+            </li>
+          {% endif %}
+
+          {% if page.depth > 0 %}
+            <li itemprop="depth" itemscope="https://schema.org/QuantitativeValue">
+              <span class="font-weight-bold">{{ site.data.layouts.product.depth.label[site.lang] }}</span>
+              <span itemprop="value">{{ page.depth }}</span>
+              <span itemprop="unitText">{{ site.cart.length_unit | default: site.data.layouts.cart.length_unit.default[site.lang] }}</span>
+            </li>
+          {% endif %}
+
+          {% if page.weight > 0 %}
+            <li itemprop="weight" itemscope="https://schema.org/QuantitativeValue">
+              <span class="font-weight-bold">{{ site.data.layouts.product.weight.label[site.lang] }}</span>
+              <span itemprop="value">{{ page.weight }}</span>
+              <span itemprop="unitText">{{ site.cart.weight_unit | default: site.data.layouts.cart.weight_unit.default[site.lang] }}</span>
+            </li>
+          {% endif %}
+        </ul>
+
+        <div itemprop="offers">
+          <div
+            class="d-flex align-items-center justify-content-between mb-3 ml-1"
+            {% include_cached cart_controller.html product=page %}
+            itemscope itemtype="https://schema.org/Offer">
+
+            <meta itemprop="sku" content="{{ page.sku }}" />
+            <meta itemprop="acceptedPaymentMethod" content="http://purl.org/goodrelations/v1#PayPal" />
+            <meta itemprop="availableDeliveryMethod" content="http://purl.org/goodrelations/v1#Mail" />
+
+            {% if page.in_stock %}
+              <meta itemprop="availability" content="https://schema.org/InStock" />
+            {% else %}
+              <meta itemprop="availability" content="https://schema.org/OutOfStock" />
+            {% endif %}
+
+            <p>
+              <span itemprop="price" data-stock-price>{{ page.price | floor }}</span>
+              <span itemprop="priceCurrency" data-stock-currency>{{ site.cart.currency }}</span>
+            </p>
+
+            <button
+              data-action="cart#add"
+              {{ page.in_stock | value_if: 'disabled' }}
+              class="btn btn-primary btn-block">
+              <span class="hide-when-disabled">{{ site.cart.add }}</span>
+              <span class="show-when-disabled">{{ site.cart.out_of_stock | default: site.data.layouts.cart.out_of_stock.default[site.locale] }}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-10 col-lg-6 black mt-5 mt-lg-0">
+      <header>
+        <h1 class="p-name" itemprop="name headline">{{ page.title }}</h1>
+        <p class="lead p-summary" itemprop="description">{{ page.description }}</p>
+      </header>
+
+      <div class="font-weight-light gray-600 lead text-md-justify hyphens-md e-content" itemprop="abstract">
+        {{ content }}
+      </div>
+    </div>
+  </div>
+
+  <span hidden itemprop="identifier">{{ page.uuid }}</span>
+  <a hidden class="u-url" itemprop="url" href="{{ page.url | absolute_url }}">{{ page.url | absolute_url }}</a>
+  <meta itemprop="keywords" content="{{ page.categories | join: ',' }}{% unless page.categories == empty %},{% endunless %}{{ page.tags | join: ',' }}"/>
+</article>

data/_layouts/shipment.html

@@ -0,0 +1,52 @@
+---
+layout: default
+---
+
+<section>
+  <header>
+    <h1>{{ page.title }}</h1>
+  </header>
+
+  <div class="content">
+    {{ content }}
+  </div>
+
+  <div id="user" data-controller="cart-contact">
+    <h2>{{ page.user }}</h2>
+
+    <form data-target="cart-contact.form">
+      {% for field in site.data.forms.user %}
+        {% assign template = field[1].type | append: '.html' %}
+        {% include {{ template }} field=field form='user' %}
+      {% endfor %}
+    </form>
+  </div>
+
+  <div
+    id="shipping-address"
+    class="mt-3"
+    data-controller="cart-shipping"
+    data-scroll-to="cart-shipping"
+    data-cart-shipping-next="{{ site.payment.url }}"
+    data-cart-shipping-template="assets/templates/shipping_methods.html">
+
+    <h2>{{ page.shipping_address }}</h2>
+
+    <form
+      data-target="cart-shipping.form"
+      data-action="cart-shipping#rates">
+      {% for field in site.data.forms.shipping_address %}
+        {% assign template = field[1].type | append: '.html' %}
+        {% include {{ template }} field=field %}
+      {% endfor %}
+    </form>
+
+    <div id="cart-shipping">
+      <h2 class="mt-3">{{ page.shipping_methods }}</h2>
+
+      <div data-target="cart-shipping.methods">
+        {{ page.shipping_methods_help | markdownify }}
+      </div>
+    </div>
+  </div>
+</section>

data/_layouts/sumate.html

@@ -0,0 +1,20 @@
+---
+layout: default
+---
+
+{%- assign form = site.data.forms.sumate -%}
+
+<section id="participa" class="row justify-content-center no-gutters">
+	<div class="col-7 mt-5 mb-5">
+		<form id="{{ name }}" class="update-domain" autocomplete="off" data-attr="action" action="https://api.{{ site.hostname }}/v1/sites/{{ site.hostname }}/contact/{{ name }}" method="post">
+			<div class="row justify-content-center">
+				{%- for field in form -%}
+					{% assign template = field[1].type | append: '.html' %}
+					<div class="col{{ field[1].col | default: 12 | prepend: '-' }}">
+						{% include {{ template }} field=field %}
+					</div>
+				{%- endfor -%}
+			</div>
+		</form>
+	</div>
+</section>

data/_sass/accessibility.scss

@@ -0,0 +1,54 @@
+////
+/// 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; }
+
+/// 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 !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/content.scss

@@ -0,0 +1,11 @@
+/// Todos los elementos dentro de .content tienen margen inferior, salvo
+/// el último, para no modificar el padding y margin del contenedor.
+.content {
+  & > * {
+    margin-bottom: 1rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

data/_sass/editor.scss

@@ -0,0 +1,29 @@
+////
+/// Estilos del editor de Sutty
+/// @group Editor
+///
+
+.content {
+  figure,
+  video,
+  audio,
+  img {
+    @extend .d-block;
+    @extend .img-fluid;
+    @extend .text-center;
+    @extend .m-auto;
+  }
+
+  /// 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

@@ -0,0 +1,13 @@
+////
+/// 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%;
+  min-height: 30rem;
+}

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/fonts.scss

@@ -0,0 +1,29 @@
+// https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/roboto/v27/KFOkCnqEu92Fr1Mu52xP-subset.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url(../fonts/roboto/v27/KFOjCnqEu92Fr1Mu51TzBhc9-subset.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/roboto/v27/KFOmCnqEu92Fr1Me5Q-subset.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(../fonts/roboto/v27/KFOlCnqEu92Fr1MmWUlvAw-subset.woff2) format('woff2');
+}