From 8dfd5d7134c95dfb559f09093a0f8a08c5599596 Mon Sep 17 00:00:00 2001
From: Brock Whittaker <brock@zulipchat.org>
Date: Tue, 24 Jan 2017 17:12:43 -0800
Subject: [PATCH] Add ordered list styling for /help/ pages.

This adds a styling that puts the numbers in a Zulip brand green bubble
with white text for the number.
---
 static/styles/portico.css | 43 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)

diff --git a/static/styles/portico.css b/static/styles/portico.css
index 9efc8cd07e..c2a89605db 100644
--- a/static/styles/portico.css
+++ b/static/styles/portico.css
@@ -57,10 +57,51 @@ body {
     font-size: 17px;
 }
 
-li {
+.markdown ul,
+.markdown ol {
+    margin-left: 30px;
+}
+
+.markdown li {
     line-height: 150%;
 }
 
+.markdown ol {
+    counter-reset: item;
+    list-style: none;
+}
+
+.markdown ol li {
+    counter-increment: item;
+    margin-bottom: 5px;
+}
+
+.markdown ol li:before {
+    content: counter(item);
+
+    display: inline-block;
+    vertical-align: top;
+
+    padding: 3px 6.5px 3px 7.5px;
+    margin-right: 5px;
+    background-color: #52c2af;
+    color: white;
+    border-radius: 100%;
+    font-size: 0.9em;
+    line-height: 1.1;
+    text-align: center;
+}
+
+.markdown ol li p {
+    display: inline-block;
+    vertical-align: top;
+
+    max-width: calc(100% - 28px);
+
+    position: relative;
+    top: -2px;
+}
+
 .title {
     font-family: Helvetica;
     font-size: 100px;