💄 Improved Lists space

app.css

@@ -205,13 +205,21 @@ body {
   color: var(--fg);
 }
 
+.reduceGap {
+  grid-gap: 2rem !important;
+}
+
+.removeGap {
+  grid-gap: 0 !important;
+}
+
 .linksBlock {
   grid-row: 3 / span 2;
   grid-column: 1 / span 4;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: repeat(2, 1fr);
-  grid-gap: 30px;
+  grid-gap: 1.5rem;
 }
 
 .linksBlockLeft {
@@ -284,13 +292,14 @@ body {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
-  grid-gap: 30px;
+  grid-gap: 3rem;
-  padding: 0.3rem;
+  padding: 0.4rem;
 }
 
 .list {
   display: flex;
   align-items: center;
+  justify-content: center;
   flex-direction: column;
 }
 
@@ -303,7 +312,7 @@ body {
   grid-row: 1 / span 2;
 }
 .listIcon {
-  margin-top: 3vh;
+  /* margin-top: 3vh; */
   margin-bottom: 2vh;
   color: var(--fg);
   width: var(--icon);
@@ -346,11 +355,11 @@ body {
     font-size: var(--fg-secondary);
   }
 
-  .list {
+  .linksBlockRight {
     display: none;
   }
 
-  .buttons {
+  .linksBlockLeft {
     grid-column: 1 / span 4;
   }
 

assets/js/layout.js

@@ -24,14 +24,18 @@ const generateLayout = () => {
     case 'bento':
       linksBlockLeft.insertAdjacentHTML(position, firstButtonsContainer);
       linksBlockRight.insertAdjacentHTML(position, firstListsContainer);
+      linksBlock.classList.remove("reduceGap");
+      linksBlock.classList.remove("removeGap");
       break;
     case 'lists':
       linksBlockLeft.insertAdjacentHTML(position, firstListsContainer);
       linksBlockRight.insertAdjacentHTML(position, secondListsContainer);
+      linksBlock.classList.add("reduceGap");
       break;
     case 'buttons':
       linksBlockLeft.insertAdjacentHTML(position, firstButtonsContainer);
       linksBlockRight.insertAdjacentHTML(position, secondButtonsContainer);
+      linksBlock.classList.add("removeGap");
       break;
     default:
       break;

assets/js/lists.js

@@ -8,27 +8,27 @@ const generateFirstListsContainer = () => {
   for (const list of CONFIG.firstlistsContainer) {
     let item = `
         <div class="card list list__${list.id}" id="list_${list.id}">
-        <i class="listIcon" icon-name="${list.icon}"></i>
+          <i class="listIcon" icon-name="${list.icon}"></i>
-        <a
+          <a
-        target="${CONFIG.openInNewTab ? '_blank' : ''}"
+          target="${CONFIG.openInNewTab ? '_blank' : ''}"
-        href="${list.links[0].link}"
+          href="${list.links[0].link}"
-        class="listItem"
+          class="listItem"
-        >${list.links[0].name}</a>
+          >${list.links[0].name}</a>
-        <a
+          <a
-        target="${CONFIG.openInNewTab ? '_blank' : ''}"
+          target="${CONFIG.openInNewTab ? '_blank' : ''}"
-        href="${list.links[1].link}"
+          href="${list.links[1].link}"
-        class="listItem"
+          class="listItem"
-        >${list.links[1].name}</a>
+          >${list.links[1].name}</a>
-        <a
+          <a
-        target="${CONFIG.openInNewTab ? '_blank' : ''}"
+          target="${CONFIG.openInNewTab ? '_blank' : ''}"
-        href="${list.links[2].link}"
+          href="${list.links[2].link}"
-        class="listItem"
+          class="listItem"
-        >${list.links[2].name}</a>
+          >${list.links[2].name}</a>
-        <a
+          <a
-        target="${CONFIG.openInNewTab ? '_blank' : ''}"
+          target="${CONFIG.openInNewTab ? '_blank' : ''}"
-        href="${list.links[3].link}"
+          href="${list.links[3].link}"
-        class="listItem"
+          class="listItem"
-        >${list.links[3].name}</a>
+          >${list.links[3].name}</a>
         </div>
       `;
     const position = 'beforeend';

config.js

@@ -17,7 +17,7 @@ const CONFIG = {
   twelveHourFormat: false,
 
   // Layout
-  bentoLayout: 'buttons', // 'bento', 'lists', 'buttons'
+  bentoLayout: 'lists', // 'bento', 'lists', 'buttons'
 
   // Greetings
   greetingMorning: 'Good morning!',
@@ -46,6 +46,9 @@ const CONFIG = {
   hourDarkThemeActive: '18:30',
   hourDarkThemeInactive: '07:00',
 
+  // ╦  ╦╔╗╔╦╔═╔═╗
+  // ║  ║║║║╠╩╗╚═╗
+  // ╩═╝╩╝╚╝╩ ╩╚═╝
   // ┌┐ ┬ ┬┌┬┐┌┬┐┌─┐┌┐┌┌─┐
   // ├┴┐│ │ │  │ │ ││││└─┐
   // └─┘└─┘ ┴  ┴ └─┘┘└┘└─┘
@@ -92,39 +95,39 @@ const CONFIG = {
   secondButtonsContainer: [
     {
       id: '1',
-      name: 'Odysee',
+      name: 'Music',
-      icon: 'youtube',
+      icon: 'headphones',
-      link: 'https://odysee.com/',
+      link: 'https://open.spotify.com',
     },
     {
       id: '2',
-      name: 'Odysee',
+      name: 'twitter',
-      icon: 'youtube',
+      icon: 'twitter',
-      link: 'https://odysee.com/',
+      link: 'https://twitter.com/',
     },
     {
       id: '3',
-      name: 'Odysee',
+      name: 'bot',
-      icon: 'youtube',
+      icon: 'bot',
-      link: 'https://odysee.com/',
+      link: 'https://discord.com/app',
     },
     {
       id: '4',
-      name: 'Odysee',
+      name: 'Amazon',
-      icon: 'youtube',
+      icon: 'shopping-bag',
-      link: 'https://odysee.com/',
+      link: 'https://amazon.com/',
     },
     {
       id: '5',
-      name: 'Odysee',
+      name: 'Hashnode',
-      icon: 'youtube',
+      icon: 'pen-tool',
-      link: 'https://odysee.com/',
+      link: 'https://hashnode.com/',
     },
     {
       id: '6',
-      name: 'Odysee',
+      name: 'Figma',
-      icon: 'youtube',
+      icon: 'figma',
-      link: 'https://odysee.com/',
+      link: 'https://figma.com/',
     },
   ],
 
@@ -132,7 +135,7 @@ const CONFIG = {
   // │  │└─┐ │ └─┐
   // ┴─┘┴└─┘ ┴ └─┘
 
-  // Links
+  // First Links Container
   firstlistsContainer: [
     {
       icon: 'music',
@@ -180,7 +183,7 @@ const CONFIG = {
     },
   ],
 
-  // Links
+  // Second Links Container
   secondListsContainer: [
     {
       icon: 'binary',