editorial-autogestiva-jekyll-theme 0.2.8 → 0.3.0

data/_layouts/home.html

@@ -2,20 +2,30 @@
 layout: default
 ---
 
-<div class="row books">
-  {% assign books = site.posts | where: 'layout', 'book' %}
+{% assign books = site.posts | where: 'layout', 'book' %}
+
+<div class="row books row-cols-1 row-cols-md-3 row-cols-lg-4">
   {%- for book in books -%}
-    <a href="{{ book.url }}">
-      <div class="col book">
-        <img
-          src="{{ book.image.path | thumbnail: 212, 300 }}"
-          alt="{{ book.image.description | default: book.title }}"
-          loading="lazy"
-          />
+    <article
+      {% include_cached cart_controller.html product=book extra=book.author %}
+      class="col book mb-3">
+      <header class="position-relative">
+        <div class="text-center">
+          <img
+            class="img-fluid"
+            src="{{ book.image.path | thumbnail: nil, 300 }}"
+            alt="{{ book.image.description | default: book.title }}"
+            loading="lazy" />
+        </div>
+
+        <h1 class="f-4 mt-3">{{ book.title }}</h1>
+
+        <a class="stretched-link" href="{{ book.url }}"></a>
+      </header>
+
+      <p>{{ book.author | join: ', ' }}</p>
 
-        <h2>{{ book.title }}</h2>
-        <p>{{ book.author | join: ', ' }}</p>
-      </div>
-    </a>
+      {%- include_cached cart_add.html product=book -%}
+    </article>
   {%- endfor %}
 </div>

data/_layouts/payment.html

@@ -0,0 +1,21 @@
+---
+layout: default
+---
+
+<section class="">
+  <header class="">
+    <h1>{{ page.title }}</h1>
+  </header>
+
+  <div class="content">
+    {{ content }}
+  </div>
+
+  <div
+    id="cart-payment-methods"
+    data-controller="cart-payment-methods"
+    data-cart-payment-methods-next-url="{{ site.confirmation.url }}"
+    data-cart-payment-methods-back-url="{{ site.shipment.url }}"
+    data-cart-payment-methods-template="assets/templates/payment_methods.html">
+  </div>
+</section>

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/_layouts/shipment.html

@@ -0,0 +1,49 @@
+---
+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-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>
+
+    <h2 class="mt-3">{{ page.shipping_methods }}</h2>
+
+    <div data-target="cart-shipping.methods">
+      {{ page.shipping_methods_help | markdownify }}
+    </div>
+  </div>
+</section>

data/_sass/accessibility.scss

@@ -0,0 +1,37 @@
+* {
+  scroll-behavior: smooth;
+}
+
+/*
+ * Deshabilita animaciones si la usuaria las tiene deshabilitadas
+ */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    scroll-behavior: auto;
+    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

@@ -0,0 +1,318 @@
+// 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.
+
+// 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;
+  }
+}
+
+// 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;
+    }
+
+    // Ajustes para Bootstrap
+    .form-control {
+      border-color: var(--#{$color});
+      color: var(--#{$color});
+    }
+
+    hr {
+      border-color: var(--#{$color});
+    }
+  }
+}