From db0e85bf4f1ae4ac5dbc013ca027b62adad5b1b2 Mon Sep 17 00:00:00 2001 From: Manos Date: Tue, 21 Jul 2020 01:39:55 +0200 Subject: [PATCH] Just being fancy --- styles.css | 320 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 320 insertions(+) create mode 100644 styles.css diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..11f0a0a --- /dev/null +++ b/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+") +} \ No newline at end of file