<blockquote class="handpuppet">
<p>
We know things are bad - worse than bad. They're crazy. It's like everything
everywhere is going crazy, so we don't go out anymore. We sit in the house,
and slowly the world we are living in is getting smaller, and all we say is:
'Please, at least leave us alone in our living rooms. Let me have my toaster
and my TV and my steel-belted radials and I won't say anything. Just leave
us alone.'
</p>
<p>
Well, I'm not gonna leave you alone. I want you to get MAD! I don't want you
to protest. I don't want you to riot - I don't want you to write to your
congressman, because I wouldn't know what to tell you to write. I don't know
what to do about the depression and the inflation and the Russians and the
crime in the street. All I know is that first you've got to get mad.
(shouting) You've got to say: 'I'm a human being, god-dammit! My life has
value!'
</p>
</blockquote>
@font-face {
font-family: "Indie Flower";
src: url("fonts/IndieFlower-Regular.ttf");
font-display: swap;
}
body {
height: 100dvh;
display: grid;
place-items: center;
background-color: #d9e7f9;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='72' viewBox='0 0 36 72'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23203ad5' fill-opacity='0.03'%3E%3Cpath d='M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.handpuppet {
max-width: 600px;
font-family: "Indie Flower", serif;
line-height: 1.5;
font-size: 1.35rem;
}
/* image source: https://thenounproject.com/search/?q=hand+puppet&i=3749419 */
.handpuppet::before {
content: "";
float: left;
width: 10rem;
height: 10rem;
display: block;
background-image: url(img/handpuppet.svg);
background-position: 100% 0;
background-size: 10rem 10rem;
background-repeat: no-repeat;
/* chrome doesn't create a shape with url() for this image, so
use polygon instead */
shape-outside: url(img/handpuppet.svg);
-webkit-shape-outside: polygon(
87.78% 10px,
87.23% 28.33%,
88.71% 60.59%,
52.26% 64.44%,
53.89% 98.89%,
0px 100%,
0px 0px
);
shape-margin: 0.6rem;
}
A hand puppet is spouting a quote. Why not?
An excuse to play with the shape-outside
property to float text around the image. Chrome doesn’t create the shape with url()
for this image, so I used polygon()
instead to duplicate the outline of the image.