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

replacing more images with code HAHAHA

Browse Source
This commit is contained in:
Rod 2020-10-10 20:48:16 -05:00
parent b6917333f8
commit 4effd8bad1
1 changed files with 41 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
README.md
View File

@ -1,4 +1,3 @@
<div align="center"> <div align="center">
<h1>Bento: 🍱 A Clean and Simple Startpage</h1> <h1>Bento: 🍱 A Clean and Simple Startpage</h1>
</div> </div>
@ -31,10 +30,10 @@
- **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
2. Enable the Github Pages service `Settings > GitHub Pages > Source [master branch] > Save` 2. Enable the Github Pages service `Settings > GitHub Pages > Source [master branch] > Save`
3. Set it as Home Page: 3. Set it as Home Page:
@ -43,27 +42,35 @@
- Click the menu next to Homepage and new windows and choose to show custom URLs and add your `Github Pages link` - Click the menu next to Homepage and new windows and choose to show custom URLs and add your `Github Pages link`
#### As New Tab: #### As New Tab:
1. You can use different Add-ons/Extensions for it 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 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"> ```html
<img src="https://github.com/MiguelRAvila/Bento/blob/master/assets/code1.png"> <a
</p> href="https://github.com/"
target="blank"
class="qlink__link qlink__link-1"
>
<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). 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. 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
@ -100,6 +107,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
@ -131,7 +139,7 @@ The icons by themselves have now 4 different color schemes:
<img src="https://github.com/MiguelRAvila/Bento/blob/master/assets/previewico.png"> <img src="https://github.com/MiguelRAvila/Bento/blob/master/assets/previewico.png">
</p> </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`