diff --git a/src/content/links.json b/src/content/links.json
index 3beb8b4..51d6d78 100644
--- a/src/content/links.json
+++ b/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"
+ }
+}
\ No newline at end of file
diff --git a/src/css/main.css b/src/css/main.css
index e17a21b..874963d 100644
--- a/src/css/main.css
+++ b/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;
diff --git a/src/js/links.js b/src/js/links.js
index c7a0cec..3a0290b 100644
--- a/src/js/links.js
+++ b/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 ? `${linkNameLower}` : linkNameLower;
+ anchor.innerHTML = link.icon ? `${link.name}` : link.name;
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));