From f6c490a464ceff6057158e7c88a1a8ea030690b2 Mon Sep 17 00:00:00 2001 From: f Date: Thu, 27 May 2021 15:37:03 -0300 Subject: [PATCH] =?UTF-8?q?documentar=20css=20y=20generar=20sitio=20de=20d?= =?UTF-8?q?ocumentaci=C3=B3n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 + .sassdocrc | 7 + Makefile | 6 + _includes/floating_alert.html | 2 +- _sass/accessibility.scss | 31 +- _sass/editor.scss | 23 +- _sass/embed.scss | 8 + _sass/floating_alert.scss | 42 +- _sass/helpers.scss | 632 ++++++------ _sass/menu.scss | 16 + _sass/share.html | 12 - _sass/share_box.html | 16 - _sass/snap.scss | 76 +- _sass/toggler.scss | 49 +- assets/css/styles.scss | 82 +- package.json | 3 + yarn.lock | 1754 ++++++++++++++++++++++++++++++++- 17 files changed, 2328 insertions(+), 432 deletions(-) create mode 100644 .sassdocrc delete mode 100644 _sass/share.html delete mode 100644 _sass/share_box.html diff --git a/.gitignore b/.gitignore index d68cd18..bdd5bce 100644 --- a/.gitignore +++ b/.gitignore @@ -13,3 +13,4 @@ _site Gemfile.lock node_modules/ .env +_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 94616d1..369b7be 100644 --- a/Makefile +++ b/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" 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 `