sutty-base-jekyll-theme/assets/css/styles.scss

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

////
/// @group Principal
////

/// Traemos el primer artículo de tipo `about` para obtener los valores
/// personalizados.
///
/// @todo Mover a su propio SCSS
{% assign about = site.posts | find: 'layout', 'about' %}

/// El modo debug se desactiva en producción
$debug: {{ jekyll.environment | not: 'production' }};
/// Los prefijos de navegadores para poder generar estilos que no están
/// estandarizados.
/// @link _sass/helpers.scss
$vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
/// Curva Bezier que acelera al principio y desacelera hacia el final,
/// para generar animaciones.
$bezier: cubic-bezier(0.75, 0, 0.25, 1);

/// Redefinir la tipografía aquí, o borrar si usamos las de Bootstrap
$font-family-sans-serif: sans-serif;
/// El color primario de la paleta, se trae desde el `about` o sea usa
/// el color por defecto.
///
/// @link _data/layouts/about.yml
$primary: {{ about.primary | default: site.data.layouts.about.primary.default[site.locale] }};

/// El color secundario de la paleta, se trae desde el `about` o sea usa
/// el color por defecto.
///
/// @link _data/layouts/about.yml
$secondary: {{ about.secondary | default: site.data.layouts.about.secondary.default[site.locale] }};


/// Agregamos los colores propios de la plantilla aquí.  Bootstrap los
/// agrega a su propia paleta de colores.  Si usamos el mismo nombre
/// podemos redefinir el color.
///
/// Agregamos negro porque alguna gente no lo considera un color.
$colors: (
  "black": black
);

/// Redefinir los colores de temas aquí, esto aplica a los elementos
/// `-primary`, `-secondary`, etc. de Bootstrap.  Por ejemplo para
/// generar un botón con otro color y sus sombras correspondientes, lo
/// agregamos acá.
$theme-colors: (
);

$spacer: 1rem !default;
$spacers: (
  6: ($spacer * 4),
  7: ($spacer * 5),
  8: ($spacer * 6),
  9: ($spacer * 7),
  10: ($spacer * 8),
  11: ($spacer * 9),
  12: ($spacer * 10),
  13: ($spacer * 11), 
  14: ($spacer * 12),  
  15: ($spacer * 13),
);

/// Tamaños (anchos y altos) redefinidos desde Bootstrap.
$sizes: (
  10: 10%,
  20: 20%,
  30: 30%,
  40: 40%,
  50: 50%,
  60: 60%,
  70: 70%,
  80: 80%,
  90: 90%,
  50vh: 50vh,
  75vh: 75vh,
  100vh: 100vh,
  100vw: 100vw
);

/// Niveles de opacidad/transparencia
$opacities: (
  0: -100%,
  1: -80%,
  2: -60%,
  3: -40%,
  4: -20%,
  5: 0%
);

/// Resetear algunos margins y paddings por defecto a cero
$paragraph-margin-bottom: 0;
$headings-margin-bottom: 0;
$label-margin-bottom: 0;

/// Redefinir variables de Boostrap acá.  Se las puede ver en
/// node_modules/bootstrap/scss/_variables.scss
///
/// @todo 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 "bootstrap/scss/bootstrap";
/// Íconos
@import "fork-awesome/scss/fork-awesome";
/// Nuestro propio SCSS
@import "accessibility";
@import "helpers";
@import "toggler";
@import "share_box";
@import "embed";
@import "snap";
@import "editor";
@import "menu";

/// La barra de progreso de Turbolinks tiene el color primario
/// de la paleta, definido por Bootstrap o por nosotres.
.turbolinks-progress-bar { background-color: $primary; }
/// La barra de progreso de Turbo tiene el color primario
/// de la paleta, definido por Bootstrap o por nosotres.
.turbo-progress-bar { background-color: $primary; }

/// Mostrar un borde alrededor de todos los elementos para poder
/// detectar el espacio que ocupan los elementos.  El borde no ocupa
/// espacio de por sí, con lo que no afecta la estructura del sitio.
@if $debug {
  * { outline: 1px solid pink; }
}