galerie.css (1337B)
1 main h1 { 2 color: #1f4e79; 3 } 4 5 .mosaic { 6 display: grid; 7 grid-template-columns: repeat(auto-fill, minmax(var(--mosaic-side), 1fr)); 8 grid-gap: 0.8em; 9 } 10 11 .mosaic .photo { 12 position: relative; 13 width: 100%; 14 height: 0; 15 padding-bottom: 100%; 16 } 17 .mosaic img { 18 position: absolute; 19 object-position: center; 20 object-fit: cover; 21 height: 100%; 22 width: 100%; 23 transition: filter 0.5s; 24 } 25 26 .photo p.credits:before { 27 content: '© '; 28 } 29 .photo p.credits { 30 position: absolute; 31 bottom: 0; 32 right: 0; 33 margin: 0; 34 color: white; 35 background: #0008; 36 border-top-left-radius: 0.5em; 37 padding: 0 0.2em; 38 font-size: small; 39 } 40 41 .mosaic .video { 42 position: relative; 43 width: 100%; 44 height: 0; 45 padding-bottom: 56.25%; /* 9/16 */ 46 } 47 .mosaic .video .yt { 48 position: absolute; 49 top: 0; 50 left: 0; 51 width: 100%; 52 height: 100%; 53 } 54 55 @media (min-width: 50em) { 56 .mosaic.photos { 57 --mosaic-side: 14em; 58 } 59 .mosaic.videos { 60 --mosaic-side: 25em; 61 } 62 63 .photo p.credits > .name { 64 display: none; 65 } 66 .photo p.credits:hover > .name { 67 display: initial; 68 } 69 } 70 71 @media not all and (min-width: 50em) { 72 .mosaic.photos { 73 --mosaic-side: 8em; 74 } 75 .mosaic.videos { 76 --mosaic-side: 18em; 77 } 78 }