diff --git a/content/posts/configuration/sections/about/index.es.md b/content/posts/configuration/sections/about/index.es.md index 14e8a655..f3b04432 100644 --- a/content/posts/configuration/sections/about/index.es.md +++ b/content/posts/configuration/sections/about/index.es.md @@ -92,7 +92,7 @@ Puedes usar cualquier icono gratis de [Font Awesome](https://fontawesome.com/ico ### Añade un Currículum -Para añadir un curriculum, pone tu archivo PDF dentro del directorio `files` localizado dentro del directorio `static`. Después incluye la siguiente sección en el archivo `about.yaml`: +Para añadir un curriculum, pon tu archivo PDF dentro del directorio `files` localizado dentro del directorio `static`. Después incluye la siguiente sección en el archivo `about.yaml`: ```yaml # tu currículum. Este archivo debe ser relativo a tu directorio "static" diff --git a/content/posts/configuration/site-parameters/index.es.md b/content/posts/configuration/site-parameters/index.es.md index d628f4b9..00e21d83 100644 --- a/content/posts/configuration/site-parameters/index.es.md +++ b/content/posts/configuration/site-parameters/index.es.md @@ -17,7 +17,7 @@ Para obtener una lista completa de los parámetros de configuración disponibles ### Añade un Fondo -Para empezar, vamos a establecer un fondo a tu sitio web. Pone la imagen de fondo que desee en el directorio `assets/images`. Después, añade lo siguiente en la sección `params` del archivo `config.yaml`. +Para empezar, vamos a establecer un fondo a tu sitio web. pon la imagen de fondo que desee en el directorio `assets/images`. Después, añade lo siguiente en la sección `params` del archivo `config.yaml`. ```yaml background: "images/nombre_de_tu_imagen_de_fondo.jpg" @@ -25,7 +25,7 @@ background: "images/nombre_de_tu_imagen_de_fondo.jpg" ### Añade un Logo -Para añadir logos para tu sitio, necesitas dos logos diferentes: uno para la barra de navegación transparente, y otro para la barra de navegación no-transparente. Pone tus logos dentro del directorio `assets/images` y añade las siguientes líneas debajo de la sección `params` del archivo `config.yaml`. +Para añadir logos para tu sitio, necesitas dos logos diferentes: uno para la barra de navegación transparente, y otro para la barra de navegación no-transparente. pon tus logos dentro del directorio `assets/images` y añade las siguientes líneas debajo de la sección `params` del archivo `config.yaml`. ```yaml # El logo invertido será usado para la barra de navegación transparente. diff --git a/content/posts/customizing/_index.es.md b/content/posts/customizing/_index.es.md new file mode 100644 index 00000000..9fce7f5c --- /dev/null +++ b/content/posts/customizing/_index.es.md @@ -0,0 +1,8 @@ +--- +title: Personalización +menu: + sidebar: + name: Personalización + identifier: customizing + weight: 400 +--- diff --git a/content/posts/customizing/customize-css/index.es.md b/content/posts/customizing/customize-css/index.es.md new file mode 100644 index 00000000..a01bec34 --- /dev/null +++ b/content/posts/customizing/customize-css/index.es.md @@ -0,0 +1,102 @@ +--- +title: "Personalización CSS" +date: 2024-01-13T22:00:50+06:00 +author: + name: Emruz Hossain + image: images/author/emruz.jpg +menu: + sidebar: + name: Personalización CSS + identifier: customize-css + parent: customizing + weight: 407 +--- + +Este tema te permire personalizar la apariencia de tu sitio y sus componentes sobrescribiendo el CSS predeterminado. Esta guía te enseñará cómo sobrescribir el esquema de colores del tema y la personalización de CSS de componentes individuales. + +Este tema usa [Sass](https://sass-lang.com/) para generar el CSS. Si no está familiarizado con Sass, puedes aprender más sobre él [aquí](https://sass-lang.com/guide). + +## Sobrescribe las variables de los colores + +Si quieres cambiar los colores por defecto del tema, pudes sobrescribir las variables de los colores. Para sobrescribir las variables de los colores del tema, necesitarás crear un archivo nombrado `variables.scss` dentro del directorio `assets/styles` de tu sitio. Después copia el contenido predeterminado del archivo [variables.scss](https://github.com/hugo-toha/toha/blob/main/assets/styles/variables.scss), y ponlo en tu archivo `variables.scss`. Aquí, sólo la sección de `$theme` predeterminada de `variables.scss` es mostrada: + +```scss +// themes +$themes: ( + 'light': ( + // cyan 600 + 'accent-color': #0891b2, + // cyan 500 + 'hover-over-accent-color': #06b6d4, + // zinc 200 + 'text-over-accent-color': #e4e4e7, + // slate 50 + 'bg-primary': #f8fafc, + // slate 900 + 'bg-primary-inverse': #0f172a, + // slate 200 + 'bg-secondary': #e2e8f0, + 'bg-card': #fff, + // slate 800 + 'heading-color': #1e293b, + // slate 700 + 'text-color': #334155, + // slate 300 + 'inverse-text-color': #cbd5e1, + // slate 500 + 'muted-text-color': #64748b, + // red 600 + 'inline-code-color': #dc2626, + // amber 200 + 'highlight-color': #fde68a, + // slate 900 + 'footer-color': #0f172a, + ), + 'dark': ( + // cyan 600 + 'accent-color': #0891b2, + // cyan 500 + 'hover-over-accent-color': #06b6d4, + // zinc 200 + 'text-over-accent-color': #e4e4e7, + // gray-800 + 'bg-primary': #1f2937, + // slate 900 + 'bg-primary-inverse': #0f172a, + // gray 900 + 'bg-secondary': #111827, + // slate 800 + 'bg-card': #1e293b, + // slate 100 + 'heading-color': #f1f5f9, + // slate 300 + 'text-color': #cbd5e1, + // slate 900 + 'inverse-text-color': #0f172a, + // slate 500 + 'muted-text-color': #64748b, + // red 600 + 'inline-code-color': #dc2626, + // amber 200 + 'highlight-color': #fde68a, + // slate 900 + 'footer-color': #0f172a, + ), +); +``` + +Los campos `light` y `dark` representan los esquemas de color para el modo claro y el modo oscuro, respectivamente. Modificando los códigos de color en estos campos, puedes personalizar la apariencia de su sitio. + +## Override Component CSS + +Para sobrescribir el CSS de una componente, crea un archivo `override.scss` dentro del directorio `assets/styles`. Después, allí pon el nuevo código CSS. No necesitar rescribir toda la componente de CSS. Puedes poner sólo los campos que quieras cambiar. + +Por ejemplo, para deshabilitar el efector de difunidado de la imagen de fondo de la página de inicio, puedes añadir el siguiente código SCSS en el archivo `override.scss`: + +```scss +.home{ + .background{ + filter: none; + } +} +``` diff --git a/content/posts/getting-started/prepare-site/index.es.md b/content/posts/getting-started/prepare-site/index.es.md index 14e8d331..d20d552e 100644 --- a/content/posts/getting-started/prepare-site/index.es.md +++ b/content/posts/getting-started/prepare-site/index.es.md @@ -297,7 +297,7 @@ softSkills: # color: "#8b8383" ``` -Pone el archivo `resume.pdf` dentro del directorio `/static/files` de tu repositorio. Puedes encontrar el archivo `about.yaml` usado en el sitio web de ejemplo [aquí](https://github.com/hugo-toha/hugo-toha.github.io/blob/source/data/en/sections/about.yaml). +pon el archivo `resume.pdf` dentro del directorio `/static/files` de tu repositorio. Puedes encontrar el archivo `about.yaml` usado en el sitio web de ejemplo [aquí](https://github.com/hugo-toha/hugo-toha.github.io/blob/source/data/en/sections/about.yaml). ###### Sección de Habilidades