imagen-jekyll-theme 0.1.0

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,36 @@
+// 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');
+}
+@font-face {
+  font-family: 'Helvetica';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/Helvetica.woff2) format('woff2');
+}

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;
+      }
+    }
+  }
+}

data/_sass/share_box.scss

@@ -0,0 +1,26 @@
+input[type="checkbox"].toggler {
+  &:focus + label {
+    outline: none;
+  }
+}
+
+.share-box {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0,0,0,.5);
+
+  @include vendor-prefix(transition, all 0.2s $bezier);
+
+  a {
+    border: $border-width solid transparent;
+
+    &:focus,
+    &:hover {
+      text-decoration: none;
+      border: $border-width solid $border-color;
+    }
+  }
+}

data/_sass/snap.scss

@@ -0,0 +1,60 @@
+////
+/// @group Snap
+////
+
+/// _Snap_ es una forma de hacer que los elementos se alineen
+/// automáticamente a partes de su contenedor durante el _scroll_.  Si le
+/// usuarie _scrollea_ hasta la mitad, el navegador continua el _scroll_
+/// hasta que se alinee.  Es útil para presentaciones de diapositivas
+/// (como el sitio de Sutty) o _banners_ con navegación horizontal
+/// (_sliders_).
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap
+$snap-types: (none, mandatory, proximity);
+/// Ejes
+$snap-directions: (y, x);
+/// Puntos de alineación
+$snap-points: (start, end, center, none);
+
+@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);
+
+    @each $snap-type in $snap-types {
+      @each $snap-direction in $snap-directions {
+/// El contenedor indica la dirección y obligatoriedad del snap
+///
+/// @example html
+///   <div class="snap-mandatory-y snap-proximity-md-y"></div>
+        .snap-#{$snap-type}#{$infix}-#{$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 {
+/// Los elementos que son descendientes directos se alinean a
+/// su contenedor
+///
+/// @example html
+///   <div class="snap-mandatory-y snap-proximity-md-y">
+///     <div class="snap-start"></div>
+///     <div class="snap-center"></div>
+///     <div class="snap-end"></div>
+///   </div>
+            & > .snap-#{$snap-point} {
+              scroll-snap-align: #{$snap-point};
+            }
+          }
+        }
+      }
+    }
+  }
+}

data/_sass/toggler.scss

@@ -0,0 +1,20 @@
+////
+/// @group Toggler
+////
+
+/// Desplegar menúes sin javascript!
+///
+/// Comenzamos con un `<input type="checkbox"/>` con la clase
+/// `.toggler`.
+///
+/// @link https://dev.to/cydstumpel/creating-a-fold-out-navigation-with-css-only-4g9k
+/// @see toggler.html
+.toggler {
+  & + .toggled {
+    visibility: hidden;
+  }
+
+  &:checked + .toggled {
+    visibility: visible;
+  }
+}