diff --git a/.gitignore b/.gitignore index 6ece273..dc90c80 100644 --- a/.gitignore +++ b/.gitignore @@ -15,3 +15,4 @@ node_modules/ .env *.ttf *.otf +_sassdoc/ diff --git a/.sassdocrc b/.sassdocrc new file mode 100644 index 0000000..109dfa1 --- /dev/null +++ b/.sassdocrc @@ -0,0 +1,7 @@ +theme: herman +herman: + sass: + jsonFile: 'sutty.json' + includePaths: + - 'node_modules' + - '_sass' diff --git a/Makefile b/Makefile index 2744ff0..6632333 100644 --- a/Makefile +++ b/Makefile @@ -32,6 +32,8 @@ build: ## Compilar el sitio (env=production) make bundle args="exec jekyll build --profile --trace" @echo -e "\a" +sassdoc: _sassdoc/index.html ## Genera la documentación de SCSS + hain: ## Correr comandos con hain (args="comandos") $(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 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 diff --git a/_includes/floating_alert.html b/_includes/floating_alert.html index 1638861..87a5ed9 100644 --- a/_includes/floating_alert.html +++ b/_includes/floating_alert.html @@ -1,6 +1,6 @@
diff --git a/_sass/accessibility.scss b/_sass/accessibility.scss index b04eceb..88f59cc 100644 --- a/_sass/accessibility.scss +++ b/_sass/accessibility.scss @@ -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); } } diff --git a/_sass/editor.scss b/_sass/editor.scss index cf6f7b4..1ccc9b3 100644 --- a/_sass/editor.scss +++ b/_sass/editor.scss @@ -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; } +} diff --git a/_sass/embed.scss b/_sass/embed.scss index 6c8da5b..aee9469 100644 --- a/_sass/embed.scss +++ b/_sass/embed.scss @@ -1,3 +1,11 @@ +//// +/// Recursos externos +/// @group Recursos externos +/// + +/// Los `