styles.scss in recursero-jekyll-theme-0.2.0

- old
+ new

@@ -1,30 +1,98 @@
 ---
 # 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] }};
+
 $navbar-height: 86px;
 $enable-rounded: false;
+
+/// 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: (
   "recursero": mediumorchid
 );
 
-/*
- * XXX: 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.
- *
- * Los archivos se encuentran en node_modules/bootstrap/scss
- */
+/// Tamaños (anchos y altos) redefinidos desde Bootstrap.
+$sizes: (
+  100vh: 100vh,
+  100vw: 100vw
+);
+
+/// Niveles de opacidad/transparencia
+$opacities: (
+  0: -100%,
+  1: -80%,
+  2: -60%,
+  3: -40%,
+  4: -20%,
+  5: 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 "navbar";
 @import "embed";
+@import "snap";
+@import "editor";
+@import "menu";
 
 .navbar {
   margin-bottom: -$navbar-height; /* El alto del navbar */
 }
 
@@ -37,6 +105,20 @@
   /* Tomar en cuenta el alto del navbar */
   padding-top: calc(#{$jumbotron-padding} + #{$navbar-height});
   @include media-breakpoint-up(sm) {
     padding-top: calc(#{($jumbotron-padding * 2)} + #{$navbar-height});
   }
+}
+
+/// 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; }
 }