https://github.com/taylantatli/root-starter
Startpage with local weather, grid links & random colour palette
https://github.com/taylantatli/root-starter
startpage
Last synced: 5 months ago
JSON representation
Startpage with local weather, grid links & random colour palette
- Host: GitHub
- URL: https://github.com/taylantatli/root-starter
- Owner: TaylanTatli
- License: mit
- Created: 2022-08-01T15:04:54.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-11-15T19:55:55.000Z (over 3 years ago)
- Last Synced: 2025-02-25T19:34:49.047Z (about 1 year ago)
- Topics: startpage
- Language: JavaScript
- Homepage: https://taylantatli.github.io/root-starter/
- Size: 26.4 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Root Startpage
Fork of [root-startpage](https://github.com/imreyesjorge/root-startpage) by [Jorge Reyes](https://github.com/imreyesjorge).
## Changes
* Using Font Awesome 6 Free for icons now.
* Weather feature is added. (You have to add your city id from [openweather](https://openweathermap.org/)
* Using grid for card container instead of flex.
* Cards are smaller to fit more cards to screen.
* Card titles are visible for usability.
* Cards backgrounds randomly generated.
> Using Turkish for my own use. You may need to edit some lines in `index.html` and `app.js` to use it properly.
### Root is a start-page aimed to simplicity and elegance
This project is blazing fast :zap:, it only contains an html, css and javascript files.
## Customizing
Root was created to be lightweight, fast and easy to customize.
### Changin Colors
To change the colors used in the startpage edit `styles.css`.
```css
:root {
--primary: #dd2e44;
--text-light: #eeeeee;
--background: #1e1c21;
--background-light: #333138;
}
```
### Changin Name and Adding Custom Cards
> This project uses [Remix Icons](https://remixicon.com/).
To change the default name and edit the cards, edit `app.js`. It should look something like this:
```js
const NAME = "John Doe";
const CARDS = [
{
name: "Twitter",
icon: "ri-twitter-fill",
link: "https://twitter.com",
},
{
name: "Github",
icon: "ri-github-fill",
link: "https://github.com/",
},
];
```
To add a new card, just append a new object to the `CARDS` constant. The object should look something like this:
```js
{
name: "",
icon: "",
link: ""
},
```
> To get the icon class-name, just go to [Remix Icons](https://remixicon.com/), select the desired icon. You should see something like this: ``.
To use 24 hour time simply change the time section of `app.js` to
```
// Update the Time
currentTime.innerHTML = `${currentHour}:${currentMinute}`;
```