body, html { scroll-behavior: smooth; background-color: black; } * { padding: 0; margin: 0; /* Disable text selection */ -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Safari */ } body { margin: auto; max-width: 1080px; box-sizing: content-box; padding: 0 1em; } /* #grid:target.button, #list:target.button { filter: invert(52%) sepia(2%) saturate(23%) hue-rotate(328deg) brightness(97%) contrast(82%); } */ #list:target + .photos { margin: auto; padding: 0; box-sizing: content-box; } #list:target + .photos ul { margin: auto; padding: 0; width: 100%; margin-top: -1.25em; } #list:target + .photos .photo { float: none; background-color: white; position: relative; padding: 1em; margin: 1em auto 2em auto; box-sizing: border-box; } #list:target + .photos .photo:last-child { margin-bottom: 0; } #list:target + .photos .content { position: relative; height: auto; padding: 0; } #list:target + .photos .link { cursor: default; pointer-events: none; position: relative; padding: 0; margin: 0; } #list:target + .photos img { position: relative; padding: 0; margin: 0; } #list:target + .photos .link:hover > .content img { opacity: 1; } #list:target + .photos .description { opacity: 1; background-color: white; color: black; text-shadow: none; box-sizing: border-box; display: inline-block; position: relative; padding: 1em; margin: 0; transform: none; } .photo:target .overlay { display: block; } .photo:target { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } #list:target + .photos .photo, .photo:target .link { width: 65vh; max-width: 90vw; } .photo:target .link { position: absolute; cursor: default; text-decoration: none; top: 50%; left: 50%; box-sizing: border-box; box-shadow: 0 0 .1em black; transform: translate(-50%, -50%); opacity: 1; z-index: 3; background-color: white; padding: 1em; } .photo:target .link:active { pointer-events: none; } .overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; cursor: default; pointer-events: auto; z-index: 1; background-color: rgba(0, 0, 0, .5); color: white; text-shadow: 0 0 .1em black; text-decoration: none; padding-left: .25em; font-size: calc(1.5em + 1vw); font-weight: bold; } .overlay:hover { color: #e5e5e5; } .photo:target .content { display: inline-block; padding: 0; position: relative; } .photo:target .description .title, .location, .date { display: block; } .photo:target img { position: relative; display: inline-block; margin-bottom: 1em; overflow: hidden; } .photo:target .description { display: inline-block; position: relative; opacity: 1; background-color: white; color: black; text-shadow: none; transform: none; } .photo:target .link:hover > .content img { opacity: 1; } .photos { width: 100%; margin: 0 auto; box-sizing: border-box; } .photos ul { display: inline-block; list-style-type: none; margin: 0; margin-top: -1.25em; } .photo { float: left; width: 33.33%; position: relative; box-sizing: border-box; padding: 1em; } .photo .link:hover > .content .description { opacity: 1; } .photo .link:hover > .content img { opacity: .5; } .photo img { width: 100%; } .photo .content { display: block; position: relative; width: 100%; height: 0; padding-bottom: 100%; } .description { opacity: 0; color: white; text-align: center; text-decoration: none; text-shadow: 0 0 .1em black; width: 100%; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); position: absolute; font-style: normal; } .description .title { font-family: serif; font-size: calc(1em + .25vw); font-style: italic; margin: .5em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .description .location { font-family: monospace; font-size: calc(.75em + .25vw); margin: .25em; overflow: hidden; text-overflow: ellipsis; } .description .date { font-family: monospace; font-size: calc(.75em + .25vw); margin: .25em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 720px) { body { padding: 0 .1em .1em .1em; } .photos { width: 100%; } .photos ul { margin-top: -.35em; } .photo { padding: .1em; } #list:target + .photos .photo { max-width: 100%; } } .button { filter: invert(100%) drop-shadow(0 0 .1em black); background-repeat: no-repeat; background-position: center; width: 100%; height: 100%; } .nav:hover > .button{ filter: invert(90%) drop-shadow(0 0 .1em black); } .nav { position: sticky; top: 0; display: inline-block; font-family: sans-serif; font-size: calc(0.75em + 0.05vw); outline: 0; text-decoration: none; text-align: center; width: 33.33%; height: 3.4em; padding: .9em; z-index: 1; background-color: black; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } #footer { background-color: black; text-align: center; padding: 1em; } #footer .text { font-size: .75em; font-weight: normal; text-align: center; color: gray; display: block; } /* Icons */ .home { background-image: url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJob21lIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtaG9tZSBmYS13LTE4IiByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDU3NiA1MTIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTI4MC4zNyAxNDguMjZMOTYgMzAwLjExVjQ2NGExNiAxNiAwIDAgMCAxNiAxNmwxMTIuMDYtLjI5YTE2IDE2IDAgMCAwIDE1LjkyLTE2VjM2OGExNiAxNiAwIDAgMSAxNi0xNmg2NGExNiAxNiAwIDAgMSAxNiAxNnY5NS42NGExNiAxNiAwIDAgMCAxNiAxNi4wNUw0NjQgNDgwYTE2IDE2IDAgMCAwIDE2LTE2VjMwMEwyOTUuNjcgMTQ4LjI2YTEyLjE5IDEyLjE5IDAgMCAwLTE1LjMgMHpNNTcxLjYgMjUxLjQ3TDQ4OCAxODIuNTZWNDQuMDVhMTIgMTIgMCAwIDAtMTItMTJoLTU2YTEyIDEyIDAgMCAwLTEyIDEydjcyLjYxTDMxOC40NyA0M2E0OCA0OCAwIDAgMC02MSAwTDQuMzQgMjUxLjQ3YTEyIDEyIDAgMCAwLTEuNiAxNi45bDI1LjUgMzFBMTIgMTIgMCAwIDAgNDUuMTUgMzAxbDIzNS4yMi0xOTMuNzRhMTIuMTkgMTIuMTkgMCAwIDEgMTUuMyAwTDUzMC45IDMwMWExMiAxMiAwIDAgMCAxNi45LTEuNmwyNS41LTMxYTEyIDEyIDAgMCAwLTEuNy0xNi45M3oiPjwvcGF0aD48L3N2Zz4=") } .grid { background-image: url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJ0aCIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLXRoIGZhLXctMTYiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMTQ5LjMzMyA1NnY4MGMwIDEzLjI1NS0xMC43NDUgMjQtMjQgMjRIMjRjLTEzLjI1NSAwLTI0LTEwLjc0NS0yNC0yNFY1NmMwLTEzLjI1NSAxMC43NDUtMjQgMjQtMjRoMTAxLjMzM2MxMy4yNTUgMCAyNCAxMC43NDUgMjQgMjR6bTE4MS4zMzQgMjQwdi04MGMwLTEzLjI1NS0xMC43NDUtMjQtMjQtMjRIMjA1LjMzM2MtMTMuMjU1IDAtMjQgMTAuNzQ1LTI0IDI0djgwYzAgMTMuMjU1IDEwLjc0NSAyNCAyNCAyNGgxMDEuMzMzYzEzLjI1NiAwIDI0LjAwMS0xMC43NDUgMjQuMDAxLTI0em0zMi0yNDB2ODBjMCAxMy4yNTUgMTAuNzQ1IDI0IDI0IDI0SDQ4OGMxMy4yNTUgMCAyNC0xMC43NDUgMjQtMjRWNTZjMC0xMy4yNTUtMTAuNzQ1LTI0LTI0LTI0SDM4Ni42NjdjLTEzLjI1NSAwLTI0IDEwLjc0NS0yNCAyNHptLTMyIDgwVjU2YzAtMTMuMjU1LTEwLjc0NS0yNC0yNC0yNEgyMDUuMzMzYy0xMy4yNTUgMC0yNCAxMC43NDUtMjQgMjR2ODBjMCAxMy4yNTUgMTAuNzQ1IDI0IDI0IDI0aDEwMS4zMzNjMTMuMjU2IDAgMjQuMDAxLTEwLjc0NSAyNC4wMDEtMjR6bS0yMDUuMzM0IDU2SDI0Yy0xMy4yNTUgMC0yNCAxMC43NDUtMjQgMjR2ODBjMCAxMy4yNTUgMTAuNzQ1IDI0IDI0IDI0aDEwMS4zMzNjMTMuMjU1IDAgMjQtMTAuNzQ1IDI0LTI0di04MGMwLTEzLjI1NS0xMC43NDUtMjQtMjQtMjR6TTAgMzc2djgwYzAgMTMuMjU1IDEwLjc0NSAyNCAyNCAyNGgxMDEuMzMzYzEzLjI1NSAwIDI0LTEwLjc0NSAyNC0yNHYtODBjMC0xMy4yNTUtMTAuNzQ1LTI0LTI0LTI0SDI0Yy0xMy4yNTUgMC0yNCAxMC43NDUtMjQgMjR6bTM4Ni42NjctNTZINDg4YzEzLjI1NSAwIDI0LTEwLjc0NSAyNC0yNHYtODBjMC0xMy4yNTUtMTAuNzQ1LTI0LTI0LTI0SDM4Ni42NjdjLTEzLjI1NSAwLTI0IDEwLjc0NS0yNCAyNHY4MGMwIDEzLjI1NSAxMC43NDUgMjQgMjQgMjR6bTAgMTYwSDQ4OGMxMy4yNTUgMCAyNC0xMC43NDUgMjQtMjR2LTgwYzAtMTMuMjU1LTEwLjc0NS0yNC0yNC0yNEgzODYuNjY3Yy0xMy4yNTUgMC0yNCAxMC43NDUtMjQgMjR2ODBjMCAxMy4yNTUgMTAuNzQ1IDI0IDI0IDI0ek0xODEuMzMzIDM3NnY4MGMwIDEzLjI1NSAxMC43NDUgMjQgMjQgMjRoMTAxLjMzM2MxMy4yNTUgMCAyNC0xMC43NDUgMjQtMjR2LTgwYzAtMTMuMjU1LTEwLjc0NS0yNC0yNC0yNEgyMDUuMzMzYy0xMy4yNTUgMC0yNCAxMC43NDUtMjQgMjR6Ij48L3BhdGg+PC9zdmc+") } .list { background-image: url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJzdG9wIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtc3RvcCBmYS13LTE0IiByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTQwMCAzMkg0OEMyMS41IDMyIDAgNTMuNSAwIDgwdjM1MmMwIDI2LjUgMjEuNSA0OCA0OCA0OGgzNTJjMjYuNSAwIDQ4LTIxLjUgNDgtNDhWODBjMC0yNi41LTIxLjUtNDgtNDgtNDh6Ij48L3BhdGg+PC9zdmc+") }