documentar css y generar sitio de documentación
This commit is contained in:
f
parent
accc5ed49b
commit
f6c490a464
17 changed files with 2328 additions and 432 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -13,3 +13,4 @@ _site
|
|||
Gemfile.lock
|
||||
node_modules/
|
||||
.env
|
||||
_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
|
|
@ -12,6 +12,12 @@ export
|
|||
|
||||
all: fa build ## Todo
|
||||
|
||||
sass_files := $(wildcard _sass/*.scss) assets/css/styles.scss .sassdocrc
|
||||
_sassdoc/index.html: $(sass_files)
|
||||
./node_modules/.bin/sassdoc _sass/ assets/css/ --dest ./_sassdoc
|
||||
|
||||
sassdoc: _sassdoc/index.html ## Genera la documentación de SCSS
|
||||
|
||||
build: ## Compilar el sitio
|
||||
bundle exec jekyll build --profile --trace
|
||||
@echo -e "\a"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div
|
||||
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">
|
||||
<div data-target="toast.content" class="floating-alert-content white background-black-t4"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,33 @@
|
|||
* {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
////
|
||||
/// Accesibilidad
|
||||
/// @group Accesibilidad
|
||||
////
|
||||
|
||||
/*
|
||||
* Deshabilita animaciones si la usuaria las tiene deshabilitadas
|
||||
*/
|
||||
/// La navegación es suave. Esto hace que al navegar a elementos dentro
|
||||
/// 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) {
|
||||
/// 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;
|
||||
}
|
||||
}
|
||||
|
||||
/// 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 {
|
||||
outline: $red 1px solid;
|
||||
|
||||
|
|
@ -32,6 +48,7 @@
|
|||
line-break: auto;
|
||||
white-space: pre-line;
|
||||
|
||||
/// El contenido se trae desde el ariaLabel del elemento.
|
||||
content: attr(aria-label);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,17 @@
|
|||
/*
|
||||
* Estilos del editor de Sutty
|
||||
*/
|
||||
////
|
||||
/// Estilos del editor de Sutty
|
||||
/// @group Editor
|
||||
///
|
||||
|
||||
// Alineación
|
||||
div[data-align="left"] { text-align: left; }
|
||||
div[data-align="center"] { text-align: center; }
|
||||
div[data-align="right"] { text-align: right; }
|
||||
/// Alineaciones soportadas. No soportamos justificado porque es
|
||||
/// difícil que quede bien en web.
|
||||
$aligns: (left,center,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 {
|
||||
border: 0;
|
||||
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-bottom {
|
||||
bottom: 2rem;
|
||||
/// No se puede interactuar
|
||||
@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 {
|
||||
border-radius: 2rem;
|
||||
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
|
||||
// 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.
|
||||
////
|
||||
/// @group Utilidades
|
||||
////
|
||||
|
||||
// Ocultar la barra de scroll, útil para sliders horizontales.
|
||||
.no-scrollbar {
|
||||
scrollbar-width: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
/// Direcciones posibles
|
||||
$directions: (top, right, bottom, left);
|
||||
|
||||
&::-webkit-scrollbar { display: none; }
|
||||
}
|
||||
|
||||
// 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
|
||||
/// Crea una propiedad con prefijos de navegador, cuando no es
|
||||
/// soportada por estándares, por ejemplo el guionado de texto.
|
||||
@mixin vendor-prefix($property, $definition...) {
|
||||
@each $prefix in $vendor-prefixes {
|
||||
#{$prefix}$property: $definition;
|
||||
}
|
||||
}
|
||||
|
||||
// Colores
|
||||
@each $color, $rgb in $colors {
|
||||
.background-#{$color} {
|
||||
background-color: var(--#{$color});
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
/// Obtiene el sufijo para cada clase responsive usando mixins de
|
||||
/// Bootstrap. Valores posibles:
|
||||
/// `""` (nada, aplica a todas las resoluciones), `-xs`, `-sm`,
|
||||
/// `-md`, `-lg`, `-xl`.
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
&:focus {
|
||||
background-color: var(--#{$color});
|
||||
/// Ocultar la barra de scroll, útil para sliders horizontales.
|
||||
///
|
||||
/// @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 {
|
||||
.background-#{$color}-t#{$opacity} {
|
||||
background-color: scale-color($rgb, $alpha: $degree);
|
||||
/// Un elemento cuadrado
|
||||
///
|
||||
/// @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) {
|
||||
.#{$attr}-#{$color} {
|
||||
svg {
|
||||
* {
|
||||
#{$attr}: var(--#{$color});
|
||||
/// Cursores
|
||||
$cursors: (pointer, none);
|
||||
@each $cursor in $cursors {
|
||||
/// El elemento va a tener un cursor
|
||||
///
|
||||
/// @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 {
|
||||
&:focus-within {
|
||||
.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);
|
||||
/// Ejes
|
||||
$snap-directions: (y, x);
|
||||
/// Puntos de alineación
|
||||
$snap-points: (start, end, center, none);
|
||||
|
||||
// TODO: Escribir un mixin
|
||||
@each $snap-type in $snap-types {
|
||||
@each $snap-direction in $snap-directions {
|
||||
// El contenedor indica la dirección y obligatoriedad del snap
|
||||
.snap-#{$snap-type}-#{$snap-direction} {
|
||||
scroll-snap-points-#{$snap-direction}: repeat(100%);
|
||||
scroll-snap-destination: 0 0;
|
||||
@each $prefix in $vendor-prefixes {
|
||||
#{$prefix}scroll-snap-type: #{$snap-direction} #{$snap-type};
|
||||
#{$prefix}scroll-snap-type: #{$snap-type};
|
||||
}
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
/// Obtiene el sufijo para cada clase responsive usando mixins de
|
||||
/// Bootstrap. Valores posibles:
|
||||
/// `""` (nada, aplica a todas las resoluciones), `-xs`, `-sm`,
|
||||
/// `-md`, `-lg`, `-xl`.
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
// Lxs hijxs directos se alinean al contenedor
|
||||
@each $snap-point in $snap-points {
|
||||
& > .snap-#{$snap-point} {
|
||||
scroll-snap-align: #{$snap-point};
|
||||
}
|
||||
}
|
||||
|
||||
// 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};
|
||||
@each $snap-type in $snap-types {
|
||||
@each $snap-direction in $snap-directions {
|
||||
/// El contenedor indica la dirección y obligatoriedad del snap
|
||||
///
|
||||
/// @example html
|
||||
/// <div class="snap-mandatory-y snap-proximity-md-y"></div>
|
||||
.snap-#{$snap-type}#{$infix}-#{$snap-direction} {
|
||||
scroll-snap-points-#{$snap-direction}: repeat(100%);
|
||||
scroll-snap-destination: 0 0;
|
||||
|
||||
@each $prefix in $vendor-prefixes {
|
||||
#{$prefix}scroll-snap-type: #{$snap-direction} #{$snap-type};
|
||||
#{$prefix}scroll-snap-type: #{$snap-type};
|
||||
}
|
||||
|
||||
@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};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,48 @@
|
|||
/*
|
||||
* Desplegar menúes sin javascript!
|
||||
*
|
||||
* Inspirado en https://dev.to/cydstumpel/creating-a-fold-out-navigation-with-css-only-4g9k
|
||||
*/
|
||||
////
|
||||
/// @group Toggler
|
||||
////
|
||||
|
||||
// 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 {
|
||||
// Lo ocultamos pero todavía queremos que se le pueda dar foco con el
|
||||
// teclado
|
||||
/// Por defecto está oculto pero todavía queremos que se le pueda dar
|
||||
/// foco con el / teclado
|
||||
///
|
||||
/// @todo ¿Usar `@extend .sr-only`?
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
|
||||
// Ocultamos el elemento colapsable
|
||||
& ~ label {
|
||||
/// El `<label>` inmediatamente posterior al `<input>` (`+`) contiene
|
||||
/// descendientes con la clase `.toggled` que cambian la visibilidad según
|
||||
/// el estado del `<input>`.
|
||||
& + label {
|
||||
.toggled {
|
||||
z-index: 10;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// Al tildar el input, mostramos el elemento
|
||||
&:checked ~ label {
|
||||
/// Al tocar el `<input>`, mostramos el elemento oculto.
|
||||
&:checked + label {
|
||||
.toggled {
|
||||
visibility: visible;
|
||||
}
|
||||
|
|
@ -32,7 +54,8 @@ input[type="checkbox"].toggler {
|
|||
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 {
|
||||
outline: 1px dotted grey ;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,14 +2,64 @@
|
|||
# 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: (
|
||||
);
|
||||
|
||||
/// Tamaños (anchos y altos) redefinidos desde Bootstrap.
|
||||
$sizes: (
|
||||
100vh: 100vh,
|
||||
100vw: 100vw
|
||||
);
|
||||
|
||||
/// Niveles de opacidad/transparencia
|
||||
$opacities: (
|
||||
0: -100%,
|
||||
1: -80%,
|
||||
|
|
@ -19,18 +69,16 @@ $opacities: (
|
|||
5: 0%
|
||||
);
|
||||
|
||||
/*
|
||||
* Redefinir variables de Boostrap acá. Se las puede ver en
|
||||
* node_modules/bootstrap/scss/_variables.scss
|
||||
*/
|
||||
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
/// 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";
|
||||
|
|
@ -40,10 +88,16 @@ $opacities: (
|
|||
@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 {
|
||||
/*
|
||||
* Mostrar un borde alrededor de todos los elementos para poder
|
||||
* trabajar.
|
||||
*/
|
||||
* { outline: 1px solid pink; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
{
|
||||
"title": "Sutty",
|
||||
"dependencies": {
|
||||
"bootstrap": "~4.4",
|
||||
"fork-awesome": "^1.1.7",
|
||||
|
|
@ -17,6 +18,8 @@
|
|||
"dotenv-webpack": "^6.0.0",
|
||||
"liquidjs": "^9.14.0",
|
||||
"regenerator-runtime": "^0.13.5",
|
||||
"sassdoc": "^2.7.3",
|
||||
"sassdoc-theme-herman": "^4.0.2",
|
||||
"stimulus": "^1.1.1",
|
||||
"turbolinks": "^5.2.0",
|
||||
"webpack": "^4.43.0",
|
||||
|
|
|
|||
Loading…
Reference in a new issue