🍱 Using relative values

app.css

@@ -1,4 +1,4 @@
-@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 */
 
@@ -7,7 +7,7 @@
   --fsg: 135px; /* Time and Greetings */
   --fsm: 75px; /* Date */
   --fss: 25px; /* Greetings and Weather widger */
-  --fses: 16px; /* Links List */
+  --fses: 2vh; /* Links List */
 
   /* Light theme  */
   --accent: #4b8ec4; /* Hover color */
@@ -23,7 +23,7 @@
     change the --imgcol value 
     to make the filter to your own */
 
-  /* --imgbg: url(/img/wal.jpg); */
+  --imgbg: url(assets/background.png);
   --imgcol: linear-gradient(
     rgba(255, 255, 255, 0.7),
     rgba(255, 255, 255, 0.7)
@@ -38,8 +38,8 @@
   --fg: #d8dee9; /* Foreground color */
   --sfg: #3a3a3a; /* Secondary Foreground color */
   --imgcol: linear-gradient(
-    rgba(0, 0, 0, 0.7),
+    rgba(0, 0, 0, 0.85),
-    rgba(0, 0, 0, 0.7)
+    rgba(0, 0, 0, 0.85)
   ); /* Filter color */
 }
 
@@ -49,15 +49,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;
@@ -197,8 +201,8 @@ body {
 }
 
 .buttonLink__icon {
-  width: 23px;
+  width: 3vh;
-  height: 23px;
+  height: 3vh;
   color: var(--fg);
 }
 
@@ -236,6 +240,7 @@ body {
 .list {
   display: flex;
   align-items: center;
+  /* justify-content: space-evenly; */
   flex-direction: column;
 }
 
@@ -248,17 +253,17 @@ body {
   grid-row: 3 / span 2;
 }
 .list__head {
-  margin-top: 30px;
+  margin-top: 3vh;
-  margin-bottom: 10px;
+  margin-bottom: 2vh;
-  width: 30px;
   color: var(--fg);
-  height: 30px;
+  width: 3vh;
+  height: 3vh;
 }
 .list__link {
   text-decoration: none;
   font-size: var(--fses);
   color: var(--fg);
-  margin-top: 1px;
+  margin-top: 1vh;
   padding: 6px 12px;
   border-radius: 5px;
   font-weight: bold;
@@ -301,7 +306,7 @@ body {
 
   .buttonLink {
     grid-column: 1 / span 4;
-    grid-gap: 20px;
+    grid-gap: 3vw;
     padding-left: 100px;
     padding-right: 100px;
   }

assets/js/cards.js

@@ -7,10 +7,14 @@ const printCards = () => {
     let item = `
         <a
           href="${card.link}"
-          target="_blank"
+          target="${CONFIG.openInNewTab ? "_blank" : ""}"
-          class="buttonLink__link card buttonLink__link-${card.id}"
+          class="buttonLink__link card buttonLink__link-${
+            card.id
+          }"
         >
-          <i class="buttonLink__icon" data-feather="${card.icon}"></i>
+          <i class="buttonLink__icon" data-feather="${
+            card.icon
+          }"></i>
         </a>
     `;
 

assets/js/lists.js

@@ -7,7 +7,7 @@ const printFirstList = () => {
   for (const link of CONFIG.lists.firstList) {
     let item = `
         <a
-        target="blank"
+        target="${CONFIG.openInNewTab ? "_blank" : ""}"
         href="${link.link}"
         class="list__link"
         >${link.name}</a
@@ -25,7 +25,7 @@ const printSecondList = () => {
   for (const link of CONFIG.lists.secondList) {
     let item = `
           <a
-          target="blank"
+          target="${CONFIG.openInNewTab ? "_blank" : ""}"
           href="${link.link}"
           class="list__link"
           >${link.name}</a

assets/js/theme.js

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

config.js

@@ -10,27 +10,27 @@ const CONFIG = {
   // ├┴┐├─┤└─┐││  └─┐
   // └─┘┴ ┴└─┘┴└─┘└─┘
 
+  // General
   name: 'John',
-
-  layout: 'bento',
   imageBackground: false,
-  
   openInNewTab: true,
 
-  weatherKey: '12345678910111213141516',
+  // Weather
+  weatherKey: '15fe26a8e22e4783054e3273824c5e7b',
   weatherIcons: 'OneDark',
   weatherUnit: 'C',
 
+  // Greetings
   greetingMorning: 'Good morning!',
   greetingAfternoon: 'Good afternoon,',
   greetingEvening: 'Good evening,',
   greetingNight: 'Go to Sleep!',
 
-
   // ┌─┐┌─┐┬─┐┌┬┐┌─┐
   // │  ├─┤├┬┘ ││└─┐
   // └─┘┴ ┴┴└──┴┘└─┘
 
+  // Links
   cards: [
     {
       id: '1',
@@ -74,9 +74,11 @@ const CONFIG = {
   // │  │└─┐ │ └─┐
   // ┴─┘┴└─┘ ┴ └─┘
 
+  //Icons
   firstListIcon: 'music',
   secondListIcon: 'coffee',
 
+  // Links
   lists: {
     firstList: [
       {