From 06f3cb2b78ffcd29bd2742bd03a374871f3fab36 Mon Sep 17 00:00:00 2001
From: Brock Whittaker <brock@zulipchat.com>
Date: Tue, 9 Jan 2018 14:19:58 -0800
Subject: [PATCH] message-feed: Add some styling to open graph previews.

This adds some styling to make the open graph previews look a bit nicer,
including:

1. Adding a bottom fading gradient to slowly fade out text that is out
of bounds rather than chopping it off.
2. Using font anti-aliasing to make the characters appear smoother.
3. Increasing the font size of the title to give it prominence.
4. Changing the height to 80px from 70px.
---
 static/styles/dark.css  |  4 ++++
 static/styles/zulip.css | 31 +++++++++++++++++++++++--------
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/static/styles/dark.css b/static/styles/dark.css
index 4b7a38d9d6..9f83cc570f 100644
--- a/static/styles/dark.css
+++ b/static/styles/dark.css
@@ -19,6 +19,10 @@ body.dark-mode #settings_page .right {
     background-color: hsl(212, 28%, 18%);
 }
 
+.message_embed .data-container::after {
+    background: linear-gradient(0deg, hsl(212, 28%, 18%), transparent 10%);
+}
+
 body.dark-mode .column-left .left-sidebar,
 body.dark-mode #settings_page .form-sidebar,
 body.dark-mode .column-right .right-sidebar {
diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index 9fb1f72927..8ac0e4e6c9 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -2564,9 +2564,14 @@ button.topic_edit_cancel {
     margin: 5px 0px;
     border: none;
     border-left: 3px solid hsl(0, 0%, 93%);
-    height: 70px;
+    height: 80px;
     padding: 5px;
     z-index: 1;
+
+    -moz-osx-font-smoothing: grayscale;
+    font-smoothing: antialiased;
+    -webkit-font-smoothing: antialiased;
+    text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
 }
 
 .message_content .message_embed > * {
@@ -2578,17 +2583,16 @@ button.topic_edit_cancel {
 .message_embed .message_embed_title {
     padding-top: 0px;
     /* to remove the spacing that the font has from the top of the container. */
-    margin-top: -1px;
+    margin-top: -5px;
 
-    font-size: 1em;
-    font-weight: 600;
+    font-size: 1.2em;
     line-height: normal;
 }
 
 .message_embed .message_embed_description {
     position: relative;
-    margin-top: -5px;
     max-width: 500px;
+    margin-top: 3px;
 
     /* to put it below the container gradient. */
     z-index: -1;
@@ -2596,18 +2600,19 @@ button.topic_edit_cancel {
 
 .message_embed .message_embed_image {
     display: inline-block;
-    width: 60px;
-    height: 60px;
+    width: 70px;
+    height: 70px;
     background-size: cover;
     background-position: center;
 }
 
 .message_embed .data-container {
+    position: relative;
     padding: 0px 5px;
     display: inline-block;
     vertical-align: top;
     max-width: calc(100% - 115px);
-    max-height: 70px;
+    max-height: 80px;
     overflow: hidden;
 }
 
@@ -2616,6 +2621,16 @@ button.topic_edit_cancel {
     border: none;
 }
 
+.message_embed .data-container::after {
+    content: " ";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+
+    background: linear-gradient(0deg, #fff, transparent 10%);
+}
+
 @media (max-width: 600px) {
     .message_content .message_embed {
         height: auto;