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

// El primer artículo que sea de tipo radio
{%- assign radio = site.posts | find: 'layout', 'radio' -%}

// Pasar variables de Liquid a SASS
$navbar-background: {{ radio.navbar_background_color | default: '#6dc381' }};
$navbar-foreground: {{ radio.navbar_foreground_color | default: '#241f31' }};
$social-foreground: {{ radio.social_foreground_color | default: 'white' }};

// Redefinir los colores de Bootstrap en base a los elegidos, esto
// cambia recursivamente algunas sombras y todo
$body-bg: {{ radio.background_color | default: 'white' }};
$body-color: {{ radio.foreground_color | default: '#241f31' }};
$link-color: $navbar-background;

// Tamaño del nombre de la radio
$navbar-brand-font-size: 1rem;

/*
 * 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 "bootstrap/scss/bootstrap";
@import "fork-awesome/scss/fork-awesome";
@import "accessibility";
@import "helpers";
@import "toggler";
@import "share_box";

// Lo que vaya a llevar los colores de la barra de navegación
.navbar-theme {
  background-color: $navbar-background !important;
  color: $navbar-foreground !important;

  a {
    color: $navbar-foreground;

    @include hover() {
      color: darken($navbar-foreground, 15%) !important;
    }
  }

  // Define la clase que va a llevar el color de los botones de redes sociales
  // XXX: Va dentro de navbar-theme porque es el único lugar donde los
  // vamos a usar por ahora.
  .social-theme {
    color: $social-foreground !important;

    // Cambiar de color los botones al pasar por encima
    // XXX: La función viene de Bootstrap, por eso está la definición
    // después de incluirlo.
    @include hover() {
      color: darken($social-foreground, 15%) !important;
    }
  }
}

.turbolinks-progress-bar {
  background-color: $navbar-foreground;
}