Merge branch 'sassdoc'
This commit is contained in:
f
commit
b3e4c6e73d
17 changed files with 3177 additions and 1348 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -15,3 +15,4 @@ node_modules/
|
||||||
.env
|
.env
|
||||||
*.ttf
|
*.ttf
|
||||||
*.otf
|
*.otf
|
||||||
|
_sassdoc/
|
||||||
|
|
|
||||||
7
.sassdocrc
Normal file
7
.sassdocrc
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
theme: herman
|
||||||
|
herman:
|
||||||
|
sass:
|
||||||
|
jsonFile: 'sutty.json'
|
||||||
|
includePaths:
|
||||||
|
- 'node_modules'
|
||||||
|
- '_sass'
|
||||||
6
Makefile
6
Makefile
|
|
@ -32,6 +32,8 @@ build: ## Compilar el sitio (env=production)
|
||||||
make bundle args="exec jekyll build --profile --trace"
|
make bundle args="exec jekyll build --profile --trace"
|
||||||
@echo -e "\a"
|
@echo -e "\a"
|
||||||
|
|
||||||
|
sassdoc: _sassdoc/index.html ## Genera la documentación de SCSS
|
||||||
|
|
||||||
hain: ## Correr comandos con hain (args="comandos")
|
hain: ## Correr comandos con hain (args="comandos")
|
||||||
$(hainish) '$(args)'
|
$(hainish) '$(args)'
|
||||||
|
|
||||||
|
|
@ -112,4 +114,8 @@ latin_unicode := "U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02D
|
||||||
%-subset.woff2: %.otf
|
%-subset.woff2: %.otf
|
||||||
make hain args="pyftsubset $< --output-file=$@ --unicodes=$(latin_unicode) --layout-features='*' --flavor=woff2"
|
make hain args="pyftsubset $< --output-file=$@ --unicodes=$(latin_unicode) --layout-features='*' --flavor=woff2"
|
||||||
|
|
||||||
|
sass_files := $(wildcard _sass/*.scss) assets/css/styles.scss .sassdocrc
|
||||||
|
_sassdoc/index.html: yarn $(sass_files)
|
||||||
|
./node_modules/.bin/sassdoc _sass/ assets/css/ --dest ./_sassdoc
|
||||||
|
|
||||||
.PHONY: always
|
.PHONY: always
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<div
|
<div
|
||||||
data-controller="floating-alert"
|
data-controller="floating-alert"
|
||||||
class="pointer-event-none floating-alert floating-alert-bottom d-flex justify-content-center w-100 position-fixed fade hide"
|
class="floating-alert floating-alert-bottom floating-alert-default"
|
||||||
role="status" aria-live="polite" aria-atomic="true">
|
role="status" aria-live="polite" aria-atomic="true">
|
||||||
<div data-target="toast.content" class="floating-alert-content white background-black-t4"></div>
|
<div data-target="toast.content" class="floating-alert-content white background-black-t4"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,33 @@
|
||||||
* {
|
////
|
||||||
scroll-behavior: smooth;
|
/// Accesibilidad
|
||||||
}
|
/// @group Accesibilidad
|
||||||
|
////
|
||||||
|
|
||||||
/*
|
/// La navegación es suave. Esto hace que al navegar a elementos dentro
|
||||||
* Deshabilita animaciones si la usuaria las tiene deshabilitadas
|
/// de la misma página no haga un salto, sino que haya una transición.
|
||||||
*/
|
///
|
||||||
|
/// Es especialmente útil en sliders.
|
||||||
|
///
|
||||||
|
/// Sin embargo puede producir mareos a algunas personas.
|
||||||
|
* { scroll-behavior: smooth; }
|
||||||
|
|
||||||
|
/// Aquí se aplica la opción `prefers-reduced-motion: reduce`, pero
|
||||||
|
/// SassDoc no la estaría mostrando.
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
/// Si les usuaries prefirieron reducir las animaciones de los sitios,
|
||||||
|
/// deshabilitamos la navegación suavizada y las animaciones.
|
||||||
* {
|
* {
|
||||||
scroll-behavior: auto;
|
scroll-behavior: auto !important;
|
||||||
animation: none !important;
|
animation: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// Utilizamos Axe para poder marcarnos cuáles elementos no cumplen con
|
||||||
|
/// parámetros de accesibilidad durante el desarrollo. Esta clase
|
||||||
|
/// muestra un borde rojo alrededor de los elementos inaccesibles y al
|
||||||
|
/// obtener el foco, muestra los mensajes de error generados por Axe.js.
|
||||||
|
///
|
||||||
|
/// @link _packs/entry.js
|
||||||
.inaccesible {
|
.inaccesible {
|
||||||
outline: $red 1px solid;
|
outline: $red 1px solid;
|
||||||
|
|
||||||
|
|
@ -32,6 +48,7 @@
|
||||||
line-break: auto;
|
line-break: auto;
|
||||||
white-space: pre-line;
|
white-space: pre-line;
|
||||||
|
|
||||||
|
/// El contenido se trae desde el ariaLabel del elemento.
|
||||||
content: attr(aria-label);
|
content: attr(aria-label);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,17 @@
|
||||||
/*
|
////
|
||||||
* Estilos del editor de Sutty
|
/// Estilos del editor de Sutty
|
||||||
*/
|
/// @group Editor
|
||||||
|
///
|
||||||
|
|
||||||
// Alineación
|
/// Alineaciones soportadas. No soportamos justificado porque es
|
||||||
div[data-align="left"] { text-align: left; }
|
/// difícil que quede bien en web.
|
||||||
div[data-align="center"] { text-align: center; }
|
$aligns: (left,center,right);
|
||||||
div[data-align="right"] { text-align: right; }
|
|
||||||
|
/// Recorrer las alineaciones.
|
||||||
|
/// @name Alineaciones
|
||||||
|
@each $align in $aligns {
|
||||||
|
/// El editor coloca la alineación en un atributo data-align,
|
||||||
|
/// recorriendo cada una de las alineaciones disponibles.
|
||||||
|
/// @todo Lograr que SassDoc muestre el código completo.
|
||||||
|
div[data-align="#{$align}"] { text-align: $align; }
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,11 @@
|
||||||
|
////
|
||||||
|
/// Recursos externos
|
||||||
|
/// @group Recursos externos
|
||||||
|
///
|
||||||
|
|
||||||
|
/// Los `<iframe>` ocupan todo el ancho del contenedor y tienen un alto
|
||||||
|
/// mínimo de 480px.
|
||||||
|
/// @link jekyll-embed-urls
|
||||||
iframe {
|
iframe {
|
||||||
border: 0;
|
border: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,46 @@
|
||||||
|
////
|
||||||
|
/// Alertas flotantes
|
||||||
|
/// @group Alertas flotantes
|
||||||
|
////
|
||||||
|
|
||||||
|
/// Posiciones posibles
|
||||||
|
$positions: (top, right, bottom, left);
|
||||||
|
|
||||||
|
/// Las alertas flotantes son notificaciones emergentes que desaparecen
|
||||||
|
/// por su cuenta, como los "Toast" de Android. Tienen opciones de
|
||||||
|
/// accesibilidad para que los lectores de pantalla también las
|
||||||
|
/// notifiquen.
|
||||||
|
/// @link _packs/controllers/notification_controller.js
|
||||||
|
/// @link _includes/floating_alert.html
|
||||||
|
/// @example html
|
||||||
|
/// <div class="floating-alert floating-alert-default floating-alert-bottom">
|
||||||
|
/// <div class="floating-alert-content"></div>
|
||||||
|
/// </div>
|
||||||
.floating-alert {
|
.floating-alert {
|
||||||
&.floating-alert-bottom {
|
/// No se puede interactuar
|
||||||
bottom: 2rem;
|
@extend .pointer-event-none;
|
||||||
|
|
||||||
|
/// El estilo por defecto las coloca centradas y con una transición al
|
||||||
|
/// aparecer o desaparecer. Si no usamos esta clase podemos darle
|
||||||
|
/// nuestro propio estilo.
|
||||||
|
&.floating-alert-default {
|
||||||
|
@extend .d-flex;
|
||||||
|
@extend .justify-content-center;
|
||||||
|
@extend .w-100;
|
||||||
|
@extend .position-fixed;
|
||||||
|
@extend .fade;
|
||||||
|
@extend .hide;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@each $position in $positions {
|
||||||
|
/// Pueden tener una posición fija
|
||||||
|
&.floating-alert-#{$position} {
|
||||||
|
#{$position}: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Tienen un borde redondeado y un padding para parecerse a un toast.
|
||||||
|
/// El color de fondo se lo da una clase background-*
|
||||||
.floating-alert-content {
|
.floating-alert-content {
|
||||||
border-radius: 2rem;
|
border-radius: 2rem;
|
||||||
padding: .5rem 1rem;
|
padding: .5rem 1rem;
|
||||||
|
|
|
||||||
|
|
@ -1,318 +1,350 @@
|
||||||
// En este archivo colocamos todos las herramientas que nos hagan falta,
|
////
|
||||||
// de forma que podamos generar clases específicas que sean combinables
|
/// @group Utilidades
|
||||||
// con otras, en lugar de escribir clases específicas para cada
|
////
|
||||||
// elemento.
|
|
||||||
//
|
|
||||||
// Cada clase tiene su versión responsive de acuerdo a los parámetros de
|
|
||||||
// Bootstrap.
|
|
||||||
|
|
||||||
// Ocultar la barra de scroll, útil para sliders horizontales.
|
/// Direcciones posibles
|
||||||
.no-scrollbar {
|
$directions: (top, right, bottom, left);
|
||||||
scrollbar-width: none;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
|
|
||||||
&::-webkit-scrollbar { display: none; }
|
/// Crea una propiedad con prefijos de navegador, cuando no es
|
||||||
}
|
/// soportada por estándares, por ejemplo el guionado de texto.
|
||||||
|
|
||||||
// Mismo alto que ancho
|
|
||||||
.square {
|
|
||||||
@extend .position-relative;
|
|
||||||
padding-bottom: 100%;
|
|
||||||
|
|
||||||
& > * {
|
|
||||||
@extend .position-absolute;
|
|
||||||
@extend .top-0;
|
|
||||||
@extend .left-0;
|
|
||||||
@extend .h-100;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Eventos del cursor
|
|
||||||
@each $event in (none, auto) {
|
|
||||||
.pointer-event-#{$event} {
|
|
||||||
pointer-events: $event;
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $grid-breakpoint, $_ in $grid-breakpoints {
|
|
||||||
@include media-breakpoint-up($grid-breakpoint) {
|
|
||||||
.pointer-event-#{$grid-breakpoint}-#{$event} {
|
|
||||||
pointer-events: $event;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Agrega una transición a cualquier modificación de atributos
|
|
||||||
.transition {
|
|
||||||
@include transition($transition-base);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Ajustes de imagen y video con respecto al contenedor
|
|
||||||
@each $keyword in (contain, cover, fill, none, scale-down) {
|
|
||||||
.fit-#{$keyword} {
|
|
||||||
object-fit: #{$keyword};
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $grid-breakpoint, $_ in $grid-breakpoints {
|
|
||||||
@include media-breakpoint-up($grid-breakpoint) {
|
|
||||||
.fit-#{$grid-breakpoint}-#{$keyword} {
|
|
||||||
object-fit: #{$keyword};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Cursores
|
|
||||||
@each $cursor in (pointer none) {
|
|
||||||
.cursor-#{$cursor} {
|
|
||||||
cursor: $cursor;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Overflow
|
|
||||||
@each $value in (auto, hidden, scroll) {
|
|
||||||
.overflow-#{$value} {
|
|
||||||
overflow: $value !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $axis in (y, x) {
|
|
||||||
.overflow-#{$axis}-#{$value} {
|
|
||||||
overflow-#{$axis}: $value !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $grid-breakpoint, $_ in $grid-breakpoints {
|
|
||||||
@include media-breakpoint-up($grid-breakpoint) {
|
|
||||||
.overflow-#{$grid-breakpoint}-#{$value} {
|
|
||||||
overflow: $value !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $axis in (y, x) {
|
|
||||||
.overflow-#{$grid-breakpoint}-#{$axis}-#{$value} {
|
|
||||||
overflow-#{$axis}: $value !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $spacer, $length in $spacers {
|
|
||||||
// Poder aumentar o disminuir el alto de la tipografía
|
|
||||||
.f-#{$spacer} {
|
|
||||||
font-size: $length !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Columnas de texto
|
|
||||||
.text-column-#{$spacer} {
|
|
||||||
column-count: $spacer;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Limitar la cantidad de líneas de un bloque de texto
|
|
||||||
.line-clamp-#{$spacer} {
|
|
||||||
overflow: hidden;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: $spacer;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Ubicación absoluta, usar con position-*
|
|
||||||
@each $direction in (top, right, bottom, left) {
|
|
||||||
.#{$direction}-#{$spacer} {
|
|
||||||
#{$direction}: $length
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $grid-breakpoint, $_ in $grid-breakpoints {
|
|
||||||
@include media-breakpoint-up($grid-breakpoint) {
|
|
||||||
// Poder aumentar o disminuir el alto de la tipografía
|
|
||||||
.f-#{$grid-breakpoint}-#{$spacer} {
|
|
||||||
font-size: $length !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Columnas de texto
|
|
||||||
.text-column-#{$grid-breakpoint}-#{$spacer} {
|
|
||||||
column-count: $spacer;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Limitar la cantidad de líneas de un bloque de texto
|
|
||||||
.line-clamp-#{$grid-breakpoint}-#{$spacer} {
|
|
||||||
overflow: hidden;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: $spacer;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Ubicación absoluta, usar con position-*
|
|
||||||
@each $direction in (top, right, bottom, left) {
|
|
||||||
.#{$direction}-#{$grid-breakpoint}-#{$spacer} {
|
|
||||||
#{$direction}: $length
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// anchos y altos
|
|
||||||
@each $prop, $abbrev in (width: w, height: h) {
|
|
||||||
@each $size, $length in $sizes {
|
|
||||||
.#{$abbrev}-#{$size} { #{$prop}: $length; }
|
|
||||||
.#{$abbrev}-#{$size} { #{$prop}: $length; }
|
|
||||||
.min-#{$abbrev}-#{$size} { min-#{$prop}: $length; }
|
|
||||||
.max-#{$abbrev}-#{$size} { max-#{$prop}: $length; }
|
|
||||||
|
|
||||||
@each $grid-breakpoint, $_ in $grid-breakpoints {
|
|
||||||
@include media-breakpoint-up($grid-breakpoint) {
|
|
||||||
.#{$abbrev}-#{$grid-breakpoint}-#{$size} { #{$prop}: $length; }
|
|
||||||
.min-#{$abbrev}-#{$grid-breakpoint}-#{$size} { min-#{$prop}: $length; }
|
|
||||||
.max-#{$abbrev}-#{$grid-breakpoint}-#{$size} { max-#{$prop}: $length; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $scroll in (auto, smooth) {
|
|
||||||
.scroll-#{$scroll} {
|
|
||||||
scroll-behavior: #{$scroll};
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $grid-breakpoint, $_ in $grid-breakpoints {
|
|
||||||
@include media-breakpoint-up($grid-breakpoint) {
|
|
||||||
.scroll-#{$grid-breakpoint}-#{$scroll} {
|
|
||||||
scroll-behavior: #{$scroll};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Versiones responsive de utilidades Bootstrap
|
|
||||||
@each $grid-breakpoint, $_ in $grid-breakpoints {
|
|
||||||
@include media-breakpoint-up($grid-breakpoint) {
|
|
||||||
// Bordes
|
|
||||||
// node_modules/bootstrap/scss/utilities/_borders.scss
|
|
||||||
.border-#{$grid-breakpoint} { border: $border-width solid $border-color !important; }
|
|
||||||
.border-#{$grid-breakpoint}-top { border-top: $border-width solid $border-color !important; }
|
|
||||||
.border-#{$grid-breakpoint}-right { border-right: $border-width solid $border-color !important; }
|
|
||||||
.border-#{$grid-breakpoint}-bottom { border-bottom: $border-width solid $border-color !important; }
|
|
||||||
.border-#{$grid-breakpoint}-left { border-left: $border-width solid $border-color !important; }
|
|
||||||
.border-#{$grid-breakpoint}-0 { border: 0 !important; }
|
|
||||||
.border-#{$grid-breakpoint}-top-0 { border-top: 0 !important; }
|
|
||||||
.border-#{$grid-breakpoint}-right-0 { border-right: 0 !important; }
|
|
||||||
.border-#{$grid-breakpoint}-bottom-0 { border-bottom: 0 !important; }
|
|
||||||
.border-#{$grid-breakpoint}-left-0 { border-left: 0 !important; }
|
|
||||||
|
|
||||||
// Alineación
|
|
||||||
.text-#{$grid-breakpoint}-left { text-align: left !important; }
|
|
||||||
.text-#{$grid-breakpoint}-right { text-align: right !important; }
|
|
||||||
.text-#{$grid-breakpoint}-center { text-align: center !important; }
|
|
||||||
|
|
||||||
// Posicionamiento
|
|
||||||
@each $position in $positions {
|
|
||||||
.position-#{$grid-breakpoint}-#{$position} { position: $position !important; }
|
|
||||||
}
|
|
||||||
|
|
||||||
// Anchos y altos
|
|
||||||
@each $prop, $abbrev in (width: w, height: h) {
|
|
||||||
@each $size, $length in $sizes {
|
|
||||||
.#{$abbrev}-#{$grid-breakpoint}-#{$size} { #{$prop}: $length !important; }
|
|
||||||
.min-#{$abbrev}-#{$grid-breakpoint}-#{$size} { min-#{$prop}: $length !important; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Crea una propiedad con prefijos de navegador
|
|
||||||
@mixin vendor-prefix($property, $definition...) {
|
@mixin vendor-prefix($property, $definition...) {
|
||||||
@each $prefix in $vendor-prefixes {
|
@each $prefix in $vendor-prefixes {
|
||||||
#{$prefix}$property: $definition;
|
#{$prefix}$property: $definition;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Colores
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||||
@each $color, $rgb in $colors {
|
@include media-breakpoint-up($breakpoint) {
|
||||||
.background-#{$color} {
|
/// Obtiene el sufijo para cada clase responsive usando mixins de
|
||||||
background-color: var(--#{$color});
|
/// Bootstrap. Valores posibles:
|
||||||
|
/// `""` (nada, aplica a todas las resoluciones), `-xs`, `-sm`,
|
||||||
|
/// `-md`, `-lg`, `-xl`.
|
||||||
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||||
|
|
||||||
&:focus {
|
/// Ocultar la barra de scroll, útil para sliders horizontales.
|
||||||
background-color: var(--#{$color});
|
///
|
||||||
|
/// @example html
|
||||||
|
/// <div class="no-scrollbar-md"></div>
|
||||||
|
.no-scrollbar#{$infix} {
|
||||||
|
scrollbar-width: none;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar { display: none; }
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@each $opacity, $degree in $opacities {
|
/// Un elemento cuadrado
|
||||||
.background-#{$color}-t#{$opacity} {
|
///
|
||||||
background-color: scale-color($rgb, $alpha: $degree);
|
/// @example html
|
||||||
|
/// <div class="square-lg"></div>
|
||||||
|
.square#{$infix} {
|
||||||
|
@extend .position-relative;
|
||||||
|
padding-bottom: 100%;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
@extend .position-absolute;
|
||||||
|
@extend .top-0;
|
||||||
|
@extend .left-0;
|
||||||
|
@extend .h-100;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@each $attr in (stroke, fill) {
|
/// Cursores
|
||||||
.#{$attr}-#{$color} {
|
$cursors: (pointer, none);
|
||||||
svg {
|
@each $cursor in $cursors {
|
||||||
* {
|
/// El elemento va a tener un cursor
|
||||||
#{$attr}: var(--#{$color});
|
///
|
||||||
|
/// @example html
|
||||||
|
/// <div class="cursor-pointer"></div>
|
||||||
|
.cursor#{$infix}-#{$cursor} {
|
||||||
|
cursor: $cursor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Eventos del cursor
|
||||||
|
$events: (none, auto);
|
||||||
|
@each $event in $events {
|
||||||
|
/// Habilita o deshabilita recibir eventos al tocar o clickear.
|
||||||
|
///
|
||||||
|
/// @example html
|
||||||
|
/// <div class="pointer-event-none"></div>
|
||||||
|
.pointer-event#{$infix}-#{$event} {
|
||||||
|
pointer-events: $event;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Agrega una transición a cualquier modificación de atributos
|
||||||
|
.transition#{$infix} {
|
||||||
|
@include transition($transition-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Valores posibles para la propiedad `object-fit`
|
||||||
|
$objects: (contain, cover, fill, none, scale-down);
|
||||||
|
@each $object in $objects {
|
||||||
|
/// Ajustes de imagen y video con respecto al contenedor
|
||||||
|
///
|
||||||
|
/// @example html
|
||||||
|
/// <img class="object-cover object-lg-contain"/>
|
||||||
|
.fit#{$infix}-#{$object} {
|
||||||
|
object-fit: #{$object};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// _Overflow_, qué hacer cuando el contenido sobrepasa los límites del
|
||||||
|
/// contenedor.
|
||||||
|
$overflows: (auto, hidden, scroll);
|
||||||
|
/// También puede ser solo dentro de un eje
|
||||||
|
$overflow-axis: (x, y);
|
||||||
|
@each $overflow in $overflows {
|
||||||
|
/// Manejar el contenido sobre cualquier eje
|
||||||
|
///
|
||||||
|
/// @example html
|
||||||
|
/// <div class="overflow-hidden overflow-scroll-md"></div>
|
||||||
|
.overflow#{$infix}-#{$overflow} {
|
||||||
|
overflow: $overflow !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $axis in $overflow-axis {
|
||||||
|
/// Manejar el contenido sobre un eje particular
|
||||||
|
///
|
||||||
|
/// @example html
|
||||||
|
/// <div class="overflow-hidden-y overflow-scroll-x"></div>
|
||||||
|
.overflow-#{$axis}#{$infix}-#{$overflow} {
|
||||||
|
overflow-#{$axis}: $overflow !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $spacer, $length in $spacers {
|
||||||
|
/// Poder aumentar o disminuir el alto de la tipografía. Los
|
||||||
|
/// `spacers` están definidos en Bootstrap y pueden ser extendidos
|
||||||
|
/// desde styles.scss
|
||||||
|
///
|
||||||
|
/// @link assets/css/styles.scss
|
||||||
|
/// @example html
|
||||||
|
/// <h1 class="f-3"></h1>
|
||||||
|
.f#{$infix}-#{$spacer} {
|
||||||
|
font-size: $length !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Columnas de texto
|
||||||
|
///
|
||||||
|
/// @example html
|
||||||
|
/// <div class="text-column-1 text-column-md-3"></div>
|
||||||
|
.text-column#{$infix}-#{$spacer} {
|
||||||
|
column-count: $spacer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Limitar la cantidad de líneas de un bloque de texto,
|
||||||
|
/// reemplazando el sobrante por puntos suspensivos. Es útil cuando
|
||||||
|
/// el diseño solo pide una cantidad de líneas pero no sabemos cuál
|
||||||
|
/// va a ser el largo.
|
||||||
|
///
|
||||||
|
/// @example html
|
||||||
|
/// <h1 class="line-clamp-1"></h1>
|
||||||
|
.line-clamp#{$infix}-#{$spacer} {
|
||||||
|
overflow: hidden;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: $spacer;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $direction in $directions {
|
||||||
|
/// Ubicación absoluta, usar con position-*
|
||||||
|
///
|
||||||
|
/// @example html
|
||||||
|
/// <div class="position-absolute top-0 left-3"></div>
|
||||||
|
.#{$direction}#{$infix}-#{$spacer} {
|
||||||
|
#{$direction}: $length
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Anchos y altos en base a `$sizes` definido por Bootstrap. Para
|
||||||
|
/// personalizar los tamaños, modificarlos o agregarlos en `styles.scss`
|
||||||
|
///
|
||||||
|
/// @link assets/css/styles.scss
|
||||||
|
@each $prop, $abbrev in (width: w, height: h) {
|
||||||
|
@each $size, $length in $sizes {
|
||||||
|
.#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length; }
|
||||||
|
.#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length; }
|
||||||
|
.min-#{$abbrev}#{$infix}-#{$size} { min-#{$prop}: $length; }
|
||||||
|
.max-#{$abbrev}#{$infix}-#{$size} { max-#{$prop}: $length; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Tipos de _scroll_ posible
|
||||||
|
$scrolls: (auto, smooth);
|
||||||
|
@each $scroll in $scrolls {
|
||||||
|
/// Poder modificar el tipo de _scroll_ de forma _responsive_
|
||||||
|
///
|
||||||
|
/// @example html
|
||||||
|
/// <div class="scroll-auto scroll-md-smooth"></div>
|
||||||
|
.scroll#{$infix}-#{$scroll} {
|
||||||
|
scroll-behavior: #{$scroll};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Bordes. Bootstrap no define bordes _responsive_
|
||||||
|
///
|
||||||
|
/// @link node_modules/bootstrap/scss/utilities/_borders.scss
|
||||||
|
/// @example html
|
||||||
|
/// <div class="border border-md-top-0"></div>
|
||||||
|
.border#{$infix} { border: $border-width solid $border-color !important; }
|
||||||
|
.border#{$infix}-0 { border: 0 !important; }
|
||||||
|
|
||||||
|
@each $direction in $directions {
|
||||||
|
.border#{$infix}-#{$direction} { border-#{$direction}: $border-width solid $border-color !important; }
|
||||||
|
.border#{$infix}-#{$direction}-0 { border-#{$direction}: 0 !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
$aligns: (left,center,right);
|
||||||
|
@each $align in $aligns {
|
||||||
|
/// Alineación _responsive_
|
||||||
|
///
|
||||||
|
/// @example html
|
||||||
|
/// <div class="text-center text-md-right"></div>
|
||||||
|
.text#{$infix}-#{$align} { text-align: $align !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $position in $positions {
|
||||||
|
/// Posicionamiento
|
||||||
|
///
|
||||||
|
/// @example html
|
||||||
|
/// <div class="position-relative position-md-absolute"></div>
|
||||||
|
.position#{$infix}-#{$position} { position: $position !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $color, $rgb in $colors {
|
||||||
|
/// Colores de fondo. Es raro que usemos versiones _responsive_, pero
|
||||||
|
/// no está de más tenerlas.
|
||||||
|
///
|
||||||
|
/// @link assets/css/styles.scss
|
||||||
|
/// @example html
|
||||||
|
/// <div class="background-red"></div>
|
||||||
|
.background#{$infix}-#{$color} {
|
||||||
|
background-color: var(--#{$color});
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background-color: var(--#{$color});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $opacity, $degree in $opacities {
|
||||||
|
/// Color de fondo con transparencia (opacidad)
|
||||||
|
///
|
||||||
|
/// @example html
|
||||||
|
/// <div class="background-red-t2"></div>
|
||||||
|
.background#{$infix}-#{$color}-t#{$opacity} {
|
||||||
|
background-color: scale-color($rgb, $alpha: $degree);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Atributos de SVG
|
||||||
|
$svg-attributes: (stroke, fill);
|
||||||
|
@each $attr in $svg-attributes {
|
||||||
|
/// Poder cambiar el relleno o la línea de un SVG
|
||||||
|
///
|
||||||
|
/// @example html
|
||||||
|
/// <div class="stroke-black fill-red">
|
||||||
|
/// <svg/>
|
||||||
|
/// </div>
|
||||||
|
.#{$attr}#{$infix}-#{$color} {
|
||||||
|
svg {
|
||||||
|
* {
|
||||||
|
#{$attr}: var(--#{$color});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Barras de _scroll_ de colores
|
||||||
|
///
|
||||||
|
/// @example html
|
||||||
|
/// <div class="scrollbar-green"></div>
|
||||||
|
.scrollbar#{$infix}-#{$color} {
|
||||||
|
scrollbar-color: var(--#{$color}) transparent;
|
||||||
|
scrollbar-width: thin;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 5px;
|
||||||
|
height: 8px;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--#{$color});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Bordes de color
|
||||||
|
///
|
||||||
|
/// @example html
|
||||||
|
/// <div class="border-red"></div>
|
||||||
|
.border#{$infix}-#{$color} {
|
||||||
|
border-color: var(--#{$color}) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Cambiar el fondo al pasar por encima o hacer foco
|
||||||
|
///
|
||||||
|
/// @example html
|
||||||
|
/// <div class="background-black background-hover-red"></div>
|
||||||
|
.background-hover#{$infix}-#{$color} {
|
||||||
|
&:hover,
|
||||||
|
&:focus-within {
|
||||||
|
background-color: var(--#{$color});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Cambiar el color al pasar por encima o hacer foco
|
||||||
|
///
|
||||||
|
/// @example html
|
||||||
|
/// <div class="black hover-red"></div>
|
||||||
|
.hover-#{$color} {
|
||||||
|
&:hover,
|
||||||
|
&:focus-within {
|
||||||
|
color: var(--#{$color});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Cambiar el color, también aplica a la selección de texto.
|
||||||
|
///
|
||||||
|
/// @example html
|
||||||
|
/// <div class="black hover-red"></div>
|
||||||
|
.#{$color} {
|
||||||
|
color: var(--#{$color});
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
color: var(--#{$color});
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Invertir el color en la selección, con el mismo color de fondo y
|
||||||
|
/// texto en blanco.
|
||||||
|
::-moz-selection,
|
||||||
|
::selection {
|
||||||
|
background: var(--#{$color});
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Si el contenedor tiene un color, también aplica a los bordes de los
|
||||||
|
/// elementos de un formulario.
|
||||||
|
///
|
||||||
|
/// @todo Evaluar si es realmente necesario hacerlo así, porque no
|
||||||
|
/// aplica a las sombras.
|
||||||
|
.form-control {
|
||||||
|
border-color: var(--#{$color});
|
||||||
|
color: var(--#{$color});
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Los `<hr/>` también cambian de color.
|
||||||
|
///
|
||||||
|
/// @example html
|
||||||
|
/// <div class="red">
|
||||||
|
/// <hr/>
|
||||||
|
/// </div>
|
||||||
|
hr {
|
||||||
|
border-color: var(--#{$color});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Barras de scroll de colores
|
|
||||||
.scrollbar-#{$color} {
|
|
||||||
scrollbar-color: var(--#{$color}) transparent;
|
|
||||||
scrollbar-width: thin;
|
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
width: 5px;
|
|
||||||
height: 8px;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
background: var(--#{$color});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Bordes
|
|
||||||
.border-#{$color} {
|
|
||||||
border-color: var(--#{$color}) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Cambiar el fondo al pasar por encima o hacer foco
|
|
||||||
.hover-bg-#{$color} {
|
|
||||||
&:hover,
|
|
||||||
&:focus-within {
|
|
||||||
background-color: var(--#{$color});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Cambiar el color al pasar por encima o hacer foco
|
|
||||||
.hover-#{$color} {
|
|
||||||
&:hover,
|
|
||||||
&:focus-within {
|
|
||||||
color: var(--#{$color});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Cambiar el color
|
|
||||||
.#{$color} {
|
|
||||||
color: var(--#{$color});
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
color: var(--#{$color});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Invertir el color en la selección
|
|
||||||
::-moz-selection,
|
|
||||||
::selection {
|
|
||||||
background: var(--#{$color});
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Ajustes para Bootstrap
|
|
||||||
.form-control {
|
|
||||||
border-color: var(--#{$color});
|
|
||||||
color: var(--#{$color});
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
border-color: var(--#{$color});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,19 @@
|
||||||
|
/// El menú hamburguesa se expande cuando obtiene el foco y se oculta
|
||||||
|
/// cuando lo pierde. Esto nos permite tener un menú dinámico sin
|
||||||
|
/// necesidad de JS.
|
||||||
|
///
|
||||||
|
/// @group Menú
|
||||||
|
/// @link _includes/menu.html
|
||||||
|
/// @todo En realidad el evento del foco está puesto en toda la navbar
|
||||||
|
/// en lugar de solo en el ícono de hamburguesa.
|
||||||
|
/// @example html
|
||||||
|
/// <nav class="navbar">
|
||||||
|
/// <button class="navbar-toggler">
|
||||||
|
/// <span class="navbar-toggler-icon"></span>
|
||||||
|
/// </button>
|
||||||
|
///
|
||||||
|
/// <div class="collapse navbar-collapse" id="menu"></div>
|
||||||
|
/// </nav>
|
||||||
.navbar {
|
.navbar {
|
||||||
&:focus-within {
|
&:focus-within {
|
||||||
.navbar-collapse {
|
.navbar-collapse {
|
||||||
|
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
{% assign url = site.url | append: include.url | uri_escape %}
|
|
||||||
{% assign title = include.title | default: site.title | uri_escape %}
|
|
||||||
{% assign description = include.description | default: '' | uri_escape %}
|
|
||||||
|
|
||||||
<a
|
|
||||||
target="_blank"
|
|
||||||
title="{{ include.share.title }}"
|
|
||||||
class="d-flex flex-column align-items-center p-3"
|
|
||||||
href="{{ include.share.url | replace: '%url', url | replace: '%title', title | replace: '%description', description }}">
|
|
||||||
<i class="fa fa-fw fa-2x fa-{{ include.share.icon }}"></i>
|
|
||||||
<span>{{ include.share.title }}</span>
|
|
||||||
</a>
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
<input type="checkbox" id="share" class="toggler" autocomplete="off" />
|
|
||||||
|
|
||||||
<label class="share btn border btn-block" for="share">
|
|
||||||
{{ site.i18n.share.text }}
|
|
||||||
<i class="fa fa-{{ site.i18n.share.icon }}"></i>
|
|
||||||
|
|
||||||
<div class="share-box toggled d-flex align-items-center justify-content-center">
|
|
||||||
<div class="box background-white color-redpink row no-gutters align-items-center justify-content-center p-3">
|
|
||||||
{% for share in site.i18n.share.items %}
|
|
||||||
<div class="col-4">
|
|
||||||
{% include_cached share.html share=share url=include.url title=include.title description=include.description %}
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
|
|
@ -1,53 +1,55 @@
|
||||||
|
////
|
||||||
|
/// @group Snap
|
||||||
|
////
|
||||||
|
|
||||||
|
/// _Snap_ es una forma de hacer que los elementos se alineen
|
||||||
|
/// automáticamente a partes de su contenedor durante el _scroll_. Si le
|
||||||
|
/// usuarie _scrollea_ hasta la mitad, el navegador continua el _scroll_
|
||||||
|
/// hasta que se alinee. Es útil para presentaciones de diapositivas
|
||||||
|
/// (como el sitio de Sutty) o _banners_ con navegación horizontal
|
||||||
|
/// (_sliders_).
|
||||||
|
///
|
||||||
|
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap
|
||||||
$snap-types: (none, mandatory, proximity);
|
$snap-types: (none, mandatory, proximity);
|
||||||
|
/// Ejes
|
||||||
$snap-directions: (y, x);
|
$snap-directions: (y, x);
|
||||||
|
/// Puntos de alineación
|
||||||
$snap-points: (start, end, center, none);
|
$snap-points: (start, end, center, none);
|
||||||
|
|
||||||
// TODO: Escribir un mixin
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||||
@each $snap-type in $snap-types {
|
@include media-breakpoint-up($breakpoint) {
|
||||||
@each $snap-direction in $snap-directions {
|
/// Obtiene el sufijo para cada clase responsive usando mixins de
|
||||||
// El contenedor indica la dirección y obligatoriedad del snap
|
/// Bootstrap. Valores posibles:
|
||||||
.snap-#{$snap-type}-#{$snap-direction} {
|
/// `""` (nada, aplica a todas las resoluciones), `-xs`, `-sm`,
|
||||||
scroll-snap-points-#{$snap-direction}: repeat(100%);
|
/// `-md`, `-lg`, `-xl`.
|
||||||
scroll-snap-destination: 0 0;
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||||
@each $prefix in $vendor-prefixes {
|
|
||||||
#{$prefix}scroll-snap-type: #{$snap-direction} #{$snap-type};
|
|
||||||
#{$prefix}scroll-snap-type: #{$snap-type};
|
|
||||||
}
|
|
||||||
|
|
||||||
// Lxs hijxs directos se alinean al contenedor
|
@each $snap-type in $snap-types {
|
||||||
@each $snap-point in $snap-points {
|
@each $snap-direction in $snap-directions {
|
||||||
& > .snap-#{$snap-point} {
|
/// El contenedor indica la dirección y obligatoriedad del snap
|
||||||
scroll-snap-align: #{$snap-point};
|
///
|
||||||
}
|
/// @example html
|
||||||
}
|
/// <div class="snap-mandatory-y snap-proximity-md-y"></div>
|
||||||
|
.snap-#{$snap-type}#{$infix}-#{$snap-direction} {
|
||||||
// Poder modificar el snap según el punto de corte
|
|
||||||
@each $grid-breakpoint, $_ in $grid-breakpoints {
|
|
||||||
@include media-breakpoint-up($grid-breakpoint) {
|
|
||||||
@each $snap-point in $snap-points {
|
|
||||||
& > .snap-#{$grid-breakpoint}-#{$snap-point} {
|
|
||||||
scroll-snap-align: #{$snap-point};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $grid-breakpoint, $_ in $grid-breakpoints {
|
|
||||||
@include media-breakpoint-up($grid-breakpoint) {
|
|
||||||
.snap-#{$snap-type}-#{$grid-breakpoint}-#{$snap-direction} {
|
|
||||||
// XXX: Esto está duplicado porque SCSS no nos deja extender
|
|
||||||
// dentro de un @include.
|
|
||||||
// @extend .snap-#{$snap-type}-#{$snap-direction};
|
|
||||||
scroll-snap-points-#{$snap-direction}: repeat(100%);
|
scroll-snap-points-#{$snap-direction}: repeat(100%);
|
||||||
scroll-snap-destination: 0 0;
|
scroll-snap-destination: 0 0;
|
||||||
|
|
||||||
@each $prefix in $vendor-prefixes {
|
@each $prefix in $vendor-prefixes {
|
||||||
#{$prefix}scroll-snap-type: #{$snap-direction} #{$snap-type};
|
#{$prefix}scroll-snap-type: #{$snap-direction} #{$snap-type};
|
||||||
#{$prefix}scroll-snap-type: #{$snap-type};
|
#{$prefix}scroll-snap-type: #{$snap-type};
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $snap-point in $snap-points {
|
@each $snap-point in $snap-points {
|
||||||
.snap-#{$snap-point} {
|
/// Los elementos que son descendientes directos se alinean a
|
||||||
|
/// su contenedor
|
||||||
|
///
|
||||||
|
/// @example html
|
||||||
|
/// <div class="snap-mandatory-y snap-proximity-md-y">
|
||||||
|
/// <div class="snap-start"></div>
|
||||||
|
/// <div class="snap-center"></div>
|
||||||
|
/// <div class="snap-end"></div>
|
||||||
|
/// </div>
|
||||||
|
& > .snap-#{$snap-point} {
|
||||||
scroll-snap-align: #{$snap-point};
|
scroll-snap-align: #{$snap-point};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,48 @@
|
||||||
/*
|
////
|
||||||
* Desplegar menúes sin javascript!
|
/// @group Toggler
|
||||||
*
|
////
|
||||||
* Inspirado en https://dev.to/cydstumpel/creating-a-fold-out-navigation-with-css-only-4g9k
|
|
||||||
*/
|
|
||||||
|
|
||||||
// Comenzamos con un input checkbox con la clase toggler
|
/// Desplegar menúes sin javascript!
|
||||||
|
///
|
||||||
|
/// Comenzamos con un `<input type="checkbox"/>` con la clase
|
||||||
|
/// `.toggler`.
|
||||||
|
///
|
||||||
|
/// @todo ¿Deprecar? Según el validador de HTML los `<label>` no pueden
|
||||||
|
/// contener elementos de bloques, como `<div>`.
|
||||||
|
/// @link https://dev.to/cydstumpel/creating-a-fold-out-navigation-with-css-only-4g9k
|
||||||
|
///
|
||||||
|
/// @example html
|
||||||
|
/// <div>
|
||||||
|
/// <input type="checkbox" class="toggler" id="toggler" />
|
||||||
|
/// <label for="toggler">
|
||||||
|
/// Esta es la parte visible, puede contener un ícono. Los
|
||||||
|
/// atributos id y for son importantes para que el label se
|
||||||
|
/// asocie con el input invisible.
|
||||||
|
/// <div class="toggled">
|
||||||
|
/// Esta es la parte solo visible cuando el label es tocado.
|
||||||
|
/// </div>
|
||||||
|
/// </label>
|
||||||
|
/// </div>
|
||||||
input[type="checkbox"].toggler {
|
input[type="checkbox"].toggler {
|
||||||
// Lo ocultamos pero todavía queremos que se le pueda dar foco con el
|
/// Por defecto está oculto pero todavía queremos que se le pueda dar
|
||||||
// teclado
|
/// foco con el / teclado
|
||||||
|
///
|
||||||
|
/// @todo ¿Usar `@extend .sr-only`?
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
// Ocultamos el elemento colapsable
|
/// El `<label>` inmediatamente posterior al `<input>` (`+`) contiene
|
||||||
& ~ label {
|
/// descendientes con la clase `.toggled` que cambian la visibilidad según
|
||||||
|
/// el estado del `<input>`.
|
||||||
|
& + label {
|
||||||
.toggled {
|
.toggled {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Al tildar el input, mostramos el elemento
|
/// Al tocar el `<input>`, mostramos el elemento oculto.
|
||||||
&:checked ~ label {
|
&:checked + label {
|
||||||
.toggled {
|
.toggled {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
@ -32,7 +54,8 @@ input[type="checkbox"].toggler {
|
||||||
z-index: 11;
|
z-index: 11;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Dar una guía visual de que estamos enfocando el input
|
/// Dar una guía visual de que estamos enfocando el `<input>`,
|
||||||
|
/// trasladando el mismo estilo a su `<label>`
|
||||||
&:focus + label {
|
&:focus + label {
|
||||||
outline: 1px dotted grey ;
|
outline: 1px dotted grey ;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,14 +2,64 @@
|
||||||
# Ponemos un frontmatter porque queremos que Jekyll procese este archivo
|
# 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' }};
|
$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-");
|
$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);
|
$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: (
|
$colors: (
|
||||||
"black": black
|
"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: (
|
||||||
|
);
|
||||||
|
|
||||||
|
/// Tamaños (anchos y altos) redefinidos desde Bootstrap.
|
||||||
|
$sizes: (
|
||||||
|
100vh: 100vh,
|
||||||
|
100vw: 100vw
|
||||||
|
);
|
||||||
|
|
||||||
|
/// Niveles de opacidad/transparencia
|
||||||
$opacities: (
|
$opacities: (
|
||||||
0: -100%,
|
0: -100%,
|
||||||
1: -80%,
|
1: -80%,
|
||||||
|
|
@ -19,18 +69,16 @@ $opacities: (
|
||||||
5: 0%
|
5: 0%
|
||||||
);
|
);
|
||||||
|
|
||||||
/*
|
/// Redefinir variables de Boostrap acá. Se las puede ver en
|
||||||
* Redefinir variables de Boostrap acá. Se las puede ver en
|
/// node_modules/bootstrap/scss/_variables.scss
|
||||||
* 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.
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
@import "bootstrap/scss/bootstrap";
|
@import "bootstrap/scss/bootstrap";
|
||||||
|
/// Íconos
|
||||||
@import "fork-awesome/scss/fork-awesome";
|
@import "fork-awesome/scss/fork-awesome";
|
||||||
|
/// Nuestro propio SCSS
|
||||||
@import "accessibility";
|
@import "accessibility";
|
||||||
@import "helpers";
|
@import "helpers";
|
||||||
@import "toggler";
|
@import "toggler";
|
||||||
|
|
@ -40,10 +88,16 @@ $opacities: (
|
||||||
@import "editor";
|
@import "editor";
|
||||||
@import "menu";
|
@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 {
|
@if $debug {
|
||||||
/*
|
|
||||||
* Mostrar un borde alrededor de todos los elementos para poder
|
|
||||||
* trabajar.
|
|
||||||
*/
|
|
||||||
* { outline: 1px solid pink; }
|
* { outline: 1px solid pink; }
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
{
|
{
|
||||||
|
"title": "Sutty",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"bootstrap": "~4.4",
|
"bootstrap": "~4.4",
|
||||||
"fork-awesome": "^1.1.7",
|
"fork-awesome": "^1.1.7",
|
||||||
|
|
@ -17,6 +18,8 @@
|
||||||
"dotenv-webpack": "^6.0.0",
|
"dotenv-webpack": "^6.0.0",
|
||||||
"liquidjs": "^9.14.0",
|
"liquidjs": "^9.14.0",
|
||||||
"regenerator-runtime": "^0.13.5",
|
"regenerator-runtime": "^0.13.5",
|
||||||
|
"sassdoc": "^2.7.3",
|
||||||
|
"sassdoc-theme-herman": "^4.0.2",
|
||||||
"stimulus": "^1.1.1",
|
"stimulus": "^1.1.1",
|
||||||
"turbolinks": "^5.2.0",
|
"turbolinks": "^5.2.0",
|
||||||
"webpack": "^4.43.0",
|
"webpack": "^4.43.0",
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue