45 lines
1 KiB
CSS
45 lines
1 KiB
CSS
|
#gallery {
|
||
|
|
& article {
|
||
|
|
border-radius: 0;
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
& a:has(figure) {
|
||
|
|
font-family: "Urbanist", sans-serif;
|
||
|
|
transition: border-color var(--trans), background-color var(--trans);
|
||
|
|
box-shadow: var(--shadow-light);
|
||
|
|
&:is(:hover, :focus) {
|
||
|
|
& figure {
|
||
|
|
transition: inherit;
|
||
|
|
border-color: currentColor;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
& figure {
|
||
|
|
border-width: 4px;
|
||
|
|
&:is(:not(a:hover *, a:focus *)) {
|
||
|
|
border-color: var(--light);
|
||
|
|
background-color: var(--light);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
#artworks {
|
||
|
|
article {
|
||
|
|
margin: var(--pad-xl) 0 0 0;
|
||
|
|
background-color: var(--light);
|
||
|
|
background-image: var(--noise), var(--lined);
|
||
|
|
background-size: auto, 32px;
|
||
|
|
&:last-child:not(:first-of-type) {
|
||
|
|
margin: calc(var(--pad-xl) + var(--pad-xl)) 0 0 0;
|
||
|
|
}
|
||
|
|
&::before {
|
||
|
|
content: "";
|
||
|
|
display: flex;
|
||
|
|
height: 32px;
|
||
|
|
width: calc(100% + var(--pad-xl) * 2);
|
||
|
|
margin: -4rem 0 var(--pad-l) calc(var(--pad-xl) * -1);
|
||
|
|
background-image: var(--border), var(--lined), var(--noise);
|
||
|
|
background-size: 32px, 32px;
|
||
|
|
background-blend-mode: darken;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|