AtaraxiaDev/Bento
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added j

Browse Source
This commit is contained in:
Rod 2020-10-10 20:41:14 -05:00
parent f7c070d7fc
commit b6917333f8
1 changed files with 9 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
README.md
View File

@ -7,7 +7,7 @@
<img src="https://github.com/MiguelRAvila/Bento/blob/master/assets/preview.png"> <img src="https://github.com/MiguelRAvila/Bento/blob/master/assets/preview.png">
</p> </p>
### Index ## Index
- [Bento](#) - [Bento](#)
- [Features](#features) - [Features](#features)
@ -31,9 +31,8 @@
- **Icons** all icons are from Feather Icons (Some others I made them with the Feather icons as a base) - **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 - **Modular** javascript files for an easy read
***
### Usage: ## Usage:
#### As Home Page: #### As Home Page:
1. Fork this repo 1. Fork this repo
@ -48,13 +47,12 @@
- 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 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) - If you use Chromium (Brave, Vivaldi, Chrome): [Custom New Tab URL](https://chrome.google.com/webstore/detail/custom-new-tab-url/mmjbdbjnoablegbkcklggeknkfcjkjia)
***
### Customization ## 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: > 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 ### Links
You can change the links (and the icons too) in the HTML Code: You can change the links (and the icons too) in the HTML Code:
<p align="center"> <p align="center">
@ -65,7 +63,7 @@ Change the link in the `href` property with the link you want. (The `target="bla
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. 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 ### Colors
In the CSS code you can always change the variables for both themes (Dark and Light) In the CSS code you can always change the variables for both themes (Dark and Light)
```css ```css
@ -91,9 +89,7 @@ In the CSS code you can always change the variables for both themes (Dark and Li
} }
``` ```
### Image Background
#### 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:
@ -103,7 +99,7 @@ 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. 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 ### Greetings
You can put your name and change the greetings. You can put your name and change the greetings.
```js ```js
@ -116,13 +112,13 @@ var evenTxt = 'Good evening ';
It'll change in order of the hour. It'll change in order of the hour.
#### Weather Info ### 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. > 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.
#### Weather Icons ### Weather Icons
The icons by themselves have now 4 different color schemes: The icons by themselves have now 4 different color schemes: