Taylan Tatlı 2d20526585 | ||
---|---|---|
icons | ||
.gitignore | ||
CNAME | ||
LICENSE | ||
README.md | ||
app.js | ||
favicon.ico | ||
index.html | ||
styles.css |
README.md
Root Startpage
Fork of root-startpage by Jorge Reyes.
Changes
- Using Font Awesome 6 Free for icons now.
- Weather feature is added. (You have to add your city id from openweather
- 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
andapp.js
to use it properly.
Root is a start-page aimed to simplicity and elegance
This project is blazing fast ⚡, 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
.
:root {
--primary: #dd2e44;
--text-light: #eeeeee;
--background: #1e1c21;
--background-light: #333138;
}
Changin Name and Adding Custom Cards
This project uses Remix Icons.
To change the default name and edit the cards, edit app.js
. It should look something like this:
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:
{
name: "<Webpage Name>",
icon: "<Icon Class-Name>",
link: "<Webpage Link>"
},
To get the icon class-name, just go to Remix Icons, select the desired icon. You should see something like this:
<i class="this-is-the-class-name"></i>
.
To use 24 hour time simply change the time section of app.js
to
// Update the Time
currentTime.innerHTML = `${currentHour}:${currentMinute}`;