🎉 Release Bento V1.2.0

🎉 Bento V1.2.0

.github/FUNDING.yml

@@ -1,2 +0,0 @@
-# These are supported funding model platforms
-ko_fi: miguelravila

.gitignore

@@ -1 +0,0 @@
-node_modules

README.md

@@ -1,32 +1,29 @@
 <div align="center">
     <h1>Bento</h1>
-    <b>🍱 A Clean and Simple Startpage</b>
+    <b>🍱 Minimalist, elegant and simple startpage inspired by the Bento box!</b>
 </div>
 
-<p align="center">
-  <img src="https://github.com/MiguelRAvila/Bento/blob/master/assets/Header.png">
-</p>
+![image](assets/img/Header.png)
 
->  Wallpaper by [anima_contritum](https://www.reddit.com/user/anima_contritum)
+[!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/migueravila)
 
 ## Index
+- [Index](#index)
+- [✨ Features:](#-features)
+- [🚀 Usage:](#-usage)
+    - [As Home Page:](#as-home-page)
+    - [As New Tab:](#as-new-tab)
+- [🎨 Customization](#-customization)
+  - [👋 General: Name, Image Background and Greetings](#-general-name-image-background-and-greetings)
+  - [🏷️ Button Links](#️-button-links)
+  - [📑 List Links](#-list-links)
+  - [⛈️ Weather: Api Key, Icons and Unit](#️-weather-api-key-icons-and-unit)
+  - [💛 Colors](#-colors)
 
-- [Bento](#)
-  - [Features](#features)
-  - [Usage](#usage)
-    - [Home Page](#as-home-page)
-    - [New Tab](#as-new-tab)
-  - [Customization](#customization)
-    - [Links](#links)
-    - [Colors](#colors)
-    - [Theme Depending at the time](#theme-depending-at-the-time)
-    - [Image Background](#image-background)
-    - [Greetings](#greetings)
-    - [Weather Info](#weather-info)
-    - [Weather Icons](#weather-icons)
 
-### Features:
+## ✨ Features:
 
+- **Easy configuration** file.
 - **Dark/Light** mode, you can toggle them and It'll be saved in local storage.
 - **Clock and Date** format can be set to 24 hour (default) or 12 hour.
 - **Greetings** are easy to modify.
@@ -34,7 +31,7 @@
 - **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:
+## 🚀 Usage:
 
 #### As Home Page:
 
@@ -52,35 +49,160 @@ 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
+## 🎨 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:
+Almost all customization can be managed in the `config.js` file:
 
-### Links
+### 👋 General: Name, Image Background and Greetings
 
-You can change the links (and the icons too) in the HTML Code:
+To change the default name, the greetings and if you want to have an image background or open your links in new tabs, edit the first configs in the `config.js`.
+
+```js
+ // General
+  name: 'John',
+  imageBackground: false,
+  openInNewTab: true,
+
+  // Greetings
+  greetingMorning: 'Good morning!',
+  greetingAfternoon: 'Good afternoon,',
+  greetingEvening: 'Good evening,',
+  greetingNight: 'Go to Sleep!',
 
-```html
-<a
-  href="https://github.com/"
-  target="blank"
-  class="buttonLink__link card buttonLink__link-1"
->
-  <i class="buttonLink__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 in the page.
+> You cah change the background by substituting the `background.jpg` file in `assets` folder.
 
-### Colors
+![](assets/img/previewbg.png)
 
-In the CSS code you can always change the variables for both themes (Dark and Light)
+### 🏷️ Button Links
+
+To edit the buttons you just need to change the follow list in the `config.js` file by choosing a link, an icon from [Feather icons](https://feathericons.com/) and a name:
+
+```js
+cards: [
+    {
+      id: '1',
+      name: 'Github',
+      icon: 'github',
+      link: 'https://github.com/',
+    },
+    {
+      id: '2',
+      name: 'Mail',
+      icon: 'mail',
+      link: 'https://mail.protonmail.com/',
+    },
+    {
+      id: '3',
+      name: 'Todoist',
+      icon: 'trello',
+      link: 'https://calendar.google.com/calendar/r',
+    },
+    {
+      id: '4',
+      name: 'Calendar',
+      icon: 'calendar',
+      link: 'https://calendar.google.com/calendar/r',
+    },
+    {
+      id: '5',
+      name: 'Reddit',
+      icon: 'bookmark',
+      link: 'https://reddit.com',
+    },
+    {
+      id: '6',
+      name: 'Odysee',
+      icon: 'youtube',
+      link: 'https://odysee.com/',
+    },
+  ],
+```
+
+### 📑 List Links
+
+The same happens with the list links, you can change the list icon (also using feather icons) and the links:
+
+```js
+  //Icons
+  firstListIcon: 'music',
+  secondListIcon: 'coffee',
+
+  // Links
+  lists: {
+    firstList: [
+      {
+        name: 'Inspirational',
+        link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+      },
+      {
+        name: 'Classic',
+        link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+      },
+      {
+        name: 'Oldies',
+        link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+      },
+      {
+        name: 'Rock',
+        link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+      },
+    ],
+    secondList: [
+      {
+        name: 'Linkedin',
+        link: 'https://linkedin.com/',
+      },
+      {
+        name: 'Figma',
+        link: 'https://figma.com/',
+      },
+      {
+        name: 'Dribbble',
+        link: 'https://dribbble.com',
+      },
+      {
+        name: 'Telegram',
+        link: 'https://webk.telegram.org',
+      },
+    ],
+  },
+```
+
+### ⛈️ Weather: Api Key, Icons and Unit
+
+For setting up the Weather widget you'll need an API Key from: `https://openweathermap.org/`. Once you have your Key you'll need to set your latitude and longitude, you can use: `https://www.latlong.net/` to get them. 
+
+Finally, choose an Icon set:
+
+![](assets/img/icons.png)
+
+- **Nord** Using the Nord Color Scheme and easy-to-eyes colors
+- **OneDark** (_Default one_) Using the One Dark Pro color scheme
+- **Dark** For White theme only users that want a minimalist look
+- **White** For Dark theme only users that want a minimalist look
+
+Finally just add them to the `config.js` file.
+
+```js
+  // Weather
+  weatherKey: 'InsertYourAPIKeyHere123456',
+  weatherIcons: 'OneDark',
+  weatherUnit: 'C',
+  weatherLatitude: '37.774929',
+  weatherLongitude: '-122.419418',
+```
+
+### 💛 Colors
+
+In the `app.css` file you can change the variables for both themes (Dark and Light):
 
 ```css
 /* Light theme  */
+
 :root {
-  --accent: #4b8ec4; /* Hover color */
+  --accent: #61b0f1; /* Hover color */
   --bg: #f5f5f5; /* Background color */
   --sbg: #e4e6e6; /* Cards color */
   --fg: #3a3a3a; /* Foreground color */
@@ -88,8 +210,9 @@ In the CSS code you can always change the variables for both themes (Dark and Li
 }
 
 /* Dark theme  */
+
 .darktheme {
-  --accent: #4b8ec4; /* Hover color */
+  --accent: #61b0f1; /* Hover color */
   --bg: #19171a; /* Background color */
   --sbg: #201e21; /* Cards color */
   --fg: #d8dee9; /* Foreground color */
@@ -97,115 +220,4 @@ In the CSS code you can always change the variables for both themes (Dark and Li
 }
 ```
 
-<p align="center">
-  <img src="https://github.com/MiguelRAvila/Bento/blob/master/assets/SubHeader.png">
-</p>
-
-### Theme Depending at the time
-
-In the `theme.js` file there's a section about changing the theme depending in the time. You have to 'Uncomment' that section to enable it:
-
-```js
-const today = new Date();
-const Hr = today.getHours();
-
-if (Hr >= 19 || Hr < 5) {
-  enableDark();
-} else {
-  disableDark();
-}
-```
-
-### 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:
-
-<p align="center">
-  <img src="https://github.com/MiguelRAvila/Bento/blob/master/assets/previewbg.png">
-</p>
-
-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
-var name = "John Doe";
-const gree1 = "Go to Sleep!  ";
-const gree2 = "Good morning!  ";
-const gree3 = "Good afternoon  ";
-const gree4 = "Good evening,  ";
-```
-
-It'll change in order of the hour.
-
-### 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. Then you just have to fill them in the `weather.js` in the **js** folder:
-
-```js
-// Use your own key for the Weather, Get it here: https://openweathermap.org/
-const key = "XXXXXXXXXXXXXXXXXXXXXXXXXXX";
-
-setPosition();
-
-function setPosition(position) {
-  // Here you can change your position
-  // You can use https://www.latlong.net/ to get it! (I use San Francisco as an example)
-  let latitude = 37.774929;
-  let longitude = -122.419418;
-
-  getWeather(latitude, longitude);
-}
-```
-
-> 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
-
-<p align="center">
-  <img src="https://github.com/MiguelRAvila/Bento/blob/master/assets/previewico.png">
-</p>
-
-The weather icons are based in Feather icons and I made 4 sets of them:
-
-- **Nord** Using the Nord Color Scheme and easy-to-eyes colors
-- **OneDark** (_Default one_) Using the One Dark Pro color scheme
-- **Dark** For White theme only users that want a minimalist look
-- **White** For Dark theme only users that want a minimalist look
-
-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 `OneDark` to `Dark`
-- If you want the White icon theme, change the `OneDark` to `White`
-- If you want the Nord icon theme, change the `OneDark` to `Nord`
-
-For example if I'd like to use the `Dark` icon theme:
-
-```html
-<div class="weather-icon">
-  <img src="icons/OneDark/unknown.png" />
-</div>
-
-<!-- Change it to: -->
-
-<div class="weather-icon">
-  <img src="icons/Dark/unknown.png" />
-</div>
-```
-
-```js
-function displayWeather() {
-  iconElement.innerHTML = `<img src="icons/OneDark/${weather.iconId}.png"/>`;
-  tempElement.innerHTML = `${weather.temperature.value}°<span class="darkfg">${tempUnit}</span>`;
-  descElement.innerHTML = weather.description;
-}
-
-//Change it to:
-function displayWeather() {
-  iconElement.innerHTML = `<img src="icons/Dark/${weather.iconId}.png"/>`;
-  tempElement.innerHTML = `${weather.temperature.value}°<span class="darkfg">${tempUnit}</span>`;
-  descElement.innerHTML = weather.description;
-}
-```
+![](assets/img/subheader.png)

app.css

@@ -1,18 +1,19 @@
-@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');
 
 /* V A R I A B L E S */
 
 :root {
   /* Fonts  */
-  --fsg: 135px; /* Time and Greetings */
-  --fsm: 75px; /* Date */
-  --fss: 25px; /* Greetings and Weather widger */
-  --fses: 16px; /* Links List */
+  --fsg: 12vh; /* Time and Greetings */
+  --fsm: 8vh; /* Date */
+  --fss: 3vh; /* Greetings and Weather widger */
+  --fses: 2vh; /* Links List */
 
   /* Light theme  */
-  --accent: #4b8ec4; /* Hover color */
+  --accent: #61b0f1; /* Hover color */
   --bg: #f5f5f5; /* Background color */
   --sbg: #e4e6e6; /* Cards color */
+
   --fg: #3a3a3a; /* Foreground color */
   --sfg: #3a3a3a; /* Sceondary Foreground color */
 
@@ -23,7 +24,7 @@
     change the --imgcol value 
     to make the filter to your own */
 
-  /* --imgbg: url(/img/wal.jpg); */
+  --imgbg: url(assets/background.jpg);
   --imgcol: linear-gradient(
     rgba(255, 255, 255, 0.7),
     rgba(255, 255, 255, 0.7)
@@ -32,14 +33,14 @@
 
 /* Dark theme  */
 .darktheme {
-  --accent: #4b8ec4; /* Hover color */
+  --accent: #61b0f1; /* Hover color */
   --bg: #19171a; /* Background color */
   --sbg: #201e21; /* Cards color */
   --fg: #d8dee9; /* Foreground color */
   --sfg: #3a3a3a; /* Secondary Foreground color */
   --imgcol: linear-gradient(
-    rgba(0, 0, 0, 0.7),
-    rgba(0, 0, 0, 0.7)
+    rgba(0, 0, 0, 0.85),
+    rgba(0, 0, 0, 0.85)
   ); /* Filter color */
 }
 
@@ -49,15 +50,19 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  font-family: "Open Sans", sans-serif;
+  font-family: 'Open Sans', sans-serif;
   transition: 0.2s ease-in-out;
 }
 
+.withImageBackground {
+  background-image: var(--imgcol), var(--imgbg);
+  background-size: cover;
+}
+
 body {
   width: 100vw;
   height: 100vh;
   background-color: var(--bg);
-  background-image: var(--imgcol), var(--imgbg);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -94,6 +99,7 @@ body {
   box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35);
   border-radius: 5px;
 }
+
 .card:hover {
   transform: translateY(-0.2rem);
   box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35);
@@ -116,12 +122,14 @@ body {
   align-items: center;
   justify-content: center;
 }
+
 .weatherBlock__date {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 30px;
 }
+
 .weatherBlock__weather {
   display: flex;
   align-items: center;
@@ -194,8 +202,8 @@ body {
 }
 
 .buttonLink__icon {
-  width: 23px;
-  height: 23px;
+  width: 3vh;
+  height: 3vh;
   color: var(--fg);
 }
 
@@ -245,35 +253,32 @@ body {
   grid-row: 3 / span 2;
 }
 .list__head {
-  margin-top: 30px;
-  margin-bottom: 10px;
-  width: 30px;
+  margin-top: 3vh;
+  margin-bottom: 2vh;
   color: var(--fg);
-  height: 30px;
+  width: 3vh;
+  height: 3vh;
 }
 .list__link {
   text-decoration: none;
   font-size: var(--fses);
   color: var(--fg);
-  margin-top: 1px;
-  padding: 6px 12px;
+  margin-top: 1vh;
+  padding: 8px 12px;
   border-radius: 5px;
   font-weight: bold;
+  text-align: center;
+  width: 80%;
 }
 .list__link:hover {
   background-color: var(--accent);
   color: var(--sfg);
+  
 }
 
 /* M E D I A - Q U E R I E S */
 
 @media only screen and (max-width: 68.75em) {
-  :root {
-    --fsg: 100px;
-    --fsm: 65px;
-    --fss: 20px;
-  }
-
   .container {
     grid-gap: 20px;
     padding: 40px;
@@ -298,7 +303,7 @@ body {
 
   .buttonLink {
     grid-column: 1 / span 4;
-    grid-gap: 20px;
+    grid-gap: 3vw;
     padding-left: 100px;
     padding-right: 100px;
   }

assets/js/cards.js

@@ -0,0 +1,27 @@
+console.log("Connected cards");
+
+const printCards = () => {
+  for (const card of CONFIG.cards) {
+    console.log(card.id);
+
+    let item = `
+        <a
+          href="${card.link}"
+          target="${CONFIG.openInNewTab ? "_blank" : ""}"
+          class="buttonLink__link card buttonLink__link-${
+            card.id
+          }"
+        >
+          <i class="buttonLink__icon" data-feather="${
+            card.icon
+          }"></i>
+        </a>
+    `;
+
+    const position = "beforeend";
+
+    buttonsContainer.insertAdjacentHTML(position, item);
+  }
+};
+
+printCards();

assets/js/greeting.js

@@ -3,15 +3,13 @@ const today = new Date();
 const hour = today.getHours();
 
 // Here you can change your name
-const name = ' John Doe';
+const name = CONFIG.name;
 
 // Here you can change your greetings
-const gree1 = 'Go to Sleep!  ';
-const gree2 = 'Good morning!  ';
-const gree3 = 'Good afternoon  ';
-const gree4 = 'Good evening,  ';
-const gree5 = 'Good evening,  ';
-const gree6 = 'Good evening,  ';
+const gree1 = `${CONFIG.greetingNight}\xa0`;
+const gree2 = `${CONFIG.greetingMorning}\xa0`;
+const gree3 = `${CONFIG.greetingAfternoon}\xa0`;
+const gree4 = `${CONFIG.greetingEvening}\xa0`;
 
 // Define the hours of the greetings
 if (hour >= 23 && hour < 5) {

assets/js/lists.js

@@ -0,0 +1,40 @@
+console.log("Connected lists");
+
+const printFirstList = () => {
+  let icon = `<i class="list__head" data-feather="${CONFIG.firstListIcon}"></i>`;
+  const position = "beforeend";
+  list_1.insertAdjacentHTML(position, icon);
+  for (const link of CONFIG.lists.firstList) {
+    let item = `
+        <a
+        target="${CONFIG.openInNewTab ? "_blank" : ""}"
+        href="${link.link}"
+        class="list__link"
+        >${link.name}</a
+        >
+    `;
+    const position = "beforeend";
+    list_1.insertAdjacentHTML(position, item);
+  }
+};
+
+const printSecondList = () => {
+  let icon = `<i class="list__head" data-feather="${CONFIG.secondListIcon}"></i>`;
+  const position = "beforeend";
+  list_2.insertAdjacentHTML(position, icon);
+  for (const link of CONFIG.lists.secondList) {
+    let item = `
+          <a
+          target="${CONFIG.openInNewTab ? "_blank" : ""}"
+          href="${link.link}"
+          class="list__link"
+          >${link.name}</a
+          >
+      `;
+    const position = "beforeend";
+    list_2.insertAdjacentHTML(position, item);
+  }
+};
+
+printFirstList();
+printSecondList();

assets/js/theme.js

@@ -0,0 +1,40 @@
+// Store the theme
+let darkTheme = localStorage.getItem('darkTheme');
+const themeToggle = document.querySelector('#themeButton');
+const bodyBackground = document.getElementById('#body');
+
+// Apply Dark theme
+const enableDark = () => {
+  document.body.classList.add('darktheme');
+  localStorage.setItem('darkTheme', 'enabled');
+  themeToggle.innerHTML = `<i id="themeButton__icon" data-feather="sun"></i>`;
+  feather.replace();
+};
+
+// Remove Dark theme
+const disableDark = () => {
+  document.body.classList.remove('darktheme');
+  localStorage.setItem('darkTheme', null);
+  themeToggle.innerHTML = `<i id="themeButton__icon" data-feather="moon"></i>`;
+  feather.replace();
+};
+
+//Toggle theme
+if (darkTheme === 'enabled') {
+  enableDark();
+} else {
+  disableDark();
+}
+
+themeToggle.addEventListener('click', () => {
+  darkTheme = localStorage.getItem('darkTheme');
+  if (darkTheme !== 'enabled') {
+    enableDark();
+  } else {
+    disableDark();
+  }
+});
+
+if(CONFIG.imageBackground) {
+  document.body.classList.add('withImageBackground');
+} 

assets/js/weather.js

@@ -9,22 +9,18 @@ weather.temperature = {
 };
 
 // Change to 'F' for Fahrenheit
-var tempUnit = 'C';
+var tempUnit = CONFIG.weatherUnit;
 
 const KELVIN = 273.15;
 // Use your own key for the Weather, Get it here: https://openweathermap.org/
-const key = 'aa5b0a76dfbf87441928fb3cc32d3d72';
+const key = `${CONFIG.weatherKey}`;
 
 // Set Position function
 setPosition();
 
 function setPosition(position) {
-  // Here you can change your position
-  // You can use https://www.latlong.net/ to get it! (I use San Francisco as an example)
-  let latitude = 37.774929;
-  let longitude = -122.419418;
 
-  getWeather(latitude, longitude);
+  getWeather(CONFIG.weatherLatitude, CONFIG.weatherLongitude);
 }
 
 // Get the Weather data
@@ -52,7 +48,7 @@ function getWeather(latitude, longitude) {
 
 // Display Weather info
 function displayWeather() {
-  iconElement.innerHTML = `<img src="icons/OneDark/${weather.iconId}.png"/>`;
+  iconElement.innerHTML = `<img src="assets/icons/${CONFIG.weatherIcons}/${weather.iconId}.png"/>`;
   tempElement.innerHTML = `${weather.temperature.value}°<span class="darkfg">${tempUnit}</span>`;
   descElement.innerHTML = weather.description;
 }

config.js

@@ -0,0 +1,123 @@
+// ╔╗ ╔═╗╔╗╔╔╦╗╔═╗
+// ╠╩╗║╣ ║║║ ║ ║ ║
+// ╚═╝╚═╝╝╚╝ ╩ ╚═╝
+// ┌─┐┌─┐┌┐┌┌─┐┬┌─┐┬ ┬┬─┐┌─┐┌┬┐┬┌─┐┌┐┌
+// │  │ ││││├┤ ││ ┬│ │├┬┘├─┤ │ ││ ││││
+// └─┘└─┘┘└┘└  ┴└─┘└─┘┴└─┴ ┴ ┴ ┴└─┘┘└┘
+
+const CONFIG = {
+  // ┌┐ ┌─┐┌─┐┬┌─┐┌─┐
+  // ├┴┐├─┤└─┐││  └─┐
+  // └─┘┴ ┴└─┘┴└─┘└─┘
+
+  // General
+  name: 'John',
+  imageBackground: false,
+  openInNewTab: true,
+
+  // Greetings
+  greetingMorning: 'Good morning!',
+  greetingAfternoon: 'Good afternoon,',
+  greetingEvening: 'Good evening,',
+  greetingNight: 'Go to Sleep!',
+
+  // Weather
+  weatherKey: 'InsertYourAPIKeyHere123456',
+  weatherIcons: 'OneDark', // 'Nord', 'Dark', 'White'
+  weatherUnit: 'C',
+  weatherLatitude: '37.774929',
+  weatherLongitude: '-122.419418',
+  
+
+  // ┌─┐┌─┐┬─┐┌┬┐┌─┐
+  // │  ├─┤├┬┘ ││└─┐
+  // └─┘┴ ┴┴└──┴┘└─┘
+
+  // Links
+  cards: [
+    {
+      id: '1',
+      name: 'Github',
+      icon: 'github',
+      link: 'https://github.com/',
+    },
+    {
+      id: '2',
+      name: 'Mail',
+      icon: 'mail',
+      link: 'https://mail.protonmail.com/',
+    },
+    {
+      id: '3',
+      name: 'Todoist',
+      icon: 'trello',
+      link: 'https://calendar.google.com/calendar/r',
+    },
+    {
+      id: '4',
+      name: 'Calendar',
+      icon: 'calendar',
+      link: 'https://calendar.google.com/calendar/r',
+    },
+    {
+      id: '5',
+      name: 'Reddit',
+      icon: 'bookmark',
+      link: 'https://reddit.com',
+    },
+    {
+      id: '6',
+      name: 'Odysee',
+      icon: 'youtube',
+      link: 'https://odysee.com/',
+    },
+  ],
+
+  // ┬  ┬┌─┐┌┬┐┌─┐
+  // │  │└─┐ │ └─┐
+  // ┴─┘┴└─┘ ┴ └─┘
+
+  //Icons
+  firstListIcon: 'music',
+  secondListIcon: 'coffee',
+
+  // Links
+  lists: {
+    firstList: [
+      {
+        name: 'Inspirational',
+        link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+      },
+      {
+        name: 'Classic',
+        link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+      },
+      {
+        name: 'Oldies',
+        link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+      },
+      {
+        name: 'Rock',
+        link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+      },
+    ],
+    secondList: [
+      {
+        name: 'Linkedin',
+        link: 'https://linkedin.com/',
+      },
+      {
+        name: 'Figma',
+        link: 'https://figma.com/',
+      },
+      {
+        name: 'Dribbble',
+        link: 'https://dribbble.com',
+      },
+      {
+        name: 'Telegram',
+        link: 'https://webk.telegram.org',
+      },
+    ],
+  },
+};

index.html

@@ -3,13 +3,21 @@
   <head>
     <meta charset="UTF-8" />
     <title>Bento</title>
-    <link rel=" shortcut icon" type="image/png" href="icons/favicon.png" />
-
-    <link rel="stylesheet" href="css/style.css" />
-
+    <link
+      rel=" shortcut icon"
+      type="image/png"
+      href="assets/icons/favicon.png"
+    />
+    <link rel="stylesheet" href="app.css" />
     <script src="https://unpkg.com/feather-icons"></script>
   </head>
 
+  <!-- 
+      ╔╗ ╔═╗╔╗╔╔╦╗╔═╗
+      ╠╩╗║╣ ║║║ ║ ║ ║
+      ╚═╝╚═╝╝╚╝ ╩ ╚═╝
+      -->
+
   <body class="">
     <button id="themeButton">
       <i id="themeButton__icon" data-feather="moon"></i>
@@ -35,7 +43,7 @@
         </div>
         <div class="weatherBlock__weather">
           <div class="weather-icon">
-            <img src="icons/OneDark/unknown.png" />
+            <img src="assets/icons/OneDark/unknown.png" />
           </div>
           <div class="temperature-value">
             <p class="">- °<span class="g">c</span></p>
@@ -46,113 +54,41 @@
         </div>
       </div>
 
-      <!-- Buttons Links  -->
+      <!-- 
+        ┌┐ ┬ ┬┌┬┐┌┬┐┌─┐┌┐┌┌─┐
+        ├┴┐│ │ │  │ │ ││││└─┐
+        └─┘└─┘ ┴  ┴ └─┘┘└┘└─┘ 
+        -->
 
-      <div class="buttonLink">
-        <a
-          href="https://github.com/"
-          target="blank"
-          class="buttonLink__link card buttonLink__link-1"
-        >
-          <i class="buttonLink__icon" data-feather="github"></i>
-        </a>
-        <a
-          target="blank"
-          href="https://outlook.live.com/mail/inbox"
-          class="buttonLink__link card buttonLink__link-2"
-        >
-          <i class="buttonLink__icon" data-feather="mail"></i>
-        </a>
-        <a
-          target="blank"
-          href="https://calendar.google.com/calendar/r"
-          class="buttonLink__link card buttonLink__link-3"
-        >
-          <i class="buttonLink__icon" data-feather="calendar"></i>
-        </a>
-        <a
-          target="blank"
-          href="https://flipboard.com/"
-          class="buttonLink__link card buttonLink__link-4"
-        >
-          <i class="buttonLink__icon" data-feather="bookmark"></i>
-        </a>
-        <a
-          href="https://columns.app"
-          target="blank"
-          class="buttonLink__link card buttonLink__link-5"
-        >
-          <i class="buttonLink__icon" data-feather="trello"></i>
-        </a>
-        <a
-          target="blank"
-          href="https://www.youtube.com/"
-          class="buttonLink__link card buttonLink__link-6"
-        >
-          <i class="buttonLink__icon" data-feather="youtube"></i>
-        </a>
-      </div>
+      <div class="buttonLink" id="buttonsContainer"></div>
 
-      <!-- Lists  -->
+      <!-- 
+        ┬  ┬┌─┐┌┬┐┌─┐
+        │  │└─┐ │ └─┐
+        ┴─┘┴└─┘ ┴ └─┘
+        -->
 
-      <div class="card list list__1">
-        <i class="list__head" data-feather="music"></i>
-        <a
-          target="blank"
-          href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-          class="list__link"
-          >Inspirational</a
-        >
-        <a
-          target="blank"
-          href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-          class="list__link"
-          >Classic</a
-        >
-        <a
-          target="blank"
-          href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-          class="list__link"
-          >Oldies</a
-        >
-        <a
-          target="blank"
-          href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-          class="list__link"
-          >Rock</a
-        >
-      </div>
+      <div class="card list list__1" id="list_1"></div>
 
-      <div class="card list list__2">
-        <i class="list__head" data-feather="coffee"></i>
-        <a href="https://www.linkedin.com" target="blank" class="list__link"
-          >LinkedIn</a
-        >
-        <a href="https://dribbble.com/" target="blank" class="list__link"
-          >Dribble</a
-        >
-        <a href="https://www.udemy.com/" target="blank" class="list__link"
-          >Udemy</a
-        >
-        <a
-          href="https://www.figma.com/files/recent"
-          target="blank"
-          class="list__link"
-          >Figma</a
-        >
-      </div>
+      <div class="card list list__2" id="list_2"></div>
     </div>
 
-    <!-- Scrips  -->
+    <!-- Config  -->
+    <script src="config.js"></script>
 
-    <script src="js/time.js"></script>
-    <script src="js/theme.js"></script>
-    <script src="js/greeting.js"></script>
-    <script src="js/weather.js"></script>
+    <!-- Scripts  -->
+    <script src="assets/js/time.js"></script>
+    <script src="assets/js/theme.js"></script>
+    <script src="assets/js/greeting.js"></script>
+    <script src="assets/js/weather.js"></script>
+
+    <script src="assets/js/cards.js"></script>
+    <script src="assets/js/lists.js"></script>
     <script>
       feather.replace();
     </script>
   </body>
 
-  <!-- Coded and designed by Miguel R. Ávila: https://github.com/MiguelRAvila -->
+  <!-- Developed and designed by Miguel R. Ávila: -->
+  <!-- https://github.com/migueravila -->
 </html>

js/theme.js

@@ -1,47 +0,0 @@
-// Store the theme
-let darkTheme = localStorage.getItem("darkTheme");
-const themeToggle = document.querySelector("#themeButton");
-
-// Apply Dark theme
-const enableDark = () => {
-  document.body.classList.add("darktheme");
-  localStorage.setItem("darkTheme", "enabled");
-  themeToggle.innerHTML = `<i id="themeButton__icon" data-feather="sun"></i>`;
-  feather.replace();
-};
-
-// Remove Dark theme
-const disableDark = () => {
-  document.body.classList.remove("darktheme");
-  localStorage.setItem("darkTheme", null);
-  themeToggle.innerHTML = `<i id="themeButton__icon" data-feather="moon"></i>`;
-  feather.replace();
-};
-
-//Toggle theme
-if (darkTheme === "enabled") {
-  enableDark();
-} else {
-  disableDark();
-}
-
-themeToggle.addEventListener("click", () => {
-  darkTheme = localStorage.getItem("darkTheme");
-  if (darkTheme !== "enabled") {
-    enableDark();
-  } else {
-    disableDark();
-  }
-});
-
-// Theme accordint the hour
-
-/*
-const today = new Date();
-
-if (hour >= 19 || hour < 5) {
-    enableDark();
-} else {
-    disableDark();
-}
-*/

package.json

@@ -1,23 +1,7 @@
 {
   "name": "bento",
-  "version": "1.3.0",
-  "description": "A Simple Startpage",
-  "main": "index.js",
-  "scripts": {
-    "watch:sass": "node-sass sass/main.scss css/style.css -w",
-    "start": "npm-run-all --parallel watch:sass",
-    "compile:sass": "node-sass sass/main.scss css/style.comp.css",
-    "prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.comp.css -o css/style.prefix.css",
-    "compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
-    "build:css": "npm-run-all compile:sass prefix:css compress:css"
-  },
+  "version": "1.2.0",
+  "description": "🍱 Minimalist, elegant and hackable startpage inspired by the Bento box!",
   "author": "Miguel R. Ávila",
-  "license": "ISC",
-  "devDependencies": {
-    "autoprefixer": "^7.1.4",
-    "concat": "^1.0.3",
-    "node-sass": "^4.5.3",
-    "npm-run-all": "^4.1.1",
-    "postcss-cli": "^4.1.1"
-  }
+  "license": "ISC"
 }