recursero-jekyll-theme 0.1.3 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +69 -18
- data/_config.yml +77 -0
- data/_data/assets.json +6 -0
- data/_data/en.yml +61 -15
- data/_data/es.yml +64 -15
- data/_data/forms/contacto.yml +2 -2
- data/_data/layouts/about.yml +34 -17
- data/_data/layouts/menu.yml +73 -0
- data/_includes/contact.html +8 -5
- data/_includes/floating_alert.html +6 -0
- data/_includes/item.html +38 -0
- data/_includes/menu.html +23 -0
- data/_includes/onboarding.html +37 -0
- data/_includes/pack.html +1 -0
- data/_includes/password.html +1 -0
- data/_includes/picture.html +23 -0
- data/_includes/preload_font.html +1 -0
- data/_includes/search.html +4 -3
- data/_includes/share.html +3 -2
- data/_includes/submit.html +5 -1
- data/_layouts/about.html +1 -1
- data/_layouts/default.html +34 -2
- data/_layouts/page.html +1 -1
- data/_layouts/place.html +1 -1
- data/_layouts/post.html +2 -2
- data/_sass/accessibility.scss +48 -7
- data/_sass/editor.scss +17 -0
- data/_sass/embed.scss +8 -0
- data/_sass/floating_alert.scss +48 -0
- data/_sass/fonts.scss +0 -0
- data/_sass/helpers.scss +327 -31
- data/_sass/menu.scss +36 -0
- data/_sass/snap.scss +60 -0
- data/_sass/toggler.scss +34 -11
- data/assets/css/styles.scss +89 -7
- data/assets/data/manifest.js +29 -0
- data/assets/fonts/forkawesome-webfont.woff2 +0 -0
- data/assets/js/pack.3cf11284b767fdbbefa6.js +113 -0
- data/assets/js/pack.3cf11284b767fdbbefa6.js.map +1 -0
- data/assets/js/pack.4ced2556b94e5c09e5bc.js +113 -0
- data/assets/js/pack.4ced2556b94e5c09e5bc.js.map +1 -0
- data/assets/js/pack.c42a6f683b2c0c0fa404.js +90 -0
- data/assets/js/pack.c42a6f683b2c0c0fa404.js.map +1 -0
- data/assets/js/pack.d9a353affdca4644a9b2.js +113 -0
- data/assets/js/pack.d9a353affdca4644a9b2.js.map +1 -0
- data/assets/js/sw.3cf11284b767fdbbefa6.js +2 -0
- data/assets/js/sw.3cf11284b767fdbbefa6.js.map +1 -0
- data/assets/templates/alert.html +7 -0
- data/assets/templates/results.html +15 -7
- metadata +82 -45
- data/_includes/navbar.html +0 -53
- data/_sass/share.html +0 -12
- data/_sass/share_box.html +0 -16
- data/assets/js/pack.js +0 -90
- data/assets/js/pack.js.map +0 -1
data/_sass/editor.scss
ADDED
@@ -0,0 +1,17 @@
|
|
1
|
+
////
|
2
|
+
/// Estilos del editor de Sutty
|
3
|
+
/// @group Editor
|
4
|
+
///
|
5
|
+
|
6
|
+
/// Alineaciones soportadas. No soportamos justificado porque es
|
7
|
+
/// difícil que quede bien en web.
|
8
|
+
$aligns: (left,center,right);
|
9
|
+
|
10
|
+
/// Recorrer las alineaciones.
|
11
|
+
/// @name Alineaciones
|
12
|
+
@each $align in $aligns {
|
13
|
+
/// El editor coloca la alineación en un atributo data-align,
|
14
|
+
/// recorriendo cada una de las alineaciones disponibles.
|
15
|
+
/// @todo Lograr que SassDoc muestre el código completo.
|
16
|
+
div[data-align="#{$align}"] { text-align: $align; }
|
17
|
+
}
|
data/_sass/embed.scss
CHANGED
@@ -0,0 +1,48 @@
|
|
1
|
+
////
|
2
|
+
/// Alertas flotantes
|
3
|
+
/// @group Alertas flotantes
|
4
|
+
////
|
5
|
+
|
6
|
+
/// Posiciones posibles
|
7
|
+
$positions: (top, right, bottom, left);
|
8
|
+
|
9
|
+
/// Las alertas flotantes son notificaciones emergentes que desaparecen
|
10
|
+
/// por su cuenta, como los "Toast" de Android. Tienen opciones de
|
11
|
+
/// accesibilidad para que los lectores de pantalla también las
|
12
|
+
/// notifiquen.
|
13
|
+
/// @link _packs/controllers/notification_controller.js
|
14
|
+
/// @link _includes/floating_alert.html
|
15
|
+
/// @example html
|
16
|
+
/// <div class="floating-alert floating-alert-default floating-alert-bottom">
|
17
|
+
/// <div class="floating-alert-content"></div>
|
18
|
+
/// </div>
|
19
|
+
.floating-alert {
|
20
|
+
/// No se puede interactuar
|
21
|
+
@extend .pointer-event-none;
|
22
|
+
|
23
|
+
/// El estilo por defecto las coloca centradas y con una transición al
|
24
|
+
/// aparecer o desaparecer. Si no usamos esta clase podemos darle
|
25
|
+
/// nuestro propio estilo.
|
26
|
+
&.floating-alert-default {
|
27
|
+
@extend .d-flex;
|
28
|
+
@extend .justify-content-center;
|
29
|
+
@extend .w-100;
|
30
|
+
@extend .position-fixed;
|
31
|
+
@extend .fade;
|
32
|
+
@extend .hide;
|
33
|
+
}
|
34
|
+
|
35
|
+
@each $position in $positions {
|
36
|
+
/// Pueden tener una posición fija
|
37
|
+
&.floating-alert-#{$position} {
|
38
|
+
#{$position}: 2rem;
|
39
|
+
}
|
40
|
+
}
|
41
|
+
|
42
|
+
/// Tienen un borde redondeado y un padding para parecerse a un toast.
|
43
|
+
/// El color de fondo se lo da una clase background-*
|
44
|
+
.floating-alert-content {
|
45
|
+
border-radius: 2rem;
|
46
|
+
padding: .5rem 1rem;
|
47
|
+
}
|
48
|
+
}
|
data/_sass/fonts.scss
ADDED
File without changes
|
data/_sass/helpers.scss
CHANGED
@@ -1,54 +1,350 @@
|
|
1
|
-
|
1
|
+
////
|
2
|
+
/// @group Utilidades
|
3
|
+
////
|
2
4
|
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
5
|
+
/// Direcciones posibles
|
6
|
+
$directions: (top, right, bottom, left);
|
7
|
+
|
8
|
+
/// Crea una propiedad con prefijos de navegador, cuando no es
|
9
|
+
/// soportada por estándares, por ejemplo el guionado de texto.
|
7
10
|
@mixin vendor-prefix($property, $definition...) {
|
8
11
|
@each $prefix in $vendor-prefixes {
|
9
12
|
#{$prefix}$property: $definition;
|
10
13
|
}
|
11
14
|
}
|
12
15
|
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
16
|
+
@each $breakpoint in map-keys($grid-breakpoints) {
|
17
|
+
@include media-breakpoint-up($breakpoint) {
|
18
|
+
/// Obtiene el sufijo para cada clase responsive usando mixins de
|
19
|
+
/// Bootstrap. Valores posibles:
|
20
|
+
/// `""` (nada, aplica a todas las resoluciones), `-xs`, `-sm`,
|
21
|
+
/// `-md`, `-lg`, `-xl`.
|
22
|
+
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
23
|
+
|
24
|
+
/// Ocultar la barra de scroll, útil para sliders horizontales.
|
25
|
+
///
|
26
|
+
/// @example html
|
27
|
+
/// <div class="no-scrollbar-md"></div>
|
28
|
+
.no-scrollbar#{$infix} {
|
29
|
+
scrollbar-width: none;
|
30
|
+
-webkit-overflow-scrolling: touch;
|
31
|
+
|
32
|
+
&::-webkit-scrollbar { display: none; }
|
33
|
+
}
|
20
34
|
|
21
|
-
|
22
|
-
|
35
|
+
/// Un elemento cuadrado
|
36
|
+
///
|
37
|
+
/// @example html
|
38
|
+
/// <div class="square-lg"></div>
|
39
|
+
.square#{$infix} {
|
40
|
+
position: relative !important;
|
41
|
+
padding-bottom: 100%;
|
23
42
|
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
43
|
+
& > * {
|
44
|
+
position: absolute !important;
|
45
|
+
top: 0 !important;
|
46
|
+
left: 0 !important;
|
47
|
+
height: 100% !important;
|
48
|
+
}
|
28
49
|
}
|
29
50
|
|
30
|
-
|
31
|
-
|
32
|
-
|
51
|
+
/// Cursores
|
52
|
+
$cursors: (pointer, none);
|
53
|
+
@each $cursor in $cursors {
|
54
|
+
/// El elemento va a tener un cursor
|
55
|
+
///
|
56
|
+
/// @example html
|
57
|
+
/// <div class="cursor-pointer"></div>
|
58
|
+
.cursor#{$infix}-#{$cursor} {
|
59
|
+
cursor: $cursor;
|
33
60
|
}
|
34
61
|
}
|
35
62
|
|
36
|
-
|
37
|
-
|
63
|
+
/// Eventos del cursor
|
64
|
+
$events: (none, auto);
|
65
|
+
@each $event in $events {
|
66
|
+
/// Habilita o deshabilita recibir eventos al tocar o clickear.
|
67
|
+
///
|
68
|
+
/// @example html
|
69
|
+
/// <div class="pointer-event-none"></div>
|
70
|
+
.pointer-event#{$infix}-#{$event} {
|
71
|
+
pointer-events: $event;
|
72
|
+
}
|
38
73
|
}
|
39
74
|
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
border-color: var(--#{$color});
|
75
|
+
/// Agrega una transición a cualquier modificación de atributos
|
76
|
+
.transition#{$infix} {
|
77
|
+
@include transition($transition-base);
|
44
78
|
}
|
45
79
|
|
46
|
-
|
47
|
-
|
80
|
+
/// Valores posibles para la propiedad `object-fit`
|
81
|
+
$objects: (contain, cover, fill, none, scale-down);
|
82
|
+
@each $object in $objects {
|
83
|
+
/// Ajustes de imagen y video con respecto al contenedor
|
84
|
+
///
|
85
|
+
/// @example html
|
86
|
+
/// <img class="object-cover object-lg-contain"/>
|
87
|
+
.fit#{$infix}-#{$object} {
|
88
|
+
object-fit: #{$object};
|
89
|
+
}
|
48
90
|
}
|
49
91
|
|
50
|
-
|
51
|
-
|
92
|
+
/// _Overflow_, qué hacer cuando el contenido sobrepasa los límites del
|
93
|
+
/// contenedor.
|
94
|
+
$overflows: (auto, hidden, scroll);
|
95
|
+
/// También puede ser solo dentro de un eje
|
96
|
+
$overflow-axis: (x, y);
|
97
|
+
@each $overflow in $overflows {
|
98
|
+
/// Manejar el contenido sobre cualquier eje
|
99
|
+
///
|
100
|
+
/// @example html
|
101
|
+
/// <div class="overflow-hidden overflow-scroll-md"></div>
|
102
|
+
.overflow#{$infix}-#{$overflow} {
|
103
|
+
overflow: $overflow !important;
|
104
|
+
}
|
105
|
+
|
106
|
+
@each $axis in $overflow-axis {
|
107
|
+
/// Manejar el contenido sobre un eje particular
|
108
|
+
///
|
109
|
+
/// @example html
|
110
|
+
/// <div class="overflow-hidden-y overflow-scroll-x"></div>
|
111
|
+
.overflow-#{$axis}#{$infix}-#{$overflow} {
|
112
|
+
overflow-#{$axis}: $overflow !important;
|
113
|
+
}
|
114
|
+
}
|
115
|
+
}
|
116
|
+
|
117
|
+
@each $spacer, $length in $spacers {
|
118
|
+
/// Poder aumentar o disminuir el alto de la tipografía. Los
|
119
|
+
/// `spacers` están definidos en Bootstrap y pueden ser extendidos
|
120
|
+
/// desde styles.scss
|
121
|
+
///
|
122
|
+
/// @link assets/css/styles.scss
|
123
|
+
/// @example html
|
124
|
+
/// <h1 class="f-3"></h1>
|
125
|
+
.f#{$infix}-#{$spacer} {
|
126
|
+
font-size: $length !important;
|
127
|
+
}
|
128
|
+
|
129
|
+
/// Columnas de texto
|
130
|
+
///
|
131
|
+
/// @example html
|
132
|
+
/// <div class="text-column-1 text-column-md-3"></div>
|
133
|
+
.text-column#{$infix}-#{$spacer} {
|
134
|
+
column-count: $spacer;
|
135
|
+
}
|
136
|
+
|
137
|
+
/// Limitar la cantidad de líneas de un bloque de texto,
|
138
|
+
/// reemplazando el sobrante por puntos suspensivos. Es útil cuando
|
139
|
+
/// el diseño solo pide una cantidad de líneas pero no sabemos cuál
|
140
|
+
/// va a ser el largo.
|
141
|
+
///
|
142
|
+
/// @example html
|
143
|
+
/// <h1 class="line-clamp-1"></h1>
|
144
|
+
.line-clamp#{$infix}-#{$spacer} {
|
145
|
+
overflow: hidden;
|
146
|
+
display: -webkit-box;
|
147
|
+
-webkit-line-clamp: $spacer;
|
148
|
+
-webkit-box-orient: vertical;
|
149
|
+
}
|
150
|
+
|
151
|
+
@each $direction in $directions {
|
152
|
+
/// Ubicación absoluta, usar con position-*
|
153
|
+
///
|
154
|
+
/// @example html
|
155
|
+
/// <div class="position-absolute top-0 left-3"></div>
|
156
|
+
.#{$direction}#{$infix}-#{$spacer} {
|
157
|
+
#{$direction}: $length
|
158
|
+
}
|
159
|
+
}
|
160
|
+
}
|
161
|
+
|
162
|
+
/// Anchos y altos en base a `$sizes` definido por Bootstrap. Para
|
163
|
+
/// personalizar los tamaños, modificarlos o agregarlos en `styles.scss`
|
164
|
+
///
|
165
|
+
/// @link assets/css/styles.scss
|
166
|
+
@each $prop, $abbrev in (width: w, height: h) {
|
167
|
+
@each $size, $length in $sizes {
|
168
|
+
.#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
|
169
|
+
.#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
|
170
|
+
.min-#{$abbrev}#{$infix}-#{$size} { min-#{$prop}: $length !important; }
|
171
|
+
.max-#{$abbrev}#{$infix}-#{$size} { max-#{$prop}: $length !important; }
|
172
|
+
}
|
173
|
+
}
|
174
|
+
|
175
|
+
/// Tipos de _scroll_ posible
|
176
|
+
$scrolls: (auto, smooth);
|
177
|
+
@each $scroll in $scrolls {
|
178
|
+
/// Poder modificar el tipo de _scroll_ de forma _responsive_
|
179
|
+
///
|
180
|
+
/// @example html
|
181
|
+
/// <div class="scroll-auto scroll-md-smooth"></div>
|
182
|
+
.scroll#{$infix}-#{$scroll} {
|
183
|
+
scroll-behavior: #{$scroll};
|
184
|
+
}
|
185
|
+
}
|
186
|
+
|
187
|
+
/// Bordes. Bootstrap no define bordes _responsive_
|
188
|
+
///
|
189
|
+
/// @link node_modules/bootstrap/scss/utilities/_borders.scss
|
190
|
+
/// @example html
|
191
|
+
/// <div class="border border-md-top-0"></div>
|
192
|
+
.border#{$infix} { border: $border-width solid $border-color !important; }
|
193
|
+
.border#{$infix}-0 { border: 0 !important; }
|
194
|
+
|
195
|
+
@each $direction in $directions {
|
196
|
+
.border#{$infix}-#{$direction} { border-#{$direction}: $border-width solid $border-color !important; }
|
197
|
+
.border#{$infix}-#{$direction}-0 { border-#{$direction}: 0 !important; }
|
198
|
+
}
|
199
|
+
|
200
|
+
$aligns: (left,center,right);
|
201
|
+
@each $align in $aligns {
|
202
|
+
/// Alineación _responsive_
|
203
|
+
///
|
204
|
+
/// @example html
|
205
|
+
/// <div class="text-center text-md-right"></div>
|
206
|
+
.text#{$infix}-#{$align} { text-align: $align !important; }
|
207
|
+
}
|
208
|
+
|
209
|
+
@each $position in $positions {
|
210
|
+
/// Posicionamiento
|
211
|
+
///
|
212
|
+
/// @example html
|
213
|
+
/// <div class="position-relative position-md-absolute"></div>
|
214
|
+
.position#{$infix}-#{$position} { position: $position !important; }
|
215
|
+
}
|
216
|
+
|
217
|
+
@each $color, $rgb in $colors {
|
218
|
+
/// Colores de fondo. Es raro que usemos versiones _responsive_, pero
|
219
|
+
/// no está de más tenerlas.
|
220
|
+
///
|
221
|
+
/// @link assets/css/styles.scss
|
222
|
+
/// @example html
|
223
|
+
/// <div class="background-red"></div>
|
224
|
+
.background#{$infix}-#{$color} {
|
225
|
+
background-color: var(--#{$color});
|
226
|
+
|
227
|
+
&:focus {
|
228
|
+
background-color: var(--#{$color});
|
229
|
+
}
|
230
|
+
}
|
231
|
+
|
232
|
+
@each $opacity, $degree in $opacities {
|
233
|
+
/// Color de fondo con transparencia (opacidad)
|
234
|
+
///
|
235
|
+
/// @example html
|
236
|
+
/// <div class="background-red-t2"></div>
|
237
|
+
.background#{$infix}-#{$color}-t#{$opacity} {
|
238
|
+
background-color: scale-color($rgb, $alpha: $degree);
|
239
|
+
}
|
240
|
+
}
|
241
|
+
|
242
|
+
/// Atributos de SVG
|
243
|
+
$svg-attributes: (stroke, fill);
|
244
|
+
@each $attr in $svg-attributes {
|
245
|
+
/// Poder cambiar el relleno o la línea de un SVG
|
246
|
+
///
|
247
|
+
/// @example html
|
248
|
+
/// <div class="stroke-black fill-red">
|
249
|
+
/// <svg/>
|
250
|
+
/// </div>
|
251
|
+
.#{$attr}#{$infix}-#{$color} {
|
252
|
+
svg {
|
253
|
+
* {
|
254
|
+
#{$attr}: var(--#{$color});
|
255
|
+
}
|
256
|
+
}
|
257
|
+
}
|
258
|
+
}
|
259
|
+
|
260
|
+
/// Barras de _scroll_ de colores
|
261
|
+
///
|
262
|
+
/// @example html
|
263
|
+
/// <div class="scrollbar-green"></div>
|
264
|
+
.scrollbar#{$infix}-#{$color} {
|
265
|
+
scrollbar-color: var(--#{$color}) transparent;
|
266
|
+
scrollbar-width: thin;
|
267
|
+
|
268
|
+
&::-webkit-scrollbar {
|
269
|
+
width: 5px;
|
270
|
+
height: 8px;
|
271
|
+
background-color: transparent;
|
272
|
+
}
|
273
|
+
|
274
|
+
&::-webkit-scrollbar-thumb {
|
275
|
+
background: var(--#{$color});
|
276
|
+
}
|
277
|
+
}
|
278
|
+
|
279
|
+
/// Bordes de color
|
280
|
+
///
|
281
|
+
/// @example html
|
282
|
+
/// <div class="border-red"></div>
|
283
|
+
.border#{$infix}-#{$color} {
|
284
|
+
border-color: var(--#{$color}) !important;
|
285
|
+
}
|
286
|
+
|
287
|
+
/// Cambiar el fondo al pasar por encima o hacer foco
|
288
|
+
///
|
289
|
+
/// @example html
|
290
|
+
/// <div class="background-black background-hover-red"></div>
|
291
|
+
.background-hover#{$infix}-#{$color} {
|
292
|
+
&:hover,
|
293
|
+
&:focus-within {
|
294
|
+
background-color: var(--#{$color});
|
295
|
+
}
|
296
|
+
}
|
297
|
+
|
298
|
+
/// Cambiar el color al pasar por encima o hacer foco
|
299
|
+
///
|
300
|
+
/// @example html
|
301
|
+
/// <div class="black hover-red"></div>
|
302
|
+
.hover-#{$color} {
|
303
|
+
&:hover,
|
304
|
+
&:focus-within {
|
305
|
+
color: var(--#{$color});
|
306
|
+
}
|
307
|
+
}
|
308
|
+
|
309
|
+
/// Cambiar el color, también aplica a la selección de texto.
|
310
|
+
///
|
311
|
+
/// @example html
|
312
|
+
/// <div class="black hover-red"></div>
|
313
|
+
.#{$color} {
|
314
|
+
color: var(--#{$color});
|
315
|
+
|
316
|
+
&:focus {
|
317
|
+
color: var(--#{$color});
|
318
|
+
}
|
319
|
+
|
320
|
+
/// Invertir el color en la selección, con el mismo color de fondo y
|
321
|
+
/// texto en blanco.
|
322
|
+
::-moz-selection,
|
323
|
+
::selection {
|
324
|
+
background: var(--#{$color});
|
325
|
+
color: white;
|
326
|
+
}
|
327
|
+
|
328
|
+
/// Si el contenedor tiene un color, también aplica a los bordes de los
|
329
|
+
/// elementos de un formulario.
|
330
|
+
///
|
331
|
+
/// @todo Evaluar si es realmente necesario hacerlo así, porque no
|
332
|
+
/// aplica a las sombras.
|
333
|
+
.form-control {
|
334
|
+
border-color: var(--#{$color});
|
335
|
+
color: var(--#{$color});
|
336
|
+
}
|
337
|
+
|
338
|
+
/// Los `<hr/>` también cambian de color.
|
339
|
+
///
|
340
|
+
/// @example html
|
341
|
+
/// <div class="red">
|
342
|
+
/// <hr/>
|
343
|
+
/// </div>
|
344
|
+
hr {
|
345
|
+
border-color: var(--#{$color});
|
346
|
+
}
|
347
|
+
}
|
52
348
|
}
|
53
349
|
}
|
54
350
|
}
|