Translate Customizing CSS to spanish

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"

content/posts/configuration/site-parameters/index.es.md

@@ -17,15 +17,15 @@ 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"
 ```
 
 ### 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.

content/posts/customizing/_index.es.md

@@ -0,0 +1,8 @@
+---
+title: Personalización
+menu:
+  sidebar:
+    name: Personalización
+    identifier: customizing
+    weight: 400
+---

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;
+  }
+}
+```

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