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 `theme` para obtener los valores
/// personalizados.

{% comment %}
  Los artículos con layout `theme` contienen variables utilizadas por
  Bootstrap que pueden ser redefinidas por les usuaries de Sutty a través
  del panel.
{% endcomment %}
{% assign theme = site.posts | find: 'layout', 'theme' %}
{% assign theme_defaults = site.data.layouts.theme %}
{% comment %}
  Ignorar estos campos que no son variables.
{% endcomment %}
{% assign ignored_keys = 'title,draft,order' | split: ',' %}
{% comment %}
  Cada variable de Bootstrap viene desde la definición de `theme`.  Por
  convención usamos snake_case, pero Bootstrap usa guión medio, así que
  las convertimos.

  Utilizamos los valores que vengan del artículo y si no existen, usamos
  los valores por defecto de sutty-base.  De lo contrario mantenemos los
  de Bootstrap.
{% endcomment %}
{% for variable in theme_defaults %}
{% assign key = variable[0] %}
{% if ignored_keys contains key %}{% continue %}{% endif %}
{% assign default_value = variable[1].default[site.locale] %}
{% assign variable_name = key | replace: '_', '-' %}
{% if theme[key] or default_value %}
{% comment %}
  Generamos una definición de variable de SASS
{% endcomment %}
${{ variable_name }}: {{ theme[key] | default: default_value }};
{% endif %}
{% endfor %}

/// 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;

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