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+")
}