Just being fancy
This commit is contained in:
parent
1cc5b42717
commit
db0e85bf4f
320
styles.css
Normal file
320
styles.css
Normal file
@ -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+")
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user