d447143312
A new Component and Container is introduced: Modal. It dispatches an UNSELECT_ALBUM action when clicked on. Some CSS is added to bur out the background and display the modal content properly.
160 lines
No EOL
2.8 KiB
CSS
160 lines
No EOL
2.8 KiB
CSS
body {
|
|
background-color: #111;
|
|
color: #aaa;
|
|
font-size: large;
|
|
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
|
|
padding: 5rem 10rem;
|
|
}
|
|
|
|
a:link {
|
|
color: #a83;
|
|
}
|
|
|
|
a:visited {
|
|
color: #a83;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
a:hover, a:focus {
|
|
color: #fff;
|
|
}
|
|
|
|
a:active {
|
|
transform: translate(2px, 2px);
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 3px solid #a83;
|
|
padding: 1.25rem 0;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
h1 {
|
|
text-transform: uppercase;
|
|
margin: 0;
|
|
}
|
|
|
|
input {
|
|
background-color: #333;
|
|
color: #fff;
|
|
border-width: 0;
|
|
border-bottom: 3px solid #555;
|
|
font-size: large;
|
|
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
|
|
padding: .5rem 1rem;
|
|
min-width: 17em;
|
|
}
|
|
|
|
input:hover {
|
|
background-color: #444;
|
|
border-color: #777;
|
|
}
|
|
|
|
input:focus {
|
|
background-color: #fff;
|
|
color: #000;
|
|
border-color: #a83;
|
|
}
|
|
|
|
footer {
|
|
color: #888;
|
|
font-size: small;
|
|
position: fixed;
|
|
transform: rotate(45deg) translate(2em, 3em);
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
|
|
article {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
figure {
|
|
margin: 1rem;
|
|
}
|
|
|
|
article:hover,
|
|
article:focus {
|
|
background: #333;
|
|
color: #fff;
|
|
transform: scale(1.05, 1.05);
|
|
transition: transform .4s linear;
|
|
}
|
|
|
|
article:hover img {
|
|
transform: scale(1.5, 1.5) translateX(-1.5rem);
|
|
transition: transform .2s linear;
|
|
}
|
|
|
|
figure img {
|
|
width: 10vw;
|
|
height: 10vw;
|
|
padding: 5px;
|
|
display: block;
|
|
border: 1px solid #a83;
|
|
background-color: #000;
|
|
}
|
|
|
|
#selected-album > div {
|
|
display: grid;
|
|
max-width: 80%;
|
|
transform: translateY(-3em);
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 1fr 2fr;
|
|
}
|
|
|
|
#selected-album figure {
|
|
grid-column: 1;
|
|
grid-row: 1 / 3;
|
|
margin: 0;
|
|
}
|
|
|
|
#selected-album span {
|
|
align-self: end;
|
|
text-transform: uppercase;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
#selected-album p {
|
|
color: #fff;
|
|
margin: 0;
|
|
font-size: 1.5rem;
|
|
align-self: start;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
#selected-album img {
|
|
width: 100%;
|
|
padding: 0;
|
|
border: 0;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
@media (min-width: 600px) {
|
|
#albums {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto;
|
|
grid-gap: 10px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
#selected-album {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
.blur {
|
|
filter: blur(25px);
|
|
} |