Add markdown page styling.

This styles inline images, the markdown page as a whole, and the
notification buttons to be CSS rather than images.

[Tweaked by tabbott to temporarily remove the Yantramanov font, since
we should be committing that to the repo so Zulip works correctly without
Internet access]

static/styles/portico.css

@@ -1031,6 +1031,102 @@ a.bottom-signup-button {
     font-weight: 300;
 }
 
+/* -- markdown styling -- */
+
+.markdown {
+    width: 800px;
+    margin: 20px auto;
+    padding: 20px;
+
+    font-weight: 400;
+    font-size: 1rem;
+    line-height: 1.5;
+    color: #666;
+
+    -webkit-font-smoothing: antialiased;
+    outline: 10000px solid rgba(240,240,240,0.5);
+    box-shadow: 0px 0px 30px rgba(0,0,0,0.2);
+}
+
+.markdown a {
+    background: -webkit-linear-gradient(180deg, #20c9aa, #61beda);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.markdown strong {
+    font-weight: 600;
+    white-space: pre;
+}
+
+.markdown h1,
+.markdown h2,
+.markdown h3 {
+    font-weight: 400;
+}
+
+.markdown h3 {
+    margin-top: 30px;
+    margin-bottom: 5px;
+}
+
+.markdown img {
+    vertical-align: top;
+    box-shadow: 0px 0px 40px rgba(0,0,0,0.1);
+}
+
+.markdown img.inline {
+    height: 1.4em;
+    box-shadow: none;
+}
+
+.markdown .warn {
+    display: block;
+    background-color: #f5f7f9;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    padding: 10px;
+}
+
+.markdown .indicator {
+    position: relative;
+    display: inline-block;
+    top: 1px;
+    padding: 5px;
+    border-radius: 6px;
+}
+
+.markdown .indicator.grey {
+    border: 1px solid #CCC;
+}
+
+.markdown .indicator.orange {
+    border: 1px solid #ec7e18;
+    background: linear-gradient(to bottom,rgba(255,255,255,0) 50%,rgba(236,126,24,1) 50%)
+}
+
+.markdown .indicator.green {
+    border: 1px solid #44c21d;
+    background-color: rgba(68,194,29,0.3);
+}
+
+.markdown .indicator.green.solid {
+    background-color: #44c21d;
+}
+
+/* make sure that it doesn't wrap and disappear around the line.. odd bug. */
+.markdown a {
+    white-space: pre;
+}
+
+.markdown ul {
+    margin: 15px 10px 15px 25px;
+}
+
+.markdown ul li {
+    margin: 5px 0px;
+}
+
 @media (max-height: 600px) {
     .password-container {
         margin-top: 10px;

templates/zerver/help/index.md

@@ -1,11 +1,12 @@
 # Zulip User Documentation (draft)
 
+<span class="warn">
 **Caveat**: This file is intended to collect all proposed user
 documentation into one place. Ultimately, a single file is probably
 not the best format for documentation when it is published to the
 world, but for purposes of discussion it seems easiest to put
 everything into a solitary and linear page.
-
+</span>
 ---
 
 Zulip is a chat app. Its most distinctive characteristic is that
@@ -223,7 +224,7 @@ individual users. ![New message](/static/images/help/new_message.png)
    [GitHub Flavored Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#tables)
    (GFM), and the **A** icon under the message field brings up a
    cheat-sheet for what we support. You can also see that cheat-sheat
-   by going to the cog (![cog](/static/images/help/cog.png)) in the
+   by going to the cog (<img alt="cog" class="inline" src="/static/images/help/cog.png" />) in the
    upper right corner of the right sidebar and choosing “Message
    formatting” from the drop-down menu.
 
@@ -268,7 +269,7 @@ individual users. ![New message](/static/images/help/new_message.png)
 
 ### Keyboard shortcuts
 
-Go to the cog (![cog](/static/images/help/cog.png)) in the upper right
+Go to the cog (<img alt="cog" class="inline" src="/static/images/help/cog.png" />) in the upper right
 corner of the right sidebar and choose “Keyboard shortcuts” from the
 drop-down menu.
 
@@ -366,7 +367,7 @@ of the message is unchanged.
 Zulip uses a subset of
 [GitHub Flavored Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#tables)
 (GFM), To see the current subset, go to the cog
-(![cog](/static/images/help/cog.png)) in the upper right corner of the
+(<img alt="cog" class="inline" src="/static/images/help/cog.png" />) in the upper right corner of the
 right sidebar and choose “Message formatting” from the drop-down menu.
 
 **[Go back to “Other common questions”](#other-common-questions)** |
@@ -377,27 +378,23 @@ right sidebar and choose “Message formatting” from the drop-down menu.
 … is marked by little circles to the left of a user’s name:
 
  * A green circle
-   (![green circle](/static/images/help/green_circle.png)) means the
+   (<span class="indicator green solid"></span>) means the
    user is “active” — the browser has determined that the Zulip page
    has “focus” at the moment on the user’s computer.
 
- * A white, circle
+ * A white, circle (<span class="indicator grey"></span>) means the user is
-   (![white empty circle](/static/images/help/white_empty_circle.png))
+   not active and was not recently so.
-   means the user is not active and was not recently so.
 
  * A orange half-filled circle
-   (![orange half circle](/static/images/help/orange_half_circle.png))
+   (<span class="indicator orange"></span>)
    means the user is “not active” but was recently so.
 
  The same information is available by mousing over a given user’s name.
 
  If you have messaged multiple individual users, their names will
  appear at the bottom of the right sidebar. In that case, a pale green
- circle
+ circle (<span class="indicator green"></span>) means that some are recently but not currently active, while others are state unknown. A regular green circle
- (![pale green circle](/static/images/help/pale_green_circle.png))
+ (<span class="indicator green solid"></span>) means they
- means that some are recently but not currently active, while others
- are state unknown. A regular green circle
- (![green circle](/static/images/help/green_circle.png)) means they
  are all at least recently active.
 
 **[Go back to “Other common questions”](#other-common-questions)** |
@@ -407,7 +404,7 @@ right sidebar and choose “Message formatting” from the drop-down menu.
 
 You can receive all activity from all streams, or just some streams,
 or just messages in which you were mentioned, by playing with the
-Settings — go to the cog (![cog](/static/images/help/cog.png)) in the
+Settings — go to the cog (<img alt="cog" class="inline" src="/static/images/help/cog.png" />) in the
 upper right corner of the right sidebar and choose “Settings”
 there. You can also post to a stream by email — the Manage Streams
 pane shows you the email address to use for any particular stream.
@@ -428,9 +425,9 @@ pane shows you the email address to use for any particular stream.
    * Zulip also lets you enter emoji by name, using the format
      `:name:`. So sending `:octopus: :film_projector:
      :revolving_hearts:` will produce
-     ![octopus](/static/third/gemoji/images/emoji/octopus.png)
+     <img alt="octopus" class="inline" src="/static/third/gemoji/images/emoji/octopus.png"/>
-     ![film_projector](/static/third/gemoji/images/emoji/film_projector.png)
+     <img alt="film_projector" class="inline" src="/static/third/gemoji/images/emoji/film_projector.png"/>
-     ![revolving_hearts](/static/third/gemoji/images/emoji/revolving_hearts.png). You
+     <img alt="revolving_hearts" class="inline" src="/static/third/gemoji/images/emoji/revolving_hearts.png"/>
      can find emoji that are accessible this way by typing a colon and
      two or more letters of the alphabet — a pop-up menu will appear
      showing the first five emoji-names containing the letters you
@@ -448,7 +445,7 @@ pane shows you the email address to use for any particular stream.
 ### Customization
 
  * **Zulip**. For customizing Zulip itself, there is a cog
-   (![cog](/static/images/help/cog.png)) in the upper right corner of
+   (<img alt="cog" class="inline" src="/static/images/help/cog.png" />) in the upper right corner of
    the right sidebar, and it brings up a menu of options.
 
  * **Streams**. For customizing your stream subscriptions and

templates/zerver/help/main.html

@@ -5,7 +5,7 @@
 {% block portico_content %}
 
 <div class="app terms-page">
-  <div class="app-main terms-page-container">
+  <div class="app-main terms-page-container markdown">
   {{ article|render_markdown_path }}
   </div>
 </div>