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

32
README.md
View File

@ -1,4 +1,3 @@
<div align="center">
<h1>Bento: 🍱 A Clean and Simple Startpage</h1>
</div>
@ -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">
<img src="https://github.com/MiguelRAvila/Bento/blob/master/assets/code1.png">
</p>
```html
<a
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).
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;
@ -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.
### Greetings
You can put your name and change the greetings.
```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">
</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 White icon theme, change the `Odp` to `White`