Branding: switch to purple logo and preferred font. (#1359)

Signed-off-by: Andy Piper <andypiper@users.noreply.github.com>

README.md

@@ -4,6 +4,6 @@
   <img alt="Mastodon" src="https://github.com/mastodon/mastodon/raw/mainlib/assets/wordmark.light.png?raw=true" height="34">
 </picture></h1>
 
-The documentation currently uses Hugo to generate a static site from Markdown.
+The documentation currently uses Hugo to generate a static site from Markdown. Use `hugo serve` to test the site locally.
 
-View the documentation at <https://docs.joinmastodon.org>
+View the live documentation at [https://docs.joinmastodon.org](https://docs.joinmastodon.org)

assets/manrope.scss

@@ -0,0 +1,8 @@
+@font-face {
+  font-family: "Manrope";
+  font-style: normal;
+  font-weight: 100 900;
+  src:
+    url("/webfonts/manrope-variable.woff2") format("woff2 supports variations"),
+    url("/webfonts/manrope-variable.woff2") format("woff2-variations");
+}

assets/style.scss

@@ -1,6 +1,6 @@
 @import 'fontawesome.scss';
-@import 'roboto.scss';
 @import 'roboto-mono.scss';
+@import 'manrope.scss';
 
 $white: #fff; // color5
 $lightest: #d9e1e8; // color2
@@ -9,7 +9,7 @@ $darkest:  #1F232B; // color1
 $black: #000; // color8
 $darker: lighten($darkest, 34%);
 
-$vibrant:  #2b90d9; // color4
+$vibrant: #6364FF; // color4
 $error: #df405a; // color6
 $success: #79bd9a; // color7
 
@@ -24,19 +24,87 @@ $mobile-width: 600px;
    License: none (public domain)
 */
 
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
   margin: 0;
   padding: 0;
   border: 0;
@@ -45,8 +113,17 @@ time, mark, audio, video {
 }
 
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
   display: block;
 }
 
@@ -55,19 +132,24 @@ body {
   box-sizing: border-box;
   text-rendering: optimizelegibility;
   font-feature-settings: "kern";
+  -webkit-text-size-adjust: none;
   text-size-adjust: none;
 }
 
-ol, ul {
+ol,
+ul {
   list-style: none;
 }
 
-blockquote, q {
+blockquote,
+q {
   quotes: none;
 }
 
-blockquote:before, blockquote:after,
-q:before, q:after {
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
   content: '';
   content: none;
 }
@@ -83,7 +165,7 @@ a {
 
 body {
   box-sizing: border-box;
-  font-family: 'Roboto', sans-serif;
+  font-family: 'Manrope', sans-serif;
   text-rendering: optimizeLegibility;
   background-color: $darkest;
   color: $lighter;
@@ -290,6 +372,7 @@ main {
     line-height: 28px;
     font-weight: normal;
     margin-bottom: 26px;
+    -webkit-hyphens: auto;
     hyphens: auto;
   }
 
@@ -345,7 +428,6 @@ main {
       width: 78px;
       margin-left: -78px;
       text-align: right;
-      padding-top: 4px;
       padding-right: 15px;
       content: '\2022';
     }
@@ -436,6 +518,7 @@ main {
     font-family: 'Roboto Mono', monospace;
     background-color: lighten($darkest, 8%);
     border-radius: 3px;
+    -webkit-hyphens: none;
     hyphens: none;
     white-space: pre;
   }
@@ -451,7 +534,9 @@ main {
     line-height: 28px;
     font-weight: normal;
     margin-bottom: 26px;
+    -webkit-hyphens: auto;
     hyphens: auto;
+
     dt {
       font-weight: 700;
       background: lighten($darkest, 8%);
@@ -459,6 +544,7 @@ main {
       max-width: max-content;
       margin-bottom: 4px;
     }
+
     dd {
       margin-left: 16px;
       margin-bottom: 16px;