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,17 +1,17 @@
 @import 'fontawesome.scss';
-@import 'roboto.scss';
 @import 'roboto-mono.scss';
+@import 'manrope.scss';
 
-$white:    #fff   ; // color5
+$white: #fff; // color5
 $lightest: #d9e1e8; // color2
-$lighter:  #9baec8; // color3
+$lighter: #9baec8; // color3
-$darkest:  #1F232B; // color1
+$darkest: #1F232B; // color1
-$black:    #000   ; // color8
+$black: #000; // color8
-$darker:   lighten($darkest, 34%);
+$darker: lighten($darkest, 34%);
 
-$vibrant:  #2b90d9; // color4
+$vibrant: #6364FF; // color4
-$error:    #df405a; // color6
+$error: #df405a; // color6
-$success:  #79bd9a; // color7
+$success: #79bd9a; // color7
 
 $transition-in: 100ms linear;
 $transition-out: 250ms linear;
@@ -24,19 +24,87 @@ $mobile-width: 600px;
    License: none (public domain)
 */
 
-html, body, div, span, applet, object, iframe,
+html,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+body,
-a, abbr, acronym, address, big, cite, code,
+div,
-del, dfn, em, img, ins, kbd, q, s, samp,
+span,
-small, strike, strong, sub, sup, tt, var,
+applet,
-b, u, i, center,
+object,
-dl, dt, dd, ol, ul, li,
+iframe,
-fieldset, form, label, legend,
+h1,
-table, caption, tbody, tfoot, thead, tr, th, td,
+h2,
-article, aside, canvas, details, embed,
+h3,
-figure, figcaption, footer, header, hgroup,
+h4,
-menu, nav, output, ruby, section, summary,
+h5,
-time, mark, audio, video {
+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,
+article,
-footer, header, hgroup, menu, nav, section {
+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,
+blockquote:before,
-q:before, q:after {
+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;
@@ -138,7 +220,7 @@ body {
     }
   }
 
-  & > ul > li {
+  &>ul>li {
     margin-bottom: 26px;
 
     &:last-child {
@@ -153,7 +235,7 @@ body {
     text-transform: uppercase;
   }
 
-  & > ul a {
+  &>ul a {
     display: block;
     color: $white;
     text-decoration: none;
@@ -290,6 +372,7 @@ main {
     line-height: 28px;
     font-weight: normal;
     margin-bottom: 26px;
+    -webkit-hyphens: auto;
     hyphens: auto;
   }
 
@@ -345,13 +428,12 @@ main {
       width: 78px;
       margin-left: -78px;
       text-align: right;
-      padding-top: 4px;
       padding-right: 15px;
       content: '\2022';
     }
   }
 
-  ol > li {
+  ol>li {
     &::before {
       padding-top: 0;
       content: counter(post) ". ";
@@ -359,8 +441,8 @@ main {
     }
   }
 
-  li > ul,
+  li>ul,
-  li > ol {
+  li>ol {
     margin-top: 14px;
   }
 
@@ -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;
@@ -494,7 +580,7 @@ main {
     color: inherit;
   }
 
-  & > ul > li {
+  &>ul>li {
     margin-left: 0;
 
     &::before {
@@ -533,7 +619,7 @@ main {
     margin-bottom: 20px;
   }
 
-  & > a {
+  &>a {
     font-weight: 500;
     color: $vibrant;
     background: #fff;
@@ -737,7 +823,7 @@ main {
     width: 180px;
     font-size: 16px;
 
-    & > div:first-child {
+    &>div:first-child {
       margin-bottom: 2px;
     }
   }
@@ -786,7 +872,7 @@ main {
     justify-content: center;
     flex-direction: row;
 
-    & > div {
+    &>div {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -822,7 +908,7 @@ main {
     color: $lightest;
   }
 
-  .logo-grid > div {
+  .logo-grid>div {
     flex-wrap: wrap;
   }
 
@@ -840,4 +926,4 @@ main {
     align-content: center;
     margin-left: 0.25em;
   }
-}
+}