diff --git a/public/css/styles.css b/public/css/styles.css index 99b250f..03328cf 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -1,5 +1,3 @@ -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Syne+Mono&display=swap'); - html { padding: 0; margin: 0; @@ -22,7 +20,7 @@ body { url('/public/images/skybox.png'); background-position: 0px calc(100vh / 2.2); background-size: cover; - background-repeat: repeat-x; + background-repeat: repeat-x; } p { @@ -49,6 +47,7 @@ hr { flex-direction: column; height: 100vh; overflow-y: hidden; + overflow-x: hidden; } #nav-bar { @@ -109,6 +108,30 @@ hr { padding-left: 25px; padding-right: 25px; font-family: 'Syne Mono', monospace; + color: white; +} + +.hyperlink-header { + display: flex; + flex-direction: row; + gap: 20px; + width: fit-content; + background-color: #0075FF; + background-size: cover; /* or contain, depending on your preference */ + background-repeat:repeat; + border-radius: 30px; + padding: 10px; + padding-left: 25px; + padding-right: 25px; + font-family: 'Syne Mono', monospace; + color: white; +} + +.active-page { + color: #0075FF; + background-color: white; + border-color: #0075FF; + border: 1px solid; } #hyperlink-container a{ @@ -122,6 +145,7 @@ hr { margin: 0; padding: 0; z-index: -999; + opacity: 1; } #list-container { @@ -183,7 +207,7 @@ hr { .list-details { font-size: 20px; - color: #0075FF; + color: black; display: flex; flex-direction: row; justify-content: flex-start; @@ -196,7 +220,7 @@ hr { .list-artists { font-size: 20px; font-family: 'Syne Mono', monospace; - color: #0075FF; + color: black; display: flex; flex-wrap: wrap; flex-direction: row; @@ -209,15 +233,23 @@ hr { padding-bottom: 20px; padding-left: 50px; font-size: 30px; - gap: 50px; + gap: 20px; height: 100px; font-family: 'Syne Mono', monospace; color: #0075FF; align-items: center; - overflow-x: hidden; + overflow-x: scroll; overflow-y: hidden; } +#page-header::-webkit-scrollbar { + display: none; +} + +#page-header a { + cursor: pointer; +} + .page-info-cont { display: flex; flex-direction: row; @@ -337,11 +369,13 @@ hr { } #page-header { - overflow-y: scroll; - overflow-x: hidden; + overflow-y: hidden; + overflow-x: scroll; padding-right: 20px; padding-left: 20px; white-space: nowrap; + gap: 10px; + height: 40px; } #container-article { @@ -402,13 +436,18 @@ hr { text-align: center; } - #list-container { - padding-left: 20px; - padding-right: 20px; + .hyperlink-header { + margin-left: 0px; + margin-right: 0px; + } + + .list-image { + height: 300px; } .list{ - width: 100%; + width: 90vw; + height: auto; } #page-header { @@ -452,13 +491,14 @@ hr { } #page-header { - overflow-y: scroll; - overflow-x: hidden; - height: 20px; + overflow-y: hidden; + overflow-x: scroll; + height: 40px; padding-right: 20px; padding-left: 20px; white-space: nowrap; scroll-snap-align: center; + gap: 5px; } .page-info-title { @@ -473,4 +513,14 @@ hr { width: 100%; height: 100%; } +} + +@keyframes fadeInUp { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } + } \ No newline at end of file diff --git a/public/js/list.js b/public/js/list.js index 6537a75..4d2ebf9 100644 --- a/public/js/list.js +++ b/public/js/list.js @@ -1,149 +1,174 @@ -import * as THREE from 'three' -import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' -import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; -import { RenderPixelatedPass } from 'three/addons/postprocessing/RenderPixelatedPass.js'; -import { OutputPass } from 'three/addons/postprocessing/OutputPass.js'; -import { randFloat } from 'three/src/math/MathUtils.js'; - - - let scene, camera, renderer - let aspect, frustumSize - let time = 0 - let lastTime = 0 - let controls - let mesh - let composer - let cubeGroup = [] - let instancedMesh, dummy, count - - const texture = new THREE.TextureLoader().load("public/images/blue-and-white.png") - texture.minFilter = THREE.NearestFilter - texture.colorSpace = THREE.SRGBColorSpace; - texture.wrapS = THREE.RepeatWrapping; - texture.wrapT = THREE.RepeatWrapping; - - - function init(){ - SetupRenderer() - scene = new THREE.Scene() - SetupCamera() - SetupControls() - composer = new EffectComposer( renderer ); - const renderPixelatedPass = new RenderPixelatedPass( 8, scene, camera ); - renderPixelatedPass.normalEdgeStrength = 0; - renderPixelatedPass.depthEdgeStrength = 1; - renderPixelatedPass.pixelAlignedPanning = false; - composer.addPass( renderPixelatedPass ); - const outputPass = new OutputPass(); - composer.addPass( outputPass ); - SetupCubes() - AddLights() - animate() - } - - - function SetupCubes() { - const cubeGeometry = new THREE.BoxGeometry(); - const cubeMaterial = new THREE.MeshPhongMaterial({ map: texture }); - - // Create an InstancedMesh - count = 80; - instancedMesh = new THREE.InstancedMesh(cubeGeometry, cubeMaterial, count); - scene.add(instancedMesh) - dummy = new THREE.Object3D(); - - for (let i = 0; i < count; i++) { - let size = randFloat(5, 8); - dummy.scale.set(size, size, size); - dummy.position.set(randFloat(-10, 10), randFloat(-8, 8), 0); - dummy.updateMatrix(); - instancedMesh.setMatrixAt(i, dummy.matrix); - } - - } - - function SetupRenderer(){ - renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }) - renderer.setClearColor(0xffffff, 0); - renderer.setSize(window.innerWidth, window.innerHeight) - document.getElementById('container').appendChild(renderer.domElement) - } - - function SetupCamera(){ - aspect = (window.innerWidth) / (window.innerHeight) - frustumSize = 10 - camera = new THREE.OrthographicCamera( - frustumSize * aspect / -2, - frustumSize * aspect / 2, - frustumSize / 2, - frustumSize / -2, - 0.01, - 5000 - ) - - camera.position.x = 5 - } - - function SetupControls(){ - controls = new OrbitControls(camera, renderer.domElement) - controls.enableRotate = false; - controls.enablePan = false - controls.zoomToCursor = false; - controls.mouseButtons = { - RIGHT: THREE.MOUSE.ROTATE, - MIDDLE: THREE.MOUSE.DOLLY, - LEFT: THREE.MOUSE.PAN - } - camera.position.set(0, 0, 20) - controls.update() - } - - function AddLights() { - // Add Ambient Light - const ambientLight = new THREE.AmbientLight(0xffffff, 5); // Soft white light - scene.add(ambientLight); - - // Add Directional Light - const directionalLight = new THREE.DirectionalLight(0xffffff, 0); // Soft white light - directionalLight.position.set(-5, 0, 5).normalize(); - scene.add(directionalLight); - } - - const matrix = new THREE.Matrix4() - function animate(){ - requestAnimationFrame(animate) - // Rotate instanced meshes - const time = performance.now() * 0.001; - const rotationSpeedX = 0.02; - const rotationSpeedY = 0.01; - lastTime = time - - - for (let i = 0; i < count; i++) { - instancedMesh.getMatrixAt(i, matrix) - matrix.decompose(dummy.position, dummy.rotation, dummy.scale) - dummy.rotation.set(i/1000 * time, i/1000 * time, i/1000 * time); - dummy.updateMatrix(); - instancedMesh.setMatrixAt(i, dummy.matrix); - } - instancedMesh.instanceMatrix.needsUpdate = true - - composer.render() - //renderer.render(scene, camera) - } - - window.addEventListener('resize', () => { - aspect = (window.innerWidth) / (window.innerHeight) - camera.left = -frustumSize * aspect / 2 - camera.right = frustumSize * aspect / 2 - camera.top = frustumSize / 2 - camera.bottom = -frustumSize / 2 - camera.updateProjectionMatrix() - renderer.setPixelRatio(window.devicePixelRatio) - renderer.setSize(window.innerWidth, window.innerHeight) - }) - - - init() - - +// import * as THREE from 'three'; +// import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; +// import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; +// import { RenderPixelatedPass } from 'three/addons/postprocessing/RenderPixelatedPass.js'; +// import { OutputPass } from 'three/addons/postprocessing/OutputPass.js'; +// import { randFloat } from 'three/src/math/MathUtils.js'; + +// let scene, camera, renderer; +// let aspect, frustumSize; +// let time = 0; +// let lastTime = 0; +// let controls; +// let mesh; +// let composer; +// let cubeGroup = []; +// let instancedMesh, dummy, count; + +// const cont = document.getElementById("container") +// //cont.style.opacity = "1" +// cont.style.filter = "blur(50px)" + + +// // Initialize loading manager +// const loadingManager = new THREE.LoadingManager(); +// loadingManager.onLoad = function() { +// // Run init after all resources are loaded +// init(); +// }; + +// // Load texture with loading manager +// const textureLoader = new THREE.TextureLoader(loadingManager); +// const texture = textureLoader.load("public/images/blue-and-white.png"); +// texture.minFilter = THREE.NearestFilter; +// texture.colorSpace = THREE.SRGBColorSpace; +// texture.wrapS = THREE.RepeatWrapping; +// texture.wrapT = THREE.RepeatWrapping; + +// function init() { +// SetupRenderer(); +// scene = new THREE.Scene(); +// SetupCamera(); +// SetupControls(); +// composer = new EffectComposer(renderer); +// const renderPixelatedPass = new RenderPixelatedPass(8, scene, camera); +// renderPixelatedPass.normalEdgeStrength = 0; +// renderPixelatedPass.depthEdgeStrength = 1; +// renderPixelatedPass.pixelAlignedPanning = false; +// composer.addPass(renderPixelatedPass); +// const outputPass = new OutputPass(); +// composer.addPass(outputPass); +// SetupCubes(); +// AddLights(); +// animate(); +// } + +// function SetupCubes() { +// const cubeGeometry = new THREE.BoxGeometry(); +// const cubeMaterial = new THREE.MeshPhongMaterial({ map: texture }); + +// // Create an InstancedMesh +// count = 4; +// instancedMesh = new THREE.InstancedMesh(cubeGeometry, cubeMaterial, count); +// scene.add(instancedMesh); +// dummy = new THREE.Object3D(); + +// for (let i = 0; i < count; i++) { +// let size = randFloat(5, 8); +// dummy.scale.set(size, size, size); +// dummy.position.set(randFloat(-10, 10), randFloat(-8, 8), 0); +// dummy.updateMatrix(); +// instancedMesh.setMatrixAt(i, dummy.matrix); +// } +// } + +// function SetupRenderer() { +// renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); +// renderer.setClearColor(0xffffff, 0); +// renderer.setSize(window.innerWidth, window.innerHeight); +// document.getElementById('container').appendChild(renderer.domElement); +// } + +// function SetupCamera() { +// aspect = window.innerWidth / window.innerHeight; +// frustumSize = 10; +// camera = new THREE.OrthographicCamera( +// (frustumSize * aspect) / -2, +// (frustumSize * aspect) / 2, +// frustumSize / 2, +// frustumSize / -2, +// 0.01, +// 5000 +// ); + +// camera.position.x = 5; +// } + +// function SetupControls() { +// controls = new OrbitControls(camera, renderer.domElement); +// controls.enableRotate = false; +// controls.enablePan = false; +// controls.zoomToCursor = false; +// controls.mouseButtons = { +// RIGHT: THREE.MOUSE.ROTATE, +// MIDDLE: THREE.MOUSE.DOLLY, +// LEFT: THREE.MOUSE.PAN +// }; +// camera.position.set(0, 0, 20); +// controls.update(); +// } + +// function AddLights() { +// // Add Ambient Light +// const ambientLight = new THREE.AmbientLight(0xffffff, 5); // Soft white light +// scene.add(ambientLight); + +// // Add Directional Light +// const directionalLight = new THREE.DirectionalLight(0xffffff, 0); // Soft white light +// directionalLight.position.set(-5, 0, 5).normalize(); +// scene.add(directionalLight); +// } + +// const matrix = new THREE.Matrix4(); +// function animate() { +// requestAnimationFrame(animate); +// // Rotate instanced meshes +// const time = performance.now() * 0.001; +// const rotationSpeedX = 0.02; +// const rotationSpeedY = 0.01; +// lastTime = time; + +// for (let i = 0; i < count; i++) { +// instancedMesh.getMatrixAt(i, matrix); +// matrix.decompose(dummy.position, dummy.rotation, dummy.scale); +// dummy.rotation.set((i / 1000) * time, (i / 1000) * time, (i / 1000) * time); +// dummy.updateMatrix(); +// instancedMesh.setMatrixAt(i, dummy.matrix); +// } +// instancedMesh.instanceMatrix.needsUpdate = true; + +// composer.render(); +// //renderer.render(scene, camera) +// } + +// window.addEventListener('resize', () => { +// aspect = window.innerWidth / window.innerHeight; +// camera.left = (-frustumSize * aspect) / 2; +// camera.right = (frustumSize * aspect) / 2; +// camera.top = frustumSize / 2; +// camera.bottom = -frustumSize / 2; +// camera.updateProjectionMatrix(); +// renderer.setPixelRatio(window.devicePixelRatio); +// renderer.setSize(window.innerWidth, window.innerHeight); +// }); + +document.addEventListener("DOMContentLoaded", function() { + // Check if the current URL contains the path "events" + if (window.location.pathname.includes("events")) { + // Select the element you want to change + const myElement = document.getElementById("events"); + // Add a class to change its style + myElement.classList.add("active-page"); + } + else if (window.location.pathname.includes("exhibitions")) { + // Select the element you want to change + const myElement = document.getElementById("exhibitions"); + // Add a class to change its style + myElement.classList.add("active-page"); + } else if (window.location.pathname.includes("conferences")) { + // Select the element you want to change + const myElement = document.getElementById("conferences"); + // Add a class to change its style + myElement.classList.add("active-page"); + } +}); diff --git a/templates/base.html b/templates/base.html index e0be206..9812dcf 100644 --- a/templates/base.html +++ b/templates/base.html @@ -12,6 +12,9 @@ Beta Festival 2024 {% block title %}{% endblock %} + + + diff --git a/templates/index.html b/templates/index.html index e5cdc91..6bc0a4f 100644 --- a/templates/index.html +++ b/templates/index.html @@ -13,15 +13,15 @@ diff --git a/templates/list.html b/templates/list.html index 291aa91..fa51c6e 100644 --- a/templates/list.html +++ b/templates/list.html @@ -6,7 +6,9 @@
{% include '_nav.html' %}
-
/{{ title }}
+ + +
@@ -15,10 +17,10 @@
- {{ event.title }} + {{ event.title }}
-
→ {{ event.title }}
+
☉ {{ event.title }}

[{{ event.artists | join(', ') }}]

@@ -40,4 +42,5 @@
+ {% endblock content %} \ No newline at end of file