adhesiones-jekyll-theme 0.2.0 → 0.2.2

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

data/_sass/toggler.scss

@@ -58,6 +58,15 @@ input.toggler {
         height: auto;
       }
     }
+
+    &.btn {
+      &,
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: $redpink
+      }
+    }
   }
 
   & + label {

data/assets/css/styles.scss

@@ -2,6 +2,23 @@
 # Ponemos un frontmatter porque queremos que Jekyll procese este archivo
 ---
 
+$debug: {{ jekyll.environment | not: 'production' }};
+$vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
+$bezier: cubic-bezier(0.75, 0, 0.25, 1);
+
+$colors: (
+  "black": black
+);
+
+$opacities: (
+  0: -100%,
+  1: -80%,
+  2: -60%,
+  3: -40%,
+  4: -20%,
+  5: 0%
+);
+
 $font-family-sans-serif: Saira, sans-serif;
 $redpink: #ff3f56;
 $pink: #f31a69;
@@ -19,22 +36,19 @@ $theme-colors: (
 $border-width: 0.3rem;
 $border-color: $pink;
 
-@each $name, $color in $theme-colors {
-  .#{$name} {
-    color: $color !important;
-  }
-}
-
 .font-bigger {
   font-size: 2rem !important;
 }
 
+/*
+ * Redefinir variables de Boostrap acá.  Se las puede ver en
+ * node_modules/bootstrap/scss/_variables.scss
+ */
+
 /*
  * XXX: Solo importar los archivos necesarios de bootstrap para
  * facilitar la reducción de CSS.  Por ahora pedimos todo para poder
  * empezar a trabajar en el HTML sin pensar en CSS.
- *
- * Los archivos se encuentran en node_modules/bootstrap/scss
  */
 @import "font";
 @import "bootstrap/scss/bootstrap";
@@ -43,6 +57,10 @@ $border-color: $pink;
 @import "helpers";
 @import "toggler";
 @import "share_box";
+@import "embed";
+@import "snap";
+@import "editor";
+@import "menu";
 
 .callout {
   padding: 15px;
@@ -81,3 +99,11 @@ $border-color: $pink;
     }
   }
 }
+
+@if $debug {
+  /*
+   * Mostrar un borde alrededor de todos los elementos para poder
+   * trabajar.
+   */
+  * { outline: 1px solid pink; }
+}