1
Fork 0

Add patterned shadow.

This commit is contained in:
Bauke 2022-03-28 14:46:44 +02:00
parent d0e08574cb
commit 05c0637d69
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
4 changed files with 26 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

View File

@ -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;

View File

@ -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;
} }

View File

@ -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;
}
}