style changes

public/css/styles.css

@@ -124,6 +124,7 @@ hr {
 	display: flex;
 	flex-direction: row;
 	gap: 20px;
+	border: 1px solid;
 	width: fit-content;
 	background-color: #0075FF;
 	background-size: cover; /* or contain, depending on your preference */
@@ -134,12 +135,17 @@ hr {
 	padding-right: 25px;
 	font-family: 'Syne Mono', monospace;
 	color: white;
+	border-color: #0075FF;
+	transition: transform 0.7s ease-out;
+}
+
+.hyperlink-header:hover {
+	transform: scale(1.05); /* Scale up the element */
 }
 
 .active-page {
 	color: #0075FF;
 	background-color: white;
-	border-color: #0075FF;
 	border: 1px solid;
 }
 
@@ -340,6 +346,23 @@ hr {
 #container-article {
 	width: 100%;
 	height: 100%;
+	opacity: 0;
+	transition: opacity 1s ease-in-out; /* 1s transition */
+}
+
+@keyframes fadeInUp {
+	0% {
+		transform: translateY(100%);
+		opacity: 0;
+	}
+	100% {
+		transform: translateY(0%);
+		opacity: 1;
+	}
+}
+
+.fadeInUp-animation {
+animation: 2s fadeInUp;
 }
 
 

public/js/article.js

@@ -56,6 +56,7 @@
 			const mat = new THREE.MeshPhongMaterial({map: texture})
 			mesh = new THREE.Mesh(geom, mat)
 			scene.add(mesh)
+			container_element.style.opacity = 1;
 			animate()
 		} );
 	}

public/js/list.js

@@ -17,7 +17,7 @@
 
 // const cont = document.getElementById("container")
 // //cont.style.opacity = "1"
-// cont.style.filter = "blur(50px)"
+// cont.style.filter = "blur(0px)"
 
 
 // // Initialize loading manager
@@ -58,7 +58,7 @@
 //     const cubeMaterial = new THREE.MeshPhongMaterial({ map: texture });
 
 //     // Create an InstancedMesh
-//     count = 4;
+//     count = 400;
 //     instancedMesh = new THREE.InstancedMesh(cubeGeometry, cubeMaterial, count);
 //     scene.add(instancedMesh);
 //     dummy = new THREE.Object3D();

templates/list.html

@@ -6,18 +6,18 @@
 <div id="main-wrapper">
 	{% include '_nav.html' %}
 	<div id="page-header">
-		<a href="/events"><div class="hyperlink-header" id="events">/ Events</div></a>
 		<a href="/exhibitions"><div class="hyperlink-header" id="exhibitions">/ Exhibitions</div></a>
+		<a href="/events"><div class="hyperlink-header" id="events">/ Events</div></a>
 		<a href="/conferences"><div class="hyperlink-header" id="conferences">/ Conferences</div></a>
 	</div>
 	<hr>
 	<div id="main-container">
-		<div id="list-container">
+		<div id="list-container" class="fadeInUp-animation">
 		{% for event in content %}
 		<a href='/{{ title.lower() }}/{{ event.title }}'>
 		<div class="list">
 			<div class="list-image">
-				<img src="{{ event.image }}" alt="{{ event.title }}" loading="lazy">
+				<img src="{{ event.image }}" alt="{{ event.title }}">
 				<div class="list-image-overlay"></div>
 			</div>
 			<div class="list-title">☉ {{ event.title }}</div>