diff --git a/app.css b/app.css index 546040a5f..88fd24425 100644 --- a/app.css +++ b/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; - padding: 0.3rem; + grid-gap: 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; } diff --git a/assets/js/layout.js b/assets/js/layout.js index 0d4ae622d..0c8d98de7 100644 --- a/assets/js/layout.js +++ b/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; diff --git a/assets/js/lists.js b/assets/js/lists.js index d604c82c9..09c6686c0 100644 --- a/assets/js/lists.js +++ b/assets/js/lists.js @@ -8,27 +8,27 @@ const generateFirstListsContainer = () => { for (const list of CONFIG.firstlistsContainer) { let item = `
- - ${list.links[0].name} - ${list.links[1].name} - ${list.links[2].name} - ${list.links[3].name} + + ${list.links[0].name} + ${list.links[1].name} + ${list.links[2].name} + ${list.links[3].name}
`; const position = 'beforeend'; diff --git a/config.js b/config.js index aeb6cecc9..8d5831c4d 100644 --- a/config.js +++ b/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', - icon: 'youtube', - link: 'https://odysee.com/', + name: 'Music', + icon: 'headphones', + link: 'https://open.spotify.com', }, { id: '2', - name: 'Odysee', - icon: 'youtube', - link: 'https://odysee.com/', + name: 'twitter', + icon: 'twitter', + link: 'https://twitter.com/', }, { id: '3', - name: 'Odysee', - icon: 'youtube', - link: 'https://odysee.com/', + name: 'bot', + icon: 'bot', + link: 'https://discord.com/app', }, { id: '4', - name: 'Odysee', - icon: 'youtube', - link: 'https://odysee.com/', + name: 'Amazon', + icon: 'shopping-bag', + link: 'https://amazon.com/', }, { id: '5', - name: 'Odysee', - icon: 'youtube', - link: 'https://odysee.com/', + name: 'Hashnode', + icon: 'pen-tool', + link: 'https://hashnode.com/', }, { id: '6', - name: 'Odysee', - icon: 'youtube', - link: 'https://odysee.com/', + name: 'Figma', + icon: 'figma', + 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',