🌐 Add ESP-MX language for Readme

Mexican Spanish README Localization
migueravila · Oct 4, 2021 · 865e323 · 865e323
2 parents ab16771 + 684a969
commit 865e323
Showing 1 changed file with 229 additions and 0 deletions.
diff --git a/README-ES-MX.md b/README-ES-MX.md
@@ -0,0 +1,229 @@
+![image](assets/img/header.png)
+
+
+<p style="margin: -20px 0 30px">
+  <a href="https://www.buymeacoffee.com/migueravila" target="_blank" style='margin-right:0px; margin-top:5px'>
+    <img align="center" src="https://github.com/migueravila/Bento/blob/master/assets/img/donation.png" alt="donation" height="35px" />
+  </a>
+
+  <a href="https://migueravila.github.io/Bento/" target="_blank" style='margin-right:0px; margin-top:5px'>
+    <img align="center" src="https://github.com/migueravila/Bento/blob/master/assets/img/live.png" alt="live-preview" height="35px" />
+  </a> 
+</p>
+
+<br />
+
+## 👇 Índice
+- [👇 Índice](#-indice)
+- [✨ Características](#-caracteistícas)
+- [🚀 Usos](#-usos)
+    - [Como página de inicio](#como-página-de-inicio)
+    - [Como una nueva pestaña](#como-una-nueva-pestaña)
+- [🎨 Personalización](#-personalización)
+  - [👋 General: Nombre, Imagen De Fondo y Saludos](#-nombre-imagen-de-fondo-y-saludos)
+  - [🏷️ Botones de enlace](#️-enlaces-de-botones)
+  - [📑 Lista de enlaces](#-lista-de-enlaces)
+  - [⛈️ Clima: Clave De La Api, Iconos y Grupos](#️-Clima-clave-de-la-api-iconos-y-grupos)
+  - [💛 Colores](#-colores)
+
+
+## ✨ Características
+
+- **Configuración Sencilla** de archivos.
+- **Modo Claro/Obscuro** puedes alternarlos y se guardara en tu almacenamiento local.
+- **Fecha y Hora**, puedes utilizar el formato de 24 horas (predeterminado) o el de 12 horas.
+- **Saludos** fáciles de modificar.
+- **Variables** para colores y tamaños de fuente personalizados en el código del archivo `style.css`.
+- **Iconos** todos los iconos provienen de [Feather Icons](https://feathericons.com/) (Otros los hice yo mismo, tomando los iconos de Feather Icons como base).
+- **Archivos Modulares** de JavaScript para una lectura sencilla.
+
+## 🚀 Usos
+
+#### Como página de inicio
+
+1. Haz un Fork de este repositorio
+2. Activa el servicio de GitHub Pages `Settings > GitHub Pages > Source [rama master] > Save`
+3. Configúrala como página de inicio:
+   - Haz click en el botón Menú, selecciona Opciones, selecciona Preferencias
+   - Haz click en el panel de inicio.
+   - Haz click en el menú al lado de Inicio y Nuevas Ventanas. Elige la opción de mostrar URL's personalizadas, después, añade el enlace de tu GitHub Pages.
+
+#### Como una nueva pestaña
+
+Puedes utilizar distintos Add-ons/Extensiones para ello
+
+- Si usas Firefox: [Custom New Tab Page](https://addons.mozilla.org/en-US/firefox/addon/custom-new-tab-page/?src=search)
+- Si usas Chromium (Brave, Vivaldi, Chrome): [Custom New Tab URL](https://chrome.google.com/webstore/detail/custom-new-tab-url/mmjbdbjnoablegbkcklggeknkfcjkjia)
+
+## 🎨 Personalización
+
+Casi todas la personalización puede ser configurada desde el archivo `config.js`:
+
+### 👋 General: Nombre, Imagen De Fondo y Saludos
+
+Para cambiar el nombre por defecto, los saludos y si deseas tener una imagen de fondo o abrir los enlaces en una nueva pestaña, edita las primeras configuraciones en el archivo `config.js`.
+
+```js
+ // General
+  name: 'John',
+  imageBackground: false,
+  openInNewTab: true,
+
+  // Saludos
+  greetingMorning: 'Good morning!',
+  greetingAfternoon: 'Good afternoon,',
+  greetingEvening: 'Good evening,',
+  greetingNight: 'Go to Sleep!',
+
+```
+
+> Puedes cambiar el fondo, sustituyendo el archivo `background.jpg` en la carpeta `assets`.
+
+![](assets/img/previewbg.png)
+
+### 🏷️ Botones de Enlace****
+
+Para editar los botones solo tienes que cambiar la siguiente lista en el archivo `config.js` eligiendo un enlace, un icono proveniente de [Feather Icons](https://feathericons.com/) y un nombre:
+
+```js
+cards: [
+    {
+      id: '1',
+      name: 'Github',
+      icon: 'github',
+      link: 'https://github.com/',
+    },
+    {
+      id: '2',
+      name: 'Mail',
+      icon: 'mail',
+      link: 'https://mail.protonmail.com/',
+    },
+    {
+      id: '3',
+      name: 'Todoist',
+      icon: 'trello',
+      link: 'https://calendar.google.com/calendar/r',
+    },
+    {
+      id: '4',
+      name: 'Calendar',
+      icon: 'calendar',
+      link: 'https://calendar.google.com/calendar/r',
+    },
+    {
+      id: '5',
+      name: 'Reddit',
+      icon: 'bookmark',
+      link: 'https://reddit.com',
+    },
+    {
+      id: '6',
+      name: 'Odysee',
+      icon: 'youtube',
+      link: 'https://odysee.com/',
+    },
+  ],
+```
+
+### 📑 Lista de enlaces
+
+Lo mismo pasa con la lista de enlaces, puedes cambiar la lista de iconos (también provenientes de [Feather Icons](https://feathericons.com/)) y los enlaces:
+
+```js
+  //Iconos
+  firstListIcon: 'music',
+  secondListIcon: 'coffee',
+
+  // Enlaces
+  lists: {
+    firstList: [
+      {
+        name: 'Inspirational',
+        link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+      },
+      {
+        name: 'Classic',
+        link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+      },
+      {
+        name: 'Oldies',
+        link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+      },
+      {
+        name: 'Rock',
+        link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+      },
+    ],
+    secondList: [
+      {
+        name: 'Linkedin',
+        link: 'https://linkedin.com/',
+      },
+      {
+        name: 'Figma',
+        link: 'https://figma.com/',
+      },
+      {
+        name: 'Dribbble',
+        link: 'https://dribbble.com',
+      },
+      {
+        name: 'Telegram',
+        link: 'https://webk.telegram.org',
+      },
+    ],
+  },
+```
+
+### ⛈️ Clima: Clave De La Api, Iconos y Grupos
+
+Para configurar el widget del clima necesitaras una clave de API proveniente de: `https://openweathermap.org/`. Una vez que hayas obtenido tu clave, necesitaras configurar tu latitud y longitud, para ello puedes usar: `https://www.latlong.net/` para obtenerlas. 
+
+Finalmente, escoge un set de iconos:
+
+![](assets/img/icons.png)
+
+- **Nord** Usa el esquema de colores Nord si te encantan los colores agradables a la vista.
+- **OneDark** (_Predeterminado_) Usa el esquema de colores One Dark Pro.
+- **Dark** Para usuarios que solo usan temas claros y quieren un look minimalista.
+- **White** Para usuarios que solo usan temas oscuros y quieren un look minimalista.
+
+Finalmente, solo añádelos al archivo `config.js`.
+
+```js
+  // clima
+  weatherKey: 'InsertYourAPIKeyHere123456',
+  weatherIcons: 'OneDark',
+  weatherUnit: 'C',
+  weatherLatitude: '37.774929',
+  weatherLongitude: '-122.419418',
+```
+
+### 💛 Colores
+
+En el archivo `app.css` puedes cambiar las variables para cualquiera de los temas (Oscuro y Claro):
+
+```css
+/* Tema Claro  */
+
+:root {
+  --accent: #61b0f1; /* Hover color */
+  --bg: #f5f5f5; /* Background color */
+  --sbg: #e4e6e6; /* Cards color */
+  --fg: #3a3a3a; /* Foreground color */
+  --sfg: #3a3a3a; /* Sceondary Foreground color */
+}
+
+/* Tema Oscuro  */
+
+.darktheme {
+  --accent: #61b0f1; /* Hover color */
+  --bg: #19171a; /* Background color */
+  --sbg: #201e21; /* Cards color */
+  --fg: #d8dee9; /* Foreground color */
+  --sfg: #3a3a3a; /* Secondary Foreground color */
+}
+```
+
+![](assets/img/subheader.png)