changed margins

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

@@ -4,6 +4,7 @@
 
     --secondary-color: hsl(200, 60%, 60%);
     /*--secondary-color: rgb(0, 138, 216);*/
+    --hue-rotation: 0;
 
     --font-weight: 400;
     --font-family: "Lucida Console";
@@ -66,80 +67,110 @@ header {
     }
 }
 
-/* Links */
-.linkGroup {
-    margin: auto;
-    box-sizing: border-box;
 
+.links {
     /* if wide */
-    @media only screen and (min-width: 480px) {
+    /*@media only screen and (min-width: 480px) {*/
         display: flex;
         flex-wrap: wrap;
-    }
+    /*}*/
-
+}
-    & .link {
+.linkGroup {
-        height: fit-content;
+    min-width: min-content;
-        position: relative;
+    margin: 20px auto;
-        top: 0;
-        transition: top ease 100ms;
-
-        /* if slim */
-        @media only screen and (max-width: 480px) {
-            margin-bottom: 10px;
-            margin-left: 10%;
-            margin-right: 10%;
-        }
-
-        /* if wide */
-        @media only screen and (min-width: 480px) {
-            padding: 5px;
-        }
-    }
 }
 
-
+.link {
-.linkButton {
+    font-size: large;
-    font-weight: var(--link-font-weight);
+    margin: 10px 20px;
-    font-size: 25px;
-    line-height: 30px;
-    text-align: center;
-    text-decoration: none;
-
-    color: rgb(0, 0, 0);
-    background-color: var(--secondary-color);
-
-    display: block;
-    box-sizing: border-box;
-    padding: 10px 20px;
-    border-radius: var(--link-border-radius);
-
-    /* if slim */
-    @media only screen and (max-width: 480px) {
-        width: 100%;
-    }
-
-    & .icon {
-        width: 20px;
-        height: 20px;
-        padding-right: 10px;
-        padding-bottom: 4px;
-        vertical-align: middle;
-    }
 }
 
-.link:hover {
+h2 {
-    filter: drop-shadow(0px 0px 5px var(--secondary-color)) brightness(1.05);
+    margin: 10px 20px;
-    top: -2px;
+    font-size: larger;
+
 }
 
-.links:hover .link:not(:hover) a {
+/*!* Links *!*/
-    filter: brightness(0.8);
+/*.linkGroup {*/
+/*    margin: auto;*/
+/*    box-sizing: border-box;*/
+
+/*    !* if wide *!*/
+/*    @media only screen and (min-width: 480px) {*/
+/*        display: flex;*/
+/*        flex-wrap: wrap;*/
+/*    }*/
+
+/*    & .link {*/
+/*        height: fit-content;*/
+/*        position: relative;*/
+/*        top: 0;*/
+/*        transition: top ease 100ms;*/
+
+/*        !* if slim *!*/
+/*        @media only screen and (max-width: 480px) {*/
+/*            margin-bottom: 10px;*/
+/*            margin-left: 10%;*/
+/*            margin-right: 10%;*/
+/*        }*/
+
+/*        !* if wide *!*/
+/*        @media only screen and (min-width: 480px) {*/
+/*            padding: 5px;*/
+/*        }*/
+/*    }*/
+/*}*/
+
+
+/*.linkButton {*/
+/*    font-weight: var(--link-font-weight);*/
+/*    font-size: 25px;*/
+/*    line-height: 30px;*/
+/*    text-align: center;*/
+/*    text-decoration: none;*/
+
+/*    color: rgb(0, 0, 0);*/
+/*    background-color: var(--secondary-color);*/
+
+/*    display: block;*/
+/*    box-sizing: border-box;*/
+/*    padding: 10px 20px;*/
+/*    border-radius: var(--link-border-radius);*/
+
+/*    !* if slim *!*/
+/*    @media only screen and (max-width: 480px) {*/
+/*        width: 100%;*/
+/*    }*/
+
+/*    & .icon {*/
+/*        width: 20px;*/
+/*        height: 20px;*/
+/*        padding-right: 10px;*/
+/*        padding-bottom: 4px;*/
+/*        vertical-align: middle;*/
+/*    }*/
+/*}*/
+
+/*.link:hover {*/
+/*    filter: drop-shadow(0px 0px 5px var(--secondary-color)) brightness(1.05);*/
+/*    top: -2px;*/
+/*}*/
+
+/*.links:hover .link:not(:hover) a {*/
+/*    filter: brightness(0.8);*/
+/*}*/
+
+/*.linkButton:active {*/
+/*    transform: scale(0.95); top: +2px;*/
+/*    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);*/
+/*}*/
+
+/* Links minimal WIP */
+.icon {
+    display: none;
 }
 
-.linkButton:active {
-    transform: scale(0.95); top: +2px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-}
 
 
 /* Timers */

src/js/links.js

@@ -12,15 +12,23 @@ function createLinkDiv(link) {
     return linkDiv;
 }
 
-function createGroups(linksData) {
+function createGroups(linksData, groupNames) {
     const container = document.querySelector('.links');
 
+    // Extract unique groups and sort them
     const groups = [...new Set(linksData.map(link => link.group))].sort((a, b) => a - b);
 
     groups.forEach((group, index) => {
+        // Create a container for the group
         const groupContainer = document.createElement('div');
         groupContainer.className = 'linkGroup';
 
+        // Create and append the group header
+        const groupHeader = document.createElement('h2');
+        groupHeader.textContent = `${groupNames[group]}`; // Display numeric identifier and name
+        groupContainer.appendChild(groupHeader);
+
+        // Filter links that belong to this group and create link elements
         linksData
             .filter(link => link.group === group)
             .forEach(link => {
@@ -28,8 +36,10 @@ function createGroups(linksData) {
                 groupContainer.appendChild(linkElement);
             });
 
+        // Append the group container to the main container
         container.appendChild(groupContainer);
 
+        // Optionally add a line break between groups
         if (index < groups.length - 1) {
             const br = document.createElement('br');
             container.appendChild(br);
@@ -40,6 +50,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));

src/js/main.js

@@ -28,6 +28,7 @@ const colorChangeInterval = 150;
 function setRainbowColor() {
     const color = `hsl(${hue}, 60%, 60%)`;
     document.documentElement.style.setProperty('--secondary-color', color);
+    document.documentElement.style.setProperty('--hue-rotation', `${hue}deg`);
     hue = (hue + 1) % 360;
 }