Bauke/bauke-xyz
Bauke
/
bauke-xyz
1
Fork 0
Code Releases 12 Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
source/assets/shadow-pattern.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

6
source/scss/components/_listenbrainz.scss
View File

@ -1,10 +1,16 @@
@use 'mixins';
.listenbrainz {
@include mixins.patterned-shadow(0.5rem);
align-items: center;
background-color: var(--background-1);
border: 2px solid var(--foreground-1);
display: grid;
grid-template-columns: min-content auto;
margin-top: 1rem;
padding: 1rem;
width: fit-content;
a {
width: fit-content;

3
source/scss/components/_page-main.scss
View File

@ -15,6 +15,9 @@
}
a {
@include mixins.patterned-shadow(0.5rem);
background-color: var(--background-1);
border: 2px solid var(--foreground-1);
padding: 1rem;
}

17
source/scss/mixins.scss
View File

@ -10,3 +10,20 @@ $large-breakpoint: 1200px;
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;
}
}