🚀 Improved documentation images

README.md

@@ -1,18 +1,13 @@
 ![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> 
-
-  <a href="https://github.com/migueravila/Bento/blob/master/README-ES-MX.md" target="_blank" style='margin-right:0px; margin-top:5px'>
-    <img align="center" src="https://github.com/migueravila/Bento/blob/master/assets/img/spanish.png" alt="live-preview" height="35px" />
-  </a> 
+  </a>
 </p>
 
 <br />
@@ -25,8 +20,9 @@
     - [As New Tab](#as-new-tab)
 - [🎨 Customization](#-customization)
   - [👋 General: Name, Image Background and Greetings](#-general-name-image-background-and-greetings)
-  - [🏷️ Button Links](#️-button-links)
-  - [📑 List Links](#-list-links)
+  - [📐 Layouts: Bento, Lists and Buttons.](#-layouts-bento-lists-and-buttons)
+  - [🏷️ Buttons & Links](#️-buttons--links)
+  - [📑 Lists & Links](#-lists--links)
   - [⛈️ Weather: Api Key, Icons and Unit](#️-weather-api-key-icons-and-unit)
   - [💛 Colors](#-colors)
   - [🌑 Auto change theme](#-auto-change-theme)
@@ -35,7 +31,8 @@
 ## ✨ Features
 
 - **Easy configuration** file.
-- **Dark/Light** mode, you can toggle them and It'll be saved in local storage.
+- **Dark/Light** mode, you can toggle them and It'll be saved in local storage.2
+- **Layouts!** to customize your experience following your workflow.
 - **Clock and Date** format can be set to 24 hour (default) or 12 hour.
 - **Greetings** are easy to modify.
 - **Variables** for custom colors and font sizes in the `style.css` code.
@@ -84,9 +81,13 @@ To change the default name, the greetings and if you want to have an image backg
 
 > You cah change the background by substituting the `background.jpg` file in `assets` folder.
 
-![](assets/img/previewbg.png)
+![](assets/img/backgroundImage.png)
+
+### 📐 Layouts: Bento, Lists and Buttons.
+
+![](assets/img/bentoLayouts.png)
 
-### 🏷️ Button Links
+### 🏷️ Buttons & Links
 
 To edit the buttons you just need to change the follow list in the `config.js` file by choosing a link, an icon from [Feather icons](https://feathericons.com/) and a name:
 
@@ -131,7 +132,7 @@ cards: [
   ],
 ```
 
-### 📑 List Links
+### 📑 Lists & Links
 
 The same happens with the list links, you can change the list icon (also using feather icons) and the links:
 
@@ -249,4 +250,4 @@ that you can change in the `config.js` file:
   hourDarkThemeInactive: '07:00', // Turn off the dark theme after this hour and before the above hour
 ```
 
-![](assets/img/subheader.png)
+![](assets/img/darkMode.png)

app.css

@@ -25,7 +25,7 @@
   --sfg: #494949; /* Sceondary Foreground color */
 
   /* Light Colors  */
-  --accent: #61b0f1; /* Hover color */
+  --accent: #57a0d9; /* Hover color */
   --background: #f5f5f5; /* Background color */
   --cards: #e4e6e6; /* Cards color */
 
@@ -39,13 +39,13 @@
 
 .darktheme {
   /* Dark Colors  */
-  --accent: #61b0f1; /* Hover color */
+  --accent: #57a0d9; /* Hover color */
   --background: #19171a; /* Background color */
   --cards: #201e21; /* Cards color */
 
   /* Fonts Color */
   --fg: #d8dee9; /* Foreground color */
-  --sfg: #3a3a3a; /* Secondary Foreground color */
+  --sfg: #2c292e; /* Secondary Foreground color */
 
   /* Image background  */
   --imgcol: linear-gradient(

index.html

@@ -56,7 +56,6 @@
 
       <div class="linksBlock" id="linksBlock">
         <div class="linksBlockLeft" id="linksBlockLeft"></div>
-
         <div class="linksBlockRight" id="linksBlockRight"></div>
       </div>
     </div>
@@ -66,11 +65,12 @@
 
     <!-- Scripts  -->
     <script src="assets/js/layout.js"></script>
-    <script src="assets/js/time.js"></script>
     <script src="assets/js/theme.js"></script>
+    <script src="assets/js/time.js"></script>
     <script src="assets/js/greeting.js"></script>
     <script src="assets/js/weather.js"></script>
 
+    <!-- Generators  -->
     <script src="assets/js/buttons.js"></script>
     <script src="assets/js/lists.js"></script>