documentar css y generar sitio de documentación

This commit is contained in:
f 2021-05-27 15:37:03 -03:00
parent accc5ed49b
commit f6c490a464
17 changed files with 2328 additions and 432 deletions

1
.gitignore vendored
View file

@ -13,3 +13,4 @@ _site
Gemfile.lock
node_modules/
.env
_sassdoc/

7
.sassdocrc Normal file
View file

@ -0,0 +1,7 @@
theme: herman
herman:
sass:
jsonFile: 'sutty.json'
includePaths:
- 'node_modules'
- '_sass'

View file

@ -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"

View file

@ -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>

View file

@ -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);
}
}

View file

@ -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; }
}

View file

@ -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%;

View file

@ -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;

View file

@ -1,21 +1,42 @@
// 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 {
/// Direcciones posibles
$directions: (top, right, bottom, left);
/// 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;
}
}
@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);
/// 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; }
}
// Mismo alto que ancho
.square {
/// Un elemento cuadrado
///
/// @example html
/// <div class="square-lg"></div>
.square#{$infix} {
@extend .position-relative;
padding-bottom: 100%;
@ -27,209 +48,180 @@
}
}
// 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} {
/// 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;
}
}
// Overflow
@each $value in (auto, hidden, scroll) {
.overflow-#{$value} {
overflow: $value !important;
}
@each $axis in (y, x) {
.overflow-#{$axis}-#{$value} {
overflow-#{$axis}: $value !important;
/// 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;
}
}
@each $grid-breakpoint, $_ in $grid-breakpoints {
@include media-breakpoint-up($grid-breakpoint) {
.overflow-#{$grid-breakpoint}-#{$value} {
overflow: $value !important;
/// Agrega una transición a cualquier modificación de atributos
.transition#{$infix} {
@include transition($transition-base);
}
@each $axis in (y, x) {
.overflow-#{$grid-breakpoint}-#{$axis}-#{$value} {
overflow-#{$axis}: $value !important;
/// 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
.f-#{$spacer} {
/// 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
.text-column-#{$spacer} {
/// 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
.line-clamp-#{$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;
}
// 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} {
@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
/// 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}-#{$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; }
}
}
.#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length; }
.#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length; }
.min-#{$abbrev}#{$infix}-#{$size} { min-#{$prop}: $length; }
.max-#{$abbrev}#{$infix}-#{$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} {
/// 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; }
}
// 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; }
$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; }
}
// 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; }
/// Posicionamiento
///
/// @example html
/// <div class="position-relative position-md-absolute"></div>
.position#{$infix}-#{$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...) {
@each $prefix in $vendor-prefixes {
#{$prefix}$property: $definition;
}
}
// Colores
@each $color, $rgb in $colors {
.background-#{$color} {
/// 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 {
@ -238,13 +230,25 @@
}
@each $opacity, $degree in $opacities {
.background-#{$color}-t#{$opacity} {
/// 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);
}
}
@each $attr in (stroke, fill) {
.#{$attr}-#{$color} {
/// 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});
@ -253,8 +257,11 @@
}
}
// Barras de scroll de colores
.scrollbar-#{$color} {
/// Barras de _scroll_ de colores
///
/// @example html
/// <div class="scrollbar-green"></div>
.scrollbar#{$infix}-#{$color} {
scrollbar-color: var(--#{$color}) transparent;
scrollbar-width: thin;
@ -269,20 +276,29 @@
}
}
// Bordes
.border-#{$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
.hover-bg-#{$color} {
/// 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
/// Cambiar el color al pasar por encima o hacer foco
///
/// @example html
/// <div class="black hover-red"></div>
.hover-#{$color} {
&:hover,
&:focus-within {
@ -290,7 +306,10 @@
}
}
// Cambiar el 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});
@ -298,21 +317,34 @@
color: var(--#{$color});
}
// Invertir el color en la selección
/// 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;
}
// Ajustes para Bootstrap
/// 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});
}
}
}
}
}

View file

@ -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 {

View file

@ -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>

View file

@ -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>

View file

@ -1,56 +1,58 @@
////
/// @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 $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);
@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} {
/// 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};
}
// Lxs hijxs directos se alinean al contenedor
@each $snap-point in $snap-points {
/// 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};
}
}
// 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-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} {
scroll-snap-align: #{$snap-point};
}
}
}
}
}

View file

@ -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 ;
}

View file

@ -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 , 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; }
}

View file

@ -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",

1754
yarn.lock

File diff suppressed because it is too large Load diff