Add patterned shadow.
This commit is contained in:
parent
d0e08574cb
commit
05c0637d69
Binary file not shown.
After Width: | Height: | Size: 5.8 KiB |
|
@ -1,10 +1,16 @@
|
||||||
|
@use 'mixins';
|
||||||
|
|
||||||
.listenbrainz {
|
.listenbrainz {
|
||||||
|
@include mixins.patterned-shadow(0.5rem);
|
||||||
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
background-color: var(--background-1);
|
||||||
border: 2px solid var(--foreground-1);
|
border: 2px solid var(--foreground-1);
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: min-content auto;
|
grid-template-columns: min-content auto;
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
|
width: fit-content;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
|
|
|
@ -15,6 +15,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
@include mixins.patterned-shadow(0.5rem);
|
||||||
|
|
||||||
|
background-color: var(--background-1);
|
||||||
border: 2px solid var(--foreground-1);
|
border: 2px solid var(--foreground-1);
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,3 +10,20 @@ $large-breakpoint: 1200px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin patterned-shadow($size) {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
--shadow-size: #{$size};
|
||||||
|
|
||||||
|
background: url('/assets/shadow-pattern.png') repeat;
|
||||||
|
content: '';
|
||||||
|
height: 100%;
|
||||||
|
left: var(--shadow-size);
|
||||||
|
position: absolute;
|
||||||
|
top: var(--shadow-size);
|
||||||
|
width: 100%;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue