151 lines
4.2 KiB
SCSS
151 lines
4.2 KiB
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,last_modified_at,uuid,layout,liquid,usuaries' | 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 }}{{ variable[1].unit }};
|
|
{% 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);
|
|
|
|
/// 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;
|
|
|
|
///tipografías responsive
|
|
$enable-responsive-font-sizes: true;
|
|
|
|
/// 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";
|
|
@import "content";
|
|
@import "fonts";
|
|
@import "floating_alert";
|
|
|
|
/// 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; }
|
|
}
|