Add blockquote styling to the CSS

This is also our first instance of needing a mobile specific render

1 files changed, 15 insertions, 0 deletions

diff --git a/static/index.css b/static/index.css
index fdbaa63..79920bb 100644
--- a/static/index.css
+++ b/static/index.css
@@ -1,6 +1,7 @@
 :root {
     --bgcolor: #e4e4ff;
     --page-width: 50em;
+    --quote: #4ac2fe;
 }
 html, body {
     margin: 16px;
@@ -41,8 +42,22 @@ main article {
 main  article:last-child {
     margin-bottom: none;
 }
+
+main article figure blockquote {
+    padding: 8px;
+    border-left: 4px solid var(--quote);
+}
 .transflag {
     width: 90px;
     height: 60px;
     margin: 16px auto;
 }
+/* small screen overrides */
+@media screen and (max-width: 800px) {
+    main article figure {
+	margin: 16px 8px;
+    }
+    main article figure blockquote {
+	margin: 0;
+    }
+}