diff --git a/css/components/islandora_mods.css b/css/components/islandora_mods.css index 12ebdfc..00b50f9 100755 --- a/css/components/islandora_mods.css +++ b/css/components/islandora_mods.css @@ -27,20 +27,32 @@ div#site-header__inner { ========================================================================== */ .grid-item { - margin-bottom: 1em; + margin-bottom: 2em; border: 1px solid #ccc; padding: 8px; border-radius: 4px; box-shadow: 0px 5px 11px -2px rgb(0 0 0 / 39%); + display: flex; + gap: 1em; } -.grid-item .views-field-did-image { - max-height: 360px; - overflow: hidden; + +.grid-item .image { + flex: 0 0 175px; /* don't grow, don't shrink, base width 175px */ + width: 175px; /* belt-and-suspenders, some browsers want this too */ + img { + width: 100%; + border: 1px solid #ccc; + padding: 4px; + } +} +.grid-item .metadata { + flex: 1 1 auto; /* grow to fill remaining space */ + min-width: 0; /* prevents text/content overflow issues in the flex item */ } .grid-item .views-field-did-image img { width: 100%; } -.grid-item__title { +.grid-item .title { display: block; padding: 0.5em 0; line-height: 1.2; @@ -53,7 +65,7 @@ div#site-header__inner { text-decoration: none; font-family: var(--font-serif); color: #ba7d2b; - font-size: 1.1rem; + font-size: 1.5rem; } }