diff --git a/.eleventy.js b/.eleventy.js
index d7347de..4553b0d 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -5,6 +5,7 @@ module.exports = function (eleventyConfig) {
eleventyConfig.setServerPassthroughCopyBehavior("passthrough")
eleventyConfig.addPassthroughCopy("src/js/**/*.js")
+ eleventyConfig.addPassthroughCopy({ "static": "/" })
return {
htmlTemplateEngine: "njk",
diff --git a/src/css/4-modules/_banner.scss b/src/css/4-modules/_banner.scss
index 90a4ce9..840e910 100644
--- a/src/css/4-modules/_banner.scss
+++ b/src/css/4-modules/_banner.scss
@@ -2,11 +2,41 @@
// == Banner with hands on the side like a protest sign
// -----------------------------------------------------------
+$banner-margin-inline: clamp(.5rem, 2vw, 4rem);
+$banner-padding: clamp(2.5rem, 5vw, 7rem);
+
.banner {
+ position: relative;
min-height: calc(70vh - 7rem);
min-height: calc(70dvh - 7rem);
- padding: 6rem;
- margin: 0 3.5rem;
+ padding: $banner-padding;
+ margin: 0 $banner-margin-inline;
background-color: $color-bg-1;
box-shadow: 0 2.2rem 2.1rem rgb(175 157 158 / 30%);
}
+
+.banner::before,
+.banner::after {
+ position: absolute;
+ top: 50%;
+ width: calc($banner-margin-inline * 1.5 + $banner-padding);
+ height: 50%;
+ background-position-y: center;
+ background-repeat: no-repeat;
+ background-size: 100% auto;
+ content: "";
+}
+
+.banner::before {
+ left: calc($banner-margin-inline * -1);
+ background-image: url("/img/hand-left.svg");
+ background-position-x: left;
+ transform: translateY(-45%);
+}
+
+.banner::after {
+ right: calc($banner-margin-inline * -1);
+ background-image: url("/img/hand-right.svg");
+ background-position-x: right;
+ transform: translateY(-60%);
+}
diff --git a/static/img/hand-left.svg b/static/img/hand-left.svg
new file mode 100644
index 0000000..3fc69b6
--- /dev/null
+++ b/static/img/hand-left.svg
@@ -0,0 +1 @@
+
diff --git a/static/img/hand-right.svg b/static/img/hand-right.svg
new file mode 100644
index 0000000..29817b7
--- /dev/null
+++ b/static/img/hand-right.svg
@@ -0,0 +1 @@
+