more design changes

src/content/links.json

@@ -126,5 +126,11 @@
       "icon": "https://simpleicons.org/icons/youtube.svg",
       "group": 2
     }
-  ]
+  ],
-}
+  "groupNames": {
+    "1": "social",
+    "2": "content",
+    "3": "games",
+    "4": "other"
+  }
+}

src/css/main.css

@@ -1,5 +1,5 @@
 :root {
-    --bg-color: rgb(16, 16, 16);
+    --bg-color: rgb(10, 10, 10);
     --primary: rgb(240, 240, 240);
 
     --secondary-color: hsl(210, 80%, 60%);
@@ -59,6 +59,16 @@ header {
 }
 
 /* Links */
+h2 {
+    width: 100%;
+    margin: 0;
+
+    /* if slim */
+    @media only screen and (max-width: 480px) {
+        text-align: center;
+        margin: 10px auto;
+    }
+}
 
 .text-link {
     color: var(--secondary-color);
@@ -74,8 +84,14 @@ header {
     top: -2px;
 }
 
+.links {
+    padding: 20px;
+}
+
 .linkGroup {
 
+    margin: auto;
+
     /* if wide */
     @media only screen and (min-width: 480px) {
         display: flex;
@@ -109,8 +125,9 @@ header {
     line-height: 30px;
     text-align: center;
     text-decoration: none;
+    text-transform: lowercase;
 
-    color: rgb(16, 16, 16);
+    color: var(--bg-color);
     background-color: var(--secondary-color);
 
     display: block;

src/js/links.js

@@ -6,14 +6,13 @@ function createLinkDiv(link) {
     anchor.className = 'linkButton';
     anchor.href = link.href;
     anchor.target = '_blank';
-    const linkNameLower = link.name.toLowerCase();
+    anchor.innerHTML = link.icon ? `<img class="icon" src="${link.icon}" alt="${link.name} icon">${link.name}` : link.name;
-    anchor.innerHTML = link.icon ? `<img class="icon" src="${link.icon}" alt="${linkNameLower} icon">${linkNameLower}` : linkNameLower;
 
     linkDiv.appendChild(anchor);
     return linkDiv;
 }
 
-function createGroups(linksData) {
+function createGroups(linksData, groupNames) {
     const container = document.querySelector('.links');
 
     const groups = [...new Set(linksData.map(link => link.group))].sort((a, b) => a - b);
@@ -22,6 +21,10 @@ function createGroups(linksData) {
         const groupContainer = document.createElement('div');
         groupContainer.className = 'linkGroup';
 
+        const groupHeader = document.createElement('h2');
+        groupHeader.textContent = `${groupNames[group]}`;
+        groupContainer.appendChild(groupHeader);
+
         linksData
             .filter(link => link.group === group)
             .forEach(link => {
@@ -41,6 +44,6 @@ function createGroups(linksData) {
 fetch('content/links.json')
     .then(response => response.json())
     .then(data => {
-        createGroups(data.links);
+        createGroups(data.links, data.groupNames);
     })
     .catch(error => console.error('Error:', error));