From 8c3f355a95431acd424599407d0dba3d11449e67 Mon Sep 17 00:00:00 2001
From: Chad Little <chad@chadsdomain.com>
Date: Fri, 29 Jan 2016 12:24:09 -0800
Subject: [PATCH] Move code examples in remarkup to grey backgrounds

Summary: This should make code easier to read. Right now large blocks get a really bright treatment, and this should tone it down. Also upped the spacing a bit.

Test Plan:
Review Remarkup Examples from Diviner, also some test code blocks and counter examples.

{F1081606}

{F1081607}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Differential Revision: https://secure.phabricator.com/D15141
---
 resources/celerity/map.php              | 10 +++++-----
 webroot/rsrc/css/core/remarkup.css      | 25 +++++++++++++++++--------
 webroot/rsrc/css/phui/phui-document.css |  4 ++--
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index 7135873a3a..56aee8abdc 100644
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '8abb1666',
+    'core.pkg.css' => '5e4df064',
     'core.pkg.js' => 'a79eed25',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '2de124c9',
@@ -103,7 +103,7 @@ return array(
     'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
     'rsrc/css/application/uiexample/example.css' => '528b19de',
     'rsrc/css/core/core.css' => '5b3563c8',
-    'rsrc/css/core/remarkup.css' => '64277c02',
+    'rsrc/css/core/remarkup.css' => 'e1c8b32f',
     'rsrc/css/core/syntax.css' => '9fd11da8',
     'rsrc/css/core/z-index.css' => 'a36a45da',
     'rsrc/css/diviner/diviner-shared.css' => 'aa3656aa',
@@ -128,7 +128,7 @@ return array(
     'rsrc/css/phui/phui-crumbs-view.css' => '414406b5',
     'rsrc/css/phui/phui-document-pro.css' => '8799acf7',
     'rsrc/css/phui/phui-document-summary.css' => '9ca48bdf',
-    'rsrc/css/phui/phui-document.css' => 'a4a1c3b9',
+    'rsrc/css/phui/phui-document.css' => '9c71d2bf',
     'rsrc/css/phui/phui-feed-story.css' => 'b7b26d23',
     'rsrc/css/phui/phui-fontkit.css' => '9cda225e',
     'rsrc/css/phui/phui-form-view.css' => '4a1a0f5e',
@@ -759,7 +759,7 @@ return array(
     'phabricator-object-selector-css' => '85ee8ce6',
     'phabricator-phtize' => 'd254d646',
     'phabricator-prefab' => 'e67df814',
-    'phabricator-remarkup-css' => '64277c02',
+    'phabricator-remarkup-css' => 'e1c8b32f',
     'phabricator-search-results-css' => '7dea472c',
     'phabricator-shaped-request' => '7cbe244b',
     'phabricator-side-menu-view-css' => '3a3d9f41',
@@ -801,7 +801,7 @@ return array(
     'phui-calendar-month-css' => '476be7e0',
     'phui-crumbs-view-css' => '414406b5',
     'phui-document-summary-view-css' => '9ca48bdf',
-    'phui-document-view-css' => 'a4a1c3b9',
+    'phui-document-view-css' => '9c71d2bf',
     'phui-document-view-pro-css' => '8799acf7',
     'phui-feed-story-css' => 'b7b26d23',
     'phui-font-icon-base-css' => 'ecbbb4c2',
diff --git a/webroot/rsrc/css/core/remarkup.css b/webroot/rsrc/css/core/remarkup.css
index bec9c3e29e..3b9e51641f 100644
--- a/webroot/rsrc/css/core/remarkup.css
+++ b/webroot/rsrc/css/core/remarkup.css
@@ -13,12 +13,12 @@
 
 .PhabricatorMonospaced,
 .phabricator-remarkup .remarkup-code-block .remarkup-code {
-  font: 10px/13px "Menlo", "Consolas", "Monaco", monospace;
+  font: 11px/15px "Menlo", "Consolas", "Monaco", monospace;
 }
 
 .platform-windows .PhabricatorMonospaced,
 .platform-windows .phabricator-remarkup .remarkup-code-block .remarkup-code {
-  font: 11px/13px "Menlo", "Consolas", "Monaco", monospace;
+  font: 12px/15px "Menlo", "Consolas", "Monaco", monospace;
 }
 
 .phabricator-remarkup .remarkup-code-block {
@@ -27,28 +27,33 @@
 }
 
 .phabricator-remarkup .remarkup-code-header {
-  padding: 2px 8px;
+  padding: 6px 12px;
   font-size: 13px;
   font-weight: bold;
-  background: {$sh-yellowbackground};
+  background: rgba(71,87,120,0.08);
   display: inline-block;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
 }
 
 .phabricator-remarkup .code-block-counterexample .remarkup-code-header {
   background-color: {$sh-redbackground};
 }
 
+.phabricator-remarkup .remarkup-code-block .remarkup-code-header + pre {
+  border-top-left-radius: 0;
+}
+
 .phabricator-remarkup .remarkup-code-block pre {
-  background: #FEF9ED;
-  border: 1px solid {$sh-lightyellowborder};
+  background: rgba(71,87,120,0.08);
   display: block;
   color: #000;
   overflow: auto;
-  padding: 8px;
+  padding: 12px;
+  border-radius: 3px;
 }
 
 .phabricator-remarkup pre.remarkup-counterexample {
-  border: 1px solid {$sh-lightredborder};
   background-color: {$sh-redbackground};
 }
 
@@ -66,6 +71,10 @@
   color: {$anchor};
 }
 
+.phabricator-remarkup .remarkup-header tt.remarkup-monospaced {
+  font-weight: normal;
+}
+
 .phabricator-remarkup ul.remarkup-list {
   list-style: disc;
   margin: 12px 0 12px 30px;
diff --git a/webroot/rsrc/css/phui/phui-document.css b/webroot/rsrc/css/phui/phui-document.css
index 3ceb445639..fd1f057b88 100644
--- a/webroot/rsrc/css/phui/phui-document.css
+++ b/webroot/rsrc/css/phui/phui-document.css
@@ -151,11 +151,11 @@ body .phui-document-view .phui-header-shell.phui-bleed-header {
 
 .phui-document-view .PhabricatorMonospaced,
 .phui-document-view .phabricator-remarkup .remarkup-code-block .remarkup-code {
-  font: 11px/16px "Menlo", "Consolas", "Monaco", monospace;
+  font: 12px/18px "Menlo", "Consolas", "Monaco", monospace;
 }
 
 .platform-windows .phui-document-view .PhabricatorMonospaced,
 .platform-windows .phui-document-view .phabricator-remarkup .remarkup-code-block
   .remarkup-code {
-  font: 12px/16px "Menlo", "Consolas", "Monaco", monospace;
+  font: 13px/18px "Menlo", "Consolas", "Monaco", monospace;
 }