Browse Source

style changes

graphics
Cailean Finn 5 months ago
parent
commit
7ce3c3c50d
  1. 25
      public/css/styles.css
  2. 1
      public/js/article.js
  3. 4
      public/js/list.js
  4. 6
      templates/list.html

25
public/css/styles.css

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

1
public/js/article.js

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

4
public/js/list.js

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

6
templates/list.html

@ -6,18 +6,18 @@
<div id="main-wrapper"> <div id="main-wrapper">
{% include '_nav.html' %} {% include '_nav.html' %}
<div id="page-header"> <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="/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> <a href="/conferences"><div class="hyperlink-header" id="conferences">/ Conferences</div></a>
</div> </div>
<hr> <hr>
<div id="main-container"> <div id="main-container">
<div id="list-container"> <div id="list-container" class="fadeInUp-animation">
{% for event in content %} {% for event in content %}
<a href='/{{ title.lower() }}/{{ event.title }}'> <a href='/{{ title.lower() }}/{{ event.title }}'>
<div class="list"> <div class="list">
<div class="list-image"> <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 class="list-image-overlay"></div>
</div> </div>
<div class="list-title">☉ {{ event.title }}</div> <div class="list-title">☉ {{ event.title }}</div>

Loading…
Cancel
Save