jeffemmett
/
cineasthesia-landing
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Center Prism in hero video, add Prism to installations grid 

Cropped video to center the light sculpture. Added Prism still
to installations section in a 3-column grid layout.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-19 14:44:37 -07:00
parent 0763c3b57a
commit fa44274f29
3 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/img/hero-video.mp4
View File

Binary file not shown.

BIN
public/img/prism-still.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 171 KiB

19
public/index.html
View File

@ -115,6 +115,7 @@
min-height: 100%; min-height: 100%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
object-fit: cover; object-fit: cover;
object-position: center center;
z-index: 0; z-index: 0;
} }
@ -301,7 +302,7 @@
.installations-grid { .installations-grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: repeat(3, 1fr);
gap: 1.5rem; gap: 1.5rem;
} }
@ -310,14 +311,16 @@
overflow: hidden; overflow: hidden;
} }
.installation-item img { .installation-item img,
.installation-item video {
width: 100%; width: 100%;
height: 350px; height: 350px;
object-fit: cover; object-fit: cover;
transition: transform 0.5s ease; transition: transform 0.5s ease;
} }
.installation-item:hover img { .installation-item:hover img,
.installation-item:hover video {
transform: scale(1.03); transform: scale(1.03);
} }
@ -677,7 +680,8 @@
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.installation-item img { .installation-item img,
.installation-item video {
height: 280px; height: 280px;
} }
@ -815,6 +819,13 @@
<p>Accra &middot; UV-Reactive Environment</p> <p>Accra &middot; UV-Reactive Environment</p>
</div> </div>
</div> </div>
<div class="installation-item">
<img src="img/prism-still.jpg" alt="Prism — light sculpture installation" loading="lazy">
<div class="installation-caption">
<h4>Prism</h4>
<p>Light Sculpture &middot; Kinetic</p>
</div>
</div>
</div> </div>
</div> </div>
</section> </section>