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);
|
margin-bottom: var(--space-5);
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
aspect-ratio: 4 / 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.journal-photo-strip {
|
.journal-photo-strip {
|
||||||
@@ -214,6 +215,7 @@ body::after {
|
|||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
scroll-snap-type: x mandatory;
|
scroll-snap-type: x mandatory;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.journal-photo-strip::-webkit-scrollbar { display: none; }
|
.journal-photo-strip::-webkit-scrollbar { display: none; }
|
||||||
@@ -221,7 +223,6 @@ body::after {
|
|||||||
.journal-photo-slide {
|
.journal-photo-slide {
|
||||||
flex: 0 0 100%;
|
flex: 0 0 100%;
|
||||||
scroll-snap-align: start;
|
scroll-snap-align: start;
|
||||||
aspect-ratio: 4 / 3;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: block;
|
display: block;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|||||||
@@ -122,7 +122,9 @@ feedMap.on('load', function () {
|
|||||||
|
|
||||||
{% set images = entry.media.images %}
|
{% set images = entry.media.images %}
|
||||||
{% if images|length > 0 %}
|
{% 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 }}">
|
<div class="journal-photo-strip pswp-gallery" id="gallery-{{ entry.slug }}">
|
||||||
{% for img in images %}
|
{% for img in images %}
|
||||||
<a class="journal-photo-slide"
|
<a class="journal-photo-slide"
|
||||||
|
|||||||
@@ -247,7 +247,9 @@
|
|||||||
|
|
||||||
{% set images = entry.media.images %}
|
{% set images = entry.media.images %}
|
||||||
{% if images|length > 0 %}
|
{% 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 }}">
|
<div class="journal-photo-strip pswp-gallery" id="gallery-{{ entry.slug }}">
|
||||||
{% for img in images %}
|
{% for img in images %}
|
||||||
<a class="journal-photo-slide"
|
<a class="journal-photo-slide"
|
||||||
|
|||||||
Reference in New Issue
Block a user