133 lines
3.7 KiB
SCSS
133 lines
3.7 KiB
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; }
|
|
}
|