---
# Ponemos un frontmatter porque queremos que Jekyll procese este archivo
---

$secondary: #f31a69;

{%- assign theme = site.posts | find: "layout", "theme" -%}

{% if theme %}
  {{ theme | yaml_to_scss: site.data.layouts.theme }}
{% endif %}

$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%
);

$border-radius: .1rem;
$h1-font-size: 3.5rem;
$theme-colors: (
  "transparent": transparent,
);

$border-width: 0.3rem;
$border-color: $secondary;

.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.
 */
@import "font";
@import "bootstrap/scss/bootstrap";
@import "fork-awesome/scss/fork-awesome";
@import "accessibility";
@import "helpers";
@import "toggler";
@import "share_box";
@import "embed";
@import "snap";
@import "editor";
@import "menu";

.callout {
  padding: 15px;
  margin: 25px 0;
  border-left: 3px  solid #343a40;/*--gray-dark*/
}

@include media-breakpoint-down('md') {
  h1 {
    font-size: 2rem;
  }
}

/*
 * Copiando de node_modules/bootstrap/scss/_buttons.scss porque SASS no
 * permite extender dentro de media queries
 */
@each $grid-breakpoint, $_ in $grid-breakpoints {
  @include media-breakpoint-down($grid-breakpoint) {
    .btn-#{$grid-breakpoint}-lg {
      @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
    }

    .btn-#{$grid-breakpoint}-sm {
      @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
    }

    .btn-block {
      display: block;
      width: 100%;

      // Vertically space out multiple block buttons
      + .btn-block {
        margin-top: $btn-block-spacing-y;
      }
    }
  }
}

@if $debug {
  /*
   * Mostrar un borde alrededor de todos los elementos para poder
   * trabajar.
   */
  * { outline: 1px solid pink; }
}