Tema Quark-A11y

Quark-A11y es un fork del tema Quark para Grav CMS, enfocado en mejorar la accesibilidad mientras se mantiene lo más fiel posible al tema original. Esta versión introduce etiquetas ARIA mejoradas y marcado HTML más semántico para proporcionar una mejor experiencia a los usuarios que dependen de tecnologías de asistencia. Además, el framework Spectre.css ha sido actualizado a la versión 0.5.9.

Características

Ligero y minimalista para un rendimiento óptimo
Spectre.css v0.5.9
Semántica HTML mejorada y soporte de etiquetas ARIA para mejor accesibilidad
Totalmente responsivo con navegación móvil de página completa
Archivos CSS basados en SCSS para fácil personalización
Soporte incorporado para navegación en página
Múltiples tipos de plantillas de página
Soporte de iconos Fontawesome

Plantillas de Página Compatibles

Plantilla de vista predeterminada default.md
Plantilla de vista de error error.md
Plantilla de vista de blog blog.md
Plantilla de vista de elemento de blog item.md
Plantillas de vistas modulares: modular.md
- Plantilla de vista modular de características features.md
- Plantilla de vista modular de héroe hero.md
- Plantilla de vista modular de texto text.md
- Nota: La plantilla de vista modular de galería gallery.md solo funciona en conjunto con el plugin premium Lightbox Gallery

Instalación

La instalación de Quark-A11y se puede realizar de dos formas. El método GPM (Gestor de Paquetes de Grav) es el más rápido y fácil, pero también puedes instalarlo manualmente usando un archivo zip.

Instalación con GPM (Recomendado)

La forma más simple de instalar este tema es a través del Gestor de Paquetes de Grav (GPM) desde la Terminal de tu sistema (también llamada línea de comandos). Desde la raíz de tu instalación de Grav, escribe:

bin/gpm install quark-a11y

Esto instalará el tema Quark-A11y en tu directorio /user/themes dentro de Grav. Sus archivos se encuentran bajo /your/site/grav/user/themes/quark-a11y.

Instalación Manual

Para instalar este tema, simplemente descarga la versión zip de este repositorio y descomprímela en /your/site/grav/user/themes. Luego, renombra la carpeta a quark-a11y. Puedes encontrar estos archivos en GitHub o en GetGrav.org.

Ahora deberías tener todos los archivos del tema bajo

/your/site/grav/user/themes/quark-a11y

Opciones Predeterminadas

Quark-A11y viene con algunas opciones predeterminadas que se pueden configurar en todo el sitio. Estas opciones son:

enabled: true                 # Habilita el tema
production-mode: true         # En modo producción, solo se usa CSS minificado. Cuando está deshabilitado, CSS anidado con sourcemaps están habilitados
grid-size: grid-lg            # El ancho máximo del tema, las opciones incluyen: `grid-xl`, `grid-lg`, y `grid-md`
header-fixed: true            # Hace que el encabezado se fije en la parte superior del navegador
header-animated: true         # Permite que el encabezado fijo se redimensione a un encabezado más pequeño cuando se desplaza
header-dark: false            # Invierte el texto/logo para funcionar mejor en fondos oscuros
header-transparent: false     # Permite que el encabezado fijo sea transparente sobre la página
sticky-footer: true           # Hace que el pie de página sea adhesivo en la parte inferior de la página
blog-page: '/blog'            # La ruta a la página de listado del blog, útil para un diseño de estilo blog con barra lateral
custom_logo:                  # Un logo personalizado en lugar del predeterminado (ver abajo)
custom_logo_mobile:           # Un logo personalizado para usar en la navegación móvil

Para realizar modificaciones, puedes copiar el archivo user/themes/quark-a11y/quark-a11y.yaml a la carpeta user/config/themes/ y modificarlo, o puedes usar el plugin de administración.

Aviso

No modifiques directamente el archivo user/themes/quark-a11y/quark-a11y.yaml o tus cambios se perderán con cualquier actualización

Logos Personalizados

Para agregar un logo personalizado, debes poner el logo en la carpeta user/themes/quark-a11/images/logo. Se admiten formatos de imagen estándar (.png, .jpg, .gif, .svg, etc.). Luego, haz referencia al logo a través del YAML de la siguiente manera:

custom_logo:
    - name: 'my-logo.png'
custom_logo_mobile:
    - name: 'my-mobile-logo.png'

Alternativamente, puedes usar el campo de arrastrar y soltar "Logo Personalizado" en las opciones del tema Quark-A11y.

Anulaciones de Página

Quark-A11y tiene la capacidad de permitir que las páginas anulen algunas de las opciones predeterminadas permitiendo al usuario establecer body_classes para cualquier página. El tema fusionará la combinación de los valores predeterminados con cualquier body_classes establecido. Por ejemplo:

body_classes: "header-dark header-transparent"

En una página en particular asegurará que esa página tenga esas opciones habilitadas (asumiendo que estén deshabilitadas por defecto).

Opciones de Héroe

La plantilla de héroe permite establecer algunas opciones en el frontmatter de la página. Esto es utilizado por el modular hero así como por las plantillas de blog e elemento para proporcionar un encabezado más dinámico.

hero_classes: text-light title-h1h2 parallax overlay-dark-gradient hero-large
hero_image: road.jpg
hero_align: center

La opción hero_classes permite establecer dinámicamente una variedad de clases de héroe, estas incluyen:

text-light | text-dark - Controla si el texto debe ser claro u oscuro dependiendo del contenido
title-h1h2 - Fuerza una coincidencia cercana entre títulos h1/h2
parallax - Habilita un efecto parallax impulsado por CSS
overlay-dark-gradient - Muestra un gradiente transparente que oscurece aún más la imagen subyacente
overlay-light-gradient - Muestra un gradiente transparente que aclara aún más la imagen subyacente
overlay-dark - Muestra una superposición transparente sólida que oscurece aún más la imagen subyacente
overlay-light - Muestra una superposición transparente sólida que oscurece aún más la imagen subyacente
hero-fullscreen | hero-large | hero-medium | hero-small | hero-tiny - Tamaño del bloque de héroe

El hero_image debe apuntar a un archivo de imagen en la carpeta de página actual.

Opciones Modulares de Características

La plantilla modular de características proporciona la capacidad de establecer una clase en las características, así como una matriz de elementos de características. Por ejemplo:

class: offset-box
features:
    - header: Increíblemente Rápido
      text: "El rendimiento no es solo una ocurrencia tardía, ¡lo horneamos desde el principio!"
      icon: fighter-jet
    - header: Fácil de construir
      text: "Archivos de texto simples significa que Grav es trivial de instalar y fácil de mantener"
      icon: database
    - header: Tecnología Impresionante
      text: "Grav utiliza tecnologías de primera clase como Twig, Markdown y Yaml"
      icon: cubes
    - header: Super Flexible
      text: "Desde el principio, con muchos hooks de plugins, Grav es extremadamente extensible"
      icon: object-ungroup
    - header: Plugins Abundantes
      text: "Una vibrante comunidad de desarrolladores significa más de 200 temas disponibles para descargar"
      icon: puzzle-piece
    - header: Gratuito / Código Abierto
      text: "Grav es un proyecto de código abierto, así que puedes gastar tu dinero en otras cosas"
      icon: money

Opciones Modulares de Texto

La caja de texto proporciona una única opción para controlar si cualquier imagen encontrada en la carpeta de página debe alinearse a la izquierda o derecha:

image_align: right

Página de Demostración

https://quark-a11y.pmdesign.dev

Documentación

Puedes leer documentación adicional del Tema Quark-A11y en https://pmoreno-rodriguez.github.io/#/./gravthemes/quark-a11y/index.