observatorio-jekyll-theme 0.1.2

data/assets/css/styles.scss

@@ -0,0 +1,173 @@
+---
+# 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: '_', '-' %}
+{% comment %}
+  Generamos una definición de variable de SASS
+{% endcomment %}
+${{ variable_name }}: {{ theme[key] | default: default_value }}{{ variable[1].unit }};
+{% endfor %}
+
+/// El modo debug se desactiva en producción
+$debug: {{ jekyll.environment | not: 'production' }};
+$green: #1cdd57;
+$dark: #000000;
+$blue: #0c6c94;
+$red: #9a3995;
+$gray: #eff1f2;
+$gray-900: #212529;
+
+$success: $primary;
+$carousel-control-color: $gray-900;
+$headings-line-height: 1.35;
+
+/// 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,
+  "primary": $primary
+);
+
+/// 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),
+  9: ($spacer * 7),
+  10: ($spacer * 8),
+  11: ($spacer * 9),
+  12: ($spacer * 10),
+  13: ($spacer * 11),
+  14: ($spacer * 12),
+  h1: 2.5rem,
+  8: 5rem,
+  100: 100%,
+  15: 15rem,
+  20: 20rem,
+  30: 30rem,
+  50vh: 50vh,
+  80vh: 80vh,
+  100vh: 100vh,
+  revert: revert
+);
+
+/// Tamaños (anchos y altos) redefinidos desde Bootstrap.
+$sizes: (
+  10: 10%,
+  15: 15rem,
+  20: 20rem,
+  30: 30rem,
+  40: 40%,
+  50: 50%,
+  60: 60%,
+  70: 70%,
+  80: 80%,
+  90: 90%,
+  50vh: 50vh,
+  75vh: 75vh,
+  80vh: 80vh,
+  100vh: 100vh,
+  100vw: 100vw,
+  revert: revert
+);
+
+/// 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 "slider";
+@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; }
+}

data/assets/data/site.json

@@ -0,0 +1,10 @@
+---
+---
+
+{% comment %}
+Genera un site.json con las traducciones del sitio
+{% endcomment %}
+  "i18n": {{ site.i18n | jsonify }},
+  "ignored_layouts": {{ site.ignored_layouts | jsonify }},
+  "images": {{ site.images | jsonify }}
+}