Demo collections noir
<main>
<!-- The only function of the SVG is to provide a custom filter -->
<svg viewBox="0 0 1000 800">
<defs>
<filter
id="wax"
width="1.1839064"
height="1.1839064"
x="-0.091953214"
y="-0.091953214"
color-interpolation-filters="sRGB"
>
<feGaussianBlur
id="feGaussianBlur3"
result="result1"
in="SourceGraphic"
stdDeviation="2"
/>
<feTurbulence
id="feTurbulence3"
result="result0"
numOctaves="5"
baseFrequency="0.05"
type="fractalNoise"
/>
<feDisplacementMap
id="feDisplacementMap3"
result="result2"
scale="10"
yChannelSelector="G"
xChannelSelector="R"
in="result1"
in2="result0"
/>
<feColorMatrix
id="feColorMatrix3"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 10 0 "
result="result3"
/>
<feBlend
id="feBlend3"
mode="multiply"
in="result2"
result="result5"
in2="result3"
/>
<feGaussianBlur
id="feGaussianBlur4"
result="result4"
in="result3"
stdDeviation="5"
/>
<feComposite
id="feComposite4"
k1="0.5"
k3="1.5"
k2="0.15"
in="result4"
in2="result5"
operator="arithmetic"
result="result6"
k4="0"
/>
<feComposite
id="feComposite5"
operator="in"
in="result6"
in2="result4"
/>
</filter>
</defs>
</svg>
<nav>
<ul>
<li><a href="">Demos</a></li>
<li aria-current="page"><a href="">Collections</a></li>
</ul>
</nav>
<ol class="collection-list">
<li>
<div class="covers">
<img
src="img/placeholder.svg"
alt="a generic placeholder image"
decoding="async"
width="800"
height="800" eleventy:ignore />
<img
src="img/placeholder.svg"
alt="a generic placeholder image"
decoding="async"
width="800"
height="800" eleventy:ignore />
</div>
<h2>
<a href="#">Alternative Book Covers</a><span class="count">(3)</span>
</h2>
<p class="description">
Creating alternative covers for books that I've read.
</p>
</li>
<li>
<div class="covers">
<img
src="img/placeholder.svg"
alt="a generic placeholder image"
decoding="async"
width="800"
height="800" eleventy:ignore />
<img
src="img/placeholder.svg"
alt="a generic placeholder image"
decoding="async"
width="800"
height="800" eleventy:ignore />
</div>
<h2><a href="#">Art Addendums</a><span class="count">(7)</span></h2>
<p class="description">Adding my own twist to works of art.</p>
</li>
<li>
<div class="covers">
<img
src="img/placeholder.svg"
alt="a generic placeholder image"
decoding="async"
width="800"
height="800" eleventy:ignore />
<img
src="img/placeholder.svg"
alt="a generic placeholder image"
decoding="async"
width="800"
height="800" eleventy:ignore />
</div>
<h2>
<a href="#">Title Sequences</a><span class="count">(15)</span>
</h2>
<p class="description">
Recreating title sequences from TV shows and movies as web animations.
</p>
</li>
<li>
<div class="covers">
<img
src="img/placeholder.svg"
alt="a generic placeholder image"
decoding="async"
width="800"
height="800" eleventy:ignore />
<img
src="img/placeholder.svg"
alt="a generic placeholder image"
decoding="async"
width="800"
height="800" eleventy:ignore />
</div>
<h2><a href="#">Arifice</a><span class="count">(43)</span></h2>
<p class="description">Experiments & exercises to improve web dev trickery.</p>
</li>
</ol>
</main> @font-face {
font-family: "Road Rage";
src: url(./RoadRage-Regular.woff2);
font-weight: 400;
font-display: swap;
}
* {
box-sizing: border-box;
}
body {
--bg-color: hsla(0, 0%, 10%, 0.7);
min-height: 100dvh;
margin: 0;
display: grid;
place-items: center;
background-color: var(--bg-color);
background-image: url("img/paper.webp");
background-size: cover;
background-blend-mode: soft-light;
font-family: "Open Sans", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
sans-serif;
line-height: 1.25;
}
a {
color: inherit;
text-underline-offset: 0.3rem;
text-decoration-thickness: 0.05rem;
}
main {
max-width: 800px;
margin: 3rem 1.5rem;
}
svg {
position: absolute;
width: 0;
height: 0;
}
nav ul {
position: relative;
left: -0.75rem;
padding: 0;
margin-block-end: 2rem;
list-style-type: none;
li {
position: relative;
display: inline-block;
padding: 0.5rem;
a {
text-decoration: none;
}
}
li::after {
content: "";
display: block;
width: 110%;
height: 2.5rem;
position: absolute;
translate: -10% -75%;
z-index: -1;
}
li[aria-current="page"]::after {
border: 2px solid black;
filter: url(#wax);
}
}
.collection-list {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
column-gap: 3rem;
row-gap: 4rem;
li {
--padding-inline: 0.75rem;
--bg-color: hsl(0, 0%, 15%);
aspect-ratio: 5 / 4;
position: relative;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto 1fr;
background-color: var(--bg-color);
color: #cccccc;
&::before {
--width: 2.5%;
content: "";
display: block;
position: absolute;
top: calc(var(--width) * -1);
left: calc(var(--width) * -1);
width: calc(100% + (var(--width) * 2));
aspect-ratio: inherit;
background-color: white;
filter: url(#wax);
z-index: -1;
}
.covers {
display: flex;
border: 0.05rem solid hsl(0, 0%, 85%);
border-block-end: none;
img {
display: block;
max-width: 100%;
width: 50%;
height: auto;
}
}
h2 {
margin-block-start: 0.5rem;
margin-block-end: 1rem;
padding-inline: var(--padding-inline);
font-family: "Road Rage", sans-serif;
font-size: 1.5rem;
font-weight: 400;
color: hsl(0, 0%, 85%);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.count {
padding-inline-start: 0.25rem;
font-size: 0.9rem;
}
}
.description {
margin: 0;
margin-block-end: 0.5rem;
padding-inline: var(--padding-inline);
}
}
} Description
An alternative layout of the demo collections page for my website. I wanted to incorporate a writerly vibe with a dark color scheme. Each demo collection card has a paper background with frayed edges. The marker for the tabbed navigation has a blotchy ink texture.
The font that I am using for the card headings is Road Rage. It has a bit of the Zodiac killer feel to it! Probably not suitable here, but I didn’t want to iterate on this further.