1<!doctype html> 2<html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>About Brad Frost | Brad Frost</title> 7 <meta name="description" content="I'm Brad Frost, an independent creator, web designer & developer, teacher, speaker, writer, musician, and artist based in Pittsburgh, PA."><link rel="canonical" href="https://bradfrost.com/about/"> 8 9<meta property="og:title" content="About Brad Frost"> 10<meta property="og:description" content="I'm Brad Frost, an independent creator, web designer & developer, teacher, speaker, writer, musician, and artist based in Pittsburgh, PA."> 11<meta property="og:image" content="https://bradfrost.com/wp-content/uploads/2017/08/card-image.png"> 12<meta property="og:url" content="https://bradfrost.com/about/"> 13<meta property="og:type" content="article"> 14<meta property="og:site_name" content="Brad Frost"> 15 16<meta name="twitter:card" content="summary_large_image"> 17<meta name="twitter:title" content="About Brad Frost"> 18<meta name="twitter:description" content="I'm Brad Frost, an independent creator, web designer & developer, teacher, speaker, writer, musician, and artist based in Pittsburgh, PA."> 19<meta name="twitter:image" content="https://bradfrost.com/wp-content/uploads/2017/08/card-image.png"> 20 21 <link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="Brad Frost"> 22 <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> 23 <link rel="icon" type="image/svg+xml" href="/favicon.svg"> 24 <link rel="shortcut icon" href="/favicon.ico"> 25 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> 26 <meta name="apple-mobile-web-app-title" content="Brad Frost"> 27 <link rel="manifest" href="/site.webmanifest"> 28 <link rel="webmention" href="https://webmention.io/bradfrost.com/webmention"> 29 <link rel="pingback" href="https://webmention.io/bradfrost.com/xmlrpc"> 30 <link rel="authorization_endpoint" href="https://indieauth.com/auth"> 31 <link rel="token_endpoint" href="https://tokens.indieauth.com/token"> 32 <link rel="me" href="https://bsky.app/profile/bradfrost.com"> 33 <link rel="me" href="https://www.linkedin.com/in/bradfrost/"> 34 <link rel="me" href="https://www.youtube.com/@brad_frost"> 35 <link rel="me" href="https://www.youtube.com/@CreativeExhaust"> 36 <link rel="me" href="https://mastodon.social/@brad_frost"> 37 <link rel="me" href="https://www.threads.net/@brad_frost"> 38 <link rel="me" href="https://codepen.io/bradfrost/"> 39 <link rel="me" href="https://github.com/bradfrost"> 40 <link rel="me" href="https://www.instagram.com/brad_frost"> 41 42 <meta name="generator" content="Eleventy v3.1.2"> 43 <link rel="preload" href="/eddie/core/fonts/league-gothic-normal-400-latin.woff2" as="font" type="font/woff2" crossorigin=""> 44 <link rel="preload" href="/eddie/core/fonts/montserrat-normal-variable-latin.woff2" as="font" type="font/woff2" crossorigin=""> 45 46 47
47<script> 48 (function(){ 49 var THEMES = ['bfw-dark','bfw-v9','wowee-zowee','we-are-here','altitude','southleft']; 50 var loaded = {}; 51 function add(href, blocking){ 52 var l = document.createElement('link'); 53 l.rel = 'stylesheet'; 54 l.href = href; 55 // A script-inserted stylesheet is NOT render-blocking unless it says 56 // so. Only meaningful if a theme class is already present while the 57 // parser is running (server-rendered, or a restored choice if 58 // persistence ever returns) â never on a switch, where blocking an 59 // already-painted page would freeze it mid-interaction. 60 if (blocking) l.setAttribute('blocking', 'render'); 61 document.head.appendChild(l); 62 } 63 function sync(){ 64 var t = THEMES.find(function(n){ 65 return document.documentElement.classList.contains(n); 66 }); 67 if (!t || loaded[t]) return; 68 loaded[t] = true; 69 var blocking = document.readyState === 'loading'; 70 add('/eddie/themes/' + t + '.css', blocking); 71 add('/eddie/themes/' + t + '/fonts.css', blocking); 72 } 73 sync(); 74 new MutationObserver(sync).observe(document.documentElement, { 75 attributes: true, attributeFilter: ['class'] 76 }); 77 })(); 78 </script>
78 79 80 81 <link rel="stylesheet" href="/eddie/light-dom/text-passage-light-dom.css"> 82 <link rel="stylesheet" href="/eddie/light-dom/link-list-light-dom.css"> 83 <link rel="stylesheet" href="/eddie/light-dom/primary-nav-light-dom.css"> 84 85 86 <style>@font-face { 87 font-family: "League Gothic"; 88 font-style: normal; 89 font-weight: 400; 90 font-stretch: 100%; 91 font-display: swap; 92 src: url("/eddie/core/fonts/league-gothic-normal-400-latin-ext.woff2") format("woff2"); 93 unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; 94} 95@font-face { 96 font-family: "League Gothic"; 97 font-style: normal; 98 font-weight: 400; 99 font-stretch: 100%; 100 font-display: swap; 101 src: url("/eddie/core/fonts/league-gothic-normal-400-latin.woff2") format("woff2"); 102 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 103} 104@font-face { 105 font-family: "Montserrat"; 106 font-style: italic; 107 font-weight: 100 900; 108 font-display: swap; 109 src: url("/eddie/core/fonts/montserrat-italic-variable-latin-ext.woff2") format("woff2"); 110 unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; 111} 112@font-face { 113 font-family: "Montserrat"; 114 font-style: italic; 115 font-weight: 100 900; 116 font-display: swap; 117 src: url("/eddie/core/fonts/montserrat-italic-variable-latin.woff2") format("woff2"); 118 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 119} 120@font-face { 121 font-family: "Montserrat"; 122 font-style: normal; 123 font-weight: 100 900; 124 font-display: swap; 125 src: url("/eddie/core/fonts/montserrat-normal-variable-latin-ext.woff2") format("woff2"); 126 unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; 127} 128@font-face { 129 font-family: "Montserrat"; 130 font-style: normal; 131 font-weight: 100 900; 132 font-display: swap; 133 src: url("/eddie/core/fonts/montserrat-normal-variable-latin.woff2") format("woff2"); 134 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 135} 136:root { 137 --ed-color-brand-mustard-100: #f5f1db; 138 --ed-color-brand-mustard-200: #eae1b3; 139 --ed-color-brand-mustard-300: #dfd18b; 140 --ed-color-brand-mustard-400: #d4c163; 141 --ed-color-brand-mustard-500: #c9b039; 142 --ed-color-brand-mustard-600: #a4902d; 143 --ed-color-brand-mustard-700: #7c6d22; 144 --ed-color-brand-mustard-800: #544a17; 145 --ed-color-brand-mustard-900: #2c270c; 146 --ed-color-brand-brown-100: #f5e6d3; 147 --ed-color-brand-brown-200: #e8d4b8; 148 --ed-color-brand-brown-300: #d4b896; 149 --ed-color-brand-brown-400: #b89468; 150 --ed-color-brand-brown-500: #8b6841; 151 --ed-color-brand-brown-600: #6b4f2e; 152 --ed-color-brand-brown-700: #4a3620; 153 --ed-color-brand-brown-800: #2d2013; 154 --ed-color-brand-brown-900: #110000; 155 --ed-color-brand-cream-100: #fcfcf1; 156 --ed-color-brand-cream-200: #f9f8e8; 157 --ed-color-brand-cream-300: #f6f5de; 158 --ed-color-brand-cream-400: #efeed4; 159 --ed-color-brand-cream-500: #dedcb9; 160 --ed-color-brand-cream-600: #ddd79a; 161 --ed-color-brand-cream-700: #cfc578; 162 --ed-color-brand-cream-800: #a29e5e; 163 --ed-color-brand-cream-900: #8e7d58; 164 --ed-color-brand-orange-100: #ffc175; 165 --ed-color-brand-orange-200: #ffb357; 166 --ed-color-brand-orange-300: #ffa438; 167 --ed-color-brand-orange-400: #ff961a; 168 --ed-color-brand-orange-500: #fa8900; 169 --ed-color-brand-orange-600: #db7900; 170 --ed-color-brand-orange-700: #be6700; 171 --ed-color-brand-orange-800: #9e5600; 172 --ed-color-brand-orange-900: #804600; 173 --ed-color-brand-blue-light-100: #e2f3fe; 174 --ed-color-brand-blue-light-200: #c9e8fd; 175 --ed-color-brand-blue-light-300: #b1defc; 176 --ed-color-brand-blue-light-400: #98d4fb; 177 --ed-color-brand-blue-light-500: #80cafa; 178 --ed-color-brand-blue-light-600: #67bff9; 179 --ed-color-brand-blue-light-700: #4fb4f8; 180 --ed-color-brand-blue-light-800: #36aaf7; 181 --ed-color-brand-blue-light-900: #1e9ff6; 182 --ed-color-brand-blue-dark-100: #e6f0ff; 183 --ed-color-brand-blue-dark-200: #c2deff; 184 --ed-color-brand-blue-dark-300: #8fc3ff; 185 --ed-color-brand-blue-dark-400: #5a9ff5; 186 --ed-color-brand-blue-dark-500: #2d6fd9; 187 --ed-color-brand-blue-dark-600: #1545a8; 188 --ed-color-brand-blue-dark-700: #010a5b; 189 --ed-color-brand-blue-dark-800: #0b0049; 190 --ed-color-brand-blue-dark-900: #00052a; 191 --ed-color-diagram-purple-500: #8a4cef; 192 --ed-color-diagram-orange-500: #f1992a; 193 --ed-color-diagram-gold-500: #ecba40; 194 --ed-color-diagram-green-500: #3bc23b; 195 --ed-color-neutral-100: #f1f1f2; 196 --ed-color-neutral-200: #d0d2d5; 197 --ed-color-neutral-300: #b3b6bb; 198 --ed-color-neutral-400: #9699a0; 199 --ed-color-neutral-500: #7a7e87; 200 --ed-color-neutral-600: #61646b; 201 --ed-color-neutral-700: #484a4f; 202 --ed-color-neutral-800: #313337; 203 --ed-color-neutral-900: #1c1d1f; 204 --ed-color-neutral-white: #ffffff; 205 --ed-color-neutral-black: #000000; 206 --ed-color-utility-green-100: #dcf3ee; 207 --ed-color-utility-green-200: #9fdfcf; 208 --ed-color-utility-green-300: #5dc9af; 209 --ed-color-utility-green-400: #11ad86; 210 --ed-color-utility-green-500: #0e9070; 211 --ed-color-utility-green-600: #0b7058; 212 --ed-color-utility-green-700: #085442; 213 --ed-color-utility-green-800: #063a2e; 214 --ed-color-utility-green-900: #03211a; 215 --ed-color-utility-red-100: #fceaef; 216 --ed-color-utility-red-200: #f8c5d1; 217 --ed-color-utility-red-300: #efa2b2; 218 --ed-color-utility-red-400: #dd7c88; 219 --ed-color-utility-red-500: #cd5a61; 220 --ed-color-utility-red-600: #b82f30; 221 --ed-color-utility-red-700: #8d2121; 222 --ed-color-utility-red-800: #631717; 223 --ed-color-utility-red-900: #390e0e; 224 --ed-color-utility-yellow-100: #f9efbb; 225 --ed-color-utility-yellow-200: #efd242; 226 --ed-color-utility-yellow-300: #dbb305; 227 --ed-color-utility-yellow-400: #be9304; 228 --ed-color-utility-yellow-500: #a57702; 229 --ed-color-utility-yellow-600: #8a5801; 230 --ed-color-utility-yellow-700: #6d3f00; 231 --ed-color-utility-yellow-800: #4b2c00; 232 --ed-color-utility-yellow-900: #2c1900; 233 --ed-color-utility-blue-100: #eceefc; 234 --ed-color-utility-blue-200: #ccd1f6; 235 --ed-color-utility-blue-300: #abb3f0; 236 --ed-color-utility-blue-400: #8792ea; 237 --ed-color-utility-blue-500: #6775e4; 238 --ed-color-utility-blue-600: #4555d3; 239 --ed-color-utility-blue-700: #34409e; 240 --ed-color-utility-blue-800: #242c6e; 241 --ed-color-utility-blue-900: #15193f; 242 --ed-color-transparent-25: #00000040; 243 --ed-color-transparent-90: #000000e5; 244 --ed-theme-color-background-diagram-design: var(--ed-color-diagram-purple-500); 245 --ed-theme-color-background-diagram-repo: var(--ed-color-diagram-orange-500); 246 --ed-theme-color-background-diagram-package: var(--ed-color-diagram-gold-500); 247 --ed-theme-color-background-diagram-product: var(--ed-color-diagram-green-500); 248 --ed-theme-color-background-default: var(--ed-color-brand-cream-300); 249 --ed-theme-color-background-default-hover: var(--ed-color-brand-cream-400); 250 --ed-theme-color-background-subtle: #eeeccd; 251 --ed-theme-color-background-subtle-hover: var(--ed-color-brand-cream-500); 252 --ed-theme-color-background-surface: var(--ed-color-brand-cream-100); 253 --ed-theme-color-background-knockout: var(--ed-color-brand-brown-900); 254 --ed-theme-color-background-brand: var(--ed-color-brand-orange-800); 255 --ed-theme-color-background-brand-hover: var(--ed-color-brand-orange-900); 256 --ed-theme-color-background-brand-disabled: var(--ed-color-brand-orange-100); 257 --ed-theme-color-background-brand-knockout: var(--ed-color-brand-orange-800); 258 --ed-theme-color-background-brand-knockout-hover: var(--ed-color-brand-orange-900); 259 --ed-theme-color-background-accent-1: var(--ed-color-brand-orange-700); 260 --ed-theme-color-background-accent-2: var(--ed-color-brand-blue-light-500); 261 --ed-theme-color-background-accent-3: var(--ed-color-brand-blue-dark-800); 262 --ed-theme-color-background-accent-4: var(--ed-color-brand-mustard-500); 263 --ed-theme-color-background-accent-5: var(--ed-color-brand-brown-900); 264 --ed-theme-color-background-accent-6: var(--ed-color-brand-cream-400); 265 --ed-theme-color-background-accent-7: var(--ed-color-brand-cream-500); 266 --ed-theme-color-background-accent-8: var(--ed-color-brand-cream-800); 267 --ed-theme-color-background-utility-error: var(--ed-color-utility-red-100); 268 --ed-theme-color-background-utility-error-knockout: var(--ed-color-utility-red-600); 269 --ed-theme-color-background-utility-warning: var(--ed-color-utility-yellow-100); 270 --ed-theme-color-background-utility-warning-knockout: var(--ed-color-utility-yellow-600); 271 --ed-theme-color-background-utility-success: var(--ed-color-utility-green-100); 272 --ed-theme-color-background-utility-success-knockout: var(--ed-color-utility-green-600); 273 --ed-theme-color-background-utility-info: var(--ed-color-utility-blue-100); 274 --ed-theme-color-background-utility-info-knockout: var(--ed-color-utility-blue-600); 275 --ed-theme-color-background-dataviz-primary: var(--ed-color-neutral-600); 276 --ed-theme-color-background-dataviz-primary-subtle: var(--ed-color-transparent-25); 277 --ed-theme-color-background-dataviz-secondary: var(--ed-color-neutral-200); 278 --ed-theme-color-background-dataviz-tertiary: var(--ed-color-neutral-400); 279 --ed-theme-color-background-disabled: var(--ed-color-neutral-200);
280 --ed-theme-color-background-transparent: var(--ed-color-transparent-25); 281 --ed-theme-color-background-transparent-strong: var(--ed-color-transparent-90); 282 --ed-theme-color-background-viz-1: var(--ed-theme-color-background-accent-1); 283 --ed-theme-color-background-viz-2: var(--ed-theme-color-background-accent-2); 284 --ed-theme-color-background-viz-3: var(--ed-theme-color-background-accent-3); 285 --ed-theme-color-background-viz-4: var(--ed-theme-color-background-accent-4); 286 --ed-theme-color-background-viz-5: var(--ed-theme-color-background-accent-5); 287 --ed-theme-color-background-viz-6: var(--ed-theme-color-background-accent-6); 288 --ed-theme-color-background-viz-7: var(--ed-theme-color-background-accent-7); 289 --ed-theme-color-background-viz-8: var(--ed-theme-color-background-accent-8); 290 --ed-theme-color-content-on-diagram-design: #ffffff; 291 --ed-theme-color-content-on-diagram-repo: #110000; 292 --ed-theme-color-content-on-diagram-package: #110000; 293 --ed-theme-color-content-on-diagram-product: #110000; 294 --ed-theme-color-content-default: var(--ed-color-brand-brown-900); 295 --ed-theme-color-content-default-hover: var(--ed-color-brand-brown-700); 296 --ed-theme-color-content-subtle: var(--ed-color-brand-orange-800); 297 --ed-theme-color-content-knockout: var(--ed-color-brand-cream-300); 298 --ed-theme-color-content-brand: var(--ed-color-brand-orange-800); 299 --ed-theme-color-content-brand-hover: var(--ed-color-brand-brown-800); 300 --ed-theme-color-content-brand-knockout: var(--ed-theme-color-content-on-brand); 301 --ed-theme-color-content-brand-on-knockout: var(--ed-color-brand-orange-700); 302 --ed-theme-color-content-on-brand: var(--ed-color-brand-cream-300); 303 --ed-theme-color-content-accent-1: var(--ed-color-brand-orange-700); 304 --ed-theme-color-content-accent-2: var(--ed-color-brand-blue-light-500); 305 --ed-theme-color-content-accent-3: var(--ed-color-brand-blue-dark-800); 306 --ed-theme-color-content-accent-4: var(--ed-color-brand-mustard-500); 307 --ed-theme-color-content-accent-5: var(--ed-color-brand-brown-900); 308 --ed-theme-color-content-accent-6: var(--ed-color-brand-cream-400); 309 --ed-theme-color-content-accent-7: var(--ed-color-brand-cream-500); 310 --ed-theme-color-content-accent-8: var(--ed-color-brand-cream-800); 311 --ed-theme-color-content-on-surface: var(--ed-theme-color-content-default); 312 --ed-theme-color-content-on-accent-1: var(--ed-color-brand-brown-900); 313 --ed-theme-color-content-on-accent-2: var(--ed-color-brand-brown-900); 314 --ed-theme-color-content-on-accent-3: var(--ed-color-brand-cream-300); 315 --ed-theme-color-content-on-accent-4: var(--ed-color-brand-brown-900); 316 --ed-theme-color-content-on-accent-5: var(--ed-color-brand-cream-300); 317 --ed-theme-color-content-on-accent-6: var(--ed-color-brand-brown-900); 318 --ed-theme-color-content-on-accent-7: var(--ed-color-brand-brown-900); 319 --ed-theme-color-content-on-accent-8: var(--ed-color-brand-brown-900); 320 --ed-theme-color-content-disabled: var(--ed-color-neutral-600); 321 --ed-theme-color-content-utility-error: var(--ed-color-utility-red-600); 322 --ed-theme-color-content-utility-warning: var(--ed-color-utility-yellow-600); 323 --ed-theme-color-content-utility-success: var(--ed-color-utility-green-600); 324 --ed-theme-color-content-utility-info: var(--ed-color-utility-blue-600); 325 --ed-theme-color-content-viz-label: var(--ed-theme-color-content-default); 326 --ed-theme-color-border-default: var(--ed-color-brand-brown-700); 327 --ed-theme-color-border-default-hover: var(--ed-color-neutral-500); 328 --ed-theme-color-border-subtle: var(--ed-color-brand-cream-800); 329 --ed-theme-color-border-strong: var(--ed-color-neutral-900); 330 --ed-theme-color-border-knockout: var(--ed-color-neutral-400); 331 --ed-theme-color-border-brand: var(--ed-color-brand-orange-700); 332 --ed-theme-color-border-brand-knockout: var(--ed-color-brand-orange-700); 333 --ed-theme-color-border-accent-1: var(--ed-color-brand-orange-700); 334 --ed-theme-color-border-accent-2: var(--ed-color-brand-blue-light-500); 335 --ed-theme-color-border-accent-3: var(--ed-color-brand-blue-dark-800); 336 --ed-theme-color-border-accent-4: var(--ed-color-brand-mustard-500); 337 --ed-theme-color-border-accent-5: var(--ed-color-brand-brown-900); 338 --ed-theme-color-border-accent-6: var(--ed-color-brand-cream-400); 339 --ed-theme-color-border-accent-7: var(--ed-color-brand-cream-500); 340 --ed-theme-color-border-accent-8: var(--ed-color-brand-cream-800); 341 --ed-theme-color-border-on-accent-1: var(--ed-color-brand-cream-500); 342 --ed-theme-color-border-on-accent-2: var(--ed-color-brand-brown-700); 343 --ed-theme-color-border-on-accent-3: var(--ed-color-brand-cream-500); 344 --ed-theme-color-border-on-accent-4: var(--ed-color-brand-brown-700); 345 --ed-theme-color-border-on-accent-5: var(--ed-color-brand-cream-500); 346 --ed-theme-color-border-on-accent-6: var(--ed-color-brand-brown-700); 347 --ed-theme-color-border-on-accent-7: var(--ed-color-brand-brown-700); 348 --ed-theme-color-border-on-accent-8: var(--ed-color-brand-brown-900); 349 --ed-theme-color-border-utility-error: var(--ed-color-utility-red-700); 350 --ed-theme-color-border-utility-warning: var(--ed-color-utility-yellow-700); 351 --ed-theme-color-border-utility-success: var(--ed-color-utility-green-700); 352 --ed-theme-color-border-utility-info: var(--ed-color-utility-blue-700); 353 --ed-theme-color-border-disabled: var(--ed-color-neutral-200); 354 --ed-theme-color-border-viz-axis: var(--ed-theme-color-border-default); 355 --ed-theme-color-border-viz-gridline: var(--ed-theme-color-border-subtle); 356 --ed-theme-color-border-viz-tick: var(--ed-theme-color-border-default); 357 --ed-sidebar-width: 18rem; 358 --ed-spacing-0: 0rem; 359 --ed-spacing-4: 0.25rem; 360 --ed-spacing-8: 0.5rem; 361 --ed-spacing-12: 0.75rem; 362 --ed-spacing-16: 1rem; 363 --ed-spacing-24: 1.5rem; 364 --ed-spacing-32: 2rem; 365 --ed-spacing-40: 2.5rem; 366 --ed-spacing-48: 3rem; 367 --ed-spacing-64: 4rem; 368 --ed-spacing-80: 5rem; 369 --ed-spacing-96: 6rem; 370 --ed-spacing-128: 8rem; 371 --ed-theme-spacing-none: var(--ed-spacing-0); 372 --ed-theme-spacing-xs: var(--ed-spacing-4); 373 --ed-theme-spacing-sm: var(--ed-spacing-8); 374 --ed-theme-spacing-md: var(--ed-spacing-16); 375 --ed-theme-spacing-lg: var(--ed-spacing-24); 376 --ed-theme-spacing-xl: var(--ed-spacing-32); 377 --ed-theme-spacing-xxl: var(--ed-spacing-64); 378 --ed-theme-spacing-region: var(--ed-theme-spacing-xl); 379 --ed-theme-spacing-section: var(--ed-theme-spacing-xxl); 380 --ed-theme-spacing-block: var(--ed-theme-spacing-lg); 381 --ed-theme-spacing-flow: var(--ed-theme-spacing-md); 382 --ed-theme-spacing-field: var(--ed-theme-spacing-lg); 383 --ed-theme-spacing-inline: var(--ed-theme-spacing-sm); 384 --ed-z-index-0: 0; 385 --ed-z-index-100: 100; 386 --ed-z-index-200: 200; 387 --ed-z-index-300: 300; 388 --ed-z-index-400: 400; 389 --ed-z-index-500: 500; 390 --ed-z-index-top: 99999; 391 --ed-z-index-bottom: -100; 392 --ed-theme-layer-sticky: var(--ed-z-index-100); 393 --ed-theme-layer-dropdown: var(--ed-z-index-200); 394 --ed-theme-layer-drawer: var(--ed-z-index-300); 395 --ed-theme-layer-modal: var(--ed-z-index-400); 396 --ed-theme-layer-toast: var(--ed-z-index-500); 397 --ed-theme-typography-viz-label-font-family: var(--ed-theme-typography-display-default-font-family);
398 --ed-theme-typography-viz-label-font-weight: var(--ed-theme-typography-display-default-font-weight); 399 --ed-theme-typography-viz-label-font-size: clamp(10cqi, calc(130cqi / var(--_label-length, 6)), 24cqi); 400 --ed-theme-typography-viz-label-line-height: 1.1; 401 --ed-theme-typography-viz-label-letter-spacing: 0.02em; 402 --ed-theme-typography-viz-label-text-transform: lowercase; 403 --ed-theme-typography-code-font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; 404 --ed-theme-typography-code-font-size: var(--ed-theme-typography-body-sm-font-size); 405 --ed-typography-font-family-league-gothic: League Gothic; 406 --ed-typography-font-family-montserrat: Montserrat; 407 --ed-typography-font-weight-400: 400; 408 --ed-typography-font-weight-700: 700; 409 --ed-typography-font-size-12: 0.75rem; 410 --ed-typography-font-size-14: 0.875rem; 411 --ed-typography-font-size-16: 1rem; 412 --ed-typography-font-size-18: 1.125rem; 413 --ed-typography-font-size-20: 1.25rem; 414 --ed-typography-font-size-24: 1.5rem; 415 --ed-typography-font-size-28: 1.75rem; 416 --ed-typography-font-size-32: 2rem; 417 --ed-typography-font-size-40: 2.5rem; 418 --ed-typography-font-size-48: 3rem; 419 --ed-typography-font-size-56: 3.5rem; 420 --ed-typography-font-size-64: 4rem; 421 --ed-typography-font-size-72: 4.5rem; 422 --ed-typography-font-size-100: 6.25rem; 423 --ed-typography-font-size-176: 11rem; 424 --ed-typography-line-height-16: 1rem; 425 --ed-typography-line-height-20: 1.25rem; 426 --ed-typography-line-height-24: 1.5rem; 427 --ed-typography-line-height-28: 1.75rem; 428 --ed-typography-line-height-32: 2rem; 429 --ed-typography-line-height-36: 2.25rem; 430 --ed-typography-line-height-40: 2.5rem; 431 --ed-typography-line-height-48: 3rem; 432 --ed-typography-line-height-56: 3.5rem; 433 --ed-typography-line-height-64: 4rem; 434 --ed-typography-line-height-72: 4.5rem; 435 --ed-typography-line-height-80: 5rem; 436 --ed-typography-line-height-110: 6.875rem; 437 --ed-typography-line-height-158: 9.875rem; 438 --ed-typography-letter-spacing-0: 0rem; 439 --ed-typography-letter-spacing-2: 0.125rem; 440 --ed-typography-letter-spacing-minus-2: -0.125rem; 441 --ed-typography-letter-spacing-minus-1-half: -0.0938rem; 442 --ed-typography-letter-spacing-minus-1: -0.0625rem; 443 --ed-typography-letter-spacing-minus-half: -0.0313rem; 444 --ed-typography-letter-spacing-half: 0.0313rem; 445 --ed-typography-text-transform-none: none; 446 --ed-typography-text-transform-uppercase: uppercase; 447 --ed-typography-text-transform-lowercase: lowercase; 448 --ed-theme-typography-display-xl-font-family: var(--ed-typography-font-family-league-gothic); 449 --ed-theme-typography-display-xl-font-weight: var(--ed-typography-font-weight-400); 450 --ed-theme-typography-display-xl-font-size: var(--ed-typography-font-size-176); 451 --ed-theme-typography-display-xl-line-height: 0.90; 452 --ed-theme-typography-display-xl-letter-spacing: var(--ed-typography-letter-spacing-0); 453 --ed-theme-typography-display-xl-text-transform: var(--ed-typography-text-transform-lowercase); 454 --ed-theme-typography-display-xl-tablet-font-family: var(--ed-typography-font-family-league-gothic); 455 --ed-theme-typography-display-xl-tablet-font-weight: var(--ed-typography-font-weight-400); 456 --ed-theme-typography-display-xl-tablet-font-size: var(--ed-typography-font-size-100); 457 --ed-theme-typography-display-xl-tablet-line-height: 1.10; 458 --ed-theme-typography-display-xl-tablet-letter-spacing: var(--ed-typography-letter-spacing-0); 459 --ed-theme-typography-display-xl-tablet-text-transform: var(--ed-typography-text-transform-lowercase); 460 --ed-theme-typography-display-xl-mobile-font-family: var(--ed-theme-typography-display-default-font-family); 461 --ed-theme-typography-display-xl-mobile-font-weight: var(--ed-theme-typography-display-default-font-weight); 462 --ed-theme-typography-display-xl-mobile-font-size: var(--ed-typography-font-size-72); 463 --ed-theme-typography-display-xl-mobile-line-height: 1.11; 464 --ed-theme-typography-display-xl-mobile-letter-spacing: var(--ed-typography-letter-spacing-0); 465 --ed-theme-typography-display-xl-mobile-text-transform: var(--ed-theme-typography-display-default-text-transform); 466 --ed-theme-typography-display-lg-font-family: var(--ed-typography-font-family-league-gothic);
467 --ed-theme-typography-display-lg-font-weight: var(--ed-typography-font-weight-400); 468 --ed-theme-typography-display-lg-font-size: var(--ed-typography-font-size-100); 469 --ed-theme-typography-display-lg-line-height: 1.10; 470 --ed-theme-typography-display-lg-letter-spacing: var(--ed-typography-letter-spacing-0); 471 --ed-theme-typography-display-lg-text-transform: var(--ed-typography-text-transform-lowercase); 472 --ed-theme-typography-display-lg-mobile-font-family: var(--ed-theme-typography-display-default-font-family); 473 --ed-theme-typography-display-lg-mobile-font-weight: var(--ed-theme-typography-display-default-font-weight); 474 --ed-theme-typography-display-lg-mobile-font-size: var(--ed-typography-font-size-64); 475 --ed-theme-typography-display-lg-mobile-line-height: 1.13; 476 --ed-theme-typography-display-lg-mobile-letter-spacing: var(--ed-typography-letter-spacing-0); 477 --ed-theme-typography-display-lg-mobile-text-transform: var(--ed-theme-typography-display-default-text-transform); 478 --ed-theme-typography-display-default-font-family: var(--ed-typography-font-family-league-gothic); 479 --ed-theme-typography-display-default-font-weight: var(--ed-typography-font-weight-400); 480 --ed-theme-typography-display-default-font-size: var(--ed-typography-font-size-72); 481 --ed-theme-typography-display-default-line-height: 1.11; 482 --ed-theme-typography-display-default-letter-spacing: var(--ed-typography-letter-spacing-0); 483 --ed-theme-typography-display-default-text-transform: var(--ed-typography-text-transform-lowercase); 484 --ed-theme-typography-display-default-mobile-font-family: var(--ed-theme-typography-display-default-font-family); 485 --ed-theme-typography-display-default-mobile-font-weight: var(--ed-theme-typography-display-default-font-weight); 486 --ed-theme-typography-display-default-mobile-font-size: var(--ed-typography-font-size-56); 487 --ed-theme-typography-display-default-mobile-line-height: 1.14; 488 --ed-theme-typography-display-default-mobile-letter-spacing: var(--ed-typography-letter-spacing-0); 489 --ed-theme-typography-display-default-mobile-text-transform: var(--ed-theme-typography-display-default-text-transform); 490 --ed-theme-typography-headline-lg-font-family: var(--ed-typography-font-family-league-gothic);
491 --ed-theme-typography-headline-lg-font-weight: var(--ed-typography-font-weight-400); 492 --ed-theme-typography-headline-lg-font-size: var(--ed-typography-font-size-64); 493 --ed-theme-typography-headline-lg-line-height: 1.13; 494 --ed-theme-typography-headline-lg-letter-spacing: var(--ed-typography-letter-spacing-0); 495 --ed-theme-typography-headline-lg-text-transform: var(--ed-typography-text-transform-lowercase); 496 --ed-theme-typography-headline-lg-mobile-font-family: var(--ed-theme-typography-headline-lg-font-family); 497 --ed-theme-typography-headline-lg-mobile-font-weight: var(--ed-theme-typography-headline-lg-font-weight); 498 --ed-theme-typography-headline-lg-mobile-font-size: var(--ed-typography-font-size-40); 499 --ed-theme-typography-headline-lg-mobile-line-height: 1.20; 500 --ed-theme-typography-headline-lg-mobile-letter-spacing: var(--ed-typography-letter-spacing-0); 501 --ed-theme-typography-headline-lg-mobile-text-transform: var(--ed-typography-text-transform-lowercase); 502 --ed-theme-typography-headline-default-font-family: var(--ed-typography-font-family-league-gothic); 503 --ed-theme-typography-headline-default-font-weight: var(--ed-typography-font-weight-400); 504 --ed-theme-typography-headline-default-font-size: var(--ed-typography-font-size-48); 505 --ed-theme-typography-headline-default-line-height: 1.17; 506 --ed-theme-typography-headline-default-letter-spacing: var(--ed-typography-letter-spacing-0); 507 --ed-theme-typography-headline-default-text-transform: var(--ed-typography-text-transform-lowercase); 508 --ed-theme-typography-headline-default-mobile-font-family: var(--ed-theme-typography-headline-default-font-family); 509 --ed-theme-typography-headline-default-mobile-font-weight: var(--ed-theme-typography-headline-default-font-weight); 510 --ed-theme-typography-headline-default-mobile-font-size: var(--ed-typography-font-size-40); 511 --ed-theme-typography-headline-default-mobile-line-height: 1.00; 512 --ed-theme-typography-headline-default-mobile-letter-spacing: var(--ed-typography-letter-spacing-0); 513 --ed-theme-typography-headline-default-mobile-text-transform: var(--ed-theme-typography-headline-default-text-transform); 514 --ed-theme-typography-headline-sm-font-family: var(--ed-typography-font-family-league-gothic); 515 --ed-theme-typography-headline-sm-font-weight: var(--ed-typography-font-weight-400); 516 --ed-theme-typography-headline-sm-font-size: var(--ed-typography-font-size-40); 517 --ed-theme-typography-headline-sm-line-height: 1.20; 518 --ed-theme-typography-headline-sm-letter-spacing: var(--ed-typography-letter-spacing-0); 519 --ed-theme-typography-headline-sm-text-transform: var(--ed-typography-text-transform-lowercase); 520 --ed-theme-typography-headline-sm-mobile-font-family: var(--ed-theme-typography-headline-sm-font-family); 521 --ed-theme-typography-headline-sm-mobile-font-weight: var(--ed-theme-typography-headline-sm-font-weight); 522 --ed-theme-typography-headline-sm-mobile-font-size: var(--ed-typography-font-size-32); 523 --ed-theme-typography-headline-sm-mobile-line-height: 1.13; 524 --ed-theme-typography-headline-sm-mobile-letter-spacing: var(--ed-typography-letter-spacing-0); 525 --ed-theme-typography-headline-sm-mobile-text-transform: var(--ed-typography-text-transform-lowercase); 526 --ed-theme-typography-title-lg-font-family: var(--ed-typography-font-family-league-gothic); 527 --ed-theme-typography-title-lg-font-weight: var(--ed-typography-font-weight-400); 528 --ed-theme-typography-title-lg-font-size: var(--ed-typography-font-size-32); 529 --ed-theme-typography-title-lg-line-height: 1.25; 530 --ed-theme-typography-title-lg-letter-spacing: var(--ed-typography-letter-spacing-0); 531 --ed-theme-typography-title-lg-text-transform: var(--ed-typography-text-transform-none); 532 --ed-theme-typography-title-lg-mobile-font-family: var(--ed-theme-typography-title-lg-font-family); 533 --ed-theme-typography-title-lg-mobile-font-weight: var(--ed-theme-typography-title-lg-font-weight); 534 --ed-theme-typography-title-lg-mobile-font-size: var(--ed-typography-font-size-28); 535 --ed-theme-typography-title-lg-mobile-line-height: 1.29; 536 --ed-theme-typography-title-lg-mobile-letter-spacing: var(--ed-typography-letter-spacing-0); 537 --ed-theme-typography-title-lg-mobile-text-transform: var(--ed-typography-text-transform-none); 538 --ed-theme-typography-title-default-font-family: var(--ed-typography-font-family-league-gothic);
539 --ed-theme-typography-title-default-font-weight: var(--ed-typography-font-weight-400); 540 --ed-theme-typography-title-default-font-size: var(--ed-typography-font-size-28); 541 --ed-theme-typography-title-default-line-height: 1.29; 542 --ed-theme-typography-title-default-letter-spacing: var(--ed-typography-letter-spacing-0); 543 --ed-theme-typography-title-default-text-transform: var(--ed-typography-text-transform-none); 544 --ed-theme-typography-title-sm-font-family: var(--ed-typography-font-family-league-gothic); 545 --ed-theme-typography-title-sm-font-weight: var(--ed-typography-font-weight-400); 546 --ed-theme-typography-title-sm-font-size: var(--ed-typography-font-size-24); 547 --ed-theme-typography-title-sm-line-height: 1.33; 548 --ed-theme-typography-title-sm-letter-spacing: var(--ed-typography-letter-spacing-0); 549 --ed-theme-typography-title-sm-text-transform: var(--ed-typography-text-transform-none); 550 --ed-theme-typography-label-lg-font-family: var(--ed-typography-font-family-montserrat); 551 --ed-theme-typography-label-lg-font-weight: var(--ed-typography-font-weight-400); 552 --ed-theme-typography-label-lg-font-size: var(--ed-typography-font-size-20); 553 --ed-theme-typography-label-lg-line-height: 1.40; 554 --ed-theme-typography-label-lg-letter-spacing: var(--ed-typography-letter-spacing-0); 555 --ed-theme-typography-label-lg-text-transform: var(--ed-typography-text-transform-none); 556 --ed-theme-typography-label-default-font-family: var(--ed-typography-font-family-montserrat); 557 --ed-theme-typography-label-default-font-weight: var(--ed-typography-font-weight-400); 558 --ed-theme-typography-label-default-font-size: var(--ed-typography-font-size-16); 559 --ed-theme-typography-label-default-line-height: 1.50; 560 --ed-theme-typography-label-default-letter-spacing: var(--ed-typography-letter-spacing-0); 561 --ed-theme-typography-label-default-text-transform: var(--ed-typography-text-transform-none); 562 --ed-theme-typography-label-sm-font-family: var(--ed-typography-font-family-montserrat); 563 --ed-theme-typography-label-sm-font-weight: var(--ed-typography-font-weight-400); 564 --ed-theme-typography-label-sm-font-size: var(--ed-typography-font-size-14); 565 --ed-theme-typography-label-sm-line-height: 1.43; 566 --ed-theme-typography-label-sm-letter-spacing: var(--ed-typography-letter-spacing-0); 567 --ed-theme-typography-label-sm-text-transform: var(--ed-typography-text-transform-none); 568 --ed-theme-typography-body-xl-font-family: var(--ed-typography-font-family-montserrat); 569 --ed-theme-typography-body-xl-font-weight: var(--ed-typography-font-weight-400); 570 --ed-theme-typography-body-xl-font-size: clamp(1.5rem, 1.167rem + 1.111vw, 2rem); 571 --ed-theme-typography-body-xl-line-height: 1.5; 572 --ed-theme-typography-body-xl-letter-spacing: var(--ed-typography-letter-spacing-0); 573 --ed-theme-typography-body-xl-text-transform: var(--ed-typography-text-transform-none); 574 --ed-theme-typography-body-lg-font-family: var(--ed-typography-font-family-montserrat); 575 --ed-theme-typography-body-lg-font-weight: var(--ed-typography-font-weight-400); 576 --ed-theme-typography-body-lg-font-size: clamp(1.25rem, 1.083rem + 0.556vw, 1.5rem); 577 --ed-theme-typography-body-lg-line-height: 1.5; 578 --ed-theme-typography-body-lg-letter-spacing: var(--ed-typography-letter-spacing-0); 579 --ed-theme-typography-body-lg-text-transform: var(--ed-typography-text-transform-none); 580 --ed-theme-typography-body-default-font-family: var(--ed-typography-font-family-montserrat); 581 --ed-theme-typography-body-default-font-weight: var(--ed-typography-font-weight-400); 582 --ed-theme-typography-body-default-font-size: var(--ed-typography-font-size-16); 583 --ed-theme-typography-body-default-line-height: 1.50; 584 --ed-theme-typography-body-default-letter-spacing: var(--ed-typography-letter-spacing-0); 585 --ed-theme-typography-body-default-text-transform: var(--ed-typography-text-transform-none); 586 --ed-theme-typography-body-sm-font-family: var(--ed-typography-font-family-montserrat); 587 --ed-theme-typography-body-sm-font-weight: var(--ed-typography-font-weight-400); 588 --ed-theme-typography-body-sm-font-size: var(--ed-typography-font-size-14); 589 --ed-theme-typography-body-sm-line-height: 1.43; 590 --ed-theme-typography-body-sm-letter-spacing: var(--ed-typography-letter-spacing-0); 591 --ed-theme-typography-body-sm-text-transform: var(--ed-typography-text-transform-none); 592 --ed-theme-typography-meta-default-font-family: var(--ed-typography-font-family-montserrat);
593 --ed-theme-typography-meta-default-font-weight: var(--ed-typography-font-weight-700); 594 --ed-theme-typography-meta-default-font-size: var(--ed-typography-font-size-14); 595 --ed-theme-typography-meta-default-line-height: 1.43; 596 --ed-theme-typography-meta-default-letter-spacing: var(--ed-typography-letter-spacing-2); 597 --ed-theme-typography-meta-default-text-transform: var(--ed-typography-text-transform-uppercase); 598 --ed-theme-typography-meta-sm-font-family: var(--ed-typography-font-family-montserrat); 599 --ed-theme-typography-meta-sm-font-weight: var(--ed-typography-font-weight-700); 600 --ed-theme-typography-meta-sm-font-size: var(--ed-typography-font-size-12); 601 --ed-theme-typography-meta-sm-line-height: 1.33; 602 --ed-theme-typography-meta-sm-letter-spacing: var(--ed-typography-letter-spacing-2); 603 --ed-theme-typography-meta-sm-text-transform: var(--ed-typography-text-transform-uppercase); 604 --ed-theme-typography-button-lg-font-family: var(--ed-typography-font-family-league-gothic); 605 --ed-theme-typography-button-lg-font-weight: var(--ed-typography-font-weight-400); 606 --ed-theme-typography-button-lg-font-size: var(--ed-typography-font-size-28); 607 --ed-theme-typography-button-lg-line-height: 1.00; 608 --ed-theme-typography-button-lg-letter-spacing: var(--ed-typography-letter-spacing-0); 609 --ed-theme-typography-button-lg-text-transform: var(--ed-typography-text-transform-lowercase); 610 --ed-theme-typography-button-default-font-family: var(--ed-typography-font-family-league-gothic); 611 --ed-theme-typography-button-default-font-weight: var(--ed-typography-font-weight-400); 612 --ed-theme-typography-button-default-font-size: var(--ed-typography-font-size-24); 613 --ed-theme-typography-button-default-line-height: 1.00; 614 --ed-theme-typography-button-default-letter-spacing: var(--ed-typography-letter-spacing-0); 615 --ed-theme-typography-button-default-text-transform: var(--ed-typography-text-transform-lowercase); 616 --ed-theme-typography-button-sm-font-family: var(--ed-typography-font-family-league-gothic); 617 --ed-theme-typography-button-sm-font-weight: var(--ed-typography-font-weight-400); 618 --ed-theme-typography-button-sm-font-size: var(--ed-typography-font-size-24); 619 --ed-theme-typography-button-sm-line-height: 1.00; 620 --ed-theme-typography-button-sm-letter-spacing: var(--ed-typography-letter-spacing-0); 621 --ed-theme-typography-button-sm-text-transform: var(--ed-typography-text-transform-lowercase); 622 --ed-theme-typography-primary-nav-default-font-family: var(--ed-typography-font-family-league-gothic); 623 --ed-theme-typography-primary-nav-default-font-weight: var(--ed-typography-font-weight-400); 624 --ed-theme-typography-primary-nav-default-font-size: var(--ed-typography-font-size-32); 625 --ed-theme-typography-primary-nav-default-line-height: 1.25; 626 --ed-theme-typography-primary-nav-default-letter-spacing: var(--ed-typography-letter-spacing-0); 627 --ed-theme-typography-primary-nav-default-text-transform: var(--ed-typography-text-transform-none); 628 --ed-theme-typography-primary-nav-default-mobile-font-family: var(--ed-theme-typography-title-lg-font-family); 629 --ed-theme-typography-primary-nav-default-mobile-font-weight: var(--ed-theme-typography-title-lg-font-weight); 630 --ed-theme-typography-primary-nav-default-mobile-font-size: var(--ed-typography-font-size-28); 631 --ed-theme-typography-primary-nav-default-mobile-line-height: 1.29; 632 --ed-theme-typography-primary-nav-default-mobile-letter-spacing: var(--ed-typography-letter-spacing-0); 633 --ed-theme-typography-primary-nav-default-mobile-text-transform: var(--ed-typography-text-transform-none); 634 --ed-animation-duration-15: 0.15s; 635 --ed-animation-duration-40: 0.4s; 636 --ed-animation-easing-default: ease; 637 --ed-theme-animation-fade-quick: var(--ed-animation-duration-15); 638 --ed-theme-animation-fade-long: var(--ed-animation-duration-40); 639 --ed-theme-animation-move-quick: var(--ed-animation-duration-15); 640 --ed-theme-animation-move-long: var(--ed-animation-duration-40); 641 --ed-theme-animation-ease: var(--ed-animation-easing-default); 642 --ed-border-radius-0: 0rem; 643 --ed-border-radius-2: 0.125rem; 644 --ed-border-radius-4: 0.25rem; 645 --ed-border-radius-8: 0.5rem; 646 --ed-border-radius-16: 1rem; 647 --ed-border-radius-32: 2rem; 648 --ed-border-radius-full: 62.4375rem; 649 --ed-theme-border-radius-none: var(--ed-border-radius-0); 650 --ed-theme-border-radius-sm: var(--ed-border-radius-0); 651 --ed-theme-border-radius-md: var(--ed-border-radius-0); 652 --ed-theme-border-radius-lg: var(--ed-border-radius-0); 653 --ed-theme-border-radius-round: var(--ed-border-radius-full); 654 --ed-border-width-1: 0.0625rem; 655 --ed-border-width-2: 0.125rem; 656 --ed-border-width-4: 0.25rem; 657 --ed-border-width-8: 0.5rem; 658 --ed-theme-border-width-sm: var(--ed-border-width-1); 659 --ed-theme-border-width-md: var(--ed-border-width-2); 660 --ed-theme-border-width-lg: var(--ed-border-width-4); 661 --ed-theme-border-width-xl: var(--ed-border-width-8); 662 --ed-shadow-sm-x: 0rem; 663 --ed-shadow-sm-y: 0.25rem; 664 --ed-shadow-sm-blur: 0rem; 665 --ed-shadow-sm-spread: -0.125rem; 666 --ed-shadow-md-x: 0rem; 667 --ed-shadow-md-y: 0.5rem; 668 --ed-shadow-md-blur: 0rem; 669 --ed-shadow-md-spread: -0.25rem; 670 --ed-shadow-bold-layer-1-x: 0rem; 671 --ed-shadow-bold-layer-1-y: 0.5rem; 672 --ed-shadow-bold-layer-1-blur: 0rem; 673 --ed-shadow-bold-layer-1-spread: -0.25rem; 674 --ed-shadow-bold-layer-2-x: 0rem; 675 --ed-shadow-bold-layer-2-y: 1rem; 676 --ed-shadow-bold-layer-2-blur: 0rem; 677 --ed-shadow-bold-layer-2-spread: -0.5rem; 678 --ed-shadow-bold-layer-3-x: 0rem; 679 --ed-shadow-bold-layer-3-y: 1.5rem; 680 --ed-shadow-bold-layer-3-blur: 0rem; 681 --ed-shadow-bold-layer-3-spread: -0.75rem; 682 --ed-theme-box-shadow-sm: 0rem 0.25rem 0rem -0.125rem var(--ed-theme-color-background-subtle); 683 --ed-theme-box-shadow-md: 0rem 0.5rem 0rem -0.25rem var(--ed-theme-color-background-subtle); 684 --ed-theme-box-shadow-bold: 0rem 0.5rem 0rem -0.25rem var(--ed-theme-color-background-accent-1), 0rem 1rem 0rem -0.5rem var(--ed-theme-color-background-accent-2), 0rem 1.5rem 0rem -0.75rem var(--ed-theme-color-background-subtle); 685 --ed-theme-shadow-clearance-bold: 0.75rem; 686 --ed-theme-button-color-background-default: var(--ed-color-brand-orange-700); 687 --ed-theme-button-color-background-hover: var(--ed-color-brand-orange-800); 688 --ed-theme-button-color-background-active: var(--ed-color-brand-orange-800); 689 --ed-theme-button-color-background-disabled: var(--ed-color-neutral-300); 690 --ed-theme-button-color-content-default: var(--ed-color-brand-cream-300); 691 --ed-theme-button-color-content-hover: var(--ed-color-brand-cream-300); 692 --ed-theme-button-color-content-active: var(--ed-color-brand-cream-300); 693 --ed-theme-button-color-content-disabled: var(--ed-color-neutral-white); 694 --ed-theme-button-color-border-default: var(--ed-color-brand-orange-700); 695 --ed-theme-button-color-border-hover: var(--ed-color-brand-orange-800); 696 --ed-theme-button-color-border-active: var(--ed-color-brand-orange-800); 697 --ed-theme-button-color-border-disabled: var(--ed-color-neutral-300); 698 --ed-theme-button-primary-color-background-default: var(--ed-color-brand-orange-700); 699 --ed-theme-button-primary-color-background-hover: var(--ed-color-brand-orange-800); 700 --ed-theme-button-primary-color-background-active: var(--ed-color-brand-orange-800); 701 --ed-theme-button-primary-color-background-disabled: var(--ed-color-neutral-300); 702 --ed-theme-button-primary-color-content-default: var(--ed-color-brand-cream-300); 703 --ed-theme-button-primary-color-content-hover: var(--ed-color-brand-cream-300); 704 --ed-theme-button-primary-color-content-active: var(--ed-color-brand-cream-300); 705 --ed-theme-button-primary-color-content-disabled: var(--ed-color-neutral-white); 706 --ed-theme-button-primary-color-border-default: var(--ed-color-brand-orange-700); 707 --ed-theme-button-primary-color-border-hover: var(--ed-color-brand-orange-800); 708 --ed-theme-button-primary-color-border-active: var(--ed-color-brand-orange-800); 709 --ed-theme-button-primary-color-border-disabled: var(--ed-color-neutral-300); 710 --ed-theme-button-bare-color-content-default: var(--ed-color-brand-brown-900); 711 --ed-theme-button-bare-color-content-hover: var(--ed-color-brand-brown-900); 712 --ed-theme-button-bare-color-content-active: var(--ed-color-brand-brown-900); 713 --ed-theme-button-bare-color-content-disabled: var(--ed-color-neutral-700); 714 --ed-theme-focus-ring-color-border-default: var(--ed-color-neutral-black); 715 --ed-theme-focus-ring-color-border-knockout: var(--ed-color-brand-cream-300); 716 --ed-theme-focus-ring-offset: var(--ed-spacing-4); 717 --ed-theme-form-color-background-default: var(--ed-color-neutral-900); 718 --ed-theme-form-color-background-focus: var(--ed-color-neutral-900); 719 --ed-theme-form-color-background-hover: var(--ed-color-neutral-900); 720 --ed-theme-form-color-background-active: var(--ed-color-neutral-900); 721 --ed-theme-form-color-border-default: var(--ed-color-brand-mustard-600); 722 --ed-theme-form-color-border-focus: var(--ed-color-brand-mustard-600); 723 --ed-theme-form-color-border-hover: var(--ed-color-brand-mustard-600); 724 --ed-theme-form-color-border-active: var(--ed-color-brand-mustard-600); 725 --ed-theme-form-color-content-default: var(--ed-color-brand-cream-300); 726 --ed-theme-form-color-content-focus: var(--ed-color-brand-cream-300); 727 --ed-theme-form-color-content-hover: var(--ed-color-brand-cream-300); 728 --ed-theme-form-color-content-active: var(--ed-color-brand-cream-300); 729 --ed-theme-form-color-content-subtle: var(--ed-color-brand-cream-800); 730 --ed-theme-link-color-content-default: var(--ed-color-brand-orange-800); 731 --ed-theme-link-color-content-hover: var(--ed-color-brand-orange-900); 732 --ed-theme-link-color-content-active: var(--ed-color-brand-orange-800); 733 --ed-theme-link-color-content-visited: var(--ed-color-brand-orange-800); 734 --ed-theme-link-color-content-knockout: var(--ed-color-brand-orange-600); 735 --ed-theme-link-color-content-knockout-hover: var(--ed-color-brand-orange-600); 736 --ed-theme-link-color-content-knockout-active: var(--ed-color-brand-orange-600); 737 --ed-theme-link-color-content-knockout-visited: var(--ed-color-brand-orange-600); 738 --ed-theme-progress-color-fill-primary: var(--ed-theme-color-background-brand); 739 --ed-theme-progress-color-fill-success: var(--ed-color-utility-green-600); 740 --ed-theme-progress-color-fill-warning: var(--ed-color-utility-yellow-600); 741 --ed-theme-progress-color-fill-error: var(--ed-color-utility-red-600); 742} 743@charset "UTF-8"; 744/*------------------------------------*\ 745 #BASE (shippable entry) 746\*------------------------------------*/ 747/** 748 * The entry point that compiles to `core/css/base.css` (#1477). 749 * 750 * Eddie has always owned a base layer â `head.scss` pulls in reset, body and 751 * media â but it was reachable only by `@use`-ing the SCSS. A consumer that 752 * inlines plain CSS (an Eleventy site linking `tokens.css` and `utilities.css`, 753 * anything without a Sass build) could not get at it, so every such project 754 * hand-wrote the same box-sizing reset, body background/color, and responsive 755 * image rule. This entry exists so that layer ships as a real artifact, exactly 756 * as `utilities/index.scss` does. 757 * 758 * It deliberately does NOT include the utilities â those already compile to 759 * their own `core/css/utilities.css`, and bundling them here would ship every 760 * utility class twice to anyone loading both. 761 */ 762/*------------------------------------*\ 763 #RESET 764\*------------------------------------*/ 765/** 766 * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/ 767 */ 768*, 769::slotted(*), 770*:before, 771*:after { 772 box-sizing: border-box; 773} 774 775h1, 776h2, 777h3, 778h4, 779h5, 780h6 { 781 margin: 0; 782} 783 784/*------------------------------------*\ 785 #BREAKPOINT VARIABLES 786\*------------------------------------*/ 787:root, 788:host { 789 --size-base-unit: 0.5rem; 790} 791 792/* ------------------------------------*\ 793 #TYPOGRAPHY APPLICATIONS 794\*------------------------------------ */ 795body { 796 font-family: var(--ed-theme-typography-body-default-font-family);
797 font-weight: var(--ed-theme-typography-body-default-font-weight); 798 font-size: var(--ed-theme-typography-body-default-font-size); 799 line-height: var(--ed-theme-typography-body-default-line-height); 800 letter-spacing: var(--ed-theme-typography-body-default-letter-spacing); 801 text-transform: var(--ed-theme-typography-body-default-text-transform); 802 display: flex; 803 flex-direction: column; 804 padding: 0; 805 margin: 0; 806 color: var(--ed-theme-color-content-default); 807 background: var(--ed-theme-color-background-default); 808} 809 810/*------------------------------------*\ 811 #MEDIA 812\*------------------------------------*/ 813/** 814 * Responsive image styling 815 * 1) Allows for images to flex with varying screen size 816 */ 817img { 818 max-width: 100%; 819 height: auto; 820} 821@charset "UTF-8"; 822/*------------------------------------*\ 823 #UTILITIES â shippable bundle 824\*------------------------------------*/ 825/** 826 * Aggregates every Eddie utility-class file into a single stylesheet that 827 * ships as compiled CSS (dist/eddie-design-tokens/core/css/utilities.css). 828 * 829 * Consumers that don't run a Sass build can drop this CSS in directly to get 830 * the `.ed-u-*` utility classes (spacing, display, visibility, typography, 831 * color) in light DOM. Pair it with a theme `tokens.css` so the token-backed 832 * utilities resolve. 833 */ 834/*------------------------------------*\ 835Â Â Â #COLORS UTILITIES 836\*------------------------------------*/ 837/** 838 * Brand text utility class 839 */ 840.ed-u-content-brand-knockout { 841 color: var(--ed-theme-color-content-brand-knockout); 842} 843 844/*------------------------------------*\ 845Â Â Â #DISPLAY UTILITIES 846\*------------------------------------*/ 847/** 848 * Display flex utility class 849 */ 850.ed-u-display-flex { 851 display: flex !important; 852} 853 854/** 855 * Display block utility class 856 */ 857.ed-u-display-block { 858 display: block !important; 859} 860 861/*------------------------------------*\ 862 #BREAKPOINT VARIABLES 863\*------------------------------------*/ 864:root, 865:host { 866 --size-base-unit: 0.5rem; 867} 868 869/*------------------------------------*\ 870 #SPACING UTILITY CLASSES 871\*------------------------------------*/ 872/*------------------------------------*\ 873 #MARGIN 874\*------------------------------------*/ 875/** 876 * Margin none 877 * 1) Forces margin none to 0 878 */ 879.ed-u-margin-none { 880 margin: 0 !important; 881} 882 883/** 884 * Margin small 885 * 1) Forces margin small to 0.5rem 886 */ 887.ed-u-margin-sm { 888 margin: 0.5rem !important; 889} 890 891/** 892 * Margin medium 893 * 1) Forces margin medium to 1rem 894 */ 895.ed-u-margin-md { 896 margin: 1rem !important; 897} 898 899/** 900 * Margin large 901 * 1) Forces margin large to size(3) 902 */ 903.ed-u-margin-lg { 904 margin: 1.5rem !important; 905} 906 907/** 908 * Margin xl 909 * 1) Forces margin xl to 2rem 910 */ 911.ed-u-margin-xl { 912 margin: 2rem !important; 913} 914 915/** 916 * Margin xxl 917 * 1) Forces margin to 4rem 918 */ 919.ed-u-margin-xxl { 920 margin: 4rem !important; 921} 922 923/** 924 * Margin top none 925 * 1) Forces margin top to 0 926 */ 927.ed-u-margin-block-start-none { 928 margin-block-start: 0 !important; 929} 930 931/** 932 * Margin top small 933 * 1) Forces margin top to 0.5rem 934 */ 935.ed-u-margin-block-start-sm { 936 margin-block-start: 0.5rem !important; 937} 938 939/** 940 * Margin top medium 941 * 1) Forces margin top to 1rem 942 */ 943.ed-u-margin-block-start-md { 944 margin-block-start: 1rem !important; 945} 946 947/** 948 * Margin top large 949 * 1) Forces margin top to size(3) 950 */ 951.ed-u-margin-block-start-lg { 952 margin-block-start: 1.5rem !important; 953} 954 955/** 956 * Margin top xl 957 * 1) Forces margin top to 2rem 958 */ 959.ed-u-margin-block-start-xl { 960 margin-block-start: 2rem !important; 961} 962 963/** 964 * Margin top xxl 965 * 1) Forces margin top to 4rem 966 */ 967.ed-u-margin-block-start-xxl { 968 margin-block-start: 4rem !important; 969} 970 971/** 972 * Margin right none 973 * 1) Forces margin right to 0 974 */ 975.ed-u-margin-inline-end-none { 976 margin-inline-end: 0 !important; 977} 978 979/** 980 * Margin right small 981 * 1) Forces margin right to 0.5rem 982 */ 983.ed-u-margin-inline-end-sm { 984 margin-inline-end: 0.5rem !important; 985} 986 987/** 988 * Margin right medium 989 * 1) Forces margin right to 1rem 990 */ 991.ed-u-margin-inline-end-md { 992 margin-inline-end: 1rem !important; 993} 994 995/** 996 * Margin right large 997 * 1) Forces margin right to size(3) 998 */ 999.ed-u-margin-inline-end-lg { 1000 margin-inline-end: 1.5rem !important; 1001} 1002 1003/** 1004 * Margin right xl 1005 * 1) Forces margin right to 2rem 1006 */ 1007.ed-u-margin-inline-end-xl { 1008 margin-inline-end: 2rem !important; 1009} 1010 1011/** 1012 * Margin right xxl 1013 * 1) Forces margin right to 4rem 1014 */ 1015.ed-u-margin-inline-end-xxl { 1016 margin-inline-end: 4rem !important; 1017} 1018 1019/** 1020 * Margin bottom none 1021 * 1) Forces margin bottom to 0 1022 */ 1023.ed-u-margin-block-end-none { 1024 margin-block-end: 0 !important; 1025} 1026 1027/** 1028 * Margin bottom small 1029 * 1) Forces margin bottom to 0.5rem 1030 */ 1031.ed-u-margin-block-end-sm { 1032 margin-block-end: 0.5rem !important; 1033} 1034 1035/** 1036 * Margin bottom medium 1037 * 1) Forces margin bottom to 1rem 1038 */ 1039.ed-u-margin-block-end-md { 1040 margin-block-end: 1rem !important; 1041} 1042 1043/** 1044 * Margin bottom large 1045 * 1) Forces margin bottom to size(3) 1046 */ 1047.ed-u-margin-block-end-lg { 1048 margin-block-end: 1.5rem !important; 1049} 1050 1051/** 1052 * Margin bottom xl 1053 * 1) Forces margin bottom to 2rem 1054 */ 1055.ed-u-margin-block-end-xl { 1056 margin-block-end: 2rem !important; 1057} 1058 1059/** 1060 * Margin bottom xxl 1061 * 1) Forces margin bottom to 4rem 1062 */ 1063.ed-u-margin-block-end-xxl { 1064 margin-block-end: 4rem !important; 1065} 1066 1067/** 1068 * Margin bottom xl 1069 * 1) Forces margin bottom to 2rem on small screens and 4rem on large screens 1070 */ 1071.ed-u-margin-block-end-xl-xxl { 1072 margin-block-end: 2rem !important; 1073} 1074@media all and (min-width: 48rem) { 1075 .ed-u-margin-block-end-xl-xxl { 1076 margin-block-end: 4rem !important; 1077 } 1078} 1079 1080/** 1081 * Margin left none 1082 * 1) Forces margin left to 0 1083 */ 1084.ed-u-margin-inline-start-none { 1085 margin-inline-start: 0 !important; 1086} 1087 1088/** 1089 * Margin left small 1090 * 1) Forces margin left to 0.5rem 1091 */ 1092.ed-u-margin-inline-start-sm { 1093 margin-inline-start: 0.5rem !important; 1094} 1095 1096/** 1097 * Margin left medium 1098 * 1) Forces margin left to 1rem 1099 */ 1100.ed-u-margin-inline-start-md { 1101 margin-inline-start: 1rem !important; 1102} 1103 1104/** 1105 * Margin left large 1106 * 1) Forces margin left to 1.5rem 1107 */ 1108.ed-u-margin-inline-start-lg { 1109 margin-inline-start: 1.5rem !important; 1110} 1111 1112/** 1113 * Margin left xl 1114 * 1) Forces margin left to 2rem 1115 */ 1116.ed-u-margin-inline-start-xl { 1117 margin-inline-start: 2rem !important; 1118} 1119 1120/** 1121 * Margin left xxl 1122 * 1) Forces margin left to 4rem 1123 */ 1124.ed-u-margin-inline-start-xxl { 1125 margin-inline-start: 4rem !important; 1126} 1127 1128/*------------------------------------*\ 1129 #PADDING 1130\*------------------------------------*/ 1131/** 1132 * Padding none 1133 * 1) Forces padding none to 0 1134 */ 1135.ed-u-padding-none { 1136 padding: 0 !important; 1137} 1138 1139/** 1140 * Padding small 1141 * 1) Forces padding small to 0.5rem 1142 */ 1143.ed-u-padding-sm { 1144 padding: 0.5rem !important; 1145} 1146 1147/** 1148 * Padding medium 1149 * 1) Forces padding medium to 1rem 1150 */ 1151.ed-u-padding-md { 1152 padding: 1rem !important; 1153} 1154 1155/** 1156 * Padding large 1157 * 1) Forces padding large to size(3) 1158 */ 1159.ed-u-padding-lg { 1160 padding: 1.5rem !important; 1161} 1162 1163/** 1164 * Padding xl 1165 * 1) Forces padding xl to 2rem 1166 */ 1167.ed-u-padding-xl { 1168 padding: 2rem !important; 1169} 1170 1171/** 1172 * Padding xxl 1173 * 1) Forces padding xxl to 4rem 1174 */ 1175.ed-u-padding-xxl { 1176 padding: 4rem !important; 1177} 1178 1179/** 1180 * Padding top none 1181 * 1) Forces padding top to 0 1182 */ 1183.ed-u-padding-block-start-none { 1184 padding-block-start: 0 !important; 1185} 1186 1187/** 1188 * Padding top small 1189 * 1) Forces padding top to 0.5rem 1190 */ 1191.ed-u-padding-block-start-sm { 1192 padding-block-start: 0.5rem !important; 1193} 1194 1195/** 1196 * Padding top medium 1197 * 1) Forces padding top to 1rem 1198 */ 1199.ed-u-padding-block-start-md { 1200 padding-block-start: 1rem !important; 1201} 1202 1203/** 1204 * Padding top large
1205 * 1) Forces padding top to size(3) 1206 */ 1207.ed-u-padding-block-start-lg { 1208 padding-block-start: 1.5rem !important; 1209} 1210 1211/** 1212 * Padding top xl 1213 * 1) Forces padding top to 2rem 1214 */ 1215.ed-u-padding-block-start-xl { 1216 padding-block-start: 2rem !important; 1217} 1218 1219/** 1220 * Padding top xxl 1221 * 1) Forces padding top xxl to 4rem 1222 */ 1223.ed-u-padding-block-start-xxl { 1224 padding-block-start: 4rem !important; 1225} 1226 1227/** 1228 * Padding right none 1229 * 1) Forces padding right to 0 1230 */ 1231.ed-u-padding-inline-end-none { 1232 padding-inline-end: 0 !important; 1233} 1234 1235/** 1236 * Padding right small 1237 * 1) Forces padding right to 0.5rem 1238 */ 1239.ed-u-padding-inline-end-sm { 1240 padding-inline-end: 0.5rem !important; 1241} 1242 1243/** 1244 * Padding right medium 1245 * 1) Forces padding right to 1rem 1246 */ 1247.ed-u-padding-inline-end-md { 1248 padding-inline-end: 1rem !important; 1249} 1250 1251/** 1252 * Padding right large 1253 * 1) Forces padding right to size(3) 1254 */ 1255.ed-u-padding-inline-end-lg { 1256 padding-inline-end: 1.5rem !important; 1257} 1258 1259/** 1260 * Padding right xl 1261 * 1) Forces padding right to 2rem 1262 */ 1263.ed-u-padding-inline-end-xl { 1264 padding-inline-end: 2rem !important; 1265} 1266 1267/** 1268 * Padding right xxl 1269 * 1) Forces padding right xxl to 4rem 1270 */ 1271.ed-u-padding-inline-end-xxl { 1272 padding-inline-end: 4rem !important; 1273} 1274 1275/** 1276 * Padding bottom none 1277 * 1) Forces padding bottom to 0 1278 */ 1279.ed-u-padding-block-end-none { 1280 padding-block-end: 0 !important; 1281} 1282 1283/** 1284 * Padding bottom small 1285 * 1) Forces padding bottom to 0.5rem 1286 */ 1287.ed-u-padding-block-end-sm { 1288 padding-block-end: 0.5rem !important; 1289} 1290 1291/** 1292 * Padding bottom medium 1293 * 1) Forces padding bottom to 1rem 1294 */ 1295.ed-u-padding-block-end-md { 1296 padding-block-end: 1rem !important; 1297} 1298 1299/** 1300 * Padding bottom large 1301 * 1) Forces padding bottom to size(3) 1302 */ 1303.ed-u-padding-block-end-lg { 1304 padding-block-end: 1.5rem !important; 1305} 1306 1307/** 1308 * Padding bottom xl 1309 * 1) Forces padding bottom to 2rem 1310 */ 1311.ed-u-padding-block-end-xl { 1312 padding-block-end: 2rem !important; 1313} 1314 1315/** 1316 * Padding bottom xxl 1317 * 1) Forces padding bottom xxl to 4rem 1318 */ 1319.ed-u-padding-block-end-xxl { 1320 padding-block-end: 4rem !important; 1321} 1322 1323/** 1324 * Padding left none 1325 * 1) Forces padding left to 0 1326 */ 1327.ed-u-padding-inline-start-none { 1328 padding-inline-start: 0 !important; 1329} 1330 1331/** 1332 * Padding left small 1333 * 1) Forces padding left to 0.5rem 1334 */ 1335.ed-u-padding-inline-start-sm { 1336 padding-inline-start: 0.5rem !important; 1337} 1338 1339/** 1340 * Padding left medium 1341 * 1) Forces padding left to 1rem 1342 */ 1343.ed-u-padding-inline-start-md { 1344 padding-inline-start: 1rem !important; 1345} 1346 1347/** 1348 * Padding left large 1349 * 1) Forces padding left to 1.5rem 1350 */ 1351.ed-u-padding-inline-start-lg { 1352 padding-inline-start: 1.5rem !important; 1353} 1354 1355/** 1356 * Padding left xl 1357 * 1) Forces padding left to 2rem 1358 */ 1359.ed-u-padding-inline-start-xl { 1360 padding-inline-start: 2rem !important; 1361} 1362 1363/** 1364 * Padding left xxl 1365 * 1) Forces padding left xxl to 4rem 1366 */ 1367.ed-u-padding-inline-start-xxl { 1368 padding-inline-start: 4rem !important; 1369} 1370 1371/* ------------------------------------*\ 1372 #TYPOGRAPHY APPLICATIONS 1373\*------------------------------------ */ 1374/* ------------------------------------*\ 1375 #TYPOGRAPHY UTILITY CLASSES 1376\*------------------------------------ */ 1377.ed-u-theme-typography-display-xl { 1378 font-family: var(--ed-theme-typography-display-xl-mobile-font-family) !important; 1379 font-weight: var(--ed-theme-typography-display-xl-mobile-font-weight) !important; 1380 font-size: var(--ed-theme-typography-display-xl-mobile-font-size) !important; 1381 line-height: var(--ed-theme-typography-display-xl-mobile-line-height) !important; 1382 letter-spacing: var(--ed-theme-typography-display-xl-mobile-letter-spacing) !important; 1383 text-transform: var(--ed-theme-typography-display-xl-mobile-text-transform) !important; 1384} 1385@media all and (min-width: 48rem) { 1386 .ed-u-theme-typography-display-xl { 1387 font-family: var(--ed-theme-typography-display-xl-tablet-font-family) !important; 1388 font-weight: var(--ed-theme-typography-display-xl-tablet-font-weight) !important; 1389 font-size: var(--ed-theme-typography-display-xl-tablet-font-size) !important; 1390 line-height: var(--ed-theme-typography-display-xl-tablet-line-height) !important; 1391 letter-spacing: var(--ed-theme-typography-display-xl-tablet-letter-spacing) !important; 1392 text-transform: var(--ed-theme-typography-display-xl-tablet-text-transform) !important; 1393 } 1394} 1395@media all and (min-width: 75rem) { 1396 .ed-u-theme-typography-display-xl { 1397 font-family: var(--ed-theme-typography-display-xl-font-family) !important;
1398 font-weight: var(--ed-theme-typography-display-xl-font-weight) !important; 1399 font-size: var(--ed-theme-typography-display-xl-font-size) !important; 1400 line-height: var(--ed-theme-typography-display-xl-line-height) !important; 1401 letter-spacing: var(--ed-theme-typography-display-xl-letter-spacing) !important; 1402 text-transform: var(--ed-theme-typography-display-xl-text-transform) !important; 1403 } 1404} 1405 1406.ed-u-theme-typography-display-lg { 1407 font-family: var(--ed-theme-typography-display-lg-mobile-font-family) !important; 1408 font-weight: var(--ed-theme-typography-display-lg-mobile-font-weight) !important; 1409 font-size: var(--ed-theme-typography-display-lg-mobile-font-size) !important; 1410 line-height: var(--ed-theme-typography-display-lg-mobile-line-height) !important; 1411 letter-spacing: var(--ed-theme-typography-display-lg-mobile-letter-spacing) !important; 1412 text-transform: var(--ed-theme-typography-display-lg-mobile-text-transform) !important; 1413} 1414@media all and (min-width: 48rem) { 1415 .ed-u-theme-typography-display-lg { 1416 font-family: var(--ed-theme-typography-display-lg-font-family) !important; 1417 font-weight: var(--ed-theme-typography-display-lg-font-weight) !important; 1418 font-size: var(--ed-theme-typography-display-lg-font-size) !important; 1419 line-height: var(--ed-theme-typography-display-lg-line-height) !important; 1420 letter-spacing: var(--ed-theme-typography-display-lg-letter-spacing) !important; 1421 text-transform: var(--ed-theme-typography-display-lg-text-transform) !important; 1422 } 1423} 1424 1425.ed-u-theme-typography-display-default { 1426 font-family: var(--ed-theme-typography-display-default-mobile-font-family) !important; 1427 font-weight: var(--ed-theme-typography-display-default-mobile-font-weight) !important; 1428 font-size: var(--ed-theme-typography-display-default-mobile-font-size) !important; 1429 line-height: var(--ed-theme-typography-display-default-mobile-line-height) !important; 1430 letter-spacing: var(--ed-theme-typography-display-default-mobile-letter-spacing) !important; 1431 text-transform: var(--ed-theme-typography-display-default-mobile-text-transform) !important; 1432} 1433@media all and (min-width: 48rem) { 1434 .ed-u-theme-typography-display-default { 1435 font-family: var(--ed-theme-typography-display-default-font-family) !important; 1436 font-weight: var(--ed-theme-typography-display-default-font-weight) !important; 1437 font-size: var(--ed-theme-typography-display-default-font-size) !important; 1438 line-height: var(--ed-theme-typography-display-default-line-height) !important; 1439 letter-spacing: var(--ed-theme-typography-display-default-letter-spacing) !important; 1440 text-transform: var(--ed-theme-typography-display-default-text-transform) !important; 1441 } 1442} 1443 1444.ed-u-theme-typography-headline-lg { 1445 font-family: var(--ed-theme-typography-headline-lg-mobile-font-family) !important; 1446 font-weight: var(--ed-theme-typography-headline-lg-mobile-font-weight) !important; 1447 font-size: var(--ed-theme-typography-headline-lg-mobile-font-size) !important; 1448 line-height: var(--ed-theme-typography-headline-lg-mobile-line-height) !important; 1449 letter-spacing: var(--ed-theme-typography-headline-lg-mobile-letter-spacing) !important; 1450 text-transform: var(--ed-theme-typography-headline-lg-mobile-text-transform) !important; 1451} 1452@media all and (min-width: 48rem) { 1453 .ed-u-theme-typography-headline-lg { 1454 font-family: var(--ed-theme-typography-headline-lg-font-family) !important;
1455 font-weight: var(--ed-theme-typography-headline-lg-font-weight) !important; 1456 font-size: var(--ed-theme-typography-headline-lg-font-size) !important; 1457 line-height: var(--ed-theme-typography-headline-lg-line-height) !important; 1458 letter-spacing: var(--ed-theme-typography-headline-lg-letter-spacing) !important; 1459 text-transform: var(--ed-theme-typography-headline-lg-text-transform) !important; 1460 } 1461} 1462 1463.ed-u-theme-typography-headline-default { 1464 font-family: var(--ed-theme-typography-headline-default-mobile-font-family) !important; 1465 font-weight: var(--ed-theme-typography-headline-default-mobile-font-weight) !important; 1466 font-size: var(--ed-theme-typography-headline-default-mobile-font-size) !important; 1467 line-height: var(--ed-theme-typography-headline-default-mobile-line-height) !important; 1468 letter-spacing: var(--ed-theme-typography-headline-default-mobile-letter-spacing) !important; 1469 text-transform: var(--ed-theme-typography-headline-default-mobile-text-transform) !important; 1470} 1471@media all and (min-width: 48rem) { 1472 .ed-u-theme-typography-headline-default { 1473 font-family: var(--ed-theme-typography-headline-default-font-family) !important; 1474 font-weight: var(--ed-theme-typography-headline-default-font-weight) !important; 1475 font-size: var(--ed-theme-typography-headline-default-font-size) !important; 1476 line-height: var(--ed-theme-typography-headline-default-line-height) !important; 1477 letter-spacing: var(--ed-theme-typography-headline-default-letter-spacing) !important; 1478 text-transform: var(--ed-theme-typography-headline-default-text-transform) !important; 1479 } 1480} 1481 1482.ed-u-theme-typography-headline-sm { 1483 font-family: var(--ed-theme-typography-headline-sm-mobile-font-family) !important; 1484 font-weight: var(--ed-theme-typography-headline-sm-mobile-font-weight) !important; 1485 font-size: var(--ed-theme-typography-headline-sm-mobile-font-size) !important; 1486 line-height: var(--ed-theme-typography-headline-sm-mobile-line-height) !important; 1487 letter-spacing: var(--ed-theme-typography-headline-sm-mobile-letter-spacing) !important; 1488 text-transform: var(--ed-theme-typography-headline-sm-mobile-text-transform) !important; 1489} 1490@media all and (min-width: 48rem) { 1491 .ed-u-theme-typography-headline-sm { 1492 font-family: var(--ed-theme-typography-headline-sm-font-family) !important; 1493 font-weight: var(--ed-theme-typography-headline-sm-font-weight) !important; 1494 font-size: var(--ed-theme-typography-headline-sm-font-size) !important; 1495 line-height: var(--ed-theme-typography-headline-sm-line-height) !important; 1496 letter-spacing: var(--ed-theme-typography-headline-sm-letter-spacing) !important; 1497 text-transform: var(--ed-theme-typography-headline-sm-text-transform) !important; 1498 } 1499} 1500 1501.ed-u-theme-typography-title-lg { 1502 font-family: var(--ed-theme-typography-title-lg-mobile-font-family) !important; 1503 font-weight: var(--ed-theme-typography-title-lg-mobile-font-weight) !important; 1504 font-size: var(--ed-theme-typography-title-lg-mobile-font-size) !important; 1505 line-height: var(--ed-theme-typography-title-lg-mobile-line-height) !important; 1506 letter-spacing: var(--ed-theme-typography-title-lg-mobile-letter-spacing) !important; 1507 text-transform: var(--ed-theme-typography-title-lg-mobile-text-transform) !important; 1508} 1509@media all and (min-width: 48rem) { 1510 .ed-u-theme-typography-title-lg { 1511 font-family: var(--ed-theme-typography-title-lg-font-family) !important; 1512 font-weight: var(--ed-theme-typography-title-lg-font-weight) !important; 1513 font-size: var(--ed-theme-typography-title-lg-font-size) !important; 1514 line-height: var(--ed-theme-typography-title-lg-line-height) !important; 1515 letter-spacing: var(--ed-theme-typography-title-lg-letter-spacing) !important; 1516 text-transform: var(--ed-theme-typography-title-lg-text-transform) !important; 1517 } 1518} 1519 1520.ed-u-theme-typography-title-default { 1521 font-family: var(--ed-theme-typography-title-default-font-family) !important; 1522 font-weight: var(--ed-theme-typography-title-default-font-weight) !important; 1523 font-size: var(--ed-theme-typography-title-default-font-size) !important; 1524 line-height: var(--ed-theme-typography-title-default-line-height) !important; 1525 letter-spacing: var(--ed-theme-typography-title-default-letter-spacing) !important; 1526 text-transform: var(--ed-theme-typography-title-default-text-transform) !important; 1527} 1528 1529.ed-u-theme-typography-title-sm { 1530 font-family: var(--ed-theme-typography-title-sm-font-family) !important;
1531 font-weight: var(--ed-theme-typography-title-sm-font-weight) !important; 1532 font-size: var(--ed-theme-typography-title-sm-font-size) !important; 1533 line-height: var(--ed-theme-typography-title-sm-line-height) !important; 1534 letter-spacing: var(--ed-theme-typography-title-sm-letter-spacing) !important; 1535 text-transform: var(--ed-theme-typography-title-sm-text-transform) !important; 1536} 1537 1538.ed-u-theme-typography-label-lg { 1539 font-family: var(--ed-theme-typography-label-lg-font-family) !important; 1540 font-weight: var(--ed-theme-typography-label-lg-font-weight) !important; 1541 font-size: var(--ed-theme-typography-label-lg-font-size) !important; 1542 line-height: var(--ed-theme-typography-label-lg-line-height) !important; 1543 letter-spacing: var(--ed-theme-typography-label-lg-letter-spacing) !important; 1544 text-transform: var(--ed-theme-typography-label-lg-text-transform) !important; 1545} 1546 1547.ed-u-theme-typography-label-default { 1548 font-family: var(--ed-theme-typography-label-default-font-family) !important; 1549 font-weight: var(--ed-theme-typography-label-default-font-weight) !important; 1550 font-size: var(--ed-theme-typography-label-default-font-size) !important; 1551 line-height: var(--ed-theme-typography-label-default-line-height) !important; 1552 letter-spacing: var(--ed-theme-typography-label-default-letter-spacing) !important; 1553 text-transform: var(--ed-theme-typography-label-default-text-transform) !important; 1554} 1555 1556.ed-u-theme-typography-label-sm { 1557 font-family: var(--ed-theme-typography-label-sm-font-family) !important; 1558 font-weight: var(--ed-theme-typography-label-sm-font-weight) !important; 1559 font-size: var(--ed-theme-typography-label-sm-font-size) !important; 1560 line-height: var(--ed-theme-typography-label-sm-line-height) !important; 1561 letter-spacing: var(--ed-theme-typography-label-sm-letter-spacing) !important; 1562 text-transform: var(--ed-theme-typography-label-sm-text-transform) !important; 1563} 1564 1565.ed-u-theme-typography-body-lg { 1566 font-family: var(--ed-theme-typography-body-lg-font-family) !important; 1567 font-weight: var(--ed-theme-typography-body-lg-font-weight) !important; 1568 font-size: var(--ed-theme-typography-body-lg-font-size) !important; 1569 line-height: var(--ed-theme-typography-body-lg-line-height) !important; 1570 letter-spacing: var(--ed-theme-typography-body-lg-letter-spacing) !important; 1571 text-transform: var(--ed-theme-typography-body-lg-text-transform) !important; 1572} 1573 1574.ed-u-theme-typography-body-default { 1575 font-family: var(--ed-theme-typography-body-default-font-family) !important; 1576 font-weight: var(--ed-theme-typography-body-default-font-weight) !important; 1577 font-size: var(--ed-theme-typography-body-default-font-size) !important; 1578 line-height: var(--ed-theme-typography-body-default-line-height) !important; 1579 letter-spacing: var(--ed-theme-typography-body-default-letter-spacing) !important; 1580 text-transform: var(--ed-theme-typography-body-default-text-transform) !important; 1581} 1582 1583.ed-u-theme-typography-body-sm { 1584 font-family: var(--ed-theme-typography-body-sm-font-family) !important; 1585 font-weight: var(--ed-theme-typography-body-sm-font-weight) !important; 1586 font-size: var(--ed-theme-typography-body-sm-font-size) !important; 1587 line-height: var(--ed-theme-typography-body-sm-line-height) !important; 1588 letter-spacing: var(--ed-theme-typography-body-sm-letter-spacing) !important; 1589 text-transform: var(--ed-theme-typography-body-sm-text-transform) !important; 1590} 1591 1592.ed-u-theme-typography-button-lg { 1593 font-family: var(--ed-theme-typography-button-lg-font-family) !important; 1594 font-weight: var(--ed-theme-typography-button-lg-font-weight) !important; 1595 font-size: var(--ed-theme-typography-button-lg-font-size) !important; 1596 line-height: var(--ed-theme-typography-button-lg-line-height) !important; 1597 letter-spacing: var(--ed-theme-typography-button-lg-letter-spacing) !important; 1598 text-transform: var(--ed-theme-typography-button-lg-text-transform) !important; 1599} 1600 1601.ed-u-theme-typography-button-default { 1602 font-family: var(--ed-theme-typography-button-default-font-family) !important; 1603 font-weight: var(--ed-theme-typography-button-default-font-weight) !important; 1604 font-size: var(--ed-theme-typography-button-default-font-size) !important; 1605 line-height: var(--ed-theme-typography-button-default-line-height) !important; 1606 letter-spacing: var(--ed-theme-typography-button-default-letter-spacing) !important; 1607 text-transform: var(--ed-theme-typography-button-default-text-transform) !important; 1608} 1609 1610.ed-u-theme-typography-button-sm { 1611 font-family: var(--ed-theme-typography-button-sm-font-family) !important;
1612 font-weight: var(--ed-theme-typography-button-sm-font-weight) !important; 1613 font-size: var(--ed-theme-typography-button-sm-font-size) !important; 1614 line-height: var(--ed-theme-typography-button-sm-line-height) !important; 1615 letter-spacing: var(--ed-theme-typography-button-sm-letter-spacing) !important; 1616 text-transform: var(--ed-theme-typography-button-sm-text-transform) !important; 1617} 1618 1619.ed-u-theme-typography-meta-default { 1620 font-family: var(--ed-theme-typography-meta-default-font-family) !important; 1621 font-weight: var(--ed-theme-typography-meta-default-font-weight) !important; 1622 font-size: var(--ed-theme-typography-meta-default-font-size) !important; 1623 line-height: var(--ed-theme-typography-meta-default-line-height) !important; 1624 letter-spacing: var(--ed-theme-typography-meta-default-letter-spacing) !important; 1625 text-transform: var(--ed-theme-typography-meta-default-text-transform) !important; 1626} 1627 1628.ed-u-theme-typography-meta-sm { 1629 font-family: var(--ed-theme-typography-meta-sm-font-family) !important; 1630 font-weight: var(--ed-theme-typography-meta-sm-font-weight) !important; 1631 font-size: var(--ed-theme-typography-meta-sm-font-size) !important; 1632 line-height: var(--ed-theme-typography-meta-sm-line-height) !important; 1633 letter-spacing: var(--ed-theme-typography-meta-sm-letter-spacing) !important; 1634 text-transform: var(--ed-theme-typography-meta-sm-text-transform) !important; 1635} 1636 1637/*------------------------------------*\ 1638Â Â Â #VISIBILITY UTILITIES 1639\*------------------------------------*/ 1640/* Completely remove from the flow and screen readers. */ 1641.ed-u-is-hidden { 1642 display: none !important; 1643 visibility: hidden !important; 1644} 1645 1646/* Completely remove from the flow but leave available to screen readers. */ 1647.ed-u-is-vishidden { 1648 position: absolute !important; 1649 overflow: hidden; 1650 width: 1px; 1651 height: 1px; 1652 padding: 0; 1653 border: 0; 1654 clip: rect(1px, 1px, 1px, 1px); 1655} 1656 1657/** 1658Â * Hide element at sm breakpoint 1659Â */ 1660@media all and (min-width: 23.4375rem) { 1661 .ed-u-hide-sm { 1662 display: none !important; 1663 } 1664} 1665 1666/** 1667Â * Hide element at md breakpoint 1668Â */ 1669@media all and (min-width: 48rem) { 1670 .ed-u-hide-md { 1671 display: none !important; 1672 } 1673} 1674 1675/** 1676Â * Hide element at lg breakpoint 1677Â */ 1678@media all and (min-width: 60rem) { 1679 .ed-u-hide-lg { 1680 display: none !important; 1681 } 1682} 1683 1684/** 1685Â * Hide element at xl breakpoint 1686Â */ 1687@media all and (min-width: 75rem) { 1688 .ed-u-hide-xl { 1689 display: none !important; 1690 } 1691} 1692 1693/** 1694Â * Show element at sm breakpoint 1695Â */ 1696@media all and (max-width: 23.4375rem) { 1697 .ed-u-show-sm { 1698 display: none !important; 1699 } 1700} 1701 1702/** 1703Â * Show element at md breakpoint 1704Â */ 1705@media all and (max-width: 48rem) { 1706 .ed-u-show-md { 1707 display: none !important; 1708 } 1709} 1710 1711/** 1712Â * Show element at lg breakpoint 1713Â */ 1714@media all and (max-width: 60rem) { 1715 .ed-u-show-lg { 1716 display: none !important; 1717 } 1718} 1719 1720/** 1721Â * Show element at xl breakpoint 1722Â */ 1723@media all and (max-width: 75rem) { 1724 .ed-u-show-xl { 1725 display: none !important; 1726 } 1727} 1728/* Visually-hidden content uses Eddie's shipped `ed-u-is-vishidden` utility 1729 (adoption plan A12 â the utility ships in eddie-design-tokens/core/css/ 1730 utilities.css, inlined in base.njk). The utility has no focus-reveal 1731 variant, so the skip link keeps this one local rule to become visible when 1732 keyboard-focused. Delete when eddie-design-system#1393 ships a 1733 `--focusable` variant. */ 1734#skip-link:focus, 1735#skip-link:focus-visible { 1736 position: static !important; 1737 overflow: visible; 1738 width: auto; 1739 height: auto; 1740 clip: auto; 1741} 1742 1743 1744/* Legacy post content (2007â2016 WordPress era) carries bare fixed-width 1745 <iframe> embeds (YouTube width="560", Slideshare, etc.) that overflow phone 1746 viewports â the widest offender on /blog/post/atomic-web-design/ pushes the 1747 page to 616px at a 375px viewport (#75). Same guard philosophy as the `img` 1748 clamp in Eddie's base.css, which covers images but says nothing about 1749 frames; new embeds go through ed-r-video-embed instead. */ 1750iframe { 1751 max-width: 100%; 1752} 1753 1754/* When the clamp above shrinks a fixed-size legacy video embed, drop its 1755 hardcoded height too so the player keeps its shape instead of letterboxing. */ 1756iframe[src*="youtube.com"], 1757iframe[src*="youtube-nocookie.com"], 1758iframe[src*="vimeo.com"] { 1759 aspect-ratio: 16 / 9; 1760 height: auto; 1761} 1762 1763/* Site shell positioning (#122). The Eddie shell components own the chrome 1764 (ed-page / ed-header / ed-main / ed-footer); these host-level rules keep 1765 bradfrost.com's distinctive header placement â above the content on small 1766 screens, pinned to the top-right at wide widths â until the redesign 1767 decides otherwise. Positioning only, token values only. */ 1768ed-page { 1769 position: relative; 1770} 1771
1772/* 60rem, not 48rem (#156): that's the width the header switches from a bar 1773 with a Menu toggle to a persistent rail. Below it the nav opens directly 1774 beneath the toggle, so floating the header into the corner early would drag 1775 the open menu into the corner with it. */ 1776@media (min-width: 60rem) { 1777 ed-header { 1778 position: absolute; 1779 inset-block-start: 0; 1780 inset-inline-end: var(--ed-theme-spacing-md); 1781 /* orientation="vertical" brings sidebar chrome at â¥60rem â an 18rem- 1782 wide, 100vh-min-height box (eddie-design-system#1367). Tame it for 1783 the corner placement: hug the content width, and let clicks pass 1784 through the empty run below the nav while the logo and nav (the 1785 slotted light-DOM children) stay interactive. */ 1786 --ed-sidebar-width: max-content; 1787 pointer-events: none; 1788 } 1789 1790 ed-header > * { 1791 pointer-events: auto; 1792 } 1793} 1794 1795/* Pre-upgrade guard for Eddie web components (FOUC mitigation). 1796 First-correct-paint arrived (#116): layout-bearing components are 1797 server-rendered to Declarative Shadow DOM at build time (see 1798 _config/eddie-ssr-components.js), so their shadow styles â including 1799 :host{display:block} and the layout-container gutters â apply on the very 1800 first frame, and the geometry-mirroring :not(:defined) guards from #112 are 1801 retired (keeping them would double-apply the gutters). Only enhance-mode 1802 components (real light-DOM markup, no shadow root â #115) still need a 1803 display guard until the autoloader registers them. */ 1804ed-link-list:not(:defined), 1805ed-primary-nav:not(:defined) { 1806 display: block; 1807} 1808 1809/* Site header composition (#156). ed-r-vertical-site-header is Eddie's 1810 canonical composition for this pattern, but it hardcodes 1811 <ed-header orientation="vertical"> with no variant pass-through, so adopting 1812 it would force a knockout (dark) rail onto a bare (transparent) header â 1813 eddie-design-system#1415. This follows the recipe's responsive model and 1814 keeps variant="bare"; project-local per AGENTS.md §2.1.1, and it collapses 1815 onto the recipe once the pass-through ships. Layout and token values only. */ 1816.site-header { 1817 /* ed-header slots this into a flex row, so without an explicit width the 1818 wrapper shrinks to its content and space-between has no free space to 1819 distribute â the Menu button ends up beside the logo instead of at the 1820 header's trailing edge. */ 1821 width: 100%; 1822 display: flex; 1823 flex-wrap: wrap; 1824 align-items: center; 1825 justify-content: space-between; 1826 gap: var(--ed-theme-spacing-sm); 1827} 1828 1829/* Full-width basis is what puts the nav on its own line beneath the logo and 1830 the toggle, rather than beside them â the #156 regression. */ 1831.site-header__nav { 1832 flex-basis: 100%; 1833} 1834 1835/* Hidden until the script sets data-nav-enhanced, so a no-JS visitor is never 1836 offered a control that cannot work (§2.3). */ 1837.site-header__toggle { 1838 display: none; 1839 align-items: center; 1840 gap: var(--ed-theme-spacing-sm); 1841 padding: var(--ed-theme-spacing-sm) var(--ed-theme-spacing-md); 1842 border: var(--ed-theme-border-width-lg) solid currentColor; 1843 border-radius: var(--ed-theme-border-radius-md); 1844 background: transparent; 1845 color: var(--ed-theme-color-content-default); 1846 font-family: var(--ed-theme-typography-button-default-font-family); 1847 font-size: var(--ed-theme-typography-button-default-font-size); 1848 font-weight: var(--ed-theme-typography-button-default-font-weight); 1849 line-height: var(--ed-theme-typography-button-default-line-height); 1850 letter-spacing: var(--ed-theme-typography-button-default-letter-spacing); 1851 text-transform: var(--ed-theme-typography-button-default-text-transform); 1852 cursor: pointer; 1853} 1854 1855/* site-header-js is set on the root element by an inline script that runs 1856 before the header is parsed, so with JS the nav is collapsed on the very 1857 first frame. Correcting it afterwards from the deferred bundle painted the 1858 nav open and then removed it â CLS 0.234 against a 0.1 budget. */ 1859.site-header-js .site-header__toggle { 1860 display: inline-flex; 1861} 1862 1863.site-header-js .site-header__nav { 1864 display: none; 1865} 1866 1867.site-header-js .site-header__nav[data-expanded] {
1868 display: block; 1869} 1870 1871.site-header__toggle:focus-visible { 1872 outline: var(--ed-theme-border-width-lg) solid var(--ed-theme-focus-ring-color-border-default); 1873 /* The bfw theme does not define --ed-theme-offset-focus-ring, though Eddie's 1874 own primary-nav reads it. Token gap filed upstream; the fallback is a 1875 token, not a hardcoded length. */ 1876 outline-offset: var(--ed-theme-offset-focus-ring, var(--ed-theme-spacing-sm)); 1877} 1878 1879@media (min-width: 60rem) { 1880 .site-header { 1881 flex-direction: column; 1882 align-items: flex-start; 1883 } 1884 1885 /* The rail is always open at this width â the toggle and the collapsed 1886 state are small-screen concerns, so neither applies here regardless of 1887 what the visitor last left the menu set to. */ 1888 .site-header-js .site-header__toggle { 1889 display: none; 1890 } 1891 1892 .site-header-js .site-header__nav { 1893 display: block; 1894 } 1895 1896 /* The container is a column here, so flex-basis addresses the main axis â 1897 height, not width. The full-width basis that puts the nav on its own row 1898 at phone width would stretch it vertically instead. */ 1899 .site-header__nav { 1900 flex-basis: auto; 1901 } 1902} 1903 1904ed-main { 1905 display: block; 1906 margin-block-end: 4rem; 1907} 1908 1909/* Homepage portrait sizing (adoption plan A2). The circle itself is Eddie 1910 (ed-image shape="round"); what Eddie can't say yet is "cap this box at 1911 16rem and center it" â there are no ed-u-* sizing utilities and ed-image 1912 has no size prop (both filed upstream). Two layout-only lines, no visual 1913 treatment. Delete when either lands. */ 1914.homepage-portrait { 1915 max-inline-size: 16rem; 1916 margin-inline: auto; 1917 margin-block-end: var(--ed-theme-spacing-xl); 1918} 1919 1920/* Pre-upgrade box reservation for the site notice (#216). 1921 1922 An undefined custom element is display:inline with no box. Most of Eddie 1923 server-renders its shadow root as Declarative Shadow DOM, so the box exists 1924 in the first paint â ed-page, ed-main, ed-layout-container, ed-image, 1925 ed-text-passage and ed-header all do. Two in the notice stack do NOT: 1926 1927 ed-band inline, no padding, no background until JS 1928 ed-media-block inline, so the gif and the passage stack instead of 1929 sitting side by side 1930 1931 Both sit at the very top of every page, so when they upgrade the whole 1932 document below them moves. Lighthouse measured CLS 0.269 against a 0.25 1933 budget on CI and named the cause "Media element lacking an explicit size" 1934 (the construction gif). 1935 1936 Why this was invisible until now: the gate took a single cold sample, and a 1937 cold load paints nothing until every render-blocking resource has arrived â 1938 so the page settled BEFORE first paint and the shift scored zero. #214 made 1939 the page fast enough to paint first and settle after, which is the better 1940 loading behaviour and is what made the shift countable. The movement was 1941 always there; only the fast path shows it. 1942 1943 :not(:defined) stops matching the moment the element upgrades, so these can 1944 never double up with the shadow root's own padding or gap. 1945 1946 The 1.5rem tracks ed-band's own `padding: size(3) 0`. That coupling is the 1947 cost of patching this consumer-side and is exactly why the real fix is 1948 upstream: these components should server-render like their siblings do â 1949 eddie-design-system#1493. Delete this block when that lands. */ 1950ed-band:not(:defined) { 1951 display: block; 1952 /* Reads the SAME custom property the band's own shadow root reads, so the 1953 reserved box and the painted box cannot drift (#218). Until Eddie 0.59.0 1954 this was a hardcoded 1.5rem, which was correct only because 1955 `--ed-band-padding-block` did not exist yet and the notice's declaration 1956 of it was inert. The moment 0.59.0 landed, the notice's 1957 `--ed-band-padding-block: var(--ed-theme-spacing-sm)` started painting a 1958 0.5rem band behind a fallback still reserving 1.5rem â a 2rem shift, and 1959 exactly the defect #216 was opened for. The fallback value stays 1.5rem 1960 to match `ed-band`'s own `size(3)` default for any band that sets 1961 nothing. */ 1962 padding-block: var(--ed-band-padding-block, 1.5rem); 1963} 1964 1965ed-media-block:not(:defined) {
1966 display: flex; 1967 align-items: center; 1968} 1969 1970/* Notice icon sizing. The construction gif carries width/height attributes, 1971 but Eddie's base layer ships `img { max-width: 100%; height: auto }`, which 1972 drops the attribute height and leaves the box to be derived after the bytes 1973 land. State it outright so the row has its height from the first paint â 1974 this is the same #216 CLS reservation the ed-band block above serves. 1975 1976 What Eddie can't say yet is "this slotted media is 2rem": ed-media-block 1977 exposes only --ed-media-block-gap, and caps slotted media with 1978 `max-width: 10rem !important` â filed as eddie-design-system#1826. Two 1979 sizing lines, no visual treatment. Delete when that lands. 1980 1981 Class-scoped, and that scope is the #219 fix, not tidying. As 1982 `ed-media-block > img[slot='media']` it also matched the footer bio photo 1983 below: the two rules tie on specificity (0,1,2), so the later bio rule won 1984 for `block-size`/`height` â but it declares `max-width`, never `width`, and 1985 `max-width` cannot override `inline-size`. The 500x500 portrait took 2rem 1986 of width from here and 10rem of height from its own rule. The 2rem stays 1987 hardcoded because Eddie ships no sizing-token family (same gap 1988 .homepage-portrait names above); a spacing token that happens to equal 2rem 1989 would be the wrong meaning for a raster box. */ 1990.notice-icon { 1991 inline-size: 2rem; 1992 block-size: 2rem; 1993} 1994 1995/* Footer bio photo. ed-avatar can't take this yet â sizes cap at 4rem and 1996 its image can't be slotted, which would bury the u-photo microformat img 1997 in shadow DOM (eddie-design-system#1394). Keep until that lands. 1998 1999 Both axes are stated. Before #219 only `height` was, and the width came 2000 from the source asset happening to be square â so the round crop would 2001 have gone back to an ellipse the day the portrait was replaced with a 2002 non-square file, with nothing to warn anyone (#224). */ 2003ed-footer .h-card img { 2004 display: block; 2005 margin-block-end: 0.5rem; 2006 inline-size: 10rem; 2007 max-width: 10rem; 2008 height: 10rem; 2009 border-radius: 5rem; 2010 box-shadow: var(--ed-theme-shadow-default); 2011} 2012 2013/* Heading anchors (@zachleat/heading-anchors). The heading-anchors element in 2014 base.njk appends a permalink anchor (.ha) after every prose heading and 2015 leaves a .ha-placeholder behind; neither is Eddie, and the component ships no 2016 styles. These rules park the anchor in the heading's left margin and reveal 2017 it on hover/focus. Sizes track the heading scale so the mark matches its 2018 heading. Retire with the component if the redesign drops the affordance. */ 2019:is(h1, h2, h3, h4, h5, h6):has(+ .ha) { 2020 position: relative; 2021} 2022 2023:is(h1, h2, h3, h4, h5, h6) .ha-placeholder { 2024 position: absolute; 2025 inset-block-start: 0; 2026 inset-inline-start: 0; 2027 padding: 0; 2028 opacity: 0 !important; 2029} 2030 2031 2032.ha { 2033 padding-inline: 0; 2034 opacity: 0 !important; 2035 /* Sit flush against the heading's left edge (tiny overlap so there's no 2036 sub-pixel dead zone between heading:hover and .ha:hover -> no flicker). */ 2037 transform: translateX(calc(-100% + 1px)); 2038 transition: opacity 0.15s ease; 2039 font-size: var(--ed-theme-typography-headline-sm-mobile-font-size); 2040} 2041 2042h2 + .ha { font-size: var(--ed-theme-typography-headline-lg-mobile-font-size); } 2043h3 + .ha { font-size: var(--ed-theme-typography-headline-default-mobile-font-size); } 2044h4 + .ha { font-size: var(--ed-theme-typography-headline-sm-mobile-font-size); } 2045 2046:is(h1, h2, h3, h4, h5, h6):hover + .ha, 2047:is(h1, h2, h3, h4, h5, h6):focus-within + .ha, 2048.ha:hover, 2049.ha:focus-visible { 2050 opacity: 1 !important; 2051} 2052 2053@media (min-width: 48rem) { 2054 .ha { font-size: var(--ed-theme-typography-headline-sm-font-size); } 2055 h2 + .ha { font-size: var(--ed-theme-typography-headline-lg-font-size); } 2056 h3 + .ha { font-size: var(--ed-theme-typography-headline-default-font-size); } 2057 h4 + .ha { font-size: var(--ed-theme-typography-headline-sm-font-size); } 2058} 2059 2060/* Post/note publish date. */ 2061.dt-published { 2062 color: var(--ed-theme-color-content-subtle); 2063 display: block; 2064} 2065 2066/* Page header (#131 owner tweaks; shared with listing pages in #158, text 2067 pages in #159). One treatment for every page's h1 â articles, collection 2068 pages, and text pages alike â so the top of the page reads the same 2069 wherever you land. It was `.article-header` when only posts used it. 2070 Documented interim: ed-page-header can't do this yet â no align prop, no 2071 heading typography variant (hardcodes headline-lg), and no slotted-heading 2072 mode (its h1 renders from a prop, so it wouldn't exist without SSR/JS). 2073 Filed upstream; the header is composed from ed-heading (slotted light-DOM 2074 title) until the component catches up (eddie-design-system#1401). Tokens 2075 only; delete when it ships. */ 2076.page-header { 2077 text-align: center; 2078 margin-block-end: var(--ed-theme-spacing-xl); 2079} 2080 2081/* Section nav inside a centered page header (#158). The header's text-align 2082 reaches everything else in the lockup â including the block-level 2083 ed-button, whose inner anchor inherits it through the shadow boundary â 2084 but ed-link-list lays its enhance-mode <ul> out as flex, so text-align 2085 can't touch it. There is no alignment prop on ed-link-list and no 2086 ed-u-text-align-* / ed-u-justify-* utility to reach for; both filed 2087 upstream (eddie-design-system#1448). Delete when either lands. */ 2088.page-header__nav ed-link-list ul { 2089 justify-content: center; 2090} 2091 2092/* Timeline scroll reveal (#158) â the animated treatment the timeline 2093 documents for consumers, as opposed to the built-in motion="draw", which 2094 lazy-loads GSAP. The component ships no animation logic on purpose: it 2095 exposes ::part(marker) / ::part(body) and reacts to an `ed-is-visible` 2096 class the consumer toggles (see the bundled script at the foot of 2097 _includes/postslist-timeline.njk). 2098 2099 The `.timeline-reveal` class is added by that script, not authored in the 2100 template, so the hidden resting state only ever exists when something is 2101 guaranteed to undo it â with JS off, every entry renders. 2102 2103 NOTE: this file is Nunjucks-included into base.njk, so its contents are 2104 PARSED as a template â a Nunjucks tag written literally in a comment here 2105 is a build error, not a comment. Don't name template tags in this file. */
2106.timeline-reveal ed-timeline-node::part(marker) { 2107 opacity: 0; 2108 transform: scale(0); 2109 transition: 2110 opacity var(--ed-theme-animation-fade-long) var(--ed-theme-animation-ease), 2111 transform var(--ed-theme-animation-move-long) var(--ed-theme-animation-ease); 2112} 2113 2114.timeline-reveal ed-timeline-node.ed-is-visible::part(marker) { 2115 opacity: 1; 2116 transform: scale(1); 2117} 2118 2119.timeline-reveal ed-timeline-node::part(body) { 2120 opacity: 0; 2121 transform: translateY(var(--ed-theme-spacing-md)); 2122 transition: 2123 opacity var(--ed-theme-animation-fade-long) var(--ed-theme-animation-ease), 2124 transform var(--ed-theme-animation-move-long) var(--ed-theme-animation-ease); 2125} 2126 2127.timeline-reveal ed-timeline-node.ed-is-visible::part(body) { 2128 opacity: 1; 2129 transform: translateY(0); 2130} 2131 2132@media (prefers-reduced-motion: reduce) { 2133 .timeline-reveal ed-timeline-node::part(marker), 2134 .timeline-reveal ed-timeline-node::part(body) { 2135 opacity: 1; 2136 transform: none; 2137 transition: none; 2138 } 2139} 2140 2141/* Stylized byline (more coming in the redesign): bold + lowercase. */ 2142.page-header .dt-published { 2143 font-weight: var(--ed-theme-typography-meta-default-font-weight); 2144 text-transform: lowercase; 2145} 2146 2147/* Third-party AUDIO embeds (SoundCloud, Spotify). Video and slide embeds moved 2148 to ed-r-video-embed (eddie-design-system#1392, 0.50.0) â see 2149 _config/embed-transform.js â but audio players are deliberately not that 2150 recipe's job: they declare their own height, and the recipe exists to hold a 2151 fixed aspect ratio. ed-r-audio-player isn't it either; that wraps a native 2152 <audio> src, not a third-party iframe. So this stays until an upstream 2153 recipe covers third-party audio embeds. Two rules, no visual treatment. */ 2154.audio-embed { 2155 margin-block: var(--ed-theme-spacing-lg); 2156} 2157 2158.audio-embed iframe { 2159 display: block; 2160 inline-size: 100%; 2161 border: 0; 2162} 2163 2164/* ed-r-theme-customizer pinned to the bottom-left of the viewport (base.njk). 2165 Placement only â the control is entirely Eddie, and its own "Theme" trigger 2166 is a styled ed-button that needs no surface behind it. The recipe's fixed 2167 mode pins top-right and its corner isn't configurable, so the wrapper does 2168 the positioning instead of overriding recipe internals (§2.1). 2169 2170 No stacking context beyond z-index: the customizer's own panel is fixed and 2171 must keep anchoring to the viewport, which a transform or filter here would 2172 silently break. 2173 2174 The z-index must be the DRAWER layer, not an arbitrary low number. Since 2175 Eddie 0.51.0 the recipe's panel is a non-modal ed-drawer, and a non-modal 2176 <dialog> never enters the top layer â so its own z-index only competes 2177 inside whatever stacking context encloses it. This wrapper is that context. 2178 Pinned at 10 it ranked below the site header, and the nav painted straight 2179 through the open drawer. Matching the drawer layer is the fix (#198). */ 2180.theme-customizer-pin { 2181 position: fixed; 2182 inset-block-end: var(--ed-theme-spacing-md); 2183 inset-inline-start: var(--ed-theme-spacing-md); 2184 z-index: var(--ed-theme-layer-drawer); 2185} 2186 2187/* A viewport-pinned control is chrome, not content: it has no place in a 2188 printed page. */ 2189@media print { 2190 .theme-customizer-pin { 2191 display: none; 2192 } 2193} 2194/* Links inside table cells (#179). 2195 2196 A bare <a> slotted into ed-table-cell gets no link styling from Eddie at 2197 all â the cell renders a <td> in its shadow root and styles nothing for 2198 slotted anchors, so /speaking/'s event links fell all the way back to the 2199 UA default (#0000EE on the theme's cream background). Eddie puts link color 2200 in ed-text-passage (prose) and ed-text-link (standalone), and neither fits 2201 here: the passage is for unstructured prose, and ed-text-link renders its 2202 own <a> in shadow DOM with no rel prop, which would drop the 2203 rel="external" every one of these conference links carries. 2204 2205 Documented interim, tokens only, using the same state set ed-text-passage 2206 applies to prose links. Delete when ed-table-cell styles slotted links 2207 itself (eddie-design-system#1495). */ 2208ed-table-cell a { 2209 color: var(--ed-theme-link-color-content-default); 2210} 2211 2212ed-table-cell a:visited { 2213 color: var(--ed-theme-link-color-content-visited); 2214} 2215 2216ed-table-cell a:hover { 2217 color: var(--ed-theme-link-color-content-hover); 2218} 2219 2220ed-table-cell a:active { 2221 color: var(--ed-theme-link-color-content-active); 2222} 2223 2224/* ed-section align="center" leaks into the section BODY (#179). 2225 2226 The prop is documented as "horizontal alignment of the section header 2227 (heading and description)", but the component sets text-align: center on 2228 the whole `.ed-c-section` â so `.ed-c-section__body` computes `center` too, 2229 and it inherits into everything slotted there. On /music/ that centered the 2230 track titles hanging off an alternating timeline instead of leaving them 2231 aligned away from the spine; same leak on /reading/ and /podcasts/. 2232 2233 Scoped reset: the header slot keeps the centering it asked for, the body 2234 goes back to start. Delete when align="center" honours its own contract 2235 (eddie-design-system#1496). */ 2236ed-section[align="center"] > *:not([slot="header"]) { 2237 text-align: start; 2238}</style> 2239 2240 2241
2241<script type="module" src="/eddie/eddie-autoloader.js"></script>
2241 2242
2242<script type="module" src="/eddie-recipes/eddie-recipes-autoloader.js"></script>
2242 2243<!-- Google Analytics -->
vendor: 67 bytes, lines 2243-2244
2243 2244<script async="" src="https://www.googletagmanager.com/gtag/js?id=
2244G-KWJX6HJ379
vendor: 12 bytes, line 2244
2244"></script>
2245<script> 2246
vendor: 130 bytes, lines 2246-2249
2246window.dataLayer = window.dataLayer || []; 2247 function gtag(){dataLayer.push(arguments);} 2248 gtag('js', new Date()); 2249 gtag('config', '
2249G-KWJX6HJ379
vendor: 4 bytes, line 2249
2249');
2250</script>
2250 2251<!-- End Google Analytics --> 2252 2253 2254 2255 </head> 2256 <body> 2257 <a href="#main" id="skip-link" class="ed-u-is-vishidden">Skip to main content</a> 2258 2259<ed-band variant="knockout" class="ed-u-margin-block-end-xxl" style="--ed-band-padding-block: var(--ed-theme-spacing-sm)"> 2260 <ed-layout-container><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:block}.ed-l-layout-container{width:100%;max-width:var(--ed-layout-container-max-width, 70rem);padding-inline-end:1rem;padding-inline-start:1rem;margin:0 auto}.ed-l-layout-container--narrow{max-width:50rem}.ed-l-layout-container--wide{max-width:80rem}</style><!--lit-part IcF6iJIJxGQ=--> 2261 <!--lit-node 0--><div class="ed-l-layout-container"> 2262 <slot></slot> 2263 </div> 2264 <!--/lit-part--></template> 2265 <ed-media-block> 2266 <img slot="media" class="notice-icon" src="/images/construction.gif" alt="" width="32" height="32"> 2267 <ed-text-passage size="sm" knockout><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:block}</style><!--lit-part QWH7bvKwthM=--> 2268 <!--lit-node 0--><div class="ed-c-text-passage ed-c-text-passage--knockout ed-c-text-passage--sm"> 2269 <slot></slot> 2270 </div> 2271 <!--/lit-part--></template> 2272 <p>This site is being redesigned as part of our <a href="https://aianddesign.systems/" target="_blank">AI & Design Systems course</a>. <a href="https://aianddesign.systems/" target="_blank">Sign up</a> to watch me wield AI and design systems to bring it to life, and learn how to apply these concepts and practical tactics to your team’s work.</p> 2273 </ed-text-passage> 2274 </ed-media-block> 2275 </ed-layout-container> 2276</ed-band> 2277 2278 <ed-page><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:block}.ed-c-page{display:flex;flex-direction:column;gap:var(--ed-page-gap, var(--ed-theme-spacing-region));min-height:100vh}::slotted(:not(ed-main,script,style,template,link,meta,noscript)){display:block}.ed-c-page--flush{gap:0}</style><!--lit-part N4xXoyT3juc=--><!--lit-node 0--><div class="ed-c-page"><slot></slot></div><!--/lit-part--></template> 2279
2280<script style="display: none"> 2281 (() => { 2282 document.documentElement.classList.add('site-header-js'); 2283 2284 const navFor = (toggle) => 2285 toggle.closest('[data-site-header]')?.querySelector('[data-site-header-nav]'); 2286 2287 const setExpanded = (toggle, expanded) => { 2288 // aria-expanded lives on the real <button>, so the state is actually 2289 // exposed â the whole reason this isn't an ed-button. 2290 toggle.setAttribute('aria-expanded', String(expanded)); 2291 navFor(toggle)?.toggleAttribute('data-expanded', expanded); 2292 }; 2293 2294 document.addEventListener('click', (event) => { 2295 const toggle = event.target.closest?.('[data-site-header-toggle]'); 2296 if (!toggle) return; 2297 setExpanded(toggle, toggle.getAttribute('aria-expanded') !== 'true'); 2298 }); 2299 2300 // Escape closes and returns focus to the control that opened it. 2301 document.addEventListener('keydown', (event) => { 2302 if (event.key !== 'Escape') return; 2303 const toggle = document.querySelector('[data-site-header-toggle][aria-expanded="true"]'); 2304 if (!toggle) return; 2305 setExpanded(toggle, false); 2306 toggle.focus(); 2307 }); 2308 })(); 2309</script>
2309 2310<ed-header variant="bare" orientation="vertical"><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:block}.ed-c-header{--ed-header-color-content: var(--ed-theme-color-content-knockout);--ed-header-focus-ring-color: var(--ed-theme-focus-ring-color-border-knockout);background:var(--ed-theme-color-background-knockout);color:var(--ed-header-color-content);position:relative;z-index:var(--ed-theme-layer-sticky)}@media all and (min-width:60rem){.ed-c-header--vertical{inline-size:var(--ed-sidebar-width, 18rem);min-block-size:100vh}}.ed-c-header__top{position:relative;inset-block-start:0;width:100%;z-index:var(--ed-theme-layer-sticky)}.ed-c-header__top-inner{width:100%}.ed-c-header__middle{width:100%;display:flex;align-items:center}@media all and (min-width:60rem){.ed-c-header--vertical .ed-c-header__middle{flex-direction:column;align-items:flex-start;gap:1rem}}.ed-c-header--bare{--ed-header-color-content: var(--ed-theme-color-content-default);--ed-header-focus-ring-color: var(--ed-theme-focus-ring-color-border-default);background:transparent;color:var(--ed-header-color-content)}.ed-c-header--brand{--ed-header-color-content: var(--ed-theme-color-content-knockout);background:var(--ed-theme-color-background-brand);color:var(--ed-header-color-content)}.ed-c-header--brand-knockout{--ed-header-color-content: var(--ed-theme-color-content-knockout);background:var(--ed-theme-color-background-brand-knockout);color:var(--ed-header-color-content)}.ed-c-header--accent-1{--ed-header-color-content: var(--ed-theme-color-content-on-accent-1);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-1);background:var(--ed-theme-color-background-accent-1);color:var(--ed-header-color-content)}.ed-c-header--accent-2{--ed-header-color-content: var(--ed-theme-color-content-on-accent-2);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-2);background:var(--ed-theme-color-background-accent-2);color:var(--ed-header-color-content)}.ed-c-header--accent-3{--ed-header-color-content: var(--ed-theme-color-content-on-accent-3);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-3);background:var(--ed-theme-color-background-accent-3);color:var(--ed-header-color-content)}.ed-c-header--accent-4{--ed-header-color-content: var(--ed-theme-color-content-on-accent-4);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-4);background:var(--ed-theme-color-background-accent-4);color:var(--ed-header-color-content)}.ed-c-header--accent-5{--ed-header-color-content: var(--ed-theme-color-content-on-accent-5);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-5);background:var(--ed-theme-color-background-accent-5);color:var(--ed-header-color-content)}.ed-c-header--accent-6{--ed-header-color-content: var(--ed-theme-color-content-on-accent-6);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-6);background:var(--ed-theme-color-background-accent-6);color:var(--ed-header-color-content)}.ed-c-header--accent-7{--ed-header-color-content: var(--ed-theme-color-content-on-accent-7);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-7);background:var(--ed-theme-color-background-accent-7);color:var(--ed-header-color-content)}.ed-c-header--accent-8{--ed-header-color-content: var(--ed-theme-color-content-on-accent-8);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-8);background:var(--ed-theme-color-background-accent-8);color:var(--ed-header-color-content)}</style><!--lit-part oEdGb2FIsDI=--> 2311 <!--lit-node 0--><header role="banner" class="ed-c-header ed-c-header--vertical ed-c-header--bare"> 2312 <!--lit-part nZMGmowm1Cs=--><!--lit-node 0--><ed-layout-container class="ed-c-header__layout-container" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:block}.ed-l-layout-container{width:100%;max-width:var(--ed-layout-container-max-width, 70rem);padding-inline-end:1rem;padding-inline-start:1rem;margin:0 auto}.ed-l-layout-container--narrow{max-width:50rem}.ed-l-layout-container--wide{max-width:80rem}</style><!--lit-part IcF6iJIJxGQ=--> 2313 <!--lit-node 0--><div class="ed-l-layout-container"> 2314 <slot></slot> 2315 </div> 2316 <!--/lit-part--></template> 2317 <!--lit-part oC9xfIM3vik=--> 2318 <div class="ed-c-header__top"> 2319 <slot name="top"></slot> 2320 </div> 2321 <div class="ed-c-header__middle"> 2322 <slot></slot> 2323 </div> 2324 <div class="ed-c-header__bottom"> 2325 <slot name="bottom"></slot> 2326 </div> 2327 <!--/lit-part--> 2328 </ed-layout-container><!--/lit-part--> 2329 </header> 2330 <!--/lit-part--></template> 2331 <div class="site-header" data-site-header=""> 2332 <ed-logo href="/" showdots><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-logo{display:inline-flex;align-items:center;max-inline-size:20rem;color:inherit;text-decoration:none}.ed-c-logo ::slotted(img),.ed-c-logo ::slotted(svg){display:block;max-inline-size:100%;block-size:auto}.ed-c-logo__text{font-family:var(--ed-theme-typography-primary-nav-default-mobile-font-family);font-weight:var(--ed-theme-typography-primary-nav-default-mobile-font-we
2332ight);font-size:var(--ed-theme-typography-primary-nav-default-mobile-font-size);line-height:var(--ed-theme-typography-primary-nav-default-mobile-line-height);letter-spacing:var(--ed-theme-typography-primary-nav-default-mobile-letter-spacing);text-transform:var(--ed-theme-typography-primary-nav-default-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-logo__text{font-family:var(--ed-theme-typography-primary-nav-default-font-family);font-weight:var(--ed-theme-typography-primary-nav-default-font-weight);font-size:var(--ed-theme-typography-primary-nav-default-font-size);line-height:var(--ed-theme-typography-primary-nav-default-line-height);letter-spacing:var(--ed-theme-typography-primary-nav-default-letter-spacing);text-transform:var(--ed-theme-typography-primary-nav-default-text-transform)}}.ed-c-logo__text{position:relative;text-transform:lowercase}.ed-c-logo__text--vishidden{position:absolute!important;overflow:hidden;inline-size:1px;block-size:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px)}.ed-c-logo__icon{display:inline-block;flex-shrink:0;inline-size:1.5em;block-size:1.5em;aspect-ratio:1/1;background:var(--ed-theme-color-background-brand);border-radius:var(--ed-theme-border-radius-round)}.ed-c-logo--icon-wordmark .ed-c-logo__icon{margin-inline-end:.3rem}.ed-c-logo--icon{justify-content:center}.ed-c-logo__icon--accent-1{background:var(--ed-theme-color-background-accent-1)}.ed-c-logo__icon--accent-2{background:var(--ed-theme-color-background-accent-2)}.ed-c-logo__icon--accent-3{background:var(--ed-theme-color-background-accent-3)}.ed-c-logo__icon--accent-4{background:var(--ed-theme-color-background-accent-4)}.ed-c-logo__icon--accent-5{background:var(--ed-theme-color-background-accent-5)}.ed-c-logo__icon--accent-6{background:var(--ed-theme-color-background-accent-6)}.ed-c-logo__icon--accent-7{background:var(--ed-theme-color-background-accent-7)}.ed-c-logo__icon--accent-8{background:var(--ed-theme-color-background-accent-8)}.ed-c-logo__dots{position:absolute;inset-block-start:calc(100% - .25rem);inset-inline-start:0;display:flex;align-items:center;gap:.05em}.ed-c-logo__dot{display:block;inline-size:.2em;block-size:.2em;aspect-ratio:1/1;border-radius:var(--ed-theme-border-radius-round)}.ed-c-logo__dot--1{background:var(--ed-theme-color-background-accent-1)}.ed-c-logo__dot--2{background:var(--ed-theme-color-background-accent-3)}.ed-c-logo__dot--3{background:var(--ed-theme-color-background-accent-4)}.ed-c-logo__dots--knockout .ed-c-logo__dot--2{background:var(--ed-theme-color-background-accent-2)}</style><!--lit-part VmMC38MeNp4=--> 2333 <!--lit-node 0--><a 2334 href="/" 2335 class="ed-c-logo ed-c-logo--wordmark ed-c-logo--has-dots" 2336 aria-label="Home" 2337 > 2338 <!--lit-part Mz2O6SCcAW8=--> 2339 <!--lit-part--><!--/lit-part--> 2340 <!--lit-node 1--><span class="ed-c-logo__text"> 2341 <slot></slot> 2342 <!--lit-part UF+wNzfqWZo=--> 2343 <!--lit-node 0--><span class="ed-c-logo__dots" aria-hidden="true"> 2344 <span class="ed-c-logo__dot ed-c-logo__dot--1"></span> 2345 <span class="ed-c-logo__dot ed-c-logo__dot--2"></span> 2346 <span class="ed-c-logo__dot ed-c-logo__dot--3"></span> 2347 </span> 2348 <!--/lit-part--> 2349 </span> 2350 <!--/lit-part--> 2351 </a> 2352 <!--/lit-part--></template>Brad Frost</ed-logo> 2353 <button type="button" class="site-header__toggle" data-site-header-toggle="" aria-expanded="false" aria-controls="site-nav">Menu</button> 2354 <ed-primary-nav class="site-header__nav" id="site-nav" data-site-header-nav="" enhance="" orientation="vertical" size="sm"> 2355 <nav aria-label="Main navigation"> 2356 <ul> 2357 <li><a href="/courses/">Courses</a></li> 2358 <li><a href="/community/">Community</a></li> 2359 <li><a href="/podcasts/">Podcasts</a></li> 2360 <li><a href="/newsletter/">Newsletter</a></li> 2361 <li><a href="/books/">Books</a></li> 2362 <li><a href="/blog/">Blog</a></li> 2363 <li><a href="/speaking/">Speaking</a></li> 2364 <li><a href="/music/">Music</a></li> 2365 <li><a href="/art/">Art</a></li> 2366 <li><a href="/about/" aria-current="page">About</a></li> 2367 <li><a href="/contact/">Contact</a></li> 2368 <li><a href="/more/">More</a></li> 2369 </ul> 2370 </nav> 2371 </ed-primary-nav> 2372 </div> 2373</ed-header> 2374 2375 <ed-main id="main"><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:flex;flex-direction:column;flex:1 0 auto}.ed-c-main{display:flex;flex-direction:column;gap:var(--ed-main-gap, var(--ed-theme-spacing-section));flex:1 0 auto}::slotted(*){display:block}.ed-c-main--flush{gap:0}</style><!--lit-part 6iLpEhmm5Sk=--><!--lit-node 0--><main class="ed-c-main"><slot></slot></main><!--/lit-part--></template> 2376 <ed-layout-container variant="narrow"><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:block}.ed-l-layout-container{width:100%;max-width:var(--ed-layout-container-max-width, 70rem);padding-inline-end:1rem;padding-inline-start:1rem;margin:0 auto}.ed-l-layout-container--narrow{max-width:50rem}.ed-l-layout-container--wide{max-width:80rem}</style><!--lit-part IcF6iJIJxGQ=--> 2377 <!--lit-node 0--><div class="ed-l-layout-container ed-l-layout-container--narrow"> 2378 <slot></slot> 2379 </div> 2380 <!--/lit-part--></template> 2381 <heading-anchors> 2382 2383<header class="page-header"> 2384 <ed-heading tagname="h1" variant="display-lg"><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:block}:host([visuallyhidden]){border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ed-c-heading--visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ed-c-heading{text-wrap:var(--ed-heading-text-wrap, balance);margin:0}.ed-c-heading--wrap-balance{--ed-heading-text-wrap: balance}.ed-c-heading--wrap-pretty{--ed-heading-text-wrap: pretty}.ed-c-heading--wrap-normal{--ed-heading-text-wrap: normal}::slotted(a){color:inherit;text-decoration:none;border-block-end:var(--ed-theme-border-width-sm) solid transparent;transition:border-color var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}::slotted(a:hover),::slotted(a:focus-visible){color:inherit;border-block-end-color:var(--ed-heading-link-color-border, var(--ed-theme-color-border-brand))}::slotted(a:focus-visible){outline:var(--ed-theme-border-width-lg) solid var(--ed-theme-focus-ring-color-border-default);outline-offset:var(--ed-theme-focus-ring-offset, .25rem)}.ed-c-heading--display-xl{font-family:var(--ed-theme-typography-display-xl-mobile-font-family);
2384font-weight:var(--ed-theme-typography-display-xl-mobile-font-weight);font-size:var(--ed-theme-typography-display-xl-mobile-font-size);line-height:var(--ed-theme-typography-display-xl-mobile-line-height);letter-spacing:var(--ed-theme-typography-display-xl-mobile-letter-spacing);text-transform:var(--ed-theme-typography-display-xl-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--display-xl{font-family:var(--ed-theme-typography-display-xl-tablet-font-family);font-weight:var(--ed-theme-typography-display-xl-tablet-font-weight);font-size:var(--ed-theme-typography-display-xl-tablet-font-size);line-height:var(--ed-theme-typography-display-xl-tablet-line-height);letter-spacing:var(--ed-theme-typography-display-xl-tablet-letter-spacing);text-transform:var(--ed-theme-typography-display-xl-tablet-text-transform)}}@media all and (min-width:75rem){.ed-c-heading--display-xl{font-family:var(--ed-theme-typography-display-xl-font-family);font-weight:var(--ed-theme-typography-display-xl-font-weight);font-size:var(--ed-theme-typography-display-xl-font-size);line-height:var(--ed-theme-typography-display-xl-line-height);letter-spacing:var(--ed-theme-typography-display-xl-letter-spacing);text-transform:var(--ed-theme-typography-display-xl-text-transform)}}.ed-c-heading--display-lg{font-family:var(--ed-theme-typography-display-lg-mobile-font-family);font-weight:var(--ed-theme-typography-display-lg-mobile-font-weight);font-size:var(--ed-theme-typography-display-lg-mobile-font-size);line-height:var(--ed-theme-typography-display-lg-mobile-line-height);letter-spacing:var(--ed-theme-typography-display-lg-mobile-letter-spacing);text-transform:var(--ed-theme-typography-display-lg-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--display-lg{font-family:var(--ed-theme-typography-display-lg-font-family);font-weight:var(--ed-theme-typography-display-lg-font-weight);font-size:var(--ed-theme-typography-display-lg-font-size);line-height:var(--ed-theme-typography-display-lg-line-height);letter-spacing:var(--ed-theme-typography-display-lg-letter-spacing);text-transform:var(--ed-theme-typography-display-lg-text-transform)}}.ed-c-heading--display-default{font-family:var(--ed-theme-typography-display-default-mobile-font-family);font-weight:var(--ed-theme-typography-display-default-mobile-font-weight);font-size:var(--ed-theme-typography-display-default-mobile-font-size);line-height:var(--ed-theme-typography-display-default-mobile-line-height);letter-spacing:var(--ed-theme-typography-display-default-mobile-letter-spacing);text-transform:var(--ed-theme-typography-display-default-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--display-default{font-family:var(--ed-theme-typography-display-default-font-family);font-weight:var(--ed-theme-typography-display-default-font-weight);font-size:var(--ed-theme-typography-display-default-font-size);line-height:var(--ed-theme-typography-display-default-line-height);letter-spacing:var(--ed-theme-typography-display-default-letter-spacing);text-transform:var(--ed-theme-typography-display-default-text-transform)}}.ed-c-heading--headline-lg{font-family:var(--ed-theme-typography-headline-lg-mobile-font-family);font-weight:var(--ed-theme-typography-headline-lg-mobile-font-weight);font-size:var(--ed-theme-typography-headline-lg-mobile-font-size);line-height:var(--ed-theme-typography-headline-lg-mobile-line-height);letter-spacing:var(--ed-theme-typography-headline-lg-mobile-letter-spacing);text-transform:var(--ed-theme-typography-headline-lg-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--headline-lg{font-family:var(--ed-theme-typography-headline-lg-font-family);
2384font-weight:var(--ed-theme-typography-headline-lg-font-weight);font-size:var(--ed-theme-typography-headline-lg-font-size);line-height:var(--ed-theme-typography-headline-lg-line-height);letter-spacing:var(--ed-theme-typography-headline-lg-letter-spacing);text-transform:var(--ed-theme-typography-headline-lg-text-transform)}}.ed-c-heading--headline-default{font-family:var(--ed-theme-typography-headline-default-mobile-font-family);font-weight:var(--ed-theme-typography-headline-default-mobile-font-weight);font-size:var(--ed-theme-typography-headline-default-mobile-font-size);line-height:var(--ed-theme-typography-headline-default-mobile-line-height);letter-spacing:var(--ed-theme-typography-headline-default-mobile-letter-spacing);text-transform:var(--ed-theme-typography-headline-default-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--headline-default{font-family:var(--ed-theme-typography-headline-default-font-family);font-weight:var(--ed-theme-typography-headline-default-font-weight);font-size:var(--ed-theme-typography-headline-default-font-size);line-height:var(--ed-theme-typography-headline-default-line-height);letter-spacing:var(--ed-theme-typography-headline-default-letter-spacing);text-transform:var(--ed-theme-typography-headline-default-text-transform)}}.ed-c-heading--headline-sm{font-family:var(--ed-theme-typography-headline-sm-mobile-font-family);font-weight:var(--ed-theme-typography-headline-sm-mobile-font-weight);font-size:var(--ed-theme-typography-headline-sm-mobile-font-size);line-height:var(--ed-theme-typography-headline-sm-mobile-line-height);letter-spacing:var(--ed-theme-typography-headline-sm-mobile-letter-spacing);text-transform:var(--ed-theme-typography-headline-sm-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--headline-sm{font-family:var(--ed-theme-typography-headline-sm-font-family);font-weight:var(--ed-theme-typography-headline-sm-font-weight);font-size:var(--ed-theme-typography-headline-sm-font-size);line-height:var(--ed-theme-typography-headline-sm-line-height);letter-spacing:var(--ed-theme-typography-headline-sm-letter-spacing);text-transform:var(--ed-theme-typography-headline-sm-text-transform)}}.ed-c-heading--title-lg{font-family:var(--ed-theme-typography-title-lg-mobile-font-family);font-weight:var(--ed-theme-typography-title-lg-mobile-font-weight);font-size:var(--ed-theme-typography-title-lg-mobile-font-size);line-height:var(--ed-theme-typography-title-lg-mobile-line-height);letter-spacing:var(--ed-theme-typography-title-lg-mobile-letter-spacing);text-transform:var(--ed-theme-typography-title-lg-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--title-lg{font-family:var(--ed-theme-typography-title-lg-font-family);font-weight:var(--ed-theme-typography-title-lg-font-weight);font-size:var(--ed-theme-typography-title-lg-font-size);line-height:var(--ed-theme-typography-title-lg-line-height);letter-spacing:var(--ed-theme-typography-title-lg-letter-spacing);text-transform:var(--ed-theme-typography-title-lg-text-transform)}}.ed-c-heading--title-default{font-family:var(--ed-theme-typography-title-default-font-family);font-weight:var(--ed-theme-typography-title-default-font-weight);font-size:var(--ed-theme-typography-title-default-font-size);line-height:var(--ed-theme-typography-title-default-line-height);letter-spacing:var(--ed-theme-typography-title-default-letter-spacing);text-transform:var(--ed-theme-typography-title-default-text-transform)}.ed-c-heading--title-sm{font-family:var(--ed-theme-typography-title-sm-font-family);font-weight:var(--ed-theme-typography-title-sm-font-weight);font-size:var(--ed-theme-typography-title-sm-font-size);line-height:var(--ed-theme-typography-title-sm-line-height);letter-spacing:var(--ed-theme-typography-title-sm-letter-spacing);text-transform:var(--ed-theme-typography-title-sm-text-transform)}.ed-c-heading--label-lg{font-family:var(--ed-theme-typography-label-lg-font-family);font-weight:var(--ed-theme-typography-label-lg-font-weight);font-size:var(--ed-theme-typography-label-lg-font-size);line-height:var(--ed-theme-typography-label-lg-line-height);letter-spacing:var(--ed-theme-typography-label-lg-letter-spacing);text-transform:var(--ed-theme-typography-label-lg-text-transform)}.ed-c-heading--label-default{font-family:var(--ed-theme-typography-label-default-font-family);
2384font-weight:var(--ed-theme-typography-label-default-font-weight);font-size:var(--ed-theme-typography-label-default-font-size);line-height:var(--ed-theme-typography-label-default-line-height);letter-spacing:var(--ed-theme-typography-label-default-letter-spacing);text-transform:var(--ed-theme-typography-label-default-text-transform)}.ed-c-heading--label-sm{font-family:var(--ed-theme-typography-label-sm-font-family);font-weight:var(--ed-theme-typography-label-sm-font-weight);font-size:var(--ed-theme-typography-label-sm-font-size);line-height:var(--ed-theme-typography-label-sm-line-height);letter-spacing:var(--ed-theme-typography-label-sm-letter-spacing);text-transform:var(--ed-theme-typography-label-sm-text-transform)}.ed-c-heading--body-lg{font-family:var(--ed-theme-typography-body-lg-font-family);font-weight:var(--ed-theme-typography-body-lg-font-weight);font-size:var(--ed-theme-typography-body-lg-font-size);line-height:var(--ed-theme-typography-body-lg-line-height);letter-spacing:var(--ed-theme-typography-body-lg-letter-spacing);text-transform:var(--ed-theme-typography-body-lg-text-transform)}.ed-c-heading--body-default{font-family:var(--ed-theme-typography-body-default-font-family);font-weight:var(--ed-theme-typography-body-default-font-weight);font-size:var(--ed-theme-typography-body-default-font-size);line-height:var(--ed-theme-typography-body-default-line-height);letter-spacing:var(--ed-theme-typography-body-default-letter-spacing);text-transform:var(--ed-theme-typography-body-default-text-transform)}.ed-c-heading--body-sm{font-family:var(--ed-theme-typography-body-sm-font-family);font-weight:var(--ed-theme-typography-body-sm-font-weight);font-size:var(--ed-theme-typography-body-sm-font-size);line-height:var(--ed-theme-typography-body-sm-line-height);letter-spacing:var(--ed-theme-typography-body-sm-letter-spacing);text-transform:var(--ed-theme-typography-body-sm-text-transform)}.ed-c-heading--meta-default{font-family:var(--ed-theme-typography-meta-default-font-family);font-weight:var(--ed-theme-typography-meta-default-font-weight);font-size:var(--ed-theme-typography-meta-default-font-size);line-height:var(--ed-theme-typography-meta-default-line-height);letter-spacing:var(--ed-theme-typography-meta-default-letter-spacing);text-transform:var(--ed-theme-typography-meta-default-text-transform)}.ed-c-heading--meta-sm{font-family:var(--ed-theme-typography-meta-sm-font-family);font-weight:var(--ed-theme-typography-meta-sm-font-weight);font-size:var(--ed-theme-typography-meta-sm-font-size);line-height:var(--ed-theme-typography-meta-sm-line-height);letter-spacing:var(--ed-theme-typography-meta-sm-letter-spacing);text-transform:var(--ed-theme-typography-meta-sm-text-transform)}</style><!--lit-part KaIwmpr6FWc=--> <!--lit-node 0--><h1 class="ed-c-heading ed-c-heading--display-lg"><slot></slot></h1> <!--/lit-part--></template>About Brad Frost</ed-heading> 2385</header> 2386<ed-text-passage size="lg"><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:block}</style><!--lit-part QWH7bvKwthM=--> 2387 <!--lit-node 0--><div class="ed-c-text-passage ed-c-text-passage--lg"> 2388 <slot></slot> 2389 </div> 2390 <!--/lit-part--></template> 2391<p>Brad Frost makes things and helps people. He's a web designer & developer, speaker, writer, teacher, consultant, musician, artist, and enthusiasm enthusiast located in beautiful Pittsburgh, PA. He is the author of Atomic Design, which introduces a methodology to create and maintain effective design systems. He helps digital designers and developers level up through <a href="https://bradfrost.com/courses/">online courses</a> about <a href="https://atomicdesigncourse.com/">design systems</a>, <a href="https://designtokenscourse.com/">design tokens</a>, frontend development, collaboration, and more. He hosts the <a href="https://wakeupexcited.show/">Wake Up Excited!</a> podcast where he talks to exuberant people about living a creative and fulfilling life. Not short on projects and passions, Brad's created projects like the <a href="https://smashingconf.com/open-up">Open Up Podcast</a>, <a href="https://coldalbumdrumming.com/">Cold Album Drumming</a>, <a href="https://frostapalooza.bradfrost.com/">Frostapalooza</a>, Style Guides Podcast, Pattern Lab, Styleguides.io, This Is Responsive, <a href="http://deathtobullshit.com/">Death to Bullshit</a>, and <a href="https://bradfrost.com/projects/">more</a>.</p> 2392<p>Here's Brad's <a href="https://bradfrost.com/wp-content/uploads/2019/11/brad_frost_ffly.png">official photo</a>:</p> 2393<p><a href="/images/people/brad-frost-disco-hires.png"><img src="/images/people/brad-frost-disco.png" alt="Brad Frost wearing an astronaut helmet with a mirrored disco-ball faceplate, against a colorful painted mural background"></a></p> 2394 2395</ed-text-passage> 2396 2397 </heading-anchors> 2398 </ed-layout-container> 2399 </ed-main> 2400 2401<ed-footer><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:block}.ed-c-footer{font-family:var(--ed-theme-typography-body-default-font-family);
2401font-weight:var(--ed-theme-typography-body-default-font-weight);font-size:var(--ed-theme-typography-body-default-font-size);line-height:var(--ed-theme-typography-body-default-line-height);letter-spacing:var(--ed-theme-typography-body-default-letter-spacing);text-transform:var(--ed-theme-typography-body-default-text-transform);display:flex;flex-direction:column;gap:var(--ed-footer-gap, var(--ed-theme-spacing-block));padding-block:var(--ed-footer-padding-block, var(--ed-theme-spacing-xxl));background:var(--ed-theme-color-background-knockout);color:var(--ed-theme-color-content-knockout)}.ed-c-footer__top,.ed-c-footer__middle,.ed-c-footer__bottom{display:contents}.ed-c-footer--flush{gap:0}</style><!--lit-part qakK5sI6DCU=--> 2402 <!--lit-node 0--><footer class="ed-c-footer" role="contentinfo"> 2403 <div class="ed-c-footer__top"> 2404 <slot name="top"></slot> 2405 </div> 2406 <div class="ed-c-footer__middle"> 2407 <slot></slot> 2408 </div> 2409 <div class="ed-c-footer__bottom"> 2410 <slot name="bottom"></slot> 2411 </div> 2412 </footer> 2413 <!--/lit-part--></template> 2414 <ed-layout-container><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:block}.ed-l-layout-container{width:100%;max-width:var(--ed-layout-container-max-width, 70rem);padding-inline-end:1rem;padding-inline-start:1rem;margin:0 auto}.ed-l-layout-container--narrow{max-width:50rem}.ed-l-layout-container--wide{max-width:80rem}</style><!--lit-part IcF6iJIJxGQ=--> 2415 <!--lit-node 0--><div class="ed-l-layout-container"> 2416 <slot></slot> 2417 </div> 2418 <!--/lit-part--></template> 2419 <ed-media-block class="h-card" style="--ed-media-block-gap: var(--ed-theme-spacing-xl)"> 2420 <img slot="media" class="u-photo" src="/images/people/brad-frost-disco-optimized.jpg" alt="Brad Frost" width="500" height="500" loading="lazy"> 2421 <ed-heading tagname="h3"><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:block}:host([visuallyhidden]){border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ed-c-heading--visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ed-c-heading{text-wrap:var(--ed-heading-text-wrap, balance);margin:0}.ed-c-heading--wrap-balance{--ed-heading-text-wrap: balance}.ed-c-heading--wrap-pretty{--ed-heading-text-wrap: pretty}.ed-c-heading--wrap-normal{--ed-heading-text-wrap: normal}::slotted(a){color:inherit;text-decoration:none;border-block-end:var(--ed-theme-border-width-sm) solid transparent;transition:border-color var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}::slotted(a:hover),::slotted(a:focus-visible){color:inherit;border-block-end-color:var(--ed-heading-link-color-border, var(--ed-theme-color-border-brand))}::slotted(a:focus-visible){outline:var(--ed-theme-border-width-lg) solid var(--ed-theme-focus-ring-color-border-default);outline-offset:var(--ed-theme-focus-ring-offset, .25rem)}.ed-c-heading--display-xl{font-family:var(--ed-theme-typography-display-xl-mobile-font-family);font-weight:var(--ed-theme-typography-display-xl-mobile-font-weight);font-size:var(--ed-theme-typography-display-xl-mobile-font-size);line-height:var(--ed-theme-typography-display-xl-mobile-line-height);letter-spacing:var(--ed-theme-typography-display-xl-mobile-letter-spacing);text-transform:var(--ed-theme-typography-display-xl-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--display-xl{font-family:var(--ed-theme-typography-display-xl-tablet-font-family);font-weight:var(--ed-theme-typography-display-xl-tablet-font-weight);font-size:var(--ed-theme-typography-display-xl-tablet-font-size);line-height:var(--ed-theme-typography-display-xl-tablet-line-height);letter-spacing:var(--ed-theme-typography-display-xl-tablet-letter-spacing);text-transform:var(--ed-theme-typography-display-xl-tablet-text-transform)}}@media all and (min-width:75rem){.ed-c-heading--display-xl{font-family:var(--ed-theme-typography-display-xl-font-family);
2421font-weight:var(--ed-theme-typography-display-xl-font-weight);font-size:var(--ed-theme-typography-display-xl-font-size);line-height:var(--ed-theme-typography-display-xl-line-height);letter-spacing:var(--ed-theme-typography-display-xl-letter-spacing);text-transform:var(--ed-theme-typography-display-xl-text-transform)}}.ed-c-heading--display-lg{font-family:var(--ed-theme-typography-display-lg-mobile-font-family);font-weight:var(--ed-theme-typography-display-lg-mobile-font-weight);font-size:var(--ed-theme-typography-display-lg-mobile-font-size);line-height:var(--ed-theme-typography-display-lg-mobile-line-height);letter-spacing:var(--ed-theme-typography-display-lg-mobile-letter-spacing);text-transform:var(--ed-theme-typography-display-lg-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--display-lg{font-family:var(--ed-theme-typography-display-lg-font-family);font-weight:var(--ed-theme-typography-display-lg-font-weight);font-size:var(--ed-theme-typography-display-lg-font-size);line-height:var(--ed-theme-typography-display-lg-line-height);letter-spacing:var(--ed-theme-typography-display-lg-letter-spacing);text-transform:var(--ed-theme-typography-display-lg-text-transform)}}.ed-c-heading--display-default{font-family:var(--ed-theme-typography-display-default-mobile-font-family);font-weight:var(--ed-theme-typography-display-default-mobile-font-weight);font-size:var(--ed-theme-typography-display-default-mobile-font-size);line-height:var(--ed-theme-typography-display-default-mobile-line-height);letter-spacing:var(--ed-theme-typography-display-default-mobile-letter-spacing);text-transform:var(--ed-theme-typography-display-default-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--display-default{font-family:var(--ed-theme-typography-display-default-font-family);font-weight:var(--ed-theme-typography-display-default-font-weight);font-size:var(--ed-theme-typography-display-default-font-size);line-height:var(--ed-theme-typography-display-default-line-height);letter-spacing:var(--ed-theme-typography-display-default-letter-spacing);text-transform:var(--ed-theme-typography-display-default-text-transform)}}.ed-c-heading--headline-lg{font-family:var(--ed-theme-typography-headline-lg-mobile-font-family);font-weight:var(--ed-theme-typography-headline-lg-mobile-font-weight);font-size:var(--ed-theme-typography-headline-lg-mobile-font-size);line-height:var(--ed-theme-typography-headline-lg-mobile-line-height);letter-spacing:var(--ed-theme-typography-headline-lg-mobile-letter-spacing);text-transform:var(--ed-theme-typography-headline-lg-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--headline-lg{font-family:var(--ed-theme-typography-headline-lg-font-family);
2421font-weight:var(--ed-theme-typography-headline-lg-font-weight);font-size:var(--ed-theme-typography-headline-lg-font-size);line-height:var(--ed-theme-typography-headline-lg-line-height);letter-spacing:var(--ed-theme-typography-headline-lg-letter-spacing);text-transform:var(--ed-theme-typography-headline-lg-text-transform)}}.ed-c-heading--headline-default{font-family:var(--ed-theme-typography-headline-default-mobile-font-family);font-weight:var(--ed-theme-typography-headline-default-mobile-font-weight);font-size:var(--ed-theme-typography-headline-default-mobile-font-size);line-height:var(--ed-theme-typography-headline-default-mobile-line-height);letter-spacing:var(--ed-theme-typography-headline-default-mobile-letter-spacing);text-transform:var(--ed-theme-typography-headline-default-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--headline-default{font-family:var(--ed-theme-typography-headline-default-font-family);font-weight:var(--ed-theme-typography-headline-default-font-weight);font-size:var(--ed-theme-typography-headline-default-font-size);line-height:var(--ed-theme-typography-headline-default-line-height);letter-spacing:var(--ed-theme-typography-headline-default-letter-spacing);text-transform:var(--ed-theme-typography-headline-default-text-transform)}}.ed-c-heading--headline-sm{font-family:var(--ed-theme-typography-headline-sm-mobile-font-family);font-weight:var(--ed-theme-typography-headline-sm-mobile-font-weight);font-size:var(--ed-theme-typography-headline-sm-mobile-font-size);line-height:var(--ed-theme-typography-headline-sm-mobile-line-height);letter-spacing:var(--ed-theme-typography-headline-sm-mobile-letter-spacing);text-transform:var(--ed-theme-typography-headline-sm-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--headline-sm{font-family:var(--ed-theme-typography-headline-sm-font-family);font-weight:var(--ed-theme-typography-headline-sm-font-weight);font-size:var(--ed-theme-typography-headline-sm-font-size);line-height:var(--ed-theme-typography-headline-sm-line-height);letter-spacing:var(--ed-theme-typography-headline-sm-letter-spacing);text-transform:var(--ed-theme-typography-headline-sm-text-transform)}}.ed-c-heading--title-lg{font-family:var(--ed-theme-typography-title-lg-mobile-font-family);font-weight:var(--ed-theme-typography-title-lg-mobile-font-weight);font-size:var(--ed-theme-typography-title-lg-mobile-font-size);line-height:var(--ed-theme-typography-title-lg-mobile-line-height);letter-spacing:var(--ed-theme-typography-title-lg-mobile-letter-spacing);text-transform:var(--ed-theme-typography-title-lg-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--title-lg{font-family:var(--ed-theme-typography-title-lg-font-family);font-weight:var(--ed-theme-typography-title-lg-font-weight);font-size:var(--ed-theme-typography-title-lg-font-size);line-height:var(--ed-theme-typography-title-lg-line-height);letter-spacing:var(--ed-theme-typography-title-lg-letter-spacing);text-transform:var(--ed-theme-typography-title-lg-text-transform)}}.ed-c-heading--title-default{font-family:var(--ed-theme-typography-title-default-font-family);font-weight:var(--ed-theme-typography-title-default-font-weight);font-size:var(--ed-theme-typography-title-default-font-size);line-height:var(--ed-theme-typography-title-default-line-height);letter-spacing:var(--ed-theme-typography-title-default-letter-spacing);text-transform:var(--ed-theme-typography-title-default-text-transform)}.ed-c-heading--title-sm{font-family:var(--ed-theme-typography-title-sm-font-family);font-weight:var(--ed-theme-typography-title-sm-font-weight);font-size:var(--ed-theme-typography-title-sm-font-size);line-height:var(--ed-theme-typography-title-sm-line-height);letter-spacing:var(--ed-theme-typography-title-sm-letter-spacing);text-transform:var(--ed-theme-typography-title-sm-text-transform)}.ed-c-heading--label-lg{font-family:var(--ed-theme-typography-label-lg-font-family);font-weight:var(--ed-theme-typography-label-lg-font-weight);font-size:var(--ed-theme-typography-label-lg-font-size);line-height:var(--ed-theme-typography-label-lg-line-height);letter-spacing:var(--ed-theme-typography-label-lg-letter-spacing);text-transform:var(--ed-theme-typography-label-lg-text-transform)}.ed-c-heading--label-default{font-family:var(--ed-theme-typography-label-default-font-family);
2421font-weight:var(--ed-theme-typography-label-default-font-weight);font-size:var(--ed-theme-typography-label-default-font-size);line-height:var(--ed-theme-typography-label-default-line-height);letter-spacing:var(--ed-theme-typography-label-default-letter-spacing);text-transform:var(--ed-theme-typography-label-default-text-transform)}.ed-c-heading--label-sm{font-family:var(--ed-theme-typography-label-sm-font-family);font-weight:var(--ed-theme-typography-label-sm-font-weight);font-size:var(--ed-theme-typography-label-sm-font-size);line-height:var(--ed-theme-typography-label-sm-line-height);letter-spacing:var(--ed-theme-typography-label-sm-letter-spacing);text-transform:var(--ed-theme-typography-label-sm-text-transform)}.ed-c-heading--body-lg{font-family:var(--ed-theme-typography-body-lg-font-family);font-weight:var(--ed-theme-typography-body-lg-font-weight);font-size:var(--ed-theme-typography-body-lg-font-size);line-height:var(--ed-theme-typography-body-lg-line-height);letter-spacing:var(--ed-theme-typography-body-lg-letter-spacing);text-transform:var(--ed-theme-typography-body-lg-text-transform)}.ed-c-heading--body-default{font-family:var(--ed-theme-typography-body-default-font-family);font-weight:var(--ed-theme-typography-body-default-font-weight);font-size:var(--ed-theme-typography-body-default-font-size);line-height:var(--ed-theme-typography-body-default-line-height);letter-spacing:var(--ed-theme-typography-body-default-letter-spacing);text-transform:var(--ed-theme-typography-body-default-text-transform)}.ed-c-heading--body-sm{font-family:var(--ed-theme-typography-body-sm-font-family);font-weight:var(--ed-theme-typography-body-sm-font-weight);font-size:var(--ed-theme-typography-body-sm-font-size);line-height:var(--ed-theme-typography-body-sm-line-height);letter-spacing:var(--ed-theme-typography-body-sm-letter-spacing);text-transform:var(--ed-theme-typography-body-sm-text-transform)}.ed-c-heading--meta-default{font-family:var(--ed-theme-typography-meta-default-font-family);font-weight:var(--ed-theme-typography-meta-default-font-weight);font-size:var(--ed-theme-typography-meta-default-font-size);line-height:var(--ed-theme-typography-meta-default-line-height);letter-spacing:var(--ed-theme-typography-meta-default-letter-spacing);text-transform:var(--ed-theme-typography-meta-default-text-transform)}.ed-c-heading--meta-sm{font-family:var(--ed-theme-typography-meta-sm-font-family);font-weight:var(--ed-theme-typography-meta-sm-font-weight);font-size:var(--ed-theme-typography-meta-sm-font-size);line-height:var(--ed-theme-typography-meta-sm-line-height);letter-spacing:var(--ed-theme-typography-meta-sm-letter-spacing);text-transform:var(--ed-theme-typography-meta-sm-text-transform)}</style><!--lit-part a6IwmhhE4C0=--> <!--lit-node 0--><h3 class="ed-c-heading ed-c-heading--headline-sm"><slot></slot></h3> <!--/lit-part--></template>Hey there!</ed-heading> 2422 <a class="p-name u-url ed-u-is-vishidden" rel="me" href="https://bradfrost.com/">Brad Frost</a> 2423 <a class="u-email ed-u-is-vishidden" href="mailto:[email protected]">[email protected]</a> 2424 <p class="p-note">I'm Brad Frost, an independent creator, web designer & developer, teacher, speaker, writer, musician, and artist based in Pittsburgh, PA.</p> 2425 </ed-media-block> 2426 </ed-layout-container> 2427 2428 <ed-layout-container><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:block}.ed-l-layout-container{width:100%;max-width:var(--ed-layout-container-max-width, 70rem);padding-inline-end:1rem;padding-inline-start:1rem;margin:0 auto}.ed-l-layout-container--narrow{max-width:50rem}.ed-l-layout-container--wide{max-width:80rem}</style><!--lit-part IcF6iJIJxGQ=--> 2429 <!--lit-node 0--><div class="ed-l-layout-container"> 2430 <slot></slot> 2431 </div> 2432 <!--/lit-part--></template> 2433 <ed-section align="left"> 2434 <ed-heading slot="header" tagname="h3"><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:block}:host([visuallyhidden]){border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ed-c-heading--visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ed-c-heading{text-wrap:var(--ed-heading-text-wrap, balance);margin:0}.ed-c-heading--wrap-balance{--ed-heading-text-wrap: balance}.ed-c-heading--wrap-pretty{--ed-heading-text-wrap: pretty}.ed-c-heading--wrap-normal{--ed-heading-text-wrap: normal}::slotted(a){color:inherit;text-decoration:none;border-block-end:var(--ed-theme-border-width-sm) solid transparent;transition:border-color var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}::slotted(a:hover),::slotted(a:focus-visible){color:inherit;border-block-end-color:var(--ed-heading-link-color-border, var(--ed-theme-color-border-brand))}::slotted(a:focus-visible){outline:var(--ed-theme-border-width-lg) solid var(--ed-theme-focus-ring-color-border-default);outline-offset:var(--ed-theme-focus-ring-offset, .25rem)}.ed-c-heading--display-xl{font-family:var(--ed-theme-typography-display-xl-mobile-font-family);
2434font-weight:var(--ed-theme-typography-display-xl-mobile-font-weight);font-size:var(--ed-theme-typography-display-xl-mobile-font-size);line-height:var(--ed-theme-typography-display-xl-mobile-line-height);letter-spacing:var(--ed-theme-typography-display-xl-mobile-letter-spacing);text-transform:var(--ed-theme-typography-display-xl-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--display-xl{font-family:var(--ed-theme-typography-display-xl-tablet-font-family);font-weight:var(--ed-theme-typography-display-xl-tablet-font-weight);font-size:var(--ed-theme-typography-display-xl-tablet-font-size);line-height:var(--ed-theme-typography-display-xl-tablet-line-height);letter-spacing:var(--ed-theme-typography-display-xl-tablet-letter-spacing);text-transform:var(--ed-theme-typography-display-xl-tablet-text-transform)}}@media all and (min-width:75rem){.ed-c-heading--display-xl{font-family:var(--ed-theme-typography-display-xl-font-family);font-weight:var(--ed-theme-typography-display-xl-font-weight);font-size:var(--ed-theme-typography-display-xl-font-size);line-height:var(--ed-theme-typography-display-xl-line-height);letter-spacing:var(--ed-theme-typography-display-xl-letter-spacing);text-transform:var(--ed-theme-typography-display-xl-text-transform)}}.ed-c-heading--display-lg{font-family:var(--ed-theme-typography-display-lg-mobile-font-family);font-weight:var(--ed-theme-typography-display-lg-mobile-font-weight);font-size:var(--ed-theme-typography-display-lg-mobile-font-size);line-height:var(--ed-theme-typography-display-lg-mobile-line-height);letter-spacing:var(--ed-theme-typography-display-lg-mobile-letter-spacing);text-transform:var(--ed-theme-typography-display-lg-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--display-lg{font-family:var(--ed-theme-typography-display-lg-font-family);font-weight:var(--ed-theme-typography-display-lg-font-weight);font-size:var(--ed-theme-typography-display-lg-font-size);line-height:var(--ed-theme-typography-display-lg-line-height);letter-spacing:var(--ed-theme-typography-display-lg-letter-spacing);text-transform:var(--ed-theme-typography-display-lg-text-transform)}}.ed-c-heading--display-default{font-family:var(--ed-theme-typography-display-default-mobile-font-family);font-weight:var(--ed-theme-typography-display-default-mobile-font-weight);font-size:var(--ed-theme-typography-display-default-mobile-font-size);line-height:var(--ed-theme-typography-display-default-mobile-line-height);letter-spacing:var(--ed-theme-typography-display-default-mobile-letter-spacing);text-transform:var(--ed-theme-typography-display-default-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--display-default{font-family:var(--ed-theme-typography-display-default-font-family);font-weight:var(--ed-theme-typography-display-default-font-weight);font-size:var(--ed-theme-typography-display-default-font-size);line-height:var(--ed-theme-typography-display-default-line-height);letter-spacing:var(--ed-theme-typography-display-default-letter-spacing);text-transform:var(--ed-theme-typography-display-default-text-transform)}}.ed-c-heading--headline-lg{font-family:var(--ed-theme-typography-headline-lg-mobile-font-family);font-weight:var(--ed-theme-typography-headline-lg-mobile-font-weight);font-size:var(--ed-theme-typography-headline-lg-mobile-font-size);line-height:var(--ed-theme-typography-headline-lg-mobile-line-height);letter-spacing:var(--ed-theme-typography-headline-lg-mobile-letter-spacing);text-transform:var(--ed-theme-typography-headline-lg-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--headline-lg{font-family:var(--ed-theme-typography-headline-lg-font-family);
2434font-weight:var(--ed-theme-typography-headline-lg-font-weight);font-size:var(--ed-theme-typography-headline-lg-font-size);line-height:var(--ed-theme-typography-headline-lg-line-height);letter-spacing:var(--ed-theme-typography-headline-lg-letter-spacing);text-transform:var(--ed-theme-typography-headline-lg-text-transform)}}.ed-c-heading--headline-default{font-family:var(--ed-theme-typography-headline-default-mobile-font-family);font-weight:var(--ed-theme-typography-headline-default-mobile-font-weight);font-size:var(--ed-theme-typography-headline-default-mobile-font-size);line-height:var(--ed-theme-typography-headline-default-mobile-line-height);letter-spacing:var(--ed-theme-typography-headline-default-mobile-letter-spacing);text-transform:var(--ed-theme-typography-headline-default-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--headline-default{font-family:var(--ed-theme-typography-headline-default-font-family);font-weight:var(--ed-theme-typography-headline-default-font-weight);font-size:var(--ed-theme-typography-headline-default-font-size);line-height:var(--ed-theme-typography-headline-default-line-height);letter-spacing:var(--ed-theme-typography-headline-default-letter-spacing);text-transform:var(--ed-theme-typography-headline-default-text-transform)}}.ed-c-heading--headline-sm{font-family:var(--ed-theme-typography-headline-sm-mobile-font-family);font-weight:var(--ed-theme-typography-headline-sm-mobile-font-weight);font-size:var(--ed-theme-typography-headline-sm-mobile-font-size);line-height:var(--ed-theme-typography-headline-sm-mobile-line-height);letter-spacing:var(--ed-theme-typography-headline-sm-mobile-letter-spacing);text-transform:var(--ed-theme-typography-headline-sm-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--headline-sm{font-family:var(--ed-theme-typography-headline-sm-font-family);font-weight:var(--ed-theme-typography-headline-sm-font-weight);font-size:var(--ed-theme-typography-headline-sm-font-size);line-height:var(--ed-theme-typography-headline-sm-line-height);letter-spacing:var(--ed-theme-typography-headline-sm-letter-spacing);text-transform:var(--ed-theme-typography-headline-sm-text-transform)}}.ed-c-heading--title-lg{font-family:var(--ed-theme-typography-title-lg-mobile-font-family);font-weight:var(--ed-theme-typography-title-lg-mobile-font-weight);font-size:var(--ed-theme-typography-title-lg-mobile-font-size);line-height:var(--ed-theme-typography-title-lg-mobile-line-height);letter-spacing:var(--ed-theme-typography-title-lg-mobile-letter-spacing);text-transform:var(--ed-theme-typography-title-lg-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--title-lg{font-family:var(--ed-theme-typography-title-lg-font-family);font-weight:var(--ed-theme-typography-title-lg-font-weight);font-size:var(--ed-theme-typography-title-lg-font-size);line-height:var(--ed-theme-typography-title-lg-line-height);letter-spacing:var(--ed-theme-typography-title-lg-letter-spacing);text-transform:var(--ed-theme-typography-title-lg-text-transform)}}.ed-c-heading--title-default{font-family:var(--ed-theme-typography-title-default-font-family);font-weight:var(--ed-theme-typography-title-default-font-weight);font-size:var(--ed-theme-typography-title-default-font-size);line-height:var(--ed-theme-typography-title-default-line-height);letter-spacing:var(--ed-theme-typography-title-default-letter-spacing);text-transform:var(--ed-theme-typography-title-default-text-transform)}.ed-c-heading--title-sm{font-family:var(--ed-theme-typography-title-sm-font-family);font-weight:var(--ed-theme-typography-title-sm-font-weight);font-size:var(--ed-theme-typography-title-sm-font-size);line-height:var(--ed-theme-typography-title-sm-line-height);letter-spacing:var(--ed-theme-typography-title-sm-letter-spacing);text-transform:var(--ed-theme-typography-title-sm-text-transform)}.ed-c-heading--label-lg{font-family:var(--ed-theme-typography-label-lg-font-family);font-weight:var(--ed-theme-typography-label-lg-font-weight);font-size:var(--ed-theme-typography-label-lg-font-size);line-height:var(--ed-theme-typography-label-lg-line-height);letter-spacing:var(--ed-theme-typography-label-lg-letter-spacing);text-transform:var(--ed-theme-typography-label-lg-text-transform)}.ed-c-heading--label-default{font-family:var(--ed-theme-typography-label-default-font-family);
2434font-weight:var(--ed-theme-typography-label-default-font-weight);font-size:var(--ed-theme-typography-label-default-font-size);line-height:var(--ed-theme-typography-label-default-line-height);letter-spacing:var(--ed-theme-typography-label-default-letter-spacing);text-transform:var(--ed-theme-typography-label-default-text-transform)}.ed-c-heading--label-sm{font-family:var(--ed-theme-typography-label-sm-font-family);font-weight:var(--ed-theme-typography-label-sm-font-weight);font-size:var(--ed-theme-typography-label-sm-font-size);line-height:var(--ed-theme-typography-label-sm-line-height);letter-spacing:var(--ed-theme-typography-label-sm-letter-spacing);text-transform:var(--ed-theme-typography-label-sm-text-transform)}.ed-c-heading--body-lg{font-family:var(--ed-theme-typography-body-lg-font-family);font-weight:var(--ed-theme-typography-body-lg-font-weight);font-size:var(--ed-theme-typography-body-lg-font-size);line-height:var(--ed-theme-typography-body-lg-line-height);letter-spacing:var(--ed-theme-typography-body-lg-letter-spacing);text-transform:var(--ed-theme-typography-body-lg-text-transform)}.ed-c-heading--body-default{font-family:var(--ed-theme-typography-body-default-font-family);font-weight:var(--ed-theme-typography-body-default-font-weight);font-size:var(--ed-theme-typography-body-default-font-size);line-height:var(--ed-theme-typography-body-default-line-height);letter-spacing:var(--ed-theme-typography-body-default-letter-spacing);text-transform:var(--ed-theme-typography-body-default-text-transform)}.ed-c-heading--body-sm{font-family:var(--ed-theme-typography-body-sm-font-family);font-weight:var(--ed-theme-typography-body-sm-font-weight);font-size:var(--ed-theme-typography-body-sm-font-size);line-height:var(--ed-theme-typography-body-sm-line-height);letter-spacing:var(--ed-theme-typography-body-sm-letter-spacing);text-transform:var(--ed-theme-typography-body-sm-text-transform)}.ed-c-heading--meta-default{font-family:var(--ed-theme-typography-meta-default-font-family);font-weight:var(--ed-theme-typography-meta-default-font-weight);font-size:var(--ed-theme-typography-meta-default-font-size);line-height:var(--ed-theme-typography-meta-default-line-height);letter-spacing:var(--ed-theme-typography-meta-default-letter-spacing);text-transform:var(--ed-theme-typography-meta-default-text-transform)}.ed-c-heading--meta-sm{font-family:var(--ed-theme-typography-meta-sm-font-family);font-weight:var(--ed-theme-typography-meta-sm-font-weight);font-size:var(--ed-theme-typography-meta-sm-font-size);line-height:var(--ed-theme-typography-meta-sm-line-height);letter-spacing:var(--ed-theme-typography-meta-sm-letter-spacing);text-transform:var(--ed-theme-typography-meta-sm-text-transform)}</style><!--lit-part a6IwmhhE4C0=--> <!--lit-node 0--><h3 class="ed-c-heading ed-c-heading--headline-sm"><slot></slot></h3> <!--/lit-part--></template>Check out my courses</ed-heading> 2435 <ed-grid variant="3up"><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:block}.ed-c-grid{display:flex;flex-direction:column;flex-wrap:wrap;margin:-.75rem}.ed-c-grid--gap-none{margin:0}.ed-c-grid--gap-sm{margin:-.25rem}.ed-c-grid--gap-lg{margin:-1rem}.ed-c-grid--side-by-side{flex-direction:row}@media all and (min-width:48rem){.ed-c-grid--2up{flex-direction:row}}@media all and (min-width:23.4375rem){.ed-c-grid--2up.ed-c-grid--break-faster{flex-direction:row}}@media all and (min-width:48rem){.ed-c-grid--2up.ed-c-grid--break-slower{flex-direction:column}}@media all and (min-width:87.5rem){.ed-c-grid--2up.ed-c-grid--break-slower{flex-direction:row}}@media all and (min-width:48rem){.ed-c-grid--3up{flex-direction:row}}@media all and (min-width:60rem){.ed-c-grid--1-3up{flex-direction:row}}@media all and (min-width:48rem){.ed-c-grid--1-3up.ed-c-grid--break-faster{flex-direction:row}}@media all and (min-width:60rem){.ed-c-grid--1-3up.ed-c-grid--break-slower{flex-direction:column}}@media all and (min-width:75rem){.ed-c-grid--1-3up.ed-c-grid--break-slower{flex-direction:row}}@media all and (min-width:23.4375rem){.ed-c-grid--1-2-4up{flex-direction:row}}@media all and (min-width:48rem){.ed-c-grid--1-4up{flex-direction:row}}@media all and (min-width:23.4375rem){.ed-c-grid--4up{flex-direction:row}}.ed-c-grid--2-4-6up{flex-direction:row}::slotted(ed-grid-item){display:block;padding:.75rem}.ed-c-grid--gap-none>::slotted(ed-grid-item){padding:0}.ed-c-grid--gap-sm>::slotted(ed-grid-item){padding:.25rem}.ed-c-grid--gap-lg>::slotted(ed-grid-item){padding:1rem}.ed-c-grid--side-by-side>::slotted(ed-grid-item){width:50%}@media all and (min-width:48rem){.ed-c-grid--2up>::slotted(ed-grid-item){width:50%}}@media all and (min-width:23.4375rem){.ed-c-grid--2up.ed-c-grid--break-faster>::slotted(ed-grid-item){width:50%}}@media all and (min-width:48rem){.ed-c-grid--2up.ed-c-grid--break-slower>::slotted(ed-grid-item){width:100%}}@media all and (min-width:87.5rem){.ed-c-grid--2up.ed-c-grid--break-slower>::slotted(ed-grid-item){width:50%}}@media all and (min-width:48rem){.ed-c-grid--3up>::slotted(ed-grid-item){width:50%}}@media all and (min-width:60rem){.ed-c-grid--3up>::slotted(ed-grid-item){width:33.3333%}}@media all and (min-width:60rem){.ed-c-grid--1-3up>::slotted(ed-grid-item){width:33.3333%}}@media all and (min-width:48rem){.ed-c-grid--1-3up.ed-c-grid--break-faster>::slotted(ed-grid-item){width:33.33%}}@media all and (min-width:60rem){.ed-c-grid--1-3up.ed-c-grid--break-slower>::slotted(ed-grid-item){width:100%}}@media all and (min-width:75rem){.ed-c-grid--1-3up.ed-c-grid--break-slower>::slotted(ed-grid-item){width:33.33%}}@media all and (min-width:23.4375rem){.ed-c-grid--1-2-4up>::slotted(ed-grid-item){width:50%}}@media all and (min-width:60rem){.ed-c-grid--1-2-4up>::slotted(ed-grid-item){width:25%}}@media all and (min-width:48rem){.ed-c-grid--1-4up>::slotted(ed-grid-item){width:25%}}@media all and (min-width:23.4375rem){.ed-c-grid--4up>::slotted(ed-grid-item){width:50%}}@media all and (min-width:48rem){.ed-c-grid--4up>::slotted(ed-grid-item){width:33.3333%}}@media all and (min-width:60rem){.ed-c-grid--4up>::slotted(ed-grid-item){width:25%}}.ed-c-grid--2-4-6up>::slotted(ed-grid-item){width:50%}@media all and (min-width:60rem){.ed-c-grid--2-4-6up>::slotted(ed-grid-item){width:25%}}@media all and (min-width:75rem){.ed-c-grid--2-4-6up>::slotted(ed-grid-item){width:16.66%}}</style><!--lit-part IcF6iJIJxGQ=--> 2436 <!--lit-node 0--><div class="ed-c-grid ed-c-grid--3up"> 2437 <slot></slot> 2438 </div> 2439 <!--/lit-part--></template> 2440 <ed-grid-item><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:block}.ed-c-grid__item{height:100%}</style><!--lit-part IcF6iJIJxGQ=--> 2441 <!--lit-node 0--><div class="ed-c-grid__item"> 2442 <slot></slot> 2443 </div> 2444 <!--/lit-part--></template> 2445 <a href="https://aianddesign.systems/"> 2446 <picture><source type="image/avif" srcset="/images/QNLhWud95V-1024.avif 1024w"><source type="image/webp" srcset="/images/QNLhWud95V-1024.webp 1024w"><img loading="lazy" decoding="async" src="/images/QNLhWud95V-1024.png" alt="AI & Design Systems course" width="1024" height="575"></picture> 2447 </a> 2448 </ed-grid-item> 2449 <ed-grid-item><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:block}.ed-c-grid__item{height:100%}</style><!--lit-part IcF6iJIJxGQ=--> 2450 <!--lit-node 0--><div class="ed-c-grid__item"> 2451 <slot></slot> 2452 </div> 2453 <!--/lit-part--></template> 2454 <a href="https://atomicdesigncourse.com/"> 2455 <img src="/images/courses/atomic-design-certification-course.png" alt="Atomic Design Certification Course" width="2000" height="1125" loading="lazy"> 2456 </a> 2457 </ed-grid-item> 2458 <ed-grid-item><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:block}.ed-c-grid__item{height:100%}</style><!--lit-part IcF6iJIJxGQ=--> 2459 <!--lit-node 0--><div class="ed-c-grid__item"> 2460 <slot></slot> 2461 </div> 2462 <!--/lit-part--></template> 2463 <a href="https://designtokenscourse.com/"> 2464 <picture><source type="image/avif" srcset="/images/1wzZI3J-sn-1024.avif 1024w"><source type="image/webp" srcset="/images/1wzZI3J-sn-1024.webp 1024w"><img loading="lazy" decoding="async" src="/images/1wzZI3J-sn-1024.jpeg" alt="Subatomic: The Complete Guide to Design Tokens course" width="1024" height="576"></picture> 2465 </a> 2466 </ed-grid-item> 2467 </ed-grid> 2468 </ed-section> 2469 </ed-layout-container> 2470 2471 <ed-layout-container><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:block}.ed-l-layout-container{width:100%;max-width:var(--ed-layout-container-max-width, 70rem);padding-inline-end:1rem;padding-inline-start:1rem;margin:0 auto}.ed-l-layout-container--narrow{max-width:50rem}.ed-l-layout-container--wide{max-width:80rem}</style><!--lit-part IcF6iJIJxGQ=--> 2472 <!--lit-node 0--><div class="ed-l-layout-container"> 2473 <slot></slot> 2474 </div> 2475 <!--/lit-part--></template> 2476 <ed-section align="left"> 2477 <ed-heading slot="header" tagname="h3"><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:block}:host([visuallyhidden]){border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ed-c-heading--visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ed-c-heading{text-wrap:var(--ed-heading-text-wrap, balance);margin:0}.ed-c-heading--wrap-balance{--ed-heading-text-wrap: balance}.ed-c-heading--wrap-pretty{--ed-heading-text-wrap: pretty}.ed-c-heading--wrap-normal{--ed-heading-text-wrap: normal}::slotted(a){color:inherit;text-decoration:none;border-block-end:var(--ed-theme-border-width-sm) solid transparent;transition:border-color var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}::slotted(a:hover),::slotted(a:focus-visible){color:inherit;border-block-end-color:var(--ed-heading-link-color-border, var(--ed-theme-color-border-brand))}::slotted(a:focus-visible){outline:var(--ed-theme-border-width-lg) solid var(--ed-theme-focus-ring-color-border-default);outline-offset:var(--ed-theme-focus-ring-offset, .25rem)}.ed-c-heading--display-xl{font-family:var(--ed-theme-typography-display-xl-mobile-font-family);
2477font-weight:var(--ed-theme-typography-display-xl-mobile-font-weight);font-size:var(--ed-theme-typography-display-xl-mobile-font-size);line-height:var(--ed-theme-typography-display-xl-mobile-line-height);letter-spacing:var(--ed-theme-typography-display-xl-mobile-letter-spacing);text-transform:var(--ed-theme-typography-display-xl-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--display-xl{font-family:var(--ed-theme-typography-display-xl-tablet-font-family);font-weight:var(--ed-theme-typography-display-xl-tablet-font-weight);font-size:var(--ed-theme-typography-display-xl-tablet-font-size);line-height:var(--ed-theme-typography-display-xl-tablet-line-height);letter-spacing:var(--ed-theme-typography-display-xl-tablet-letter-spacing);text-transform:var(--ed-theme-typography-display-xl-tablet-text-transform)}}@media all and (min-width:75rem){.ed-c-heading--display-xl{font-family:var(--ed-theme-typography-display-xl-font-family);font-weight:var(--ed-theme-typography-display-xl-font-weight);font-size:var(--ed-theme-typography-display-xl-font-size);line-height:var(--ed-theme-typography-display-xl-line-height);letter-spacing:var(--ed-theme-typography-display-xl-letter-spacing);text-transform:var(--ed-theme-typography-display-xl-text-transform)}}.ed-c-heading--display-lg{font-family:var(--ed-theme-typography-display-lg-mobile-font-family);font-weight:var(--ed-theme-typography-display-lg-mobile-font-weight);font-size:var(--ed-theme-typography-display-lg-mobile-font-size);line-height:var(--ed-theme-typography-display-lg-mobile-line-height);letter-spacing:var(--ed-theme-typography-display-lg-mobile-letter-spacing);text-transform:var(--ed-theme-typography-display-lg-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--display-lg{font-family:var(--ed-theme-typography-display-lg-font-family);font-weight:var(--ed-theme-typography-display-lg-font-weight);font-size:var(--ed-theme-typography-display-lg-font-size);line-height:var(--ed-theme-typography-display-lg-line-height);letter-spacing:var(--ed-theme-typography-display-lg-letter-spacing);text-transform:var(--ed-theme-typography-display-lg-text-transform)}}.ed-c-heading--display-default{font-family:var(--ed-theme-typography-display-default-mobile-font-family);font-weight:var(--ed-theme-typography-display-default-mobile-font-weight);font-size:var(--ed-theme-typography-display-default-mobile-font-size);line-height:var(--ed-theme-typography-display-default-mobile-line-height);letter-spacing:var(--ed-theme-typography-display-default-mobile-letter-spacing);text-transform:var(--ed-theme-typography-display-default-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--display-default{font-family:var(--ed-theme-typography-display-default-font-family);font-weight:var(--ed-theme-typography-display-default-font-weight);font-size:var(--ed-theme-typography-display-default-font-size);line-height:var(--ed-theme-typography-display-default-line-height);letter-spacing:var(--ed-theme-typography-display-default-letter-spacing);text-transform:var(--ed-theme-typography-display-default-text-transform)}}.ed-c-heading--headline-lg{font-family:var(--ed-theme-typography-headline-lg-mobile-font-family);font-weight:var(--ed-theme-typography-headline-lg-mobile-font-weight);font-size:var(--ed-theme-typography-headline-lg-mobile-font-size);line-height:var(--ed-theme-typography-headline-lg-mobile-line-height);letter-spacing:var(--ed-theme-typography-headline-lg-mobile-letter-spacing);text-transform:var(--ed-theme-typography-headline-lg-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--headline-lg{font-family:var(--ed-theme-typography-headline-lg-font-family);
2477font-weight:var(--ed-theme-typography-headline-lg-font-weight);font-size:var(--ed-theme-typography-headline-lg-font-size);line-height:var(--ed-theme-typography-headline-lg-line-height);letter-spacing:var(--ed-theme-typography-headline-lg-letter-spacing);text-transform:var(--ed-theme-typography-headline-lg-text-transform)}}.ed-c-heading--headline-default{font-family:var(--ed-theme-typography-headline-default-mobile-font-family);font-weight:var(--ed-theme-typography-headline-default-mobile-font-weight);font-size:var(--ed-theme-typography-headline-default-mobile-font-size);line-height:var(--ed-theme-typography-headline-default-mobile-line-height);letter-spacing:var(--ed-theme-typography-headline-default-mobile-letter-spacing);text-transform:var(--ed-theme-typography-headline-default-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--headline-default{font-family:var(--ed-theme-typography-headline-default-font-family);font-weight:var(--ed-theme-typography-headline-default-font-weight);font-size:var(--ed-theme-typography-headline-default-font-size);line-height:var(--ed-theme-typography-headline-default-line-height);letter-spacing:var(--ed-theme-typography-headline-default-letter-spacing);text-transform:var(--ed-theme-typography-headline-default-text-transform)}}.ed-c-heading--headline-sm{font-family:var(--ed-theme-typography-headline-sm-mobile-font-family);font-weight:var(--ed-theme-typography-headline-sm-mobile-font-weight);font-size:var(--ed-theme-typography-headline-sm-mobile-font-size);line-height:var(--ed-theme-typography-headline-sm-mobile-line-height);letter-spacing:var(--ed-theme-typography-headline-sm-mobile-letter-spacing);text-transform:var(--ed-theme-typography-headline-sm-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--headline-sm{font-family:var(--ed-theme-typography-headline-sm-font-family);font-weight:var(--ed-theme-typography-headline-sm-font-weight);font-size:var(--ed-theme-typography-headline-sm-font-size);line-height:var(--ed-theme-typography-headline-sm-line-height);letter-spacing:var(--ed-theme-typography-headline-sm-letter-spacing);text-transform:var(--ed-theme-typography-headline-sm-text-transform)}}.ed-c-heading--title-lg{font-family:var(--ed-theme-typography-title-lg-mobile-font-family);font-weight:var(--ed-theme-typography-title-lg-mobile-font-weight);font-size:var(--ed-theme-typography-title-lg-mobile-font-size);line-height:var(--ed-theme-typography-title-lg-mobile-line-height);letter-spacing:var(--ed-theme-typography-title-lg-mobile-letter-spacing);text-transform:var(--ed-theme-typography-title-lg-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--title-lg{font-family:var(--ed-theme-typography-title-lg-font-family);font-weight:var(--ed-theme-typography-title-lg-font-weight);font-size:var(--ed-theme-typography-title-lg-font-size);line-height:var(--ed-theme-typography-title-lg-line-height);letter-spacing:var(--ed-theme-typography-title-lg-letter-spacing);text-transform:var(--ed-theme-typography-title-lg-text-transform)}}.ed-c-heading--title-default{font-family:var(--ed-theme-typography-title-default-font-family);font-weight:var(--ed-theme-typography-title-default-font-weight);font-size:var(--ed-theme-typography-title-default-font-size);line-height:var(--ed-theme-typography-title-default-line-height);letter-spacing:var(--ed-theme-typography-title-default-letter-spacing);text-transform:var(--ed-theme-typography-title-default-text-transform)}.ed-c-heading--title-sm{font-family:var(--ed-theme-typography-title-sm-font-family);font-weight:var(--ed-theme-typography-title-sm-font-weight);font-size:var(--ed-theme-typography-title-sm-font-size);line-height:var(--ed-theme-typography-title-sm-line-height);letter-spacing:var(--ed-theme-typography-title-sm-letter-spacing);text-transform:var(--ed-theme-typography-title-sm-text-transform)}.ed-c-heading--label-lg{font-family:var(--ed-theme-typography-label-lg-font-family);font-weight:var(--ed-theme-typography-label-lg-font-weight);font-size:var(--ed-theme-typography-label-lg-font-size);line-height:var(--ed-theme-typography-label-lg-line-height);letter-spacing:var(--ed-theme-typography-label-lg-letter-spacing);text-transform:var(--ed-theme-typography-label-lg-text-transform)}.ed-c-heading--label-default{font-family:var(--ed-theme-typography-label-default-font-family);
2477font-weight:var(--ed-theme-typography-label-default-font-weight);font-size:var(--ed-theme-typography-label-default-font-size);line-height:var(--ed-theme-typography-label-default-line-height);letter-spacing:var(--ed-theme-typography-label-default-letter-spacing);text-transform:var(--ed-theme-typography-label-default-text-transform)}.ed-c-heading--label-sm{font-family:var(--ed-theme-typography-label-sm-font-family);font-weight:var(--ed-theme-typography-label-sm-font-weight);font-size:var(--ed-theme-typography-label-sm-font-size);line-height:var(--ed-theme-typography-label-sm-line-height);letter-spacing:var(--ed-theme-typography-label-sm-letter-spacing);text-transform:var(--ed-theme-typography-label-sm-text-transform)}.ed-c-heading--body-lg{font-family:var(--ed-theme-typography-body-lg-font-family);font-weight:var(--ed-theme-typography-body-lg-font-weight);font-size:var(--ed-theme-typography-body-lg-font-size);line-height:var(--ed-theme-typography-body-lg-line-height);letter-spacing:var(--ed-theme-typography-body-lg-letter-spacing);text-transform:var(--ed-theme-typography-body-lg-text-transform)}.ed-c-heading--body-default{font-family:var(--ed-theme-typography-body-default-font-family);font-weight:var(--ed-theme-typography-body-default-font-weight);font-size:var(--ed-theme-typography-body-default-font-size);line-height:var(--ed-theme-typography-body-default-line-height);letter-spacing:var(--ed-theme-typography-body-default-letter-spacing);text-transform:var(--ed-theme-typography-body-default-text-transform)}.ed-c-heading--body-sm{font-family:var(--ed-theme-typography-body-sm-font-family);font-weight:var(--ed-theme-typography-body-sm-font-weight);font-size:var(--ed-theme-typography-body-sm-font-size);line-height:var(--ed-theme-typography-body-sm-line-height);letter-spacing:var(--ed-theme-typography-body-sm-letter-spacing);text-transform:var(--ed-theme-typography-body-sm-text-transform)}.ed-c-heading--meta-default{font-family:var(--ed-theme-typography-meta-default-font-family);font-weight:var(--ed-theme-typography-meta-default-font-weight);font-size:var(--ed-theme-typography-meta-default-font-size);line-height:var(--ed-theme-typography-meta-default-line-height);letter-spacing:var(--ed-theme-typography-meta-default-letter-spacing);text-transform:var(--ed-theme-typography-meta-default-text-transform)}.ed-c-heading--meta-sm{font-family:var(--ed-theme-typography-meta-sm-font-family);font-weight:var(--ed-theme-typography-meta-sm-font-weight);font-size:var(--ed-theme-typography-meta-sm-font-size);line-height:var(--ed-theme-typography-meta-sm-line-height);letter-spacing:var(--ed-theme-typography-meta-sm-letter-spacing);text-transform:var(--ed-theme-typography-meta-sm-text-transform)}</style><!--lit-part a6IwmhhE4C0=--> <!--lit-node 0--><h3 class="ed-c-heading ed-c-heading--headline-sm"><slot></slot></h3> <!--/lit-part--></template>Get my newsletter</ed-heading> 2478 <ed-text-passage class="ed-u-margin-block-end-lg"><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:block}</style><!--lit-part QWH7bvKwthM=--> 2479 <!--lit-node 0--><div class="ed-c-text-passage"> 2480 <slot></slot> 2481 </div> 2482 <!--/lit-part--></template> 2483 <p>I like connecting with people directly without algorithms and machines getting in the way, and my newsletter helps me do that. Subscribe to get my latest thinking and interesting links about design, technology, music, art, creativity, and some random fun along the way.</p> 2484 </ed-text-passage> 2485 2486<ed-r-newsletter-signup fieldid="newsletter-email-footer" action="https://buttondown.com/api/emails/embed-subscribe/brad_frost" method="post" name="email" label="Email address" placeholder="[email protected]" knockout><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-r-newsletter-signup{display:block}</style><!--lit-part 1L9//v1XTkw=--> 2487 <!--lit-node 0--><ed-single-field-form 2488 2489 2490 2491 2492 2493 2494 2495 2496 2497 2498 2499 2500 2501 2502 type="email" autocomplete="email" required class="ed-r-newsletter-signup" fieldid="newsletter-email-footer" label="Email address" placeholder="[email protected]" name="email" action="https://buttondown.
2502com/api/emails/embed-subscribe/brad_frost" method="post" buttontext="Subscribe" knockout defer-hydration><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-u-is-hidden{display:none!important;visibility:hidden!important}.ed-u-is-vishidden{position:absolute!important;overflow:hidden;width:1px;height:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px)}@media all and (min-width:23.4375rem){.ed-u-hide-sm{display:none!important}}@media all and (min-width:48rem){.ed-u-hide-md{display:none!important}}@media all and (min-width:60rem){.ed-u-hide-lg{display:none!important}}@media all and (min-width:75rem){.ed-u-hide-xl{display:none!important}}@media all and (max-width:23.4375rem){.ed-u-show-sm{display:none!important}}@media all and (max-width:48rem){.ed-u-show-md{display:none!important}}@media all and (max-width:60rem){.ed-u-show-lg{display:none!important}}@media all and (max-width:75rem){.ed-u-show-xl{display:none!important}}.ed-c-single-field-form{width:100%}@media all and (min-width:48rem){.ed-c-single-field-form__body{display:flex}}.ed-c-single-field-form__body-inner{position:relative;flex:1}.ed-c-single-field-form__clear-button{--ed-theme-color-content-default: var(--ed-theme-form-color-content-default);--ed-theme-color-content-hover: var(--ed-theme-form-color-content-hover, var(--ed-theme-form-color-content-default));display:inline-flex;position:absolute;inset-block-start:50%;inset-inline-end:1rem;transform:translateY(-50%)}.ed-c-single-field-form__label{font-family:var(--ed-theme-typography-label-default-font-family);font-weight:var(--ed-theme-typography-label-default-font-weight);font-size:var(--ed-theme-typography-label-default-font-size);line-height:var(--ed-theme-typography-label-default-line-height);letter-spacing:var(--ed-theme-typography-label-default-letter-spacing);text-transform:var(--ed-theme-typography-label-default-text-transform);font-size:var(--ed-field-label-font-size, var(--ed-theme-typography-label-default-font-size));margin-block-end:var(--ed-field-label-gap, .25rem);display:block;margin-block-end:.5rem}.ed-c-single-field-form__input{-webkit-appearance:none;width:100%;border-width:var(--ed-theme-border-width-sm);border-style:solid;border-color:var(--ed-theme-form-color-border-default);border-radius:var(--ed-theme-border-radius-sm);outline:none;padding:var(--ed-field-padding-block, .8125rem) var(--ed-field-padding-inline, .5rem);font-family:var(--ed-theme-typography-body-default-font-family);font-weight:var(--ed-theme-typography-body-default-font-weight);font-size:var(--ed-theme-typography-body-default-font-size);line-height:var(--ed-theme-typography-body-default-line-height);letter-spacing:var(--ed-theme-typography-body-default-letter-spacing);text-transform:var(--ed-theme-typography-body-default-text-transform);font-size:var(--ed-field-font-size, var(--ed-theme-typography-body-default-font-size));line-height:var(--ed-field-line-height, var(--ed-theme-typography-body-default-line-height));color:var(--ed-theme-form-color-content-default);background-color:var(--ed-theme-form-color-background-default);transition:border-color var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease),background-color var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease),box-shadow var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-single-field-form__input:hover{border-color:var(--ed-theme-color-border-brand);background-color:var(--ed-theme-form-color-background-hover)}.ed-c-single-field-form__input:focus:not(:disabled){border-color:var(--ed-theme-form-color-border-focus)}.ed-c-single-field-form__input:not(:placeholder-shown):focus:not(:disabled){border-color:var(--ed-theme-form-color-border-focus);background-color:var(--ed-theme-form-color-background-hover)}.ed-is-error .ed-c-single-field-form__input:not(:placeholder-shown):focus:not(:disabled){background-color:var(--ed-theme-color-background-utility-error)}.ed-is-success .ed-c-single-field-form__input:not(:placeholder-shown):focus:not(:disabled){background-color:var(--ed-theme-color-background-utility-success)}.ed-c-single-field-form__input:active:not(:disabled){border-color:var(--ed-theme-form-color-border-default)}.ed-c-single-field-form__input:disabled{background-color:var(--ed-theme-color-background-subtle);border-color:var(--ed-theme-color-border-disabled);color:var(--ed-theme-color-content-disabled);cursor:not-allowed}.ed-c-single-field-form__input:disabled~.ed-c-text-field__label,.ed-c-single-field-form__input:disabled:hover~.ed-c-text-field__label,.ed-c-single-field-form__input:disabled::placeholder{color:var(--ed-theme-color-content-disabled)}.ed-c-single-field-form__input:focus-visible{outline:var(--ed-theme-border-width-lg) solid var(--ed-theme-focus-ring-color-border-default);outline-offset:var(--ed-theme-focus-ring-offset, .25rem)}.ed-c-single-field-form__input::placeholder{font-family:var(--ed-theme-typography-body-sm-font-family);
2502font-weight:var(--ed-theme-typography-body-sm-font-weight);font-size:var(--ed-theme-typography-body-sm-font-size);line-height:var(--ed-theme-typography-body-sm-line-height);letter-spacing:var(--ed-theme-typography-body-sm-letter-spacing);text-transform:var(--ed-theme-typography-body-sm-text-transform);color:var(--ed-theme-form-color-content-subtle);transition:color var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-is-error .ed-c-single-field-form__input::placeholder{color:var(--ed-theme-color-content-utility-error)}.ed-is-error .ed-c-single-field-form__input:hover::placeholder{color:var(--ed-theme-color-content-utility-error)}.ed-is-error .ed-c-single-field-form__input{color:var(--ed-theme-color-content-default);border-color:var(--ed-theme-color-border-utility-error);background-color:var(--ed-theme-color-background-utility-error)}.ed-is-error .ed-c-single-field-form__input:hover,.ed-is-error .ed-c-single-field-form__input:focus{background-color:var(--ed-theme-color-background-utility-error)}.ed-is-error .ed-c-single-field-form__input:not(:focus){color:var(--ed-theme-color-content-default)}.ed-is-success .ed-c-single-field-form__input{color:var(--ed-theme-color-content-default);border-color:var(--ed-theme-color-border-utility-success);background-color:var(--ed-theme-color-background-utility-success)}.ed-is-success .ed-c-single-field-form__input:hover,.ed-is-success .ed-c-single-field-form__input:focus{background-color:var(--ed-theme-color-background-utility-success)}.ed-c-single-field-form__input{display:block;width:100%}.ed-c-single-field-form--has-clear .ed-c-single-field-form__input{padding-inline-end:6rem}.ed-c-single-field-form__button{display:block;margin-block-start:1rem}@media all and (min-width:48rem){.ed-c-single-field-form__button{margin-block-start:0;margin-inline-start:1rem}}.ed-c-single-field-form--knockout .ed-c-single-field-form__label{color:var(--ed-theme-color-content-knockout)}.ed-c-single-field-form--knockout .ed-c-single-field-form__input{border-color:var(--ed-theme-color-border-subtle)}.ed-c-single-field-form--knockout .ed-c-single-field-form__input:focus:not(:disabled){outline:var(--ed-theme-border-width-lg) solid var(--ed-theme-focus-ring-color-border-knockout);outline-offset:var(--ed-theme-focus-ring-offset, .25rem)}</style><!--lit-part 1qEGMMSiXsI=--> 2503 <!--lit-node 0--><form 2504 class="ed-c-single-field-form ed-c-single-field-form--knockout" 2505 action="https://buttondown.com/api/emails/embed-subscribe/brad_frost" 2506 method="post" 2507 2508 > 2509 <!--lit-node 1--><label 2510 class="ed-c-single-field-form__label" 2511 for="newsletter-email-footer" 2512 ><!--lit-part-->Email address<!--/lit-part--></label 2513 > 2514 <div class="ed-c-single-field-form__body"> 2515 <div class="ed-c-single-field-form__body-inner"> 2516 <!--lit-node 5--><input 2517 class="ed-c-single-field-form__input" 2518 type="email" 2519 id="newsletter-email-footer" 2520 name="email" 2521 value="" 2522 placeholder="[email protected]" 2523 autocomplete="email" 2524 required 2525 2526 2527 /> 2528 <!--lit-part--><!--/lit-part--> 2529 </div> 2530 <!--lit-node 7--><ed-button 2531 2532 2533 2534 2535 2536 2537 2538 class="ed-c-single-field-form__button" text="Subscribe" knockout defer-hydration><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-u-is-hidden{display:none!important;visibility:hidden!important}.ed-u-is-vishidden{position:absolute!important;overflow:hidden;width:1px;height:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px)}@media all and (min-width:23.4375rem){.ed-u-hide-sm{display:none!important}}@media all and (min-width:48rem){.ed-u-hide-md{display:none!important}}@media all and (min-width:60rem){.ed-u-hide-lg{display:none!important}}@media all and (min-width:75rem){.ed-u-hide-xl{display:none!important}}@media all and (max-width:23.4375rem){.ed-u-show-sm{display:none!important}}@media all and (max-width:48rem){.ed-u-show-md{display:none!important}}@media all and (max-width:60rem){.ed-u-show-lg{display:none!important}}@media all and (max-width:75rem){.ed-u-show-xl{display:none!important}}.ed-c-button{font-family:var(--ed-theme-typography-button-default-font-family);
2538font-weight:var(--ed-theme-typography-button-default-font-weight);font-size:var(--ed-theme-typography-button-default-font-size);line-height:var(--ed-theme-typography-button-default-line-height);letter-spacing:var(--ed-theme-typography-button-default-letter-spacing);text-transform:var(--ed-theme-typography-button-default-text-transform);--ed-button-padding-block: .75rem;--ed-button-padding-inline: 1.75rem;--ed-button-padding-inline-icon: .75rem;display:inline-flex;align-items:center;justify-content:center;gap:var(--ed-button-gap, .25em);padding:var(--ed-button-padding-block) var(--ed-button-padding-inline);margin:0;background:var(--ed-theme-button-color-background-default);border-width:var(--ed-theme-border-width-md);border-style:solid;border-color:var(--ed-theme-button-color-border-default);border-radius:var(--ed-theme-border-radius-md);color:var(--ed-theme-button-color-content-default);cursor:pointer;max-width:100%;white-space:var(--ed-button-white-space, normal);overflow-wrap:break-word;text-align:center;transition:all var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-button:hover,.ed-c-button:focus{color:var(--ed-theme-button-color-content-hover);border-color:var(--ed-theme-button-color-border-hover);background:var(--ed-theme-button-color-background-hover);text-decoration:none}.ed-c-button:focus-visible{outline:var(--ed-theme-border-width-lg) solid var(--ed-theme-focus-ring-color-border-default);outline-offset:var(--ed-theme-focus-ring-offset, .25rem)}.ed-c-button:active{background-color:var(--ed-theme-button-color-background-active);border-color:var(--ed-theme-button-color-border-active);color:var(--ed-theme-button-color-content-active)}a.ed-c-button{text-decoration:none}.ed-c-button:disabled{background-color:var(--ed-theme-button-color-background-disabled);border-color:var(--ed-theme-button-color-border-disabled);color:var(--ed-theme-button-color-content-disabled);cursor:not-allowed}.ed-c-button:disabled:hover,.ed-c-button:disabled:focus,.ed-c-button:disabled:active{background-color:var(--ed-theme-button-color-background-disabled);border-color:var(--ed-theme-button-color-border-disabled);color:var(--ed-theme-button-color-content-disabled)}.ed-c-button--primary{background-color:var(--ed-theme-button-primary-color-background-default);border-color:var(--ed-theme-button-primary-color-border-default);color:var(--ed-theme-button-primary-color-content-default)}.ed-c-button--primary:hover,.ed-c-button--primary:focus{background-color:var(--ed-theme-button-primary-color-background-hover);border-color:var(--ed-theme-button-primary-color-border-hover);color:var(--ed-theme-button-primary-color-content-hover)}.ed-c-button--primary:active{background-color:var(--ed-theme-button-primary-color-background-active);border-color:var(--ed-theme-button-primary-color-border-active);color:var(--ed-theme-button-primary-color-content-active)}.ed-c-button--primary:disabled{background-color:var(--ed-theme-button-primary-color-background-disabled);border-color:var(--ed-theme-button-primary-color-border-disabled);color:var(--ed-theme-button-primary-color-content-disabled)}.ed-c-button--primary:disabled:hover,.ed-c-button--primary:disabled:focus,.ed-c-button--primary:disabled:active{background-color:var(--ed-theme-button-primary-color-background-disabled);border-color:var(--ed-theme-button-primary-color-border-disabled);color:var(--ed-theme-button-primary-color-content-disabled)}.ed-c-button--danger{background-color:var(--ed-theme-button-danger-color-background-default, var(--ed-theme-color-background-utility-error));border-color:var(--ed-theme-button-danger-color-border-default, var(--ed-theme-color-border-utility-error));color:var(--ed-theme-button-danger-color-content-default, var(--ed-theme-color-content-utility-error))}.ed-c-button--danger:hover,.ed-c-button--danger:focus{background-color:var(--ed-theme-button-danger-color-background-hover, var(--ed-theme-color-background-utility-error));border-color:var(--ed-theme-button-danger-color-border-hover, var(--ed-theme-color-border-utility-error));color:var(--ed-theme-button-danger-color-content-hover, var(--ed-theme-color-content-utility-error))}.ed-c-button--danger:active{background-color:var(--ed-theme-button-danger-color-background-active, var(--ed-theme-color-background-utility-error));border-color:var(--ed-theme-button-danger-color-border-active, var(--ed-theme-color-border-utility-error));color:var(--ed-theme-button-danger-color-content-active, var(--ed-theme-color-content-utility-error))}.ed-c-button--danger:disabled{background-color:var(--ed-theme-button-danger-color-background-disabled, var(--ed-theme-button-color-background-disabled));border-color:var(--ed-theme-button-danger-color-border-disabled, var(--ed-theme-button-color-border-disabled));color:var(--ed-theme-button-danger-color-content-disabled, var(--ed-theme-button-color-content-disabled))}.ed-c-button--danger:disabled:hover,.ed-c-button--danger:disabled:focus,.ed-c-button--danger:disabled:active{background-color:var(--ed-theme-button-danger-color-background-disabled, var(--ed-theme-button-color-background-disabled));border-color:var(--ed-theme-button-danger-color-border-disabled, var(--ed-theme-button-color-border-disabled));color:var(--ed-theme-button-danger-color-content-disabled, var(--ed-theme-button-color-content-disabled))}.ed-c-button--link{font-family:var(--ed-theme-typography-body-default-font-family);
2538font-weight:var(--ed-theme-typography-body-default-font-weight);font-size:var(--ed-theme-typography-body-default-font-size);line-height:var(--ed-theme-typography-body-default-line-height);letter-spacing:var(--ed-theme-typography-body-default-letter-spacing);text-transform:var(--ed-theme-typography-body-default-text-transform);background-color:transparent;border:none;color:var(--ed-theme-link-color-content-default);padding:0}.ed-c-button--link:hover,.ed-c-button--link:focus{background-color:transparent;border:none;color:var(--ed-theme-link-color-content-hover);text-decoration:underline}.ed-c-button--link:active{background-color:transparent;border:none;color:var(--ed-theme-link-color-content-active)}.ed-c-button--link:visited{color:var(--ed-theme-link-color-content-visited)}.ed-c-button--link:disabled{background-color:transparent;border:none;color:var(--ed-theme-color-content-disabled)}.ed-c-button--link:disabled:hover,.ed-c-button--link:disabled:focus,.ed-c-button--link:disabled:active{background-color:transparent;border:none;color:var(--ed-theme-color-content-disabled)}.ed-c-button--link.ed-c-button--sm{font-family:var(--ed-theme-typography-body-sm-font-family);font-weight:var(--ed-theme-typography-body-sm-font-weight);font-size:var(--ed-theme-typography-body-sm-font-size);line-height:var(--ed-theme-typography-body-sm-line-height);letter-spacing:var(--ed-theme-typography-body-sm-letter-spacing);text-transform:var(--ed-theme-typography-body-sm-text-transform)}.ed-c-button--link.ed-c-button--lg{font-family:var(--ed-theme-typography-body-lg-font-family);font-weight:var(--ed-theme-typography-body-lg-font-weight);font-size:var(--ed-theme-typography-body-lg-font-size);line-height:var(--ed-theme-typography-body-lg-line-height);letter-spacing:var(--ed-theme-typography-body-lg-letter-spacing);text-transform:var(--ed-theme-typography-body-lg-text-transform)}.ed-c-button--bare{padding:0;border:0;background:none;color:var(--ed-theme-color-content-default)}.ed-c-button--bare:hover,.ed-c-button--bare:focus{color:var(--ed-theme-button-bare-color-content-hover);background:none}.ed-c-button--bare:disabled{color:var(--ed-theme-button-bare-color-content-disabled);background:none;cursor:not-allowed}.ed-c-button--bare:disabled:hover,.ed-c-button--bare:disabled:focus{background:none;color:var(--ed-theme-button-bare-color-content-disabled)}.ed-c-button--knockout:focus-visible{outline:var(--ed-theme-border-width-lg) solid var(--ed-theme-focus-ring-color-border-knockout);outline-offset:var(--ed-theme-focus-ring-offset, .25rem)}.ed-c-button--bare.ed-c-button--knockout{color:var(--ed-theme-color-content-knockout)}.ed-c-button--bare.ed-c-button--knockout:hover,.ed-c-button--bare.ed-c-button--knockout:focus{color:var(--ed-theme-color-content-knockout)}.ed-c-button--bare.ed-c-button--knockout:active{color:var(--ed-theme-color-content-knockout)}.ed-c-button--link.ed-c-button--knockout{color:var(--ed-theme-link-color-content-knockout)}.ed-c-button--link.ed-c-button--knockout:hover,.ed-c-button--link.ed-c-button--knockout:focus{color:var(--ed-theme-link-color-content-knockout-hover)}.ed-c-button--link.ed-c-button--knockout:active{color:var(--ed-theme-link-color-content-knockout-active)}.ed-c-button--link.ed-c-button--knockout:visited{color:var(--ed-theme-link-color-content-knockout-visited)}.ed-c-button--full-width{width:100%;justify-content:center;text-align:center}.ed-c-button--loading{cursor:not-allowed}a.ed-c-button--loading{background-color:var(--ed-theme-button-color-background-disabled);border-color:var(--ed-theme-button-color-border-disabled);color:var(--ed-theme-button-color-content-disabled)}a.ed-c-button--loading:hover,a.ed-c-button--loading:focus,a.ed-c-button--loading:active{background-color:var(--ed-theme-button-color-background-disabled);border-color:var(--ed-theme-button-color-border-disabled);color:var(--ed-theme-button-color-content-disabled)}.ed-c-button__spinner{display:inline-flex;align-self:center;animation:ed-c-button-spin .7s linear infinite}@media(prefers-reduced-motion:reduce){.ed-c-button__spinner{animation:none}}@keyframes ed-c-button-spin{to{transform:rotate(360deg)}}.ed-c-button--sm{font-family:var(--ed-theme-typography-button-sm-font-family);
2538font-weight:var(--ed-theme-typography-button-sm-font-weight);font-size:var(--ed-theme-typography-button-sm-font-size);line-height:var(--ed-theme-typography-button-sm-line-height);letter-spacing:var(--ed-theme-typography-button-sm-letter-spacing);text-transform:var(--ed-theme-typography-button-sm-text-transform);--ed-button-padding-block: .5rem;--ed-button-padding-inline: 1rem;--ed-button-padding-inline-icon: .75rem}.ed-c-button--sm.ed-c-button--bare{padding:0}.ed-c-button--lg{font-family:var(--ed-theme-typography-button-lg-font-family);font-weight:var(--ed-theme-typography-button-lg-font-weight);font-size:var(--ed-theme-typography-button-lg-font-size);line-height:var(--ed-theme-typography-button-lg-line-height);letter-spacing:var(--ed-theme-typography-button-lg-letter-spacing);text-transform:var(--ed-theme-typography-button-lg-text-transform);--ed-button-padding-block: 1rem;--ed-button-padding-inline: 2.25rem;--ed-button-padding-inline-icon: 1rem}.ed-c-button--lg.ed-c-button--bare{padding:0}ed-icon{--ed-icon-height: 1em;--ed-icon-width: 1em;transition:all var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease);transform:var(--ed-button-icon-transform, none)}.ed-c-button:not(.ed-c-button--bare):not(.ed-c-button--link):has(>ed-icon:first-child){padding-inline-start:var(--ed-button-padding-inline-icon)}.ed-c-button:not(.ed-c-button--bare):not(.ed-c-button--link):has(>ed-icon:last-child){padding-inline-end:var(--ed-button-padding-inline-icon)}.ed-c-button:not(.ed-c-button--bare):not(.ed-c-button--link):has(>.ed-c-button__text.ed-u-is-vishidden){padding-inline:var(--ed-button-padding-inline-icon)}</style><!--lit-part udhaqDQiKHQ=--> 2539 <!--lit-node 0--><button type="button" class="ed-c-button ed-c-button--knockout" 2540 2541 2542 > 2543 <!--lit-part--><!--/lit-part--> 2544 <!--lit-node 2--><span class="ed-c-button__text"><slot><!--lit-part-->Subscribe<!--/lit-part--></slot></span> 2545 <!--lit-part--><!--/lit-part--> 2546 </button> 2547 <!--/lit-part--></template></ed-button> 2548 </div> 2549 </form> 2550 <!--/lit-part--></template></ed-single-field-form> 2551 <!--/lit-part--></template> 2552</ed-r-newsletter-signup> 2553 2554 </ed-section> 2555 </ed-layout-container> 2556 2557 <ed-layout-container><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:block}.ed-l-layout-container{width:100%;max-width:var(--ed-layout-container-max-width, 70rem);padding-inline-end:1rem;padding-inline-start:1rem;margin:0 auto}.ed-l-layout-container--narrow{max-width:50rem}.ed-l-layout-container--wide{max-width:80rem}</style><!--lit-part IcF6iJIJxGQ=--> 2558 <!--lit-node 0--><div class="ed-l-layout-container"> 2559 <slot></slot> 2560 </div> 2561 <!--/lit-part--></template> 2562 <ed-section align="left"> 2563 <ed-heading slot="header" tagname="h3"><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:block}:host([visuallyhidden]){border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ed-c-heading--visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ed-c-heading{text-wrap:var(--ed-heading-text-wrap, balance);margin:0}.ed-c-heading--wrap-balance{--ed-heading-text-wrap: balance}.ed-c-heading--wrap-pretty{--ed-heading-text-wrap: pretty}.ed-c-heading--wrap-normal{--ed-heading-text-wrap: normal}::slotted(a){color:inherit;text-decoration:none;border-block-end:var(--ed-theme-border-width-sm) solid transparent;transition:border-color var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}::slotted(a:hover),::slotted(a:focus-visible){color:inherit;border-block-end-color:var(--ed-heading-link-color-border, var(--ed-theme-color-border-brand))}::slotted(a:focus-visible){outline:var(--ed-theme-border-width-lg) solid var(--ed-theme-focus-ring-color-border-default);outline-offset:var(--ed-theme-focus-ring-offset, .25rem)}.ed-c-heading--display-xl{font-family:var(--ed-theme-typography-display-xl-mobile-font-family);
2563font-weight:var(--ed-theme-typography-display-xl-mobile-font-weight);font-size:var(--ed-theme-typography-display-xl-mobile-font-size);line-height:var(--ed-theme-typography-display-xl-mobile-line-height);letter-spacing:var(--ed-theme-typography-display-xl-mobile-letter-spacing);text-transform:var(--ed-theme-typography-display-xl-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--display-xl{font-family:var(--ed-theme-typography-display-xl-tablet-font-family);font-weight:var(--ed-theme-typography-display-xl-tablet-font-weight);font-size:var(--ed-theme-typography-display-xl-tablet-font-size);line-height:var(--ed-theme-typography-display-xl-tablet-line-height);letter-spacing:var(--ed-theme-typography-display-xl-tablet-letter-spacing);text-transform:var(--ed-theme-typography-display-xl-tablet-text-transform)}}@media all and (min-width:75rem){.ed-c-heading--display-xl{font-family:var(--ed-theme-typography-display-xl-font-family);font-weight:var(--ed-theme-typography-display-xl-font-weight);font-size:var(--ed-theme-typography-display-xl-font-size);line-height:var(--ed-theme-typography-display-xl-line-height);letter-spacing:var(--ed-theme-typography-display-xl-letter-spacing);text-transform:var(--ed-theme-typography-display-xl-text-transform)}}.ed-c-heading--display-lg{font-family:var(--ed-theme-typography-display-lg-mobile-font-family);font-weight:var(--ed-theme-typography-display-lg-mobile-font-weight);font-size:var(--ed-theme-typography-display-lg-mobile-font-size);line-height:var(--ed-theme-typography-display-lg-mobile-line-height);letter-spacing:var(--ed-theme-typography-display-lg-mobile-letter-spacing);text-transform:var(--ed-theme-typography-display-lg-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--display-lg{font-family:var(--ed-theme-typography-display-lg-font-family);font-weight:var(--ed-theme-typography-display-lg-font-weight);font-size:var(--ed-theme-typography-display-lg-font-size);line-height:var(--ed-theme-typography-display-lg-line-height);letter-spacing:var(--ed-theme-typography-display-lg-letter-spacing);text-transform:var(--ed-theme-typography-display-lg-text-transform)}}.ed-c-heading--display-default{font-family:var(--ed-theme-typography-display-default-mobile-font-family);font-weight:var(--ed-theme-typography-display-default-mobile-font-weight);font-size:var(--ed-theme-typography-display-default-mobile-font-size);line-height:var(--ed-theme-typography-display-default-mobile-line-height);letter-spacing:var(--ed-theme-typography-display-default-mobile-letter-spacing);text-transform:var(--ed-theme-typography-display-default-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--display-default{font-family:var(--ed-theme-typography-display-default-font-family);font-weight:var(--ed-theme-typography-display-default-font-weight);font-size:var(--ed-theme-typography-display-default-font-size);line-height:var(--ed-theme-typography-display-default-line-height);letter-spacing:var(--ed-theme-typography-display-default-letter-spacing);text-transform:var(--ed-theme-typography-display-default-text-transform)}}.ed-c-heading--headline-lg{font-family:var(--ed-theme-typography-headline-lg-mobile-font-family);font-weight:var(--ed-theme-typography-headline-lg-mobile-font-weight);font-size:var(--ed-theme-typography-headline-lg-mobile-font-size);line-height:var(--ed-theme-typography-headline-lg-mobile-line-height);letter-spacing:var(--ed-theme-typography-headline-lg-mobile-letter-spacing);text-transform:var(--ed-theme-typography-headline-lg-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--headline-lg{font-family:var(--ed-theme-typography-headline-lg-font-family);
2563font-weight:var(--ed-theme-typography-headline-lg-font-weight);font-size:var(--ed-theme-typography-headline-lg-font-size);line-height:var(--ed-theme-typography-headline-lg-line-height);letter-spacing:var(--ed-theme-typography-headline-lg-letter-spacing);text-transform:var(--ed-theme-typography-headline-lg-text-transform)}}.ed-c-heading--headline-default{font-family:var(--ed-theme-typography-headline-default-mobile-font-family);font-weight:var(--ed-theme-typography-headline-default-mobile-font-weight);font-size:var(--ed-theme-typography-headline-default-mobile-font-size);line-height:var(--ed-theme-typography-headline-default-mobile-line-height);letter-spacing:var(--ed-theme-typography-headline-default-mobile-letter-spacing);text-transform:var(--ed-theme-typography-headline-default-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--headline-default{font-family:var(--ed-theme-typography-headline-default-font-family);font-weight:var(--ed-theme-typography-headline-default-font-weight);font-size:var(--ed-theme-typography-headline-default-font-size);line-height:var(--ed-theme-typography-headline-default-line-height);letter-spacing:var(--ed-theme-typography-headline-default-letter-spacing);text-transform:var(--ed-theme-typography-headline-default-text-transform)}}.ed-c-heading--headline-sm{font-family:var(--ed-theme-typography-headline-sm-mobile-font-family);font-weight:var(--ed-theme-typography-headline-sm-mobile-font-weight);font-size:var(--ed-theme-typography-headline-sm-mobile-font-size);line-height:var(--ed-theme-typography-headline-sm-mobile-line-height);letter-spacing:var(--ed-theme-typography-headline-sm-mobile-letter-spacing);text-transform:var(--ed-theme-typography-headline-sm-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--headline-sm{font-family:var(--ed-theme-typography-headline-sm-font-family);font-weight:var(--ed-theme-typography-headline-sm-font-weight);font-size:var(--ed-theme-typography-headline-sm-font-size);line-height:var(--ed-theme-typography-headline-sm-line-height);letter-spacing:var(--ed-theme-typography-headline-sm-letter-spacing);text-transform:var(--ed-theme-typography-headline-sm-text-transform)}}.ed-c-heading--title-lg{font-family:var(--ed-theme-typography-title-lg-mobile-font-family);font-weight:var(--ed-theme-typography-title-lg-mobile-font-weight);font-size:var(--ed-theme-typography-title-lg-mobile-font-size);line-height:var(--ed-theme-typography-title-lg-mobile-line-height);letter-spacing:var(--ed-theme-typography-title-lg-mobile-letter-spacing);text-transform:var(--ed-theme-typography-title-lg-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-heading--title-lg{font-family:var(--ed-theme-typography-title-lg-font-family);font-weight:var(--ed-theme-typography-title-lg-font-weight);font-size:var(--ed-theme-typography-title-lg-font-size);line-height:var(--ed-theme-typography-title-lg-line-height);letter-spacing:var(--ed-theme-typography-title-lg-letter-spacing);text-transform:var(--ed-theme-typography-title-lg-text-transform)}}.ed-c-heading--title-default{font-family:var(--ed-theme-typography-title-default-font-family);font-weight:var(--ed-theme-typography-title-default-font-weight);font-size:var(--ed-theme-typography-title-default-font-size);line-height:var(--ed-theme-typography-title-default-line-height);letter-spacing:var(--ed-theme-typography-title-default-letter-spacing);text-transform:var(--ed-theme-typography-title-default-text-transform)}.ed-c-heading--title-sm{font-family:var(--ed-theme-typography-title-sm-font-family);font-weight:var(--ed-theme-typography-title-sm-font-weight);font-size:var(--ed-theme-typography-title-sm-font-size);line-height:var(--ed-theme-typography-title-sm-line-height);letter-spacing:var(--ed-theme-typography-title-sm-letter-spacing);text-transform:var(--ed-theme-typography-title-sm-text-transform)}.ed-c-heading--label-lg{font-family:var(--ed-theme-typography-label-lg-font-family);font-weight:var(--ed-theme-typography-label-lg-font-weight);font-size:var(--ed-theme-typography-label-lg-font-size);line-height:var(--ed-theme-typography-label-lg-line-height);letter-spacing:var(--ed-theme-typography-label-lg-letter-spacing);text-transform:var(--ed-theme-typography-label-lg-text-transform)}.ed-c-heading--label-default{font-family:var(--ed-theme-typography-label-default-font-family);
2563font-weight:var(--ed-theme-typography-label-default-font-weight);font-size:var(--ed-theme-typography-label-default-font-size);line-height:var(--ed-theme-typography-label-default-line-height);letter-spacing:var(--ed-theme-typography-label-default-letter-spacing);text-transform:var(--ed-theme-typography-label-default-text-transform)}.ed-c-heading--label-sm{font-family:var(--ed-theme-typography-label-sm-font-family);font-weight:var(--ed-theme-typography-label-sm-font-weight);font-size:var(--ed-theme-typography-label-sm-font-size);line-height:var(--ed-theme-typography-label-sm-line-height);letter-spacing:var(--ed-theme-typography-label-sm-letter-spacing);text-transform:var(--ed-theme-typography-label-sm-text-transform)}.ed-c-heading--body-lg{font-family:var(--ed-theme-typography-body-lg-font-family);font-weight:var(--ed-theme-typography-body-lg-font-weight);font-size:var(--ed-theme-typography-body-lg-font-size);line-height:var(--ed-theme-typography-body-lg-line-height);letter-spacing:var(--ed-theme-typography-body-lg-letter-spacing);text-transform:var(--ed-theme-typography-body-lg-text-transform)}.ed-c-heading--body-default{font-family:var(--ed-theme-typography-body-default-font-family);font-weight:var(--ed-theme-typography-body-default-font-weight);font-size:var(--ed-theme-typography-body-default-font-size);line-height:var(--ed-theme-typography-body-default-line-height);letter-spacing:var(--ed-theme-typography-body-default-letter-spacing);text-transform:var(--ed-theme-typography-body-default-text-transform)}.ed-c-heading--body-sm{font-family:var(--ed-theme-typography-body-sm-font-family);font-weight:var(--ed-theme-typography-body-sm-font-weight);font-size:var(--ed-theme-typography-body-sm-font-size);line-height:var(--ed-theme-typography-body-sm-line-height);letter-spacing:var(--ed-theme-typography-body-sm-letter-spacing);text-transform:var(--ed-theme-typography-body-sm-text-transform)}.ed-c-heading--meta-default{font-family:var(--ed-theme-typography-meta-default-font-family);font-weight:var(--ed-theme-typography-meta-default-font-weight);font-size:var(--ed-theme-typography-meta-default-font-size);line-height:var(--ed-theme-typography-meta-default-line-height);letter-spacing:var(--ed-theme-typography-meta-default-letter-spacing);text-transform:var(--ed-theme-typography-meta-default-text-transform)}.ed-c-heading--meta-sm{font-family:var(--ed-theme-typography-meta-sm-font-family);font-weight:var(--ed-theme-typography-meta-sm-font-weight);font-size:var(--ed-theme-typography-meta-sm-font-size);line-height:var(--ed-theme-typography-meta-sm-line-height);letter-spacing:var(--ed-theme-typography-meta-sm-letter-spacing);text-transform:var(--ed-theme-typography-meta-sm-text-transform)}</style><!--lit-part a6IwmhhE4C0=--> <!--lit-node 0--><h3 class="ed-c-heading ed-c-heading--headline-sm"><slot></slot></h3> <!--/lit-part--></template>Around the web</ed-heading> 2564 <nav aria-label="Brad Frost around the web"> 2565 <ed-link-list behavior="horizontal" knockout="" inverted="" enhance=""> 2566 <ul> 2567 <li><a rel="me" href="https://bsky.app/profile/bradfrost.com">Bluesky</a></li> 2568 <li><a rel="me" href="https://www.linkedin.com/in/bradfrost/">LinkedIn</a></li> 2569 <li><a rel="me" href="https://www.youtube.com/@brad_frost">YouTube (@brad_frost)</a></li> 2570 <li><a rel="me" href="https://www.youtube.com/@CreativeExhaust">YouTube (CreativeExhaust)</a></li> 2571 <li><a rel="me" href="https://mastodon.social/@brad_frost">Mastodon</a></li> 2572 <li><a rel="me" href="https://www.threads.net/@brad_frost">Threads</a></li> 2573 <li><a rel="me" href="https://codepen.io/bradfrost/">CodePen</a></li> 2574 <li><a rel="me" href="https://github.com/bradfrost">GitHub</a></li> 2575 <li><a rel="me" href="https://www.instagram.com/brad_frost">Instagram</a></li> 2576 </ul> 2577 </ed-link-list> 2578 </nav> 2579 </ed-section> 2580 </ed-layout-container> 2581 2582 <ed-layout-container><template shadowroot="open" shadowrootmode="open"><style>@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:block}.ed-l-layout-container{width:100%;max-width:var(--ed-layout-container-max-width, 70rem);padding-inline-end:1rem;padding-inline-start:1rem;margin:0 auto}.ed-l-layout-container--narrow{max-width:50rem}.ed-l-layout-container--wide{max-width:80rem}</style><!--lit-part IcF6iJIJxGQ=--> 2583 <!--lit-node 0--><div class="ed-l-layout-container"> 2584 <slot></slot> 2585 </div> 2586 <!--/lit-part--></template> 2587 2588<ed-r-ad knockout=""> 2589
2589<script async="" type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1696&serve=CVYD42T&placement=bradfrostwebcom" id="_carbonads_js"></script>
2589 2590</ed-r-ad> 2591 2592 </ed-layout-container> 2593</ed-footer> 2594 2595 </ed-page> 2596 <div class="theme-customizer-pin"> 2597 <ed-r-theme-customizer></ed-r-theme-customizer> 2598 </div> 2599 <!-- This page `/about/` was built on 2026-09-23T21:42:15.976Z --> 2600
2600<script type="module" src="/dist/jYe6IZoUcU.js"></script>
2600 2601 </body> 2602</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.