Add hand illustrations

.eleventy.js

@@ -5,6 +5,7 @@ module.exports = function (eleventyConfig) {
 
 	eleventyConfig.setServerPassthroughCopyBehavior("passthrough")
 	eleventyConfig.addPassthroughCopy("src/js/**/*.js")
+	eleventyConfig.addPassthroughCopy({ "static": "/" })
 
 	return {
 		htmlTemplateEngine: "njk",

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%);
+}

static/img/hand-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="237" fill="none"><path fill="#C38879" d="M-66.1 221.5c8-11.2-7-66.6 9.6-104 4.9-11.7 14.7-37 15.4-44.2.9-9 10-10.4 13.2-11.1 3.1-.7 5-1.2 6-5.5s5.9-12 20.6-12.6c6-.3 14.7-.4 23.9-.2 3-2 15.3-15.5 21.3-26C51.3 4.7 52.7 4 57.8 2.9c5-1.2 15.6 2 20.2 7a116 116 0 0 1 17 29.3c4.3 10.9 10 22.8 8.8 36.3a75 75 0 0 1-.7 5.6c-2 11.2-6.4 19.9-16.3 14a563 563 0 0 1 1.8 22.4 414.6 414.6 0 0 1 0 24.5c-.1 2.4.8 9.7-1.1 15.3-1.7 5-5.5 8.7-14 6.8-9-2-11.4-15.8-11.9-31.6a144 144 0 0 1-2.8 30c-.6 4.6-.9 8.7-1 11.3 0 2-.7 7-3 10.6-2.3 3.8-6.2 6.3-12.8 3.1-9-4.3-10.6-13.5-10-22-.3 2.3-1.4 5.6-4.3 6.5-1.3.5-2.6.7-4 .7a9 9 0 0 1-2.4-.5L-9.6 259l-56.5-37.4Z"/><path stroke="#997066" stroke-width="2" d="M8.7 60.4C28.9 65.7 58 68.9 61.1 88c1.6 9.8 0 28.2.5 44.5M22.6 44c-9.2-.2-18 0-23.9.2-14.7.7-19.7 8.3-20.6 12.6-1 4.3-2.9 4.8-6 5.5-3.1.7-12.3 2.1-13.2 11.1-.7 7.3-10.5 32.5-15.4 44.2-16.6 37.4-1.7 92.8-9.6 104l56.5 37.4 30.9-86.7M22.6 44c3-2 15.3-15.5 21.3-26C51.3 4.7 52.7 4 57.8 2.9c5-1.2 15.6 2 20.2 7a116 116 0 0 1 17 29.3c4.3 10.9 10 22.8 8.8 36.3a75 75 0 0 1-.7 5.6M22.6 44c12.3.1 25.4.7 33.7 1.6M86.8 95c9.9 6 14.4-2.7 16.3-13.9M56.3 45.5l2.2.2c13.3 1.8 22.7 1.5 25.3 22.3 1 7.7 1.8 15.7 2.6 23M56.3 45.5a41.3 41.3 0 0 1-3.9-20.6m9.2 107.6c.5 15.8 2.8 29.6 11.8 31.6 8.6 1.9 12.4-1.8 14-6.8m-25.8-24.8a144 144 0 0 1-2.8 30m-69.7-81 35.8 9c18 4.6 16 15.6 16 25.5s-3.2 27.4-5 32.6c-.6 1.8-2 6-3 10.9m-42.4-47.1C-7.2 117-3.8 126 4 124c1.6-.2 5.4-1.8 7.5-6.7l-1 3.2m21.7 43.9c-.9 8.7.6 18.6 10 23.1 6.5 3.2 10.4.7 12.7-3m-22.7-20.1c0 2-1 6.5-4.4 7.6-1.3.5-2.6.7-4 .7m8.4-8.3.8-5m-72.7-34.9c13.3 4.9 41.2 10.8 49.5-2.5m.8-1.5a22.2 22.2 0 0 0 2.2 18.3c-2.8 7.8-3.1 20.5 1.4 27.3 2.4 3.5 4.8 5.4 7.2 6.1m-10.8-51.7-.8 1.5M-27 111c7.8 8.7 26.2 23.2 36.6 11m11.6 50.2a9 9 0 0 0 2.4.5m35-10.2c-.5 4.6-.8 8.7-.8 11.3 0 2-.8 7-3 10.6m3.9-22C52 165.6 41.6 174.4 47 180c3.6 3.7 7.2 4.7 7.8 4.5m34-46.4c.2-6.2 0-15.9-.2-20.5-.2-3.8-1-14.1-2.2-26.5m2.5 47-.2 4c-.2 2.4.7 9.7-1.2 15.3m1.4-19.3c-7.1 3.7-20.5 12-17.4 15 3.2 2.9 12 4 16 4.3m-54.6 2.2c-3.9 2.3-11.2 8-9.2 13.2M103 81c-.9-3.2-2.9-9.6-4.3-9.6-1.7 0-11.3 6-11.9 7.5-.5 1.5-.8 9.6-.5 12M-37.1 160c13.5-.5 26.4-2.8 30.7-9.7m-21.5-3.4c4.7-.1 15.5-1.1 21.3-4.3"/></svg>

static/img/hand-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="103" height="266" fill="none"><path fill="#C38879" d="M178 270a74 74 0 0 0-6 32.2l-64.7-24.4c.9-1.4 1.9-8.6-3.1-26.2a916 916 0 0 1-13-67.1c-1 .8-1.7 1.6-2 2.2-2 3.5-1 5.3-2.9 9.4-1.8 4.2-11 24.8-24.3 28.4-3.3 1-5.8.8-7.6.2-4-1.5-5-6-4.7-8.7-7.4 6.9-18.6 4-21.3 1.6-2.8-2.5-8-6.2-.9-23.4l1.8-4.1c1.4-3.7 2.7-7.8 3.9-12.1-9.8 4.8-13 7.3-22.8 2-3.4-1.9-4.8-6.2-5-11.2a71.5 71.5 0 0 1 4.6-24.4c2.2-5.5 8.3-25.6 9.4-33.4.7-4.8 4.3-26 10.3-42-15 11-26.9-6-21-16.6 5.7-10.6 8.9-18.1 19.7-32.8C35.7 14.3 53.5 4 66.2 3c13.1-1 31.3-6 33.3 23.5-.1 10.6.3 34 2.5 43.7l4 1.6c29.4 11.5 37 19 33 29 7.4 1.2 18 4.5 20.5 24.2 3.8 2 6.1 5 8 7.5 3.2 4.5 5.4 9.9 6.1 21.2.6 9 3.7 33.3 5.2 44.3 7.6 51.5 5.6 54.1-.9 72Z"/><path stroke="#997066" stroke-width="2" d="M159.5 124.9c3.8 2 6.1 5 8 7.5 3.2 4.5 5.4 9.9 6.1 21.2.6 9 3.7 33.3 5.2 44.3 7.6 51.5 5.6 54.1-.9 72a74 74 0 0 0-5.8 32.3l-64.8-24.4c.9-1.4 1.9-8.6-3.1-26.2-4-14.1-10.4-50.6-13-67.1m68.3-59.6a20.5 20.5 0 0 0-13.4-1.5c-11.2 2-34.8 4-49.9 5.4m63.3-4c-2.5-19.6-13-22.9-20.5-24.1m0 0-4.5-.8a722 722 0 0 0-63.1-8.1c-25.1-2-23.9 16.2-26.2 24.9-2 7.3-5.7 38-12 61.3M139 100.7c4-10-3.6-17.5-33-29l-4-1.6M33.2 178a137.2 137.2 0 0 1-5.7 16.2m5.7-16.2c-9.8 4.8-13 7.3-22.8 2-3.4-1.9-4.8-6.2-5-11.2M29.7 69c4-10.6 9-18.7 15-17.9l3.8.6M29.7 69.1c-6 15.8-9.6 37.1-10.3 41.9-1.1 7.8-7.2 28-9.4 33.4-1.5 3.6-5 15.2-4.6 24.4M29.7 69c-15 10.9-26.9-6.2-21-16.7 5.7-10.6 8.9-18.1 19.7-32.8C35.7 14.3 53.5 4 66.2 3c13.1-1 31.3-6 33.3 23.5-.1 10.6.3 34 2.5 43.7m0 0C89.7 65.2 75 59 61.2 55m21.3-23.6c-5 6.8-14.4 16.6-21.3 16.4m-12.7 4.1c2.2-.8 6.5-4 6-10 1.6 4.1 4 5.8 6.7 5.9m-12.7 4.1c4 .7 8.3 1.8 12.7 3.1m0-7.2c-.7.7-1.7 3 0 7.2m29.5 64c1.5 1 4.6 4.4 5.5 9.9m0 0-6.2.5c-13.8 1.1-21.2 2.4-22.4 10.2-1.2 7.9-3.3 17.8-4.7 31.4-1 9.1-2.2 20-5 29.5M49.6 216c1-1 1.9-2 2.7-3.2 2.3-3.5 4-7.8 5.4-12.4m-8 15.6c-7.5 6.9-18.7 4-21.4 1.6-2.8-2.5-8-6.2-.9-23.4M49.7 216c-.2 2.8.6 7.2 4.7 8.7m99.2-43.4c-24 6.5-40.6-1.9-49.4-10.3m0 0a33.2 33.2 0 0 1-5.6-7c3.9 10.8-3.5 16.7-7.5 20.5m13.1-13.5c6 .4 20.5-2.2 30.4-15m-13 38.5c7 7.8 7.4 9.5 15.1 13.9a68 68 0 0 1 11.4 7m-57-31-2 2.3c-1.9 3.5-1 5.3-2.8 9.4-1.8 4.2-11 24.8-24.3 28.4-3.3 1-5.8.8-7.6.2m0 0c3.2-5 8.3-17 3.4-24.3m-18.6 12.2c2.5-9.8 3.6-27.1-11.7-18.4m-22-25.4c1.3-5.2 4.7-15.8 7-17.2 2.9-1.7 16.5 7.3 16.3 13.1-.3 5.8 0 7.7-2.1 10M9.4 56.6a39 39 0 0 1 7.5-11.5c2.9-1.8 11.5 5.6 11.1 8.9-.4 3.2 2.1 6-5.4 13M129.8 216c2 4.3 7.4 13.2 12.7 14.3"/></svg>