Merge branch 'master' of github.com:MiguelRAvila/Bento into master

README.md

@@ -1,8 +1,18 @@
-# Bento
 
-> ### 🍱 A Clean and Simple Startpage
+<div align="center">
+<h1>Bento: 🍱 A Clean and Simple Startpage</h1>
+</div>
 
-![](https://github.com/MiguelRAvila/Bento/blob/master/assets/preview.gif)
+![](https://github.com/MiguelRAvila/Bento/blob/master/assets/preview.png)
+
+### Index
+
+-   [Bento](#)
+    -   [Features](#features)
+    -   [Usage](#usage)
+         - [Home Page](#as-home-page)
+         - [New Tab](#as-new-tab)
+    -   [Customization](#customization)
 
 #### Features:
 
@@ -12,8 +22,14 @@
 -   **Variables** for custom colors in the `css` code
 -   **Modular** javascript files for an easy read
 
+
+<p align="center">
+  <img src="https://github.com/MiguelRAvila/Bento/blob/master/assets/preview.gif">
+</p>
+
 ### 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:
@@ -21,7 +37,18 @@
     - Click the Home panel.
     - Click the menu next to Homepage and new windows and choose to show custom URLs and add your `Github Pages link`
 
-### Customization:
+#### As New Tab:
-> It has the Nord Color Scheme by default, but you can change it easyly with the variables in the `style/style.css` file. 
+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)
 
-![](https://github.com/MiguelRAvila/Bento/blob/master/assets/code.png)
+### Customization
+
+#### Colors
+In the CSS code you can always change the variables for both themes (Dark and Light)
+
+#### Weather Widget
+
+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.
+
+> If you don't like the idea of having your API Key public, you can make the repo into a private one. You can still use the Github Pages service.

js/weather.js

@@ -13,7 +13,7 @@ var tempUnit = 'C';
 
 const KELVIN = 273.15;
 // Use your own key for the Weather, Get it here: https://openweathermap.org/
-const key = 'aa5b0a76dfbf87441928fb3cc32d3d69';
+const key = 'aa5b0a76dfbf87541928fb3cc32d3d69';
 
 // Set Position function
 setPosition();