soames-astro-theme 0.1.8 → 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "soames-astro-theme",
3
3
  "type": "module",
4
- "version": "0.1.8",
4
+ "version": "0.1.9",
5
5
  "description": "Shared Astro theme for the Soames ecosystem (WordPress headless + React islands). Successor to soames-gatsby-theme.",
6
6
  "keywords": [
7
7
  "astro",
@@ -66,7 +66,7 @@ const SoamesGalleryMenu: React.FC<SoamesGalleryMenuProps> = ({ items, attributes
66
66
 
67
67
  return (
68
68
  <section className={`features1 soames-gallery-menu soames-gallery-menu--${layout}`}>
69
- <div className="container-fluid">
69
+ <div className="container">
70
70
  <div className="media-container-row">
71
71
  {menuItems.map(menuItem => (
72
72
  <div key={menuItem.id} className={`card p-3 col-md-12 ${colClass}`}>
@@ -878,6 +878,28 @@ section.lazy-placeholder:after {
878
878
  background-color: #fff;
879
879
  }
880
880
 
881
+ /* ORBI-44: keep every tile the same size regardless of the source image's
882
+ aspect ratio. Without this, images render at their natural height, so an
883
+ oddly-shaped photo makes its card shorter than its neighbours. A fixed 4:3
884
+ box + object-fit:cover normalizes them (4:3 source images are not cropped).
885
+ min-width:0 stops a large image from blowing its flex card past the column
886
+ width, so the columns share the row evenly. */
887
+ .soames-gallery-menu .card {
888
+ min-width: 0;
889
+ }
890
+
891
+ .soames-gallery-menu .card-img {
892
+ aspect-ratio: 4 / 3;
893
+ overflow: hidden;
894
+ }
895
+
896
+ .soames-gallery-menu .card-img img {
897
+ width: 100%;
898
+ height: 100%;
899
+ object-fit: cover;
900
+ display: block;
901
+ }
902
+
881
903
  .soames-gallery-menu .card-box {
882
904
  background-color: #ffffff;
883
905
  padding: 2rem;