replacing more images with code HAHAHA

README.md

@@ -1,4 +1,3 @@
-    
 <div align="center">
 <h1>Bento: 🍱 A Clean and Simple Startpage</h1>
 </div>
@@ -12,15 +11,15 @@
 -   [Bento](#)
     -   [Features](#features)
     -   [Usage](#usage)
-         - [Home Page](#as-home-page)
+        -   [Home Page](#as-home-page)
-         - [New Tab](#as-new-tab)
+        -   [New Tab](#as-new-tab)
     -   [Customization](#customization)
-         - [Links](#links)
+        -   [Links](#links)
-         - [Colors](#colors)
+        -   [Colors](#colors)
-         - [Image Background](#image-background)
+        -   [Image Background](#image-background)
-         - [Greetings](#greetings)
+        -   [Greetings](#greetings)
-         - [Wather Info](#weather-info)
+        -   [Wather Info](#weather-info)
-         - [Weather Icons](#weather-icons)
+        -   [Weather Icons](#weather-icons)
 
 ### Features:
 
@@ -31,10 +30,10 @@
 -   **Icons** all icons are from Feather Icons (Some others I made them with the Feather icons as a base)
 -   **Modular** javascript files for an easy read
 
-
 ## Usage:
 
 #### As Home Page:
+
 1. Fork this repo
 2. Enable the Github Pages service `Settings > GitHub Pages > Source [master branch] > Save`
 3. Set it as Home Page:
@@ -43,31 +42,39 @@
     - Click the menu next to Homepage and new windows and choose to show custom URLs and add your `Github Pages link`
 
 #### As New Tab:
-1. You can use different Add-ons/Extensions for it
-  - If you use Firefox: [Custom New Tab Page](https://addons.mozilla.org/en-US/firefox/addon/custom-new-tab-page/?src=search)
-  - If you use Chromium (Brave, Vivaldi, Chrome): [Custom New Tab URL](https://chrome.google.com/webstore/detail/custom-new-tab-url/mmjbdbjnoablegbkcklggeknkfcjkjia)
 
+1. You can use different Add-ons/Extensions for it
+
+-   If you use Firefox: [Custom New Tab Page](https://addons.mozilla.org/en-US/firefox/addon/custom-new-tab-page/?src=search)
+-   If you use Chromium (Brave, Vivaldi, Chrome): [Custom New Tab URL](https://chrome.google.com/webstore/detail/custom-new-tab-url/mmjbdbjnoablegbkcklggeknkfcjkjia)
 
 ## Customization
 
 > All the code is using variables and is comented, It's easy to customize the project to your own, and this sections are the principal customizable elements in the Startpage:
 
 ### Links
+
 You can change the links (and the icons too) in the HTML Code:
 
-<p align="center">
+```html
-  <img src="https://github.com/MiguelRAvila/Bento/blob/master/assets/code1.png">
+  <a 
-</p>
+    href="https://github.com/" 
-
+    target="blank" 
-Change the link in the `href` property with the link you want. (The `target="blank"` makes the link to open a new tab with the link you choose). 
+    class="qlink__link qlink__link-1"
-The Project uses [Feather icons](https://feathericons.com/) for the icons, and you can change them in the `data-feather=""` property with the name of the icon. 
+  >
+    <i class="qlink__icon" data-feather="github"></i>
+  </a>
+```
 
+Change the link in the `href` property with the link you want. (The `target="blank"` makes the link to open a new tab with the link you choose).
+The Project uses [Feather icons](https://feathericons.com/) for the icons, and you can change them in the `data-feather=""` property with the name of the icon.
 
 ### Colors
+
 In the CSS code you can always change the variables for both themes (Dark and Light)
 
 ```css
-    /* Light theme  */
+/* Light theme  */
 :root {
     --accent: #186efdaa;
     --bg: #f5f5f5;
@@ -79,7 +86,7 @@ In the CSS code you can always change the variables for both themes (Dark and Li
     );
 }
 
-   /* Dark theme  */
+/* Dark theme  */
 .darktheme {
     --accent: #186efd60;
     --bg: #1e1f21;
@@ -91,7 +98,7 @@ In the CSS code you can always change the variables for both themes (Dark and Li
 
 ### Image Background
 
-You can set your own background image with the variable `--imgbg` and set the route to the image you want It's disable by default. If you uncomment the variable, it has by default this image: 
+You can set your own background image with the variable `--imgbg` and set the route to the image you want It's disable by default. If you uncomment the variable, it has by default this image:
 
 <p align="center">
   <img src="https://github.com/MiguelRAvila/Bento/blob/master/assets/previewbg.png">
@@ -100,10 +107,11 @@ You can set your own background image with the variable `--imgbg` and set the ro
 It has a black filter by default in `--imgcol`, and it'ts value is: `rgba(255, 255, 255, 0.7)` and `rgba(0, 0, 0, 0.7)` for the dark theme. You can change them and the opacity for a better experience with your image.
 
 ### Greetings
+
 You can put your name and change the greetings.
 
 ```js
-var name = 'John Doe'; 
+var name = 'John Doe';
 var lateTxt = 'Go to Sleep! ';
 var morningTxt = 'Good morning! ';
 var afterTxt = 'Good afternoon ';
@@ -114,7 +122,7 @@ It'll change in order of the hour.
 
 ### Weather Info
 
-For setting up the Weather widget you're going to need an API Key in: `https://openweathermap.org/`. Once you have your Key you'll need to set yourlatitude and longitude, you can use: `https://www.latlong.net/` to get them. Once you have the data, you'll need to set them in the `weather.js` in the **js** folder. The code is 
+For setting up the Weather widget you're going to need an API Key in: `https://openweathermap.org/`. Once you have your Key you'll need to set yourlatitude and longitude, you can use: `https://www.latlong.net/` to get them. Once you have the data, you'll need to set them in the `weather.js` in the **js** folder. The code is
 
 > If you don't like to have your API Key public, you can make the repo into a private one. You can still use the Github Pages service.
 
@@ -122,20 +130,20 @@ For setting up the Weather widget you're going to need an API Key in: `https://o
 
 The icons by themselves have now 4 different color schemes:
 
-- **Dark** For White theme only users that want a minimalist look
+-   **Dark** For White theme only users that want a minimalist look
-- **White** For Dark theme only users that want a minimalist look
+-   **White** For Dark theme only users that want a minimalist look
-- **Nord** Using the Nord Color Scheme and easy-to-eyes colors
+-   **Nord** Using the Nord Color Scheme and easy-to-eyes colors
-- **Odp** (Default one) Using the One Dark Pro color scheme
+-   **Odp** (Default one) Using the One Dark Pro color scheme
 
 <p align="center">
   <img src="https://github.com/MiguelRAvila/Bento/blob/master/assets/previewico.png">
 </p>
 
-You set this theme changing this two lines of code in the `index.html` and `weather.js` files
+You set the icon theme changing this two lines of code in the `index.html` and `weather.js` files:
 
-- If you want the Dark icon theme, change the `Odp` to `Dark`
+-   If you want the Dark icon theme, change the `Odp` to `Dark`
-- If you want the White icon theme, change the `Odp` to `White`
+-   If you want the White icon theme, change the `Odp` to `White`
-- If you want the Nord icon theme, change the `Odp` to `Nord`
+-   If you want the Nord icon theme, change the `Odp` to `Nord`
 
 For example if I'd like to use the `Dark` icon theme:
 
@@ -162,4 +170,4 @@ function displayWeather() {
     tempElement.innerHTML = `${weather.temperature.value}°<span class="darkfg">${tempUnit}</span>`;
     descElement.innerHTML = weather.description;
 }
-```
+```