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]
2025-11-01 04:23:46 +00:00 · 2016-12-09 12:05:09 -08:00
parent 208da224e1
commit 105ef7caae
3 changed files with 113 additions and 20 deletions
--- a/static/styles/portico.css
+++ b/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;
--- a/templates/zerver/help/index.md
+++ b/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
-   (![white empty circle](/static/images/help/white_empty_circle.png))
-   means the user is not active and was not recently so.
+ * A white, circle (<span class="indicator grey"></span>) 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
- (![pale green circle](/static/images/help/pale_green_circle.png))
- 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
+ circle (<span class="indicator green"></span>) means that some are recently but not currently active, while others are state unknown. A regular green circle
+ (<span class="indicator green solid"></span>) 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)
-     ![film_projector](/static/third/gemoji/images/emoji/film_projector.png)
-     ![revolving_hearts](/static/third/gemoji/images/emoji/revolving_hearts.png). You
+     <img alt="octopus" class="inline" src="/static/third/gemoji/images/emoji/octopus.png"/>
+     <img alt="film_projector" class="inline" src="/static/third/gemoji/images/emoji/film_projector.png"/>
+     <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
--- a/templates/zerver/help/main.html
+++ b/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>