feat(photos): adaptive aspect ratio per entry (portrait 4:5, landscape 4:3)
Portrait entries (first image taller than wide) get a 4:5 container — Instagram's proven cap that prevents single photos dominating the screen. Landscape entries keep 4:3. Aspect-ratio moved from slide to wrap so the strip inherits it via height:100%. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
This commit is contained in:
@@ -207,6 +207,7 @@ body::after {
|
||||
margin-bottom: var(--space-5);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
aspect-ratio: 4 / 3;
|
||||
}
|
||||
|
||||
.journal-photo-strip {
|
||||
@@ -214,6 +215,7 @@ body::after {
|
||||
overflow-x: scroll;
|
||||
scroll-snap-type: x mandatory;
|
||||
scrollbar-width: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.journal-photo-strip::-webkit-scrollbar { display: none; }
|
||||
@@ -221,7 +223,6 @@ body::after {
|
||||
.journal-photo-slide {
|
||||
flex: 0 0 100%;
|
||||
scroll-snap-align: start;
|
||||
aspect-ratio: 4 / 3;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
|
||||
@@ -122,7 +122,9 @@ feedMap.on('load', function () {
|
||||
|
||||
{% set images = entry.media.images %}
|
||||
{% if images|length > 0 %}
|
||||
<div class="journal-photo-wrap">
|
||||
{% set firstImg = images|first %}
|
||||
{% set wrapRatio = firstImg.height > firstImg.width ? '4 / 5' : '4 / 3' %}
|
||||
<div class="journal-photo-wrap" style="aspect-ratio: {{ wrapRatio }}">
|
||||
<div class="journal-photo-strip pswp-gallery" id="gallery-{{ entry.slug }}">
|
||||
{% for img in images %}
|
||||
<a class="journal-photo-slide"
|
||||
|
||||
@@ -247,7 +247,9 @@
|
||||
|
||||
{% set images = entry.media.images %}
|
||||
{% if images|length > 0 %}
|
||||
<div class="journal-photo-wrap">
|
||||
{% set firstImg = images|first %}
|
||||
{% set wrapRatio = firstImg.height > firstImg.width ? '4 / 5' : '4 / 3' %}
|
||||
<div class="journal-photo-wrap" style="aspect-ratio: {{ wrapRatio }}">
|
||||
<div class="journal-photo-strip pswp-gallery" id="gallery-{{ entry.slug }}">
|
||||
{% for img in images %}
|
||||
<a class="journal-photo-slide"
|
||||
|
||||
Reference in New Issue
Block a user