Created
May 28, 2026 02:46
-
-
Save philwilt/92bb01b2fcbdb4cfafd50861e749663a to your computer and use it in GitHub Desktop.
Megans ESS Bookmark
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Eastside Soil Solutions — Compost Bookmark</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Lato:wght@300;400;700&display=swap" rel="stylesheet"> | |
| <style> | |
| /* ── Screen layout ── */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| background: #d6cfc4; | |
| font-family: 'Lato', sans-serif; | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| align-items: flex-start; | |
| gap: 48px; | |
| padding: 48px 32px; | |
| } | |
| .side-wrapper { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .side-label { | |
| font-family: 'Lato', sans-serif; | |
| font-size: 11px; | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| color: #7a6a58; | |
| } | |
| /* ── Bookmark shell ── */ | |
| .bookmark { | |
| width: 2in; | |
| height: 7in; | |
| border-radius: 6px; | |
| overflow: hidden; | |
| box-shadow: 0 6px 28px rgba(0,0,0,0.28); | |
| position: relative; | |
| } | |
| /* ══════════════════════════════ | |
| SIDE 1 — Extract Instructions | |
| ══════════════════════════════ */ | |
| /* ── Hole indicator (top of each side) ── */ | |
| .hole-zone { | |
| width: 100%; | |
| height: 36px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| } | |
| .hole-circle { | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| border: 1.5px dashed rgba(92,50,17,0.35); | |
| background: rgba(92,50,17,0.07); | |
| } | |
| .hole-circle-light { | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| border: 1.5px dashed rgba(251,246,238,0.35); | |
| background: rgba(251,246,238,0.08); | |
| } | |
| .side1 { | |
| width: 100%; | |
| height: 100%; | |
| background: #FBF6EE; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 0 14px 14px; | |
| } | |
| .side1 .logo { | |
| width: 148px; | |
| display: block; | |
| } | |
| .side1 .rule { | |
| width: 85%; | |
| height: 1px; | |
| background: #5C3211; | |
| opacity: 0.25; | |
| margin: 10px 0 8px; | |
| } | |
| .side1 h2 { | |
| font-family: 'Playfair Display', serif; | |
| color: #5C3211; | |
| font-size: 13.5px; | |
| font-weight: 700; | |
| text-align: center; | |
| line-height: 1.35; | |
| margin-bottom: 12px; | |
| letter-spacing: 0.2px; | |
| } | |
| .steps { | |
| list-style: none; | |
| width: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 7px; | |
| } | |
| .step { | |
| display: flex; | |
| gap: 8px; | |
| align-items: flex-start; | |
| } | |
| .num { | |
| background: #5C3211; | |
| color: #FBF6EE; | |
| border-radius: 50%; | |
| min-width: 18px; | |
| height: 18px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 9.5px; | |
| font-weight: 700; | |
| flex-shrink: 0; | |
| margin-top: 1px; | |
| } | |
| .step p { | |
| font-size: 9px; | |
| color: #3A2010; | |
| line-height: 1.55; | |
| } | |
| .side1-footer { | |
| margin-top: auto; | |
| padding-top: 10px; | |
| border-top: 1px solid rgba(92,50,17,0.2); | |
| width: 100%; | |
| text-align: center; | |
| font-style: italic; | |
| font-size: 8.5px; | |
| color: #7A5038; | |
| line-height: 1.5; | |
| } | |
| /* ══════════════════════════════ | |
| SIDE 2 — Brand / Marketing | |
| ══════════════════════════════ */ | |
| .side2 { | |
| width: 100%; | |
| height: 100%; | |
| background: #5C3211; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 0 16px 18px; | |
| text-align: center; | |
| } | |
| .side2 .tagline { | |
| font-family: 'Playfair Display', serif; | |
| color: #FBF6EE; | |
| font-size: 20px; | |
| font-weight: 700; | |
| line-height: 1.25; | |
| margin-bottom: 14px; | |
| } | |
| .side2 .rule { | |
| width: 55%; | |
| height: 1px; | |
| background: rgba(251,246,238,0.3); | |
| margin-bottom: 14px; | |
| } | |
| .side2 .nerds { | |
| font-family: 'Lato', sans-serif; | |
| font-style: italic; | |
| font-weight: 300; | |
| color: #E8D5BE; | |
| font-size: 10px; | |
| line-height: 1.55; | |
| margin-bottom: 16px; | |
| } | |
| .side2 .grade-label { | |
| font-family: 'Lato', sans-serif; | |
| font-size: 8px; | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| color: rgba(251,246,238,0.55); | |
| margin-bottom: 5px; | |
| } | |
| .side2 .grade { | |
| font-family: 'Lato', sans-serif; | |
| font-size: 11px; | |
| font-weight: 700; | |
| color: #FBF6EE; | |
| letter-spacing: 0.5px; | |
| margin-bottom: 5px; | |
| } | |
| .side2 .valley { | |
| font-family: 'Lato', sans-serif; | |
| font-size: 9.5px; | |
| font-weight: 300; | |
| color: #E8D5BE; | |
| font-style: italic; | |
| margin-bottom: 4px; | |
| } | |
| .side2 .thanks { | |
| font-family: 'Lato', sans-serif; | |
| font-size: 9px; | |
| color: rgba(251,246,238,0.7); | |
| margin-bottom: 0; | |
| } | |
| .qr-block { | |
| margin-top: auto; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 7px; | |
| } | |
| .qr-block img.qr { | |
| width: 84px; | |
| height: 84px; | |
| background: white; | |
| padding: 5px; | |
| border-radius: 5px; | |
| } | |
| .qr-note { | |
| font-size: 7.5px; | |
| color: #E8D5BE; | |
| line-height: 1.5; | |
| letter-spacing: 0.2px; | |
| } | |
| .side2 .logo-bottom { | |
| margin-top: 14px; | |
| width: 130px; | |
| opacity: 0.55; | |
| filter: brightness(0) invert(1); | |
| } | |
| /* ── Print styles ── */ | |
| @media print { | |
| @page { size: 2in 7in; margin: 0; } | |
| body { | |
| background: none; | |
| padding: 0; | |
| gap: 0; | |
| display: block; | |
| } | |
| .side-label { display: none; } | |
| .side-wrapper { | |
| display: block; | |
| page-break-after: always; | |
| } | |
| .bookmark { | |
| width: 2in; | |
| height: 7in; | |
| border-radius: 0; | |
| box-shadow: none; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- ── SIDE 1 ── --> | |
| <div class="side-wrapper"> | |
| <div class="side-label">Side 1 — Print Instructions</div> | |
| <div class="bookmark"> | |
| <div class="side1"> | |
| <div class="hole-zone"><div class="hole-circle"></div></div> | |
| <img class="logo" | |
| src="https://img1.wsimg.com/isteam/ip/7413d17a-4fe2-45d2-87d0-16e511614421/ess-logo-wa.png" | |
| alt="Eastside Soil Solutions"> | |
| <div class="rule"></div> | |
| <h2>How to Make<br>Compost Extract</h2> | |
| <ol class="steps"> | |
| <li class="step"> | |
| <div class="num">1</div> | |
| <p>Place ~1 lb of compost in a mesh bag (a paint strainer bag from the hardware store works perfectly).</p> | |
| </li> | |
| <li class="step"> | |
| <div class="num">2</div> | |
| <p>Hold the bag over a bucket and spray with your hose on the shower setting. The water should run dark brown.</p> | |
| </li> | |
| <li class="step"> | |
| <div class="num">3</div> | |
| <p>Spray until the water runs clear, then gently squeeze the bag to capture every last drop of microbe goodness.</p> | |
| </li> | |
| <li class="step"> | |
| <div class="num">4</div> | |
| <p>Apply <em>immediately</em> with a watering can — directly to soil, plants, or lawn.</p> | |
| </li> | |
| <li class="step"> | |
| <div class="num">5</div> | |
| <p>Once an extract is made, the remaining compost can be added to a home compost bin, worm bin, or directly to your garden or indoor plant.</p> | |
| </li> | |
| </ol> | |
| <div class="side1-footer"> | |
| Keep your compost moist between uses.<br>It's alive! | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ── SIDE 2 ── --> | |
| <div class="side-wrapper"> | |
| <div class="side-label">Side 2 — Brand</div> | |
| <div class="bookmark"> | |
| <div class="side2"> | |
| <div class="hole-zone"><div class="hole-circle-light"></div></div> | |
| <p class="tagline">Not Your<br>Mother's<br>Compost.</p> | |
| <div class="rule"></div> | |
| <p class="nerds">We nerded out on soil biology<br>so you don't have to.</p> | |
| <p class="grade-label">✦ craft compost ✦</p> | |
| <p class="grade">Inoculum-Grade</p> | |
| <p class="valley">Yakima Valley made.</p> | |
| <p class="thanks">Your garden will thank you.</p> | |
| <div class="qr-block"> | |
| <img class="qr" | |
| src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://eastsidesoilsolutions.com&color=5C3211&bgcolor=FBF6EE" | |
| alt="QR Code — eastsidesoilsolutions.com"> | |
| <div class="qr-note">Scan for more ways<br>to use your compost</div> | |
| </div> | |
| <img class="logo-bottom" | |
| src="https://img1.wsimg.com/isteam/ip/7413d17a-4fe2-45d2-87d0-16e511614421/ess-logo-wa.png" | |
| alt="Eastside Soil Solutions"> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment