Sutty/sutty-base-jekyll-theme
5
0
Fork 0
Code Issues Pull requests Projects Releases Activity

documentar css y generar sitio de documentación

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

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

7
.sassdocrc Normal file
View file

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

6
Makefile
View file

@ -12,6 +12,12 @@ export
all: fa build ## Todo 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 build: ## Compilar el sitio
bundle exec jekyll build --profile --trace bundle exec jekyll build --profile --trace
@echo -e "\a" @echo -e "\a"

2
_includes/floating_alert.html
View file

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

31
_sass/accessibility.scss
View file

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

23
_sass/editor.scss
View file

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

8
_sass/embed.scss
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 { iframe {
border: 0; border: 0;
width: 100%; width: 100%;

42
_sass/floating_alert.scss
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 {
&.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;

416
_sass/helpers.scss
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 /// @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);
/// 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; scrollbar-width: none;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
&::-webkit-scrollbar { display: none; } &::-webkit-scrollbar { display: none; }
} }
// Mismo alto que ancho /// Un elemento cuadrado
.square { ///
/// @example html
/// <div class="square-lg"></div>
.square#{$infix} {
@extend .position-relative; @extend .position-relative;
padding-bottom: 100%; padding-bottom: 100%;
@ -25,211 +46,182 @@
@extend .left-0; @extend .left-0;
@extend .h-100; @extend .h-100;
} }
}
// Eventos del cursor
@each $event in (none, auto) {
.pointer-event-#{$event} {
pointer-events: $event;
} }
@each $grid-breakpoint, $_ in $grid-breakpoints { /// Cursores
@include media-breakpoint-up($grid-breakpoint) { $cursors: (pointer, none);
.pointer-event-#{$grid-breakpoint}-#{$event} { @each $cursor in $cursors {
pointer-events: $event; /// El elemento va a tener un cursor
} ///
} /// @example html
} /// <div class="cursor-pointer"></div>
} .cursor#{$infix}-#{$cursor} {
// 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; cursor: $cursor;
} }
}
// Overflow
@each $value in (auto, hidden, scroll) {
.overflow-#{$value} {
overflow: $value !important;
} }
@each $axis in (y, x) { /// Eventos del cursor
.overflow-#{$axis}-#{$value} { $events: (none, auto);
overflow-#{$axis}: $value !important; @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 { /// Agrega una transición a cualquier modificación de atributos
@include media-breakpoint-up($grid-breakpoint) { .transition#{$infix} {
.overflow-#{$grid-breakpoint}-#{$value} { @include transition($transition-base);
overflow: $value !important;
} }
@each $axis in (y, x) { /// Valores posibles para la propiedad `object-fit`
.overflow-#{$grid-breakpoint}-#{$axis}-#{$value} { $objects: (contain, cover, fill, none, scale-down);
overflow-#{$axis}: $value !important; @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};
} }
} }
}
}
}
@each $spacer, $length in $spacers { /// _Overflow_, qué hacer cuando el contenido sobrepasa los límites del
// Poder aumentar o disminuir el alto de la tipografía /// contenedor.
.f-#{$spacer} { $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; font-size: $length !important;
} }
// Columnas de texto /// Columnas de texto
.text-column-#{$spacer} { ///
/// @example html
/// <div class="text-column-1 text-column-md-3"></div>
.text-column#{$infix}-#{$spacer} {
column-count: $spacer; column-count: $spacer;
} }
// Limitar la cantidad de líneas de un bloque de texto /// Limitar la cantidad de líneas de un bloque de texto,
.line-clamp-#{$spacer} { /// 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; overflow: hidden;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: $spacer; -webkit-line-clamp: $spacer;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
// Ubicación absoluta, usar con position-* @each $direction in $directions {
@each $direction in (top, right, bottom, left) { /// Ubicación absoluta, usar con position-*
.#{$direction}-#{$spacer} { ///
#{$direction}: $length /// @example html
} /// <div class="position-absolute top-0 left-3"></div>
} .#{$direction}#{$infix}-#{$spacer} {
@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 #{$direction}: $length
} }
} }
} }
}
}
// anchos y altos /// Anchos y altos en base a `$sizes` definido por Bootstrap. Para
@each $prop, $abbrev in (width: w, height: h) { /// personalizar los tamaños, modificarlos o agregarlos en `styles.scss`
@each $size, $length in $sizes { ///
.#{$abbrev}-#{$size} { #{$prop}: $length; } /// @link assets/css/styles.scss
.#{$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 $prop, $abbrev in (width: w, height: h) {
@each $size, $length in $sizes { @each $size, $length in $sizes {
.#{$abbrev}-#{$grid-breakpoint}-#{$size} { #{$prop}: $length !important; } .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length; }
.min-#{$abbrev}-#{$grid-breakpoint}-#{$size} { min-#{$prop}: $length !important; } .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length; }
.min-#{$abbrev}#{$infix}-#{$size} { min-#{$prop}: $length; }
.max-#{$abbrev}#{$infix}-#{$size} { max-#{$prop}: $length; }
} }
} }
}
}
// Crea una propiedad con prefijos de navegador /// Tipos de _scroll_ posible
@mixin vendor-prefix($property, $definition...) { $scrolls: (auto, smooth);
@each $prefix in $vendor-prefixes { @each $scroll in $scrolls {
#{$prefix}$property: $definition; /// 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};
}
} }
}
// Colores /// Bordes. Bootstrap no define bordes _responsive_
@each $color, $rgb in $colors { ///
.background-#{$color} { /// @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}); background-color: var(--#{$color});
&:focus { &:focus {
@ -238,13 +230,25 @@
} }
@each $opacity, $degree in $opacities { @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); background-color: scale-color($rgb, $alpha: $degree);
} }
} }
@each $attr in (stroke, fill) { /// Atributos de SVG
.#{$attr}-#{$color} { $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 { svg {
* { * {
#{$attr}: var(--#{$color}); #{$attr}: var(--#{$color});
@ -253,8 +257,11 @@
} }
} }
// Barras de scroll de colores /// Barras de _scroll_ de colores
.scrollbar-#{$color} { ///
/// @example html
/// <div class="scrollbar-green"></div>
.scrollbar#{$infix}-#{$color} {
scrollbar-color: var(--#{$color}) transparent; scrollbar-color: var(--#{$color}) transparent;
scrollbar-width: thin; scrollbar-width: thin;
@ -269,20 +276,29 @@
} }
} }
// Bordes /// Bordes de color
.border-#{$color} { ///
/// @example html
/// <div class="border-red"></div>
.border#{$infix}-#{$color} {
border-color: var(--#{$color}) !important; border-color: var(--#{$color}) !important;
} }
// Cambiar el fondo al pasar por encima o hacer foco /// Cambiar el fondo al pasar por encima o hacer foco
.hover-bg-#{$color} { ///
/// @example html
/// <div class="background-black background-hover-red"></div>
.background-hover#{$infix}-#{$color} {
&:hover, &:hover,
&:focus-within { &:focus-within {
background-color: var(--#{$color}); 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-#{$color} {
&:hover, &:hover,
&:focus-within { &: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} {
color: var(--#{$color}); color: var(--#{$color});
@ -298,21 +317,34 @@
color: var(--#{$color}); 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, ::-moz-selection,
::selection { ::selection {
background: var(--#{$color}); background: var(--#{$color});
color: white; 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 { .form-control {
border-color: var(--#{$color}); border-color: var(--#{$color});
color: var(--#{$color}); color: var(--#{$color});
} }
/// Los `<hr/>` también cambian de color.
///
/// @example html
/// <div class="red">
/// <hr/>
/// </div>
hr { hr {
border-color: var(--#{$color}); border-color: var(--#{$color});
} }
} }
}
}
} }

16
_sass/menu.scss
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 { .navbar {
&:focus-within { &:focus-within {
.navbar-collapse { .navbar-collapse {

12
_sass/share.html
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>

16
_sass/share_box.html
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>

74
_sass/snap.scss
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); $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) {
/// 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 { @each $snap-direction in $snap-directions {
// El contenedor indica la dirección y obligatoriedad del snap /// El contenedor indica la dirección y obligatoriedad del snap
.snap-#{$snap-type}-#{$snap-direction} { ///
/// @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-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};
} }
// Lxs hijxs directos se alinean al contenedor
@each $snap-point in $snap-points { @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} { & > .snap-#{$snap-point} {
scroll-snap-align: #{$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};
}
}
} }
} }
} }

49
_sass/toggler.scss
View file

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

82
assets/css/styles.scss
View file

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

3
package.json
View file

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

1754
yarn.lock
View file

File diff suppressed because it is too large Load diff