From 9cbaba6ba828fb82f1aa0e87e35cead2577a18b8 Mon Sep 17 00:00:00 2001 From: f Date: Sat, 11 Sep 2021 15:47:43 -0300 Subject: [PATCH] =?UTF-8?q?Generar=20la=20personalizaci=C3=B3n=20din=C3=A1?= =?UTF-8?q?micamente?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _data/en.yml | 1 + _data/es.yml | 1 + _data/layouts/theme.yml | 199 +++++++++++++++++++++++++--------------- assets/css/styles.scss | 64 +++++++------ 4 files changed, 158 insertions(+), 107 deletions(-) diff --git a/_data/en.yml b/_data/en.yml index 60a0649..f236e60 100644 --- a/_data/en.yml +++ b/_data/en.yml @@ -65,6 +65,7 @@ layouts: post: Article menu: Menu about: About this site + theme: Customize theme menu: title: Menu share: diff --git a/_data/es.yml b/_data/es.yml index 358e94b..f56b2e4 100644 --- a/_data/es.yml +++ b/_data/es.yml @@ -51,6 +51,7 @@ layouts: post: Artículo menu: Menú about: Información del sitio + theme: Personalizar plantilla menu: title: Menú share: diff --git a/_data/layouts/theme.yml b/_data/layouts/theme.yml index 3ac90ba..e9bba09 100644 --- a/_data/layouts/theme.yml +++ b/_data/layouts/theme.yml @@ -6,144 +6,195 @@ title: en: Title es: Título help: - en: '' - es: '' + en: 'The name you want to give to this customization' + es: 'El nombre que quieras darle a esta personalización' enable_rounded: type: boolean label: - en: 'Yes' - es: Sí + en: 'Rounded corners' + es: 'Esquinas redondeadas' help: - en: Enable or disable this option - es: Habilita o deshabilita esta opción + en: 'For buttons, form inputs, etc.' + es: 'De los botones, campos de formularios, etc.' + default: + es: true + en: true enable_shadows: type: boolean label: - en: 'Yes' - es: Sí + en: 'Shadows' + es: 'Sombras' help: - en: Enable or disable this option - es: Habilita o deshabilita esta opción + en: 'Shadows behind elements' + es: 'Sombras en los elementos' + default: + es: true + en: true body_bg: type: color label: - en: Color - es: Color + en: 'Background color' + es: 'Color de fondo' help: - en: Pick a color - es: Elige un color + en: "Site's background color" + es: 'Color de fondo del sitio' + default: + es: '#FFFFFF' + en: '#FFFFFF' body_color: type: color label: - en: Color - es: Color + en: 'Text color' + es: 'Color del texto' help: - en: Pick a color - es: Elige un color + en: '' + es: '' + default: + es: '#212529' + en: '#212529' +primary: + type: color + label: + en: 'Primary color' + es: 'Color principal' + help: + en: 'Highlights certain elements' + es: 'Resalta algunos elementos' + default: + es: '#007bff' + en: '#007bff' link_color: type: color label: - en: Color - es: Color + en: 'Link color' + es: 'Color de los vínculos' help: - en: Pick a color - es: Elige un color + en: '' + es: '' + default: + es: '#007bff' + en: '#007bff' link_hover_color: type: color label: - en: Color - es: Color + en: 'Link color when selected' + es: 'Color de los vínculos al seleccionarlos' help: - en: Pick a color - es: Elige un color -component_active_color: - type: color - label: - en: Color - es: Color - help: - en: Pick a color - es: Elige un color + en: '' + es: '' + default: + es: '#0056b3' + en: '#0056b3' h1_font_size: type: number label: - en: Number - es: Número + en: 'Height for first level headings' + es: 'Altura de los títulos de primer nivel' help: - en: '' - es: '' + en: 'Proportional to font base height. For instance, 2 is double height.' + es: 'En proporción al alto base de la tipografía. Por ejemplo 2 es el doble.' + default: + es: 2.5 + en: 2.5 h2_font_size: type: number label: - en: Number - es: Número + en: 'Height for second level headings' + es: 'Altura de los títulos de segundo nivel' help: - en: '' - es: '' + en: 'Proportional to font base height. For instance, 2 is double height.' + es: 'En proporción al alto base de la tipografía. Por ejemplo 2 es el doble.' + default: + es: 2 + en: 2 h3_font_size: type: number label: - en: Number - es: Número + en: 'Height for third level headings' + es: 'Altura de los títulos de tercer nivel' help: - en: '' - es: '' + en: 'Proportional to font base height. For instance, 2 is double height.' + es: 'En proporción al alto base de la tipografía. Por ejemplo 2 es el doble.' + default: + es: 1.75 + en: 1.75 h4_font_size: type: number label: - en: Number - es: Número + en: 'Height for fourth level headings' + es: 'Altura de los títulos de cuarto nivel' help: - en: '' - es: '' + en: 'Proportional to font base height. For instance, 2 is double height.' + es: 'En proporción al alto base de la tipografía. Por ejemplo 2 es el doble.' + default: + es: 1.5 + en: 1.5 h5_font_size: type: number label: - en: Number - es: Número + en: 'Height for fifth level headings' + es: 'Altura de los títulos de quinto nivel' help: - en: '' - es: '' + en: 'Proportional to font base height. For instance, 2 is double height.' + es: 'En proporción al alto base de la tipografía. Por ejemplo 2 es el doble.' + default: + es: 1.25 + en: 1.25 h6_font_size: type: number label: - en: Number - es: Número + en: 'Height for sixth level headings' + es: 'Altura de los títulos de sexto nivel' help: - en: '' - es: '' + en: 'Proportional to font base height. For instance, 2 is double height.' + es: 'En proporción al alto base de la tipografía. Por ejemplo 2 es el doble.' + default: + es: 1 + en: 1 mark_bg: type: color label: - en: Color - es: Color + en: 'Highlight color' + es: 'Color de resaltado' help: - en: Pick a color - es: Elige un color + en: 'Default color for highlighted text' + es: 'Color por defecto para el texto resaltado' + default: + es: '#fcf8e3' + en: '#fcf8e3' navbar_light_color: type: color label: - en: Color - es: Color + en: 'Navigation bar item color' + es: 'Color de ítem en la barra de navegación' help: - en: Pick a color - es: Elige un color + en: 'Text and icons' + es: 'Texto e íconos' + default: + es: '#ced4da' + en: '#ced4da' navbar_light_hover_color: type: color label: - en: Color - es: Color + en: 'Navigation bar item color when selected' + es: 'Color de ítem seleccionado en la barra de navegación' help: - en: Pick a color - es: Elige un color + en: 'Text and icons' + es: 'Texto e íconos' + default: + es: '#6c757d' + en: '#6c757d' navbar_light_active_color: type: color label: - en: Color - es: Color + en: 'Navigation bar item color when active' + es: 'Color de ítem activo en la barra de navegación' help: - en: Pick a color - es: Elige un color + en: 'Text and icons' + es: 'Texto e íconos' + default: + es: '#212529' + en: '#212529' order: type: order label: diff --git a/assets/css/styles.scss b/assets/css/styles.scss index cbb3685..256a14f 100644 --- a/assets/css/styles.scss +++ b/assets/css/styles.scss @@ -6,31 +6,41 @@ /// @group Principal //// -/// Traemos el primer artículo de tipo `about` para obtener los valores +/// Traemos el primer artículo de tipo `theme` para obtener los valores /// personalizados. -/// -/// @todo Mover a su propio SCSS -{% assign about = site.posts | find: 'layout', 'about' %} + +{% comment %} + Los artículos con layout `theme` contienen variables utilizadas por + Bootstrap que pueden ser redefinidas por les usuaries de Sutty a través + del panel. +{% endcomment %} {% assign theme = site.posts | find: 'layout', 'theme' %} {% assign theme_defaults = site.data.layouts.theme %} +{% comment %} + Ignorar estos campos que no son variables. +{% endcomment %} +{% assign ignored_keys = 'title,draft,order' | split: ',' %} +{% comment %} + Cada variable de Bootstrap viene desde la definición de `theme`. Por + convención usamos snake_case, pero Bootstrap usa guión medio, así que + las convertimos. -$enable-rounded: {{ theme.enable_rounded }}; -$enable-shadows: {{ theme.enable_shadows }}; -$body-bg: {{ theme.body_bg }}; -$body-color: {{ theme.body_color }}; -$link-color: {{ theme.link_color }}; -$link-hover-color: {{ theme.link_hover_color }}; -$component-active-color: {{ theme.component_active_color }}; -$h1-font-size: {{ theme.h1_font_size }}rem; -$h2-font-size: {{ theme.h2_font_size }}rem; -$h3-font-size: {{ theme.h3_font_size }}rem; -$h4-font-size: {{ theme.h4_font_size }}rem; -$h5-font-size: {{ theme.h5_font_size }}rem; -$h6-font-size: {{ theme.h6_font_size }}rem; -$mark-bg: {{ theme.mark_bg }}; -$navbar-light-color: {{ theme.navbar_light_color }}; -$navbar-light-hover-color: {{ theme.navbar_light_hover_color }}; -$navbar-light-active-color: {{ theme.navbar_light_active_color }}; + Utilizamos los valores que vengan del artículo y si no existen, usamos + los valores por defecto de sutty-base. De lo contrario mantenemos los + de Bootstrap. +{% endcomment %} +{% for variable in theme_defaults %} +{% assign key = variable[0] %} +{% if ignored_keys contains key %}{% continue %}{% endif %} +{% assign default_value = variable[1].default[site.locale] %} +{% assign variable_name = key | replace: '_', '-' %} +{% if theme[key] or default_value %} +{% comment %} + Generamos una definición de variable de SASS +{% endcomment %} +${{ variable_name }}: {{ theme[key] | default: default_value }}; +{% endif %} +{% endfor %} /// El modo debug se desactiva en producción $debug: {{ jekyll.environment | not: 'production' }}; @@ -44,18 +54,6 @@ $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