https://heald.nga.gov/mediawiki/index.php?action=history&feed=atom&title=MediaWiki%3AImageGallery.css 2026-04-14T14:50:46Z Revision history for this page on the wiki MediaWiki 1.35.2 https://heald.nga.gov/mediawiki/index.php?title=MediaWiki:ImageGallery.css&diff=40963&oldid=prev 2021-06-23T19:15:39Z

<p>Created page with &quot; <span dir="auto"><span class="autocomment">Heald Image Gallery - exactly 3 images across, same height: </span> .heald-gallery { padding-top: 3rem; } .heald-gallery ul.gallery { margin: 0.3em 0 0 0 !important;...&quot;</span></p> <p><b>New page</b></p><div> /* Heald Image Gallery - exactly 3 images across, same height */<br /> <br /> .heald-gallery {<br /> padding-top: 3rem;<br /> }<br /> .heald-gallery ul.gallery {<br /> margin: 0.3em 0 0 0 !important;<br /> width: calc(100%);<br /> flex-wrap: nowrap;<br /> display: flex;<br /> justify-content: center;<br /> }<br /> @media screen and ( max-width: 576px ) {<br /> .heald-gallery ul.gallery {<br /> flex-direction: column;<br /> align-items: center;<br /> }<br /> }<br /> .heald-gallery ul.gallery li.gallerybox &gt; div {<br /> display: -webkit-box;<br /> display: -ms-flexbox;<br /> display: flex;<br /> -webkit-box-orient: vertical;<br /> -webkit-box-direction: normal;<br /> -ms-flex-direction: column;<br /> flex-direction: column;<br /> -webkit-box-align: center;<br /> -ms-flex-align: center;<br /> align-items: center;<br /> }<br /> .heald-gallery ul.gallery li.gallerybox a:hover {<br /> text-decoration: none !important;<br /> }<br /> .heald-gallery div.gallerytext {<br /> padding: 2px 8px;<br /> }<br /> .heald-gallery div.gallerytext, .heald-gallery div.gallerytext p {<br /> font-size: 92%;<br /> }<br /> .heald-gallery div.gallerytext a,<br /> .heald-gallery div.gallerytext p {<br /> color: #01443e !important;<br /> line-height: 21px !important;<br /> font-size: 14px !important;<br /> }<br /> .heald-gallery li.gallerybox div.thumb {<br /> text-align: center;<br /> margin: 0 20px;<br /> }<br /> .heald-gallery li.gallerybox div.thumb &gt; a {<br /> position: absolute;<br /> }<br /> <br /> .icon-64 {<br /> height: 64px;<br /> width: 64px;<br /> margin-top: -30px !important;<br /> position: absolute;<br /> z-index: 2;<br /> display: -webkit-box;<br /> display: -ms-flexbox;<br /> display: flex;<br /> margin-left: -32px;<br /> margin-right: auto;<br /> border-radius: 50%;<br /> border: 4px solid black;<br /> }<br /> .icon-64.keywords, .icon-64.places, .icon-64.people {<br /> background-repeat: no-repeat;<br /> background-size: 65%;<br /> background-position: center;<br /> -webkit-filter: invert(1);<br /> filter: invert(1);<br /> background-color: #febbc1 !important;<br /> }<br /> .icon-64.keywords {<br /> background-image: url(https://www.svgrepo.com/show/166933/key.svg);<br /> }<br /> .icon-64.places {<br /> background-image: url(https://www.svgrepo.com/show/161749/earth-globe.svg);<br /> background-position: 44% 63%;<br /> }<br /> .icon-64.people {<br /> background-image: url(https://www.svgrepo.com/show/307863/graphic-designer-creative-draw-artist.svg);<br /> }<br /> <br /> .container-photo {<br /> padding: 0;<br /> overflow: hidden;<br /> border: 3px solid #e3e3e3;<br /> }<br /> .container-photo .header { <br /> background-color: #fff;<br /> padding-top: 2.5rem;<br /> display: -webkit-box;<br /> display: -ms-flexbox;<br /> display: flex;<br /> -webkit-box-flex: 1;<br /> -ms-flex: 1;<br /> flex: 1;<br /> text-align: center;<br /> z-index: 1;<br /> -webkit-box-orient: vertical;<br /> -webkit-box-direction: normal;<br /> -ms-flex-direction: column;<br /> flex-direction: column;<br /> -webkit-box-align: center;<br /> -ms-flex-align: center;<br /> align-items: center;<br /> -webkit-box-pack: start;<br /> -ms-flex-pack: start;<br /> justify-content: flex-start;<br /> position: relative;<br /> }<br /> .showcase-essay {<br /> background-color: #fff;<br /> padding: 1rem .5rem;<br /> display: -webkit-box;<br /> display: -ms-flexbox;<br /> display: flex;<br /> -webkit-box-flex: 1;<br /> -ms-flex: 1;<br /> flex: 1;<br /> text-align: center;<br /> z-index: 1;<br /> -webkit-box-orient: vertical;<br /> -webkit-box-direction: normal;<br /> -ms-flex-direction: column;<br /> flex-direction: column;<br /> -webkit-box-align: center;<br /> -ms-flex-align: center;<br /> align-items: center;<br /> -webkit-box-pack: start;<br /> -ms-flex-pack: start;<br /> justify-content: flex-start;<br /> position: relative;<br /> height: 100px;<br /> overflow: hidden;<br /> flex-direction: column;<br /> justify-content: center;<br /> }<br /> .showcase-essay, .showcase-essay a, .showcase-title {<br /> color: #01443e !important;<br /> }<br /> .showcase-title {<br /> font-weight: bold;<br /> }<br /> .showcase-essay small {<br /> display: block;<br /> line-height: 20px;<br /> padding-top: .5rem;<br /> font-size: 14px !important<br /> }<br /> .container-photo .h2 {<br /> font-size: 20px;<br /> margin-top: 0;<br /> color: #01443e;<br /> text-transform: uppercase;<br /> font-variant: sub;<br /> }<br /> .container-photo hr {<br /> width:40px;<br /> margin-top:0;<br /> border-color: #01443e;<br /> }<br /> .container-photo img {<br /> -webkit-transition: all 1s ease;<br /> -o-transition: all 1s ease;<br /> transition: all 1s ease;<br /> }<br /> .container-photo:hover img {<br /> -webkit-transform: scale(1.075);<br /> -ms-transform: scale(1.075);<br /> transform: scale(1.075);<br /> }<br /> <br /> .heald-gallery.noheader .container-photo .header {<br /> display: none;<br /> }<br /> .heald-gallery.noicon .icon-64 {<br /> display: none !important;<br /> }<br /> .heald-gallery.noicon .container-photo .header {<br /> padding-top: .5rem;<br /> }<br /> .heald-gallery.noborder .container-photo {<br /> border: 0;<br /> }</div>

I-Hecht