From 05c0637d69e54a82cb7318e7df2ee83fee37dfdb Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Mon, 28 Mar 2022 14:46:44 +0200
Subject: [PATCH] Add patterned shadow.

---
 source/assets/shadow-pattern.png          | Bin 0 -> 5953 bytes
 source/scss/components/_listenbrainz.scss |   6 ++++++
 source/scss/components/_page-main.scss    |   3 +++
 source/scss/mixins.scss                   |  17 +++++++++++++++++
 4 files changed, 26 insertions(+)
 create mode 100644 source/assets/shadow-pattern.png

diff --git a/source/assets/shadow-pattern.png b/source/assets/shadow-pattern.png
new file mode 100644
index 0000000000000000000000000000000000000000..3f1f00309bfb27f8c416c3dcd40bcf376881e913
GIT binary patch
literal 5953
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

literal 0
HcmV?d00001

diff --git a/source/scss/components/_listenbrainz.scss b/source/scss/components/_listenbrainz.scss
index 48884e3..7d24f23 100644
--- a/source/scss/components/_listenbrainz.scss
+++ b/source/scss/components/_listenbrainz.scss
@@ -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;
diff --git a/source/scss/components/_page-main.scss b/source/scss/components/_page-main.scss
index 43529d4..5e5b689 100644
--- a/source/scss/components/_page-main.scss
+++ b/source/scss/components/_page-main.scss
@@ -15,6 +15,9 @@
     }
 
     a {
+      @include mixins.patterned-shadow(0.5rem);
+
+      background-color: var(--background-1);
       border: 2px solid var(--foreground-1);
       padding: 1rem;
     }
diff --git a/source/scss/mixins.scss b/source/scss/mixins.scss
index 685eb16..b27ff1b 100644
--- a/source/scss/mixins.scss
+++ b/source/scss/mixins.scss
@@ -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;
+  }
+}