Cool new number flags for getting started page

Author: zachleat

_includes/components/lists.css

@@ -183,4 +183,36 @@ main p a.buzzword {
 		display: inline-block;
 		white-space: nowrap;
 	}
-}
+}
+
+.numberflag {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	background-color: #dff7ff;
+	border-radius: 50%;
+	width: 1.75em;
+	height: 1.75em;
+	font-weight: 600;
+}
+h1 .numberflag,
+h2 .numberflag,
+h3 .numberflag,
+h4 .numberflag,
+h5 .numberflag {
+	width: 1.25em;
+	height: 1.25em;
+}
+h2 .numberflag {
+	position: relative;
+	margin-right: 0.25em; /* 10px /40 */
+}
+h2 .numberflag:after {
+	content: " ";
+	position: absolute;
+	bottom: -1px;
+	left: 0;
+	height: 1px;
+	background-color: #fff;
+	width: calc(100% + 0.4em); /* 16px /40 */
+}

docs/getting-started.md

@@ -17,7 +17,7 @@ Eleventy is [available on npm](https://www.npmjs.com/package/@11ty/eleventy) and
 
 _Don’t include `~ $` or `~/eleventy-sample $` when you run these commands (you can’t copy and paste that text anyway)._
 
-## Step 1: Make a Project Directory
+## <span class="numberflag"><span class="sr-only">Step</span> 1</span> Make a Project Directory
 
 Make a directory with your project in it.
 
@@ -32,7 +32,7 @@ cd eleventy-sample
 
 You’re now in your new project’s directory.
 
-## Step 2: Install Eleventy
+## <span class="numberflag"><span class="sr-only">Step</span> 2</span> Install Eleventy
 
 ### Create a package.json
 
@@ -60,7 +60,7 @@ npm install --save-dev @11ty/eleventy
 
 Installing locally is preferred to [global installation](/docs/global-installation/).
 
-## Step 3: Run Eleventy
+## <span class="numberflag"><span class="sr-only">Step</span> 3</span> Run Eleventy
 
 We can use npx to run our local project version’s version of Eleventy. Let’s make sure our installation went okay and check what version we’re using:
 
@@ -86,7 +86,7 @@ Processed 0 files in 0.02 seconds
 
 This makes sense—we have an empty folder with no templates inside.
 
-## Step 4: Create some templates
+## <span class="numberflag"><span class="sr-only">Step</span> 4</span> Create some templates
 
 Let’s run two commands to create two new template files.
 
@@ -114,7 +114,7 @@ Processed 2 files in 0.10 seconds
 
 This will compile any content templates in the current directory or subdirectories into the output folder (defaults to `_site`).
 
-## Step 5: Look at your templates
+## <span class="numberflag"><span class="sr-only">Step</span> 5</span> Gaze upon your templates
 
 Use `--serve` to start up a hot-reloading local web server.
 

styleguide.njk

@@ -45,6 +45,28 @@ layout: layouts/docs.njk
 </ul>
 </div>
 
+<h3>Number Flags</h3>
+
+<div class="elv-sg-component">
+<span class="numberflag">1</span>
+<span class="numberflag">2</span>
+<span class="numberflag">3</span>
+<span class="numberflag">4</span>
+<span class="numberflag">5</span>
+<span class="numberflag">6</span>
+<span class="numberflag">7</span>
+<span class="numberflag">8</span>
+<span class="numberflag">9</span>
+</div>
+
+<h4>Number Flags in Headings</h4>
+<div class="elv-sg-component">
+<h2><span class="numberflag"><span class="sr-only">Step</span> 1</span> Notice how the border disappears under the flag</h2>
+<h3><span class="numberflag"><span class="sr-only">Step</span> 2</span> Do a thing</h3>
+<h4><span class="numberflag"><span class="sr-only">Step</span> 3</span> Do a thing</h4>
+<h5><span class="numberflag"><span class="sr-only">Step</span> 4</span> Do a thing</h5>
+</div>
+
 <h2>Blockquotes</h2>
 
 <div class="elv-sg-component">