brulijam/introduction-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

minimal branch

Browse Source
This commit is contained in:
Julian Brammer 2024-08-24 22:38:11 +02:00
parent 7972d47513
commit 2a7660b62f
4 changed files with 112 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/content/links.json
View File

@ -126,5 +126,11 @@
"icon": "https://simpleicons.org/icons/youtube.svg",
"group": 2
}
]
],
"groupNames": {
"1": "Social",
"2": "Content",
"3": "Games",
"4": "Other"
}
}

154
src/css/main.css
View File

@ -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,109 @@ 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 {
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;
}
}
/*}*/
}
.linkGroup {
min-width: min-content;
margin: 10px;
}
.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 {
font-size: large;
}
.link:hover {
filter: drop-shadow(0px 0px 5px var(--secondary-color)) brightness(1.05);
top: -2px;
h2 {
margin: 0;
font-size: larger;
text-decoration: underline;
}
.links:hover .link:not(:hover) a {
filter: brightness(0.8);
/*!* Links *!*/
/*.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 */

14
src/js/links.js
View File

@ -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));

1
src/js/main.js
View File

@ -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;
}