Just being fancy

styles.css

@@ -0,0 +1,320 @@
+body, html {
+  scroll-behavior: smooth;
+  background-color: black;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  margin: auto;
+  max-width: 1080px;
+  box-sizing: content-box;
+  padding: 0 1em 1em 1em;
+}
+
+#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 3em auto;
+  box-sizing: border-box;
+}
+
+#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 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, 0.5);
+  color: white;
+  text-shadow: 0 0 .1em black;
+  text-decoration: none;
+  padding-left: .25em;
+  font-size: calc(2em + .5vw);
+  font-weight: bold;
+}
+
+.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-size: calc(.75em + .25vw);
+  margin: .25em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.description .date {
+  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;
+  }
+
+  .button {
+    margin-bottom: .9em !important;
+  }
+
+}
+
+.button {
+  filter: invert(100%) drop-shadow(0 0 0.1em black);
+  display: inline-block;
+  font-family: sans-serif;
+  font-size: calc(0.5em + 0.25vw);
+  outline: 0;
+  text-decoration: none;
+  text-align: center;
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 33.33%;
+  height: 2em;
+  padding: 0;
+  margin: 1em 0 1em 0;
+}
+
+.button:hover {
+  filter: invert(90%) drop-shadow(0 0 0.1em black);
+}
+
+#footer {
+  background-color: black;
+  text-align: center;
+  padding: 0 1em 1em;
+}
+
+#footer .text {
+  margin-top: 2em;
+  font-size: 0.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+")
+}