imagen-jekyll-theme 0.1.0

data/_data/schema.yml

@@ -0,0 +1,9 @@
+---
+organization:
+  imagen: []
+  theme:
+  - "menu"
+  about:
+  - "code_of_conduct"
+  - "license"
+  - "privacy_policy"

data/_data/sutty.yml

@@ -0,0 +1,6 @@
+---
+colaboracion_anonima: true
+contact: false
+acepta_invitades: true
+slugify_mode: "default"
+pagination: false

data/_data/theme.yml

@@ -0,0 +1,173 @@
+---
+vendor_prefixes:
+- ""
+- "-webkit-"
+- "-ms-"
+- "-o-"
+- "-moz-"
+bezier: "cubic-bezier(0.75, 0, 0.25, 1);"
+colors:
+  black: "#000000"
+  white: "#ffffff"
+  transparent: "transparent"
+  blue: "#155aa8"
+  gray: "#E4E4E4"
+  input_form: "#e4e4e4"
+  primary: "$primary"
+  secondary: "$secondary"
+theme_colors: "$colors"
+spacer: "1rem"
+spacers:
+  10: "($spacer * 0.625)"
+  12: "($spacer * 0.75)"
+  15: "($spacer * 0.9375)"
+  20: "($spacer * 1.25)"
+  24: "($spacer * 1.5)"
+  26: "($spacer * 1.625)"
+  34: "($spacer * 2.125)"
+  38: "($spacer * 2.375)"
+  50: "($spacer * 3.125)"
+  64: "($spacer * 4)"
+  150: "9.375rem"
+paragraph_margin_bottom: "0"
+headings_margin_bottom: "0"
+label_margin_bottom: "0"
+sizes:
+  20px: "1.25rem"
+  35px: "35px"
+  50vh: "50vh"
+  90px: "90px"
+  100vh: "100vh"
+  117px: "117px"
+  140px: "140px"
+opacities:
+  0: "-100%"
+  1: "-80%"
+  2: "-60%"
+  3: "-40%"
+  4: "-20%"
+  5: "0%"
+paragraph_margin_bottom: 0
+headings_margin_bottom: 0
+label_margin_bottom: 0
+enable_responsive_font_sizes: true
+directions:
+- "top"
+- "right"
+- "bottom"
+- "left"
+font_sizes:
+  12: "0.75"
+  13: "0.8125"
+  16: "1"
+  17: "1.0625"
+  18: "1.125"
+  20: "1.25"
+  22: "1.375"
+  24: "1.5"
+  25: "1.5625"
+  26: "1.625"
+  40: "2.5"
+display1_size: "6rem"
+display2_size: "5.55rem"
+display3_size: "5rem"
+display4_size: "4.5rem"
+lead_font_size: "1.25rem"
+font_weight_bolder: "700 !default"
+letter_spacings:
+  1: "0.1rem"
+  2: "0.16rem"
+text_decoration_lines:
+- "none"
+- "underline"
+- "overline"
+- "line-through"
+text_decoration_styles:
+- "solid"
+- "double"
+- "dotted"
+- "dashed"
+- "wavy"
+hyphens:
+- "none"
+- "auto"
+- "manual"
+cursors:
+- "pointer"
+- "none"
+- "help"
+- "not-allowed"
+- "progress"
+- "text"
+- "wait"
+events:
+- "none"
+- "auto"
+objects:
+- "contain"
+- "cover"
+- "fill"
+- "none"
+- "scale-down"
+overflows:
+- "auto"
+- "hidden"
+- "scroll"
+overflow_axis:
+- "x"
+- "y"
+scrolls:
+- "auto"
+- "smooth"
+svg_attributes:
+- "fill"
+- "stroke"
+embed_responsive_aspect_ratios:
+- "(1 1)"
+- "(4 3)"
+- "(16 9)"
+- "(21 9)"
+aligns:
+- "left"
+- "center"
+- "right"
+svg_attributes:
+- "stroke"
+- "fill"
+pixel_densities:
+- "1"
+- "1.5"
+- "2"
+background_sizes:
+  cover: "cover"
+  auto: "auto"
+  contain: "contain"
+background_positions_x:
+- "center"
+- "top"
+background_positions_y:
+- "center"
+- "left"
+- "right"
+background_images:
+  example: "$background-example"
+grid_breakpoints:
+  xs: "0"
+  sm: "576px"
+  md: "768px"
+  lg: "992px"
+  xl: "1200px"
+border_width: "1px"
+border_widths:
+  1: "1px"
+  2: "2px"
+  3: "3px"
+  4: "4px"
+  5: "5px"
+transform_scales:
+- "1"
+input_border_radius: "30px"
+submit_border_radius: "30px"
+form_group_margin_bottom: "1.5em"
+resizes:
+- "none"

data/_includes/boolean.html

@@ -0,0 +1,38 @@
+{%- comment -%}
+
+Form: type boolean
+
+@param :field [Integer] El campo del formulario
+@param :boolean_class [String] Las clases del componente
+{%- endcomment -%}
+
+{%- assign name = include.field[0] -%}
+{%- assign id = include.field[1].id | default: name -%}
+{%- assign label = include.field[1].label[site.locale] -%}
+{%- assign help = include.field[1].help[site.locale] -%}
+{%- assign autocomplete = include.field[1].autocomplete -%}
+
+<div class="form-check text-left">
+  <input
+    {% if help %}
+      aria-describedby="help-{{ id }}"
+    {% endif %}
+    {% if include.field[1].required %}
+      required
+    {% endif %}
+    type="checkbox"
+    name="{{ name }}"
+    id="{{ id }}"
+    {% if autocomplete %}
+      autocomplete="{{ autocomplete }}"
+    {% endif %}
+    class="form-check-input {{ include.boolean_class }}" />
+
+  <label class="form-check-label" for="{{ id }}">{{ label }}</label>
+
+  {%- if help -%}
+    <small id="help-{{ id }}" class="form-text">
+      {{ help }}
+    </small>
+  {%- endif -%}
+</div>

data/_includes/buttons/button.html

@@ -0,0 +1,9 @@
+{%- comment -%}
+Un botón interactivo. Utiliza la etiqueta `<button>`
+
+@param :class [String] Las clases del componente aparte de btn (colores, tipografía, etc)
+@param :content [String,HTML] El contenido del botón
+@param :extra [HTML] Atributos extra
+{%- endcomment -%}
+
+{%- include buttons/generic.html element="button" class=include.class content=include.content extra=include.extra -%}

data/_includes/buttons/copy.html

@@ -0,0 +1,28 @@
+{%- comment -%}
+
+Un botón con contenido copiable.  Si el
+link es externo, agregar el parámetro de seguridad noopener.
+
+@param :copy [String] El texto copiable
+@param :text [String] El contenido
+
+{%- endcomment -%}
+
+{% capture content %}
+  <span data-button-copy-target="text">{{- include.text -}}</span>
+  <span data-button-copy-target="icon" class="pl-2">
+    {%- include svg/copy-icon.svg -%}
+  </span>
+  <span data-button-copy-target="confirmationIcon" class="d-none pl-2">
+    {%- include svg/done-icon.svg -%}
+  </span>
+{% endcapture %}
+
+{% capture extra %}
+  data-controller="button-copy"
+  data-button-copy-text-value="{{ include.copy | escape_once }}"
+  data-button-copy-confirmation-value="{{ site.i18n.button_copy.confirmation | replace: "%s", include.copy | escape_once }}"
+  data-action="button-copy#copy"
+{% endcapture %}
+
+{% include buttons/button.html class="btn btn-primary" content=content extra=extra %}

data/_includes/buttons/generic.html

@@ -0,0 +1,15 @@
+{%- comment -%}
+Un botón genérico. Se usa como base para crear los demás
+botones con distintas funcionalidades.
+
+@param :element [String] El elemento (p.e. `a` `button`)
+@param :class [String] Las clases del componente aparte de btn (colores, tipografía, etc)
+@param :content [String,HTML] El contenido del botón
+@param :extra [HTML] Atributos extra
+{%- endcomment -%}
+
+{%- assign element = include.element | default: "button" -%}
+
+<{{ element }} {{ include.extra }} class="btn {{ include.class }}">
+  {{- include.content -}}
+</{{ element }}>

data/_includes/buttons/link.html

@@ -0,0 +1,14 @@
+{%- comment -%}
+Un botón con link. Utiliza la etiqueta `<a>`
+
+@param :href [String] La URL destino
+@param :class [String] Las clases del componente aparte de btn (colores, tipografía, etc)
+@param :content [String,HTML] El contenido del botón
+@param :extra [HTML] Atributos extra
+{%- endcomment -%}
+
+{%- assign extra = include.href | start_with: "http://" | value_if: 'rel="noopener" target="_blank"' -%}
+{%- assign extra = include.href | start_with: "https://" | value_if: 'rel="noopener" target="_blank"' -%}
+{%- assign extra = include.href | uri_escape | prepend: 'href="' | append: '" ' | append: extra | append: " " | append: include.extra -%}
+
+{%- include buttons/generic.html element="a" class=include.class content=include.content extra=extra -%}

data/_includes/contact.html

@@ -0,0 +1,17 @@
+{% comment %}
+  El formulario se envía a la API.  La definición del formulario se
+  encuentra en _data/forms/contacto.yml
+{% endcomment %}
+<form
+  data-turbo="false"
+  data-controller="contact"
+  data-delay="60"
+  action="https://api.{{ site.hostname }}/v1/sites/{{ site.hostname }}/contact/{{ include.name }}"
+  method="post">
+  {%- for field in include.form -%}
+    {% assign template = field[1].type | append: '.html' %}
+    <div class="col{{ field[1].col | default: 12 | prepend: '-' }}">
+      {% include {{ template }} field=field %}
+    </div>
+  {%- endfor -%}
+</form>

data/_includes/content.html

@@ -0,0 +1,9 @@
+{%- comment -%}
+
+Form: type content
+
+@param :field [Integer] El campo del formulario
+@param :text_class [String] Las clases del componente
+{%- endcomment -%}
+
+{% include text.html field=field text_class=include.text_class %}

data/_includes/descriptor.html

@@ -0,0 +1,18 @@
+{%- comment -%}
+
+Descriptor. La caja de datos que se encuentra debajo de cada imagen.
+
+@param :title [String] El título
+@param :estudiante [String] Nombre estudiantx
+@param :description [String] La descripción de la imagen
+@param :class [String] Las clases del componente
+@param :title_class [String] Las clases del título
+{%- endcomment -%}
+
+<div class="background-blue white {{ include.class }}">
+    <p class="{{ include.title_class }}"><span class="font-weight-bold">{{ site.i18n.titulo }}</span> {{include.title}}</p>
+    <p><span class="font-weight-bold">{{ site.i18n.de }}</span> {{include.estudiante}} </p>
+    {% if include.description %}
+        <p><span class="font-weight-bold">{{ site.i18n.descripcion }}</span> {{include.description}}</p>
+    {% endif %}
+</div>

data/_includes/device_detector.html

@@ -0,0 +1,30 @@
+<div
+  data-controller="device-detector"
+  data-action="resize@window->device-detector#resized"
+  class="position-fixed top-0 right-0 background-pink-t3 z-index-2050 pointer-event-none">
+  <div>
+    <button class="pointer-event-auto btn btn-sm" data-action="device-detector#toggleHelp">
+      {{ site.i18n.device_detector.get_help }}
+    </button>
+    <button class="pointer-event-auto btn btn-sm" data-action="device-detector#outline">
+      {{ site.i18n.device_detector.outline }}
+    </button>
+    <span data-device-detector-target="clientName"></span>
+    &nbsp;
+    <span data-device-detector-target="clientVersion"></span>
+    &nbsp;
+    (<span data-device-detector-target="deviceType"></span>)
+    &nbsp;
+    <span data-device-detector-target="osName"></span>
+    &nbsp;
+    <span data-device-detector-target="osVersion"></span>
+    &nbsp;
+    <span data-device-detector-target="viewportWidth"></span>
+    x <span data-device-detector-target="viewportHeight"></span>
+    x <span data-device-detector-target="devicePixelRatio"></span>
+  </div>
+
+  <div data-device-detector-target="help" hidden class="background-pink">
+    {{ site.i18n.device_detector.help | allow_inclusive_language_in_markdown | markdownify }}
+  </div>
+</div>

data/_includes/email.html

@@ -0,0 +1,9 @@
+{%- comment -%}
+
+Form: type email
+
+@param :field [Integer] El campo del formulario
+@param :input_class [String] Las clases del componente
+{%- endcomment -%}
+
+{% include input.html field=field input_class=include.input_class %}

data/_includes/embed_responsive.html

@@ -0,0 +1,16 @@
+{%- comment -%}
+
+Embed responsive. Para imágenes con relación de aspecto.
+Se suele usar para las imágenes de grillas.
+
+@param :x [Integer] El ancho
+@param :y [Integer] El alto
+@param :src [String] La url de la imagen
+@param :alt [String] La descripción de la imagen
+@param :width [Integer] El ancho
+@param :component_class [String] Las clases del componente embed_responsive
+{%- endcomment -%}
+
+<div class="embed-responsive embed-responsive-{{ include.x }}by{{ include.y }} {{ include.component_class }}">
+  {%- include picture.html class="embed-responsive-item" img_class="w-100 h-100 fit-cover" src=include.src alt=include.alt width=include.width -%}
+</div>

data/_includes/file.html

@@ -0,0 +1,43 @@
+{%- comment -%}
+
+Form: type file
+
+@param :field [Integer] El campo del formulario
+@param :file_class [String] Las clases del componente
+{%- endcomment -%}
+
+{%- assign name = include.field[0] -%}
+{%- assign id = include.field[1].id | default: name -%}
+{%- assign label = include.field[1]['path'].label[site.locale] -%}
+{%- assign help = include.field[1]['path'].help[site.locale] -%}
+{%- assign accept = include.field[1].accept -%}
+
+<label>{{ label }}</label>
+
+<div class="custom-file">
+  <input
+    {% if help %}
+      aria-describedby="help-{{ id }}"
+    {% endif %}
+    {% if include.field[1].required %}
+      required
+    {% endif %}
+    type="{{ include.field[1].type }}"
+    name="{{ name }}[path]"
+    id="{{ id }}_path"
+    {% if accept %}
+    accept="{{ accept }}"
+    {% endif %}
+    class="custom-file-input {{ include.file_class }}" />
+
+  <label for="{{ id }}_path" class="custom-file-label">
+    {{ label }}
+    {% if include.field[1].required %}*{% endif %}
+  </label>
+
+  {%- if help -%}
+    <small id="help-{{ id }}" class="form-text">
+      {{ help }}
+    </small>
+  {%- endif -%}
+</div>

data/_includes/floating_alert.html

@@ -0,0 +1,6 @@
+<div
+  data-controller="floating-alert"
+  class="floating-alert floating-alert-bottom floating-alert-default hide"
+  role="status" aria-live="polite" aria-atomic="true">
+  <div data-floating-alert-target="content" class="floating-alert-content white background-black-t4"></div>
+</div>

data/_includes/footer.html

@@ -0,0 +1,5 @@
+<footer class="position-fixed bottom-0 w-100">
+  <div class="mt-2 background-blue white text-center py-2">
+    {{ include.credits | markdownify | replace: '<a', '<a class="text-white"' }}
+  </div>
+</footer>

data/_includes/form/boolean.html

@@ -0,0 +1 @@
+../boolean.html

data/_includes/form/content.html

@@ -0,0 +1 @@
+../content.html

data/_includes/form/email.html

@@ -0,0 +1 @@
+../email.html

data/_includes/form/file.html

@@ -0,0 +1 @@
+../file.html

data/_includes/form/hidden.html

@@ -0,0 +1 @@
+../hidden.html

data/_includes/form/image.html

@@ -0,0 +1 @@
+../image.html

data/_includes/form/input.html

@@ -0,0 +1 @@
+../input.html

data/_includes/form/markdown_content.html

@@ -0,0 +1 @@
+../markdown_content.html

data/_includes/form/number.html

@@ -0,0 +1 @@
+../number.html

data/_includes/form/predefined_array.html

@@ -0,0 +1 @@
+../predefined_array.html

data/_includes/form/section.html

@@ -0,0 +1 @@
+../section.html

data/_includes/form/separator.html

@@ -0,0 +1 @@
+../separator.html

data/_includes/form/string.html

@@ -0,0 +1 @@
+../string.html

data/_includes/form/submit.html

@@ -0,0 +1 @@
+../submit.html

data/_includes/form/tel.html

@@ -0,0 +1 @@
+../tel.html

data/_includes/form/text.html

@@ -0,0 +1 @@
+../text.html

data/_includes/form/url.html

@@ -0,0 +1 @@
+../url.html

data/_includes/grilla.html

@@ -0,0 +1,21 @@
+{%- comment -%}
+
+Imagen de la grilla con descriptor
+
+@param :imagenes [String] Las imágenes
+{%- endcomment -%}
+
+{%- assign imagenes = include.imagenes -%}
+
+<div class="row row-cols-2">
+	{% for imagen in imagenes %}
+		{%- include_cached imagen_grilla.html
+			href=imagen.url
+			alt=imagen.image.description
+			src=imagen.image.path
+			width=164
+			title=imagen.title
+			estudiante=imagen.estudiante
+		-%}
+	{% endfor %}
+</div>

data/_includes/headings/generic.html

@@ -0,0 +1,14 @@
+{%- comment -%}
+
+La base para un encabezado
+
+@param :level [Integer] El nivel
+@param :text [String] El contenido
+@param :class [String] Clases para aplicar a títulos
+{%- endcomment -%}
+
+{%- assign slug = include.text | slugify -%}
+
+<h{{ include.level }} id="{{ slug }}" class="{{ include.class }}">
+  {{- include.text -}}
+</h{{ include.level }}>

data/_includes/headings/h1.html

@@ -0,0 +1,9 @@
+{%- comment -%}
+
+Encabezado de primer nivel
+
+@param :text [String] El contenido
+@param :class [String] Clases para aplicar a títulos
+{%- endcomment -%}
+
+{%- include headings/generic.html level=1 text=include.text class=include.class -%}

data/_includes/headings/h2.html

@@ -0,0 +1,9 @@
+{%- comment -%}
+
+Encabezado de segundo nivel
+
+@param :text [String] El contenido
+@param :class [String] Clases para aplicar a títulos
+{%- endcomment -%}
+
+{%- include headings/generic.html level=2 text=include.text class=include.class -%}

data/_includes/headings/h3.html

@@ -0,0 +1,9 @@
+{%- comment -%}
+
+Encabezado de tercer nivel
+
+@param :text [String] El contenido
+@param :class [String] Clases para aplicar a títulos
+{%- endcomment -%}
+
+{%- include headings/generic.html level=3 text=include.text class=include.class -%}

data/_includes/headings/with_link.html

@@ -0,0 +1,15 @@
+{%- comment -%}
+
+La base para un encabezado con enlace
+
+@param :level [Integer] El nivel
+@param :text [String] El contenido
+@param :class [String] Clases para aplicar a títulos
+{%- endcomment -%}
+
+{%- assign slug = include.text | slugify -%}
+<h{{ include.level }} id="{{ slug }}">
+  <a class="{{ include.class }}" href="#{{ slug }}" data-turbo="false">
+    {{- include.text -}}
+  </a>
+</h{{ include.level }}>

data/_includes/hidden.html

@@ -0,0 +1,5 @@
+{%- assign name = include.field[0] -%}
+{%- assign id = include.field[1].id | default: name -%}
+{%- assign value = include.field[1].value -%}
+
+<input type="hidden" value="{{ value }}" name="{{ name }}" id="{{ id }}" />