From 4530173feb053edf5698397993bc29dc999b28c4 Mon Sep 17 00:00:00 2001 From: Cailean Finn Date: Mon, 29 Jul 2024 14:06:16 +0100 Subject: [PATCH] location and index pages done --- public/css/styles.css | 140 +++++++++++++++++++++++++++++++++++---- public/js/article.js | 8 ++- public/js/main.js | 43 ++++++++---- templates/_nav.html | 2 +- templates/index.html | 15 +++-- templates/locations.html | 5 ++ 6 files changed, 180 insertions(+), 33 deletions(-) diff --git a/public/css/styles.css b/public/css/styles.css index c7ad9d6..daa3096 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -64,6 +64,11 @@ hr { font-size: 40px; font-family: 'Syne Mono', monospace; color: #0075FF; + +} + +.nav-element-align { + text-align: right; } #main-container { @@ -79,6 +84,36 @@ hr { flex: 1; } +#index-container { + display: flex; + padding-top: 50px; + flex-direction: row; + gap: 50px; + padding-bottom: 50px; + padding-left: 50px; + padding-right: 50px; + overflow-y: scroll; + box-sizing: border-box; /* Include padding in the height calculation */ + flex: 1; +} + +#index-info { + flex-basis: 55%; + display: flex; + flex-direction: column; + gap: 50px; +} + +#index-info p{ + font-size: 20px; + line-height: 40px; +} + +#container-index { + flex-basis: 45%; + min-height: 400px; +} + #main-container-article { display: flex; flex-direction: column; @@ -109,7 +144,6 @@ hr { flex-direction: row; gap: 20px; width: fit-content; - background-color: white; border-color: #0075FF; background-size: cover; /* or contain, depending on your preference */ background-repeat:repeat; @@ -454,7 +488,7 @@ animation: 2s fadeInUp; /* Tablet breakpoint (768px to 1024px) */ -@media (max-width: 1100px) and (min-width: 768px) { +@media (max-width: 1100px){ #nav-bar { padding-left: 50px; padding-right: 50px; @@ -514,6 +548,78 @@ animation: 2s fadeInUp; /* Mobile breakpoint (less than 768px) */ @media (max-width: 768px) { + #main-container-locations { + flex-direction: column; + height: auto; + flex: 1; + overflow-y: scroll; + } + + #location-list { + padding-top: 20px; + gap: 0px; + padding-bottom: 20px; + flex-shrink: 0; + overflow-y: scroll; + flex-basis: 60%; + justify-content: space-around; + } + + #location-images { + flex-basis: 40%; + } + + .location-button { + font-size: 20px; + padding: 10px; + } + + #location-information { + padding-left: 10px; + padding-right: 10px; + align-items: center; + align-self: center; + width: fit-content; + } + + #location-text { + font-size: 18px; + padding: 0; + width: fit-content; + text-align: center; + } + + #location-button-list { + padding-left: 0px; + gap: 5px 5px; + justify-content: center; + } + + #index-info { + order: 2; + flex-basis: 0%; + flex-direction: column-reverse; + } + + #container-index { + order: 1; + flex: 1; + } + + #index-info p{ + font-size: 18px; + line-height: 40px; + text-align: justify; + } + + #index-container { + flex-direction: column; + padding-left: 25px; + padding-right: 25px; + padding-top: 0px; + gap:20px; + } + #nav-bar { padding-left: 25px; padding-right: 25px; @@ -524,6 +630,10 @@ animation: 2s fadeInUp; gap: 5px; } + .nav-element-align { + text-align:center; + } + .nav-element { font-size: 20px; } @@ -533,6 +643,7 @@ animation: 2s fadeInUp; padding-left: 10px; padding-right: 10px; } + #main-text { font-size: 18px; width: 80%; @@ -559,8 +670,8 @@ animation: 2s fadeInUp; gap: 10px; width: auto; justify-content: center; - margin-left: 25px; - margin-right: 25px; + margin-left: 0px; + margin-right: 0px; text-align: center; } @@ -583,11 +694,11 @@ animation: 2s fadeInUp; } #article-container { + display: flex; flex-direction: column; - width: auto; - gap:0px; - align-items: center; - padding-top: 0px; + width: 100%; + height: 100%; + gap: 0px } #article-image { @@ -599,10 +710,11 @@ animation: 2s fadeInUp; #article-text { order: 2; gap: 10px; - padding-left: 20px; - padding-right: 20px; width: auto; + padding-right: 10px; + padding-left: 10px; flex-basis: 60%; + padding-top: 20px; } #article-title { @@ -626,8 +738,8 @@ animation: 2s fadeInUp; overflow-y: hidden; overflow-x: scroll; height: 40px; - padding-right: 20px; - padding-left: 20px; + padding-right: 10px; + padding-left: 10px; white-space: nowrap; scroll-snap-align: center; gap: 5px; @@ -645,6 +757,10 @@ animation: 2s fadeInUp; width: 100%; height: 100%; } + + #list-container { + padding-top: 0px; + } } @keyframes fadeInUp { diff --git a/public/js/article.js b/public/js/article.js index af36b4e..d069399 100644 --- a/public/js/article.js +++ b/public/js/article.js @@ -11,7 +11,7 @@ let controls let mesh let composer - + let pixelSize = 3 let container_element = document.getElementById('container-article') let containerW = container_element.offsetWidth @@ -29,7 +29,11 @@ SetupControls() composer = new EffectComposer( renderer ); - const renderPixelatedPass = new RenderPixelatedPass( 3, scene, camera ); + if (window.innerWidth < 1024 ) + { + pixelSize = 1.5 + } + const renderPixelatedPass = new RenderPixelatedPass( pixelSize, scene, camera ); renderPixelatedPass.normalEdgeStrength = 1; renderPixelatedPass.depthEdgeStrength = 1; renderPixelatedPass.pixelAlignedPanning = false; diff --git a/public/js/main.js b/public/js/main.js index 77dc6e3..65db08f 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -11,6 +11,11 @@ let controls let mesh let composer + let pixelSize = 8 + let container_element = document.getElementById('container-index') + + let containerW = container_element.offsetWidth + let containerH = container_element.offsetHeight const texture = new THREE.TextureLoader().load("public/images/main-txt.png") texture.minFilter = THREE.NearestFilter @@ -23,10 +28,14 @@ SetupRenderer() scene = new THREE.Scene() SetupCamera() - SetupControls() + //SetupControls() composer = new EffectComposer( renderer ); - const renderPixelatedPass = new RenderPixelatedPass( 8, scene, camera ); + if (window.innerWidth <= 1024) + { + pixelSize = 4; + } + const renderPixelatedPass = new RenderPixelatedPass( pixelSize, scene, camera ); renderPixelatedPass.normalEdgeStrength = 0; renderPixelatedPass.depthEdgeStrength = 1; renderPixelatedPass.pixelAlignedPanning = false; @@ -47,13 +56,14 @@ 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) + renderer.setSize(containerW, containerH) + document.getElementById('container-index').appendChild(renderer.domElement) } function SetupCamera(){ - aspect = (window.innerWidth) / (window.innerHeight) - frustumSize = 2 + aspect = (containerW) / (containerH) + + frustumSize = 1.75 / aspect camera = new THREE.OrthographicCamera( frustumSize * aspect / -2, frustumSize * aspect / 2, @@ -62,8 +72,9 @@ 0.01, 5000 ) - + camera.position.x = 5 + camera.position.set(0, 0, 20) } function SetupControls(){ @@ -76,7 +87,7 @@ MIDDLE: THREE.MOUSE.DOLLY, LEFT: THREE.MOUSE.PAN } - camera.position.set(0, 0, 20) + controls.update() } @@ -95,27 +106,33 @@ requestAnimationFrame(animate) const deltaTime = (time - lastTime) / 1000 lastTime = time - controls.update() + //controls.update() // Rotate the mesh on the x and z axes mesh.rotation.x += 0.001 mesh.rotation.z += 0.001 mesh.rotation.y += 0.001 - mesh.position.x = 1; - mesh.position.y = -0.1; + mesh.position.x = 0; + mesh.position.y = 0; //texture.offset.x += 0.001; composer.render() //renderer.render(scene, camera) } + function getContainerDimensions(){ + containerW = container_element.offsetWidth + containerH = container_element.offsetHeight + } + window.addEventListener('resize', () => { - aspect = (window.innerWidth) / (window.innerHeight) + getContainerDimensions() + aspect = (containerW) / (containerH) 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) + renderer.setSize(containerW, containerH) }) diff --git a/templates/_nav.html b/templates/_nav.html index 9d2e797..df795ef 100644 --- a/templates/_nav.html +++ b/templates/_nav.html @@ -1,5 +1,5 @@
\ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 53436e6..965959b 100644 --- a/templates/index.html +++ b/templates/index.html @@ -5,12 +5,11 @@ {% block content %}
{% include '_nav.html' %} -
-
+
+

Beta is a new festival of art and technology critically engaging with the impact of emerging technologies on society. Taking Ireland’s role as a central node in today's wired world as a starting point, Beta will showcase and celebrate Ireland’s research and artistic communities through a combination of creativity, debate and experimentation. Beta allows members of the public to engage playfully and critically with new technologies essentially beta testing ethical issues facing society.

-
+
+ +
Locations
+
+
+
+
+
-
{% endblock content %} \ No newline at end of file diff --git a/templates/locations.html b/templates/locations.html index 42aab8b..5afcc1b 100644 --- a/templates/locations.html +++ b/templates/locations.html @@ -10,6 +10,11 @@
The Digital Hub
Pallas Projects
+
Pallas Projects
+
Pallas Projects
+
Pallas Projects
+
Pallas Projects
+
Pallas Projects