css updates

public/css/styles.css

@@ -67,7 +67,7 @@ hr {
 }
 
 #main-container {
-	padding-top: 25px;
+	padding-top: 50px;
 	display: flex;
 	flex-direction: column;
 	gap: 50px;
@@ -79,6 +79,15 @@ hr {
 	flex: 1;
 }
 
+#main-container-article {
+	display: flex;
+	flex-direction: column;
+	gap: 50px;
+	overflow-y: hidden;
+    box-sizing: border-box; /* Include padding in the height calculation */
+	flex: 1;
+}
+
 #main-text {
 	font-size: 26px;
 	width: 60%;
@@ -89,7 +98,7 @@ hr {
 #hyperlink-container {
 	display: flex;
 	flex-direction: row;
-	gap: 20px;
+	gap: 25px;
 	font-size: 30px;
 	color:#ffffff;
 	font-weight: 400;
@@ -156,6 +165,7 @@ hr {
 	column-gap: 50px;
 	justify-content: space-evenly;
 	padding-top: 40px;
+	padding-bottom: 40px;
 }
 
 .list {
@@ -194,7 +204,7 @@ hr {
 	position: absolute;
     width: calc(100% + .2rem);
     height: 100%;
-    box-shadow: 0 0 .25rem .5rem white inset;
+    box-shadow: 0 0 .25rem .1rem white inset;
 	pointer-events: none;
 }
 
@@ -272,8 +282,7 @@ hr {
 	flex-direction: row;
 	width: 100%;
 	height: 100%;
-	padding-top: 50px;
+	gap: 40px;
-	gap: 40px
 }
 
 #article-image {
@@ -296,6 +305,13 @@ hr {
 	font-size: 26px;
 	line-height: 40px;
 	width: 100%;	
+	padding-left: 50px;
+	padding-top: 50px;
+	overflow-y: scroll;
+}
+
+#article-text::-webkit-scrollbar {
+	display: none;
   }
 
 #article-information {
@@ -312,7 +328,8 @@ hr {
 	font-size: 30px;
 	font-family: 'Syne Mono', monospace;
 	color: #0075FF;
-	padding-bottom: 50px;
+	margin-bottom: 25px;
+	width: fit-content;
 }
 
 #article-artists {
@@ -354,8 +371,7 @@ hr {
 		flex-direction: column;
 		width: 100%;
 		height: 100%;
-		padding-top: 50px;
+		gap: 0px
-		gap: 40px
 	}
 
 	#article-image {
@@ -366,6 +382,8 @@ hr {
 	#article-text {
 		order: 2;
 		gap: 10px;
+		width: auto;
+		padding-right: 50px;
 	}
 
 	#page-header {
@@ -457,8 +475,7 @@ hr {
 	#article-container {
 		flex-direction: column;
 		width: auto;
-		margin-left: 20px;
+		gap:0px;
-		margin-right: 20px;
 		align-items: center;
 		padding-top: 0px;
 	}
@@ -466,11 +483,16 @@ hr {
 	#article-image {
 		order: 1;
 		width: 100%;
+		flex-basis: 40%;
 	}
 
 	#article-text {
 		order: 2;
 		gap: 10px;
+		padding-left: 20px;
+		padding-right: 20px;
+		width: auto;
+		flex-basis: 60%;
 	}
 
 	#article-title {
@@ -487,7 +509,7 @@ hr {
 	}
 
 	#article-book {
-		font-size: 20px;
+		font-size: 25px;
 	}
 
 	#page-header {

public/js/article.js

@@ -19,9 +19,6 @@
 
 	let imgW, imgH, imgRatio
 
-	console.log(containerH, containerW)
-	
-
 	var clock = new THREE.Clock();
 
 
@@ -32,7 +29,7 @@
 		SetupControls()
 
 		composer = new EffectComposer( renderer );
-		const renderPixelatedPass = new RenderPixelatedPass( 1.2, scene, camera );
+		const renderPixelatedPass = new RenderPixelatedPass( 3, scene, camera );
         renderPixelatedPass.normalEdgeStrength = 1;
         renderPixelatedPass.depthEdgeStrength = 1;
         renderPixelatedPass.pixelAlignedPanning = false;
@@ -47,7 +44,6 @@
 		textureLoader.crossOrigin = "Anonymous"
 		const texture = textureLoader.load(imageUrl, function ( tex ) {
 			// tex and texture are the same in this example, but that might not always be the case
-			console.log( tex.image.width, tex.image.height );
 			imgW = tex.image.width
 			imgH = tex.image.height
 			imgRatio = imgW / imgH
@@ -73,7 +69,7 @@
 
 	function SetupCamera(){
 		aspect = (containerW) / (containerH)
-		frustumSize = 1.5
+		frustumSize = 0.5
 		camera = new THREE.OrthographicCamera(
 			frustumSize * aspect / -2,
 			frustumSize * aspect / 2,
@@ -96,7 +92,10 @@
 			MIDDLE: THREE.MOUSE.DOLLY,
 			LEFT: THREE.MOUSE.PAN
 		}
-		camera.position.set(0, 0, 20)
+		controls.minZoom = 0.3
+		controls.maxZoom = 0.75
+		camera.position.set(0, 0, 5)
+
 		controls.update()
 	}
 
@@ -106,9 +105,9 @@
 		scene.add(ambientLight);
 	
 		// Add Directional Light
-		const directionalLight = new THREE.DirectionalLight(0xffffff, 0); // Soft white light
+		const directionalLight = new THREE.DirectionalLight(0x0075FF, 4); // Soft white light
 		directionalLight.position.set(-5, 0, 5).normalize();
-		scene.add(directionalLight);
+		//scene.add(directionalLight);
 	}
 
 	function animate(){

templates/article.html

@@ -5,7 +5,7 @@
 {% block content %}
 <div id="main-wrapper">
 	{% include '_nav.html' %}
-	<div id="main-container">
+	<div id="main-container-article">
 		{% for article in content %}
 		<div id="article-container">
 			<div id="article-text">
@@ -13,7 +13,7 @@
 				<div id="article-artists">{{ article.artists | join(', ') }}</div>
 				<div id="article-information">{{ article.information }}</div>
 				{% if article.bookUrl %}
-					<a href="{{ article.bookUrl }}" target="_blank"><div id="article-book">BOOK ↗</div></a>
+					<a href="{{ article.bookUrl }}" target="_blank"><div id="article-book">↳ Book</div></a>
 				{% endif %}
 			</div>
 			<div id="article-image">