feat(web/homepage): Add styling for Cheddar callouts r/512

2 files changed, 27 insertions, 2 deletions

diff --git a/web/blog/posts/best-tools.md b/web/blog/posts/best-tools.md
index 5560823982..543a899789 100644
--- a/web/blog/posts/best-tools.md
+++ b/web/blog/posts/best-tools.md
@@ -99,9 +99,9 @@ better than other phones out there right now. Unfortunately it runs Samsung's
 impossible-to-remove bloatware on top of Android, but that is still less
 annoying to use than iOS.
 
-This is the only item on this list for which I am actively seeking a
+QUESTION: This is the only item on this list for which I am actively seeking a
 replacement, so if you have any tips about new phones that might fit these
-criteria that I've missed please let me know.
+criteria that I've missed please let me know!
 
 [se]: https://en.wikipedia.org/wiki/IPhone_SE
 [s10e]: https://www.phonearena.com/phones/Samsung-Galaxy-S10e_id11114
diff --git a/web/homepage/static/tazjin.css b/web/homepage/static/tazjin.css
index 68e72577c3..1b60ef1450 100644
--- a/web/homepage/static/tazjin.css
+++ b/web/homepage/static/tazjin.css
@@ -140,3 +140,28 @@ pre {
 img {
     max-width: 100%;
 }
+
+.cheddar-callout {
+    display: block;
+    padding: 10px;
+}
+
+.cheddar-question {
+    color: #3367d6;
+    background-color: #e8f0fe;
+}
+
+.cheddar-todo {
+    color: #616161;
+    background-color: #eeeeee;
+}
+
+.cheddar-tip {
+    color: #00796b;
+    background-color: #e0f2f1;
+}
+
+.cheddar-warning {
+    color: #a52714;
+    background-color: #fbe9e7;
+}