diff --git a/assets/layout.scss b/assets/layout.scss
index 60e767531005c85d2fd0e4bac640e5bbf26d9fde..dfe9a4b8d27740c0059451b30af4c18bfdd27718 100644
--- a/assets/layout.scss
+++ b/assets/layout.scss
@@ -327,6 +327,10 @@ h6 {
box-sizing: border-box;
}
+.size-36 {
+ font-size: 36px !important;
+}
+
@media (min-width:992px) {
.navbar {
display: none !important;
diff --git a/content/getting-started.md b/content/getting-started.md
index 18ddde8b41c2cd8624d7368ca846f42b924a30af..469a914753ba4007fd1dec92f2e5d7b36c1fa3d1 100644
--- a/content/getting-started.md
+++ b/content/getting-started.md
@@ -4,4 +4,5 @@ type: getting-started
permalink: /getting-started/
sidebar_start:
- reuse: Reuse in a project
+ - contribute: Contribute
---
diff --git a/layouts/getting-started/single.html b/layouts/getting-started/single.html
index e954bb92b29b25008e4f4916d4d125f3b13821a4..3bb816b1369fa3e213db2ccbc9d086aab1ef9228 100644
--- a/layouts/getting-started/single.html
+++ b/layouts/getting-started/single.html
@@ -7,11 +7,11 @@
</div>
</div>
</div>
- <div class="col-md-8 col-xs-12 col-sm-12 p-0">
- <main role="main" class="content-scroll p-5" data-spy="scroll"
+ <div class="col-md-8 col-xs-12 col-sm-12 pt-5 pb-5">
+ <main role="main" class="content-scroll p-0" data-spy="scroll"
data-target="#components-nav" data-offset="0">
<div class="row">
- <div class="col-12 p-0">
+ <div class="col-12 pb-5">
<div class="page-header mb-4">
<h3>Getting started</h3>
<p>We are making Briar usable for everyone.</p>
@@ -23,6 +23,7 @@
<p>This style guide has been built using <a class="underline" target="_blank" rel="noopener" title="Hugo" href="https://gohugo.io/">Hugo</a>. Hugo is one of the most popular open-source static site generators. You can build this yourself by <a class="underline" target="_blank" rel="noopener" title="Hugo installation" href="https://gohugo.io/getting-started/installing/"> installing Hugo</a>.</p>
{{ partial "getting-started/reuse-in-a-project.html" . }}
+ {{ partial "getting-started/contribute.html" . }}
</div>
</div>
</main>
diff --git a/layouts/index.html b/layouts/index.html
index 41e48565668dd2b91ae2b5cea35f79e0d06b8cdd..cbfc9ce748a5c1c090152e7ce0b713a6305639c4 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -18,27 +18,26 @@
</div>
</div>
</main>
- <div class="row col-8 p-0 pt-3">
+ <div class="row col-9 p-0 pt-3">
<div class="page-header mt-3 mb-4">
<h4>About</h4>
<p>Briar is a messaging app designed for activists, journalists, and anyone else who needs a safe, easy and robust way to communicate. Unlike traditional messaging apps, Briar doesn't rely on a central server - messages are synchronized directly between the users' devices.</p>
<p>This guide aims to provide standards, principles and components to design consistent views related to the Briar Project. These pages are a living document and we welcome contributions, feedback and suggestions.</p>
</div>
- <div class="col-md-6 col-sm-12 mb-4">
- <div class="circles background-gray-400">
- </div>
- <h6 class="pt-3 pb-3">Feature One</h6>
- <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
+ <div class="row no-gutters">
+ <div class="col-md-6 col-sm-12 mb-4 pr-lg-4 pr-md-4">
+ <i class="material-icons size-36">line_style</i>
+ <h6 class="pt-3 pb-3">All in one Place</h6>
+ <p>The Briar Design system ensures Briar contributors have it as comfortable as possible to contribute towards Briar projects and applications. You will be able to find guidelines, branding assets, illustrations and components here. While the current state of the design system should cover most crucial design decisions in Briar, we hope that it becomes constantly updated in the future with new assets and guidelines.</p>
+ </div>
+ <div class="col-md-6 col-sm-12 mb-4 pl-lg-4 pl-md-4">
+ <i class="material-icons-two-tone size-36">emoji_objects</i>
+ <h6 class="pt-3 pb-3">Get Involved</h6>
+ <p>We welcome any feedback and ideas towards the design system itself. If you are interested in contributing, check out our guidelines to get started. Have any questions? Open an issue on our Design System issue tracker. Be sure to check out the resources below!</p>
</div>
- <div class="col-md-6 col-sm-12 mb-4">
- <div class="circles background-gray-400"></div>
- <h6 class="pt-3 pb-3">Feature Two</h6>
- <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
- <div class="row col-8 p-0 mt-5">
+ <div class="row col-9 p-0 mt-5">
<div class="col-md-6 col-sm-12 p-0">
</div>
{{ partial "scrollspy.html" . }}
diff --git a/layouts/partials/design/illustrations.html b/layouts/partials/design/illustrations.html
index da942547dd5c012c709e5f06118c5d607ac6fae2..3eae2734c90ea8018d6318156fbbf66fc6665976 100644
--- a/layouts/partials/design/illustrations.html
+++ b/layouts/partials/design/illustrations.html
@@ -3,7 +3,7 @@
</div>
<div class="row mb-5">
- <div class="col-sm-12 col-md-3 col-sm-3 mb-4">
+ <div class="col-sm-12 col-md-3 col-sm-3 mb-4 pl-lg-0 pl-sm-0">
<div class="image flexing border p-1">
<img class="rb-contain" src="/images/chat_doodle_black.png" alt="Chat Doodles Black">
</div>
diff --git a/layouts/partials/getting-started/contribute.html b/layouts/partials/getting-started/contribute.html
new file mode 100644
index 0000000000000000000000000000000000000000..0a09723b58797220b42528e72dfa7cfc722b7859
--- /dev/null
+++ b/layouts/partials/getting-started/contribute.html
@@ -0,0 +1,34 @@
+<h4 class="mt-5 mb-3" id="contribute">Contributing</h4>
+
+<p>If you an interested in contributing to our design system, the first step is ensuring that an issue exists in our issue tracker. There are many applications that an issue can have, including:</p>
+
+<ul>
+ <li>Submitting feature proposals</li>
+ <li>Asking questions</li>
+ <li>Reporting bugs and malfunctions</li>
+ <li>Obtaining support</li>
+ <li>Enhancing code implementations</li>
+</ul>
+
+<p>If you were unable to find a related issue in our issue tracker, begin by creating a new one. Creating an issue for each change allows us to easily track all proposals in one place. For changes that affect visual designs or user experiences, it can be helpful to include a mockup.</p>
+
+<h6>UX proposals</h6>
+
+<p>If your proposal involves a new guideline or UX paradigm, ping a UX reviewer or maintainer to review and provide feedback.</p>
+
+<h6>Frontend proposals</h6>
+
+<p class="mb-5">If your proposal involves a change to the frontend implementation, ping a frontend reviewer or maintainer to review and provide feedback.</p>
+
+<h5>Contribute a merge request</h5>
+
+<p>To make changes within our Design System, follow these instructions:</p>
+
+<ol>
+ <li>Choose an issue to work on. If one does not exist, please review the contribution guidelines regarding creating a new one. This opens the conversation and allows feedback to happen early, preventing risks such as duplicated or unnecessary work. It can be helpful to comment in the issue to verify that no one is working on it and that the issue is still relevant.</li>
+ <li>Fork this project.</li>
+ <li>Make changes reflecting the issue you’ve chosen to work on.</li>
+ <li>Create a merge request. The earlier you open a merge request, the sooner you can get feedback. You can mark it as a Work in Progress to signal that you’re not done yet.</li>
+ <li>Get your merge request approved. If your changes involved a new guideline or UX paradigm, then ping a UX reviewer or maintainer to approve your changes. If your changes involve an update to frontend implementation, ping a frontend reviewer or maintainer to approve. Some merge requests will require both a UX and frontend approver.</li>
+ <li>Get your changes merged! After the necessary approvals have been added, a UX or frontend maintainer can then merge your merge request. 🙌</li>
+</ol>
diff --git a/static/css/material-icons.css b/static/css/material-icons.css
index c848b2a802093bd34dbd49339e830986f0df92f3..b09d64d0a769e5d54baad66391e65f8895a9cd85 100644
--- a/static/css/material-icons.css
+++ b/static/css/material-icons.css
@@ -10,11 +10,48 @@
url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}
+@font-face {
+ font-family: 'Material Icons Outlined';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Material Icons Outlined'),
+ local('MaterialIcons-Outlined'),
+ url(../fonts/MaterialIcons-Outlined.woff2) format('woff2');
+}
+
+@font-face {
+ font-family: 'Material Icons Round';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Material Icons Round'),
+ local('MaterialIcons-Round'),
+ url(../fonts/MaterialIcons-Round.woff2) format('woff2');
+}
+
+@font-face {
+ font-family: 'Material Icons Sharp';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Material Icons Sharp'),
+ local('MaterialIcons-Sharp'),
+ url(../fonts/MaterialIcons-Sharp.woff2) format('woff2');
+}
+
+@font-face {
+ font-family: 'Material Icons Two Tone';
+ font-style: normal;
+ font-weight: 400;
+ src: url(../fonts/MaterialIcons-TwoTone.eot); /* For IE6-8 */
+ src: local('Material Icons Two Tone'),
+ local('MaterialIcons-TwoTone'),
+ url(../fonts/MaterialIcons-TwoTone.woff2) format('woff2');
+}
+
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
- font-size: 24px; /* Preferred icon size */
+ font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
@@ -24,15 +61,73 @@
direction: ltr;
vertical-align: middle;
vertical-align:-webkit-baseline-middle;
-
- /* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
- /* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
+ -moz-osx-font-smoothing: grayscale;
+ font-feature-settings: 'liga';
+}
+
+
+.material-icons-outlined {
+ font-family: 'Material Icons Outlined';
+ font-weight: normal;
+ font-style: normal;
+ font-size: 24px;
+ line-height: 1;
+ letter-spacing: normal;
+ text-transform: none;
+ display: inline-block;
+ white-space: nowrap;
+ word-wrap: normal;
+ direction: ltr;
+ -moz-font-feature-settings: 'liga';
+ -moz-osx-font-smoothing: grayscale;
+}
- /* Support for Firefox. */
+.material-icons-round {
+ font-family: 'Material Icons Round';
+ font-weight: normal;
+ font-style: normal;
+ font-size: 24px;
+ line-height: 1;
+ letter-spacing: normal;
+ text-transform: none;
+ display: inline-block;
+ white-space: nowrap;
+ word-wrap: normal;
+ direction: ltr;
+ -moz-font-feature-settings: 'liga';
-moz-osx-font-smoothing: grayscale;
+}
- /* Support for IE. */
- font-feature-settings: 'liga';
+.material-icons-sharp {
+ font-family: 'Material Icons Sharp';
+ font-weight: normal;
+ font-style: normal;
+ font-size: 24px;
+ line-height: 1;
+ letter-spacing: normal;
+ text-transform: none;
+ display: inline-block;
+ white-space: nowrap;
+ word-wrap: normal;
+ direction: ltr;
+ -moz-font-feature-settings: 'liga';
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.material-icons-two-tone {
+ font-family: 'Material Icons Two Tone';
+ font-weight: normal;
+ font-style: normal;
+ font-size: 24px;
+ line-height: 1;
+ letter-spacing: normal;
+ text-transform: none;
+ display: inline-block;
+ white-space: nowrap;
+ word-wrap: normal;
+ direction: ltr;
+ -moz-font-feature-settings: 'liga';
+ -moz-osx-font-smoothing: grayscale;
}
diff --git a/static/css/open-iconic-bootstrap.css b/static/css/open-iconic-bootstrap.css
deleted file mode 100644
index 973d91821116496be13d19c35d9528166527b3e7..0000000000000000000000000000000000000000
--- a/static/css/open-iconic-bootstrap.css
+++ /dev/null
@@ -1,950 +0,0 @@
-/* Bootstrap */
-
-@font-face {
- font-family: 'Icons';
- src: url('../fonts/open-iconic.eot');
- src: url('../fonts/open-iconic.eot?#iconic-sm') format('embedded-opentype'), url('../fonts/open-iconic.woff') format('woff'), url('../fonts/open-iconic.ttf') format('truetype'), url('../fonts/open-iconic.otf') format('opentype'), url('../fonts/open-iconic.svg#iconic-sm') format('svg');
- font-weight: normal;
- font-style: normal;
-}
-
-.oi {
- position: relative;
- top: 1px;
- display: inline-block;
- speak: none;
- font-family: 'Icons';
- font-style: normal;
- font-weight: normal;
- line-height: 1;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-.oi:empty:before {
- width: 1em;
- text-align: center;
- box-sizing: content-box;
-}
-
-.oi.oi-align-center:before {
- text-align: center;
-}
-
-.oi.oi-align-left:before {
- text-align: left;
-}
-
-.oi.oi-align-right:before {
- text-align: right;
-}
-
-.oi.oi-flip-horizontal:before {
- -webkit-transform: scale(-1, 1);
- -ms-transform: scale(-1, 1);
- transform: scale(-1, 1);
-}
-
-.oi.oi-flip-vertical:before {
- -webkit-transform: scale(1, -1);
- -ms-transform: scale(-1, 1);
- transform: scale(1, -1);
-}
-
-.oi.oi-flip-horizontal-vertical:before {
- -webkit-transform: scale(-1, -1);
- -ms-transform: scale(-1, 1);
- transform: scale(-1, -1);
-}
-
-.oi-account-login:before {
- content: '\e000';
-}
-
-.oi-account-logout:before {
- content: '\e001';
-}
-
-.oi-action-redo:before {
- content: '\e002';
-}
-
-.oi-action-undo:before {
- content: '\e003';
-}
-
-.oi-align-center:before {
- content: '\e004';
-}
-
-.oi-align-left:before {
- content: '\e005';
-}
-
-.oi-align-right:before {
- content: '\e006';
-}
-
-.oi-aperture:before {
- content: '\e007';
-}
-
-.oi-arrow-bottom:before {
- content: '\e008';
-}
-
-.oi-arrow-circle-bottom:before {
- content: '\e009';
-}
-
-.oi-arrow-circle-left:before {
- content: '\e00a';
-}
-
-.oi-arrow-circle-right:before {
- content: '\e00b';
-}
-
-.oi-arrow-circle-top:before {
- content: '\e00c';
-}
-
-.oi-arrow-left:before {
- content: '\e00d';
-}
-
-.oi-arrow-right:before {
- content: '\e00e';
-}
-
-.oi-arrow-thick-bottom:before {
- content: '\e00f';
-}
-
-.oi-arrow-thick-left:before {
- content: '\e010';
-}
-
-.oi-arrow-thick-right:before {
- content: '\e011';
-}
-
-.oi-arrow-thick-top:before {
- content: '\e012';
-}
-
-.oi-arrow-top:before {
- content: '\e013';
-}
-
-.oi-audio-spectrum:before {
- content: '\e014';
-}
-
-.oi-audio:before {
- content: '\e015';
-}
-
-.oi-badge:before {
- content: '\e016';
-}
-
-.oi-ban:before {
- content: '\e017';
-}
-
-.oi-bar-chart:before {
- content: '\e018';
-}
-
-.oi-basket:before {
- content: '\e019';
-}
-
-.oi-battery-empty:before {
- content: '\e01a';
-}
-
-.oi-battery-full:before {
- content: '\e01b';
-}
-
-.oi-beaker:before {
- content: '\e01c';
-}
-
-.oi-bell:before {
- content: '\e01d';
-}
-
-.oi-bluetooth:before {
- content: '\e01e';
-}
-
-.oi-bold:before {
- content: '\e01f';
-}
-
-.oi-bolt:before {
- content: '\e020';
-}
-
-.oi-book:before {
- content: '\e021';
-}
-
-.oi-bookmark:before {
- content: '\e022';
-}
-
-.oi-box:before {
- content: '\e023';
-}
-
-.oi-briefcase:before {
- content: '\e024';
-}
-
-.oi-british-pound:before {
- content: '\e025';
-}
-
-.oi-browser:before {
- content: '\e026';
-}
-
-.oi-brush:before {
- content: '\e027';
-}
-
-.oi-bug:before {
- content: '\e028';
-}
-
-.oi-bullhorn:before {
- content: '\e029';
-}
-
-.oi-calculator:before {
- content: '\e02a';
-}
-
-.oi-calendar:before {
- content: '\e02b';
-}
-
-.oi-camera-slr:before {
- content: '\e02c';
-}
-
-.oi-caret-bottom:before {
- content: '\e02d';
-}
-
-.oi-caret-left:before {
- content: '\e02e';
-}
-
-.oi-caret-right:before {
- content: '\e02f';
-}
-
-.oi-caret-top:before {
- content: '\e030';
-}
-
-.oi-cart:before {
- content: '\e031';
-}
-
-.oi-chat:before {
- content: '\e032';
-}
-
-.oi-check:before {
- content: '\e033';
-}
-
-.oi-chevron-bottom:before {
- content: '\e034';
-}
-
-.oi-chevron-left:before {
- content: '\e035';
-}
-
-.oi-chevron-right:before {
- content: '\e036';
-}
-
-.oi-chevron-top:before {
- content: '\e037';
-}
-
-.oi-circle-check:before {
- content: '\e038';
-}
-
-.oi-circle-x:before {
- content: '\e039';
-}
-
-.oi-clipboard:before {
- content: '\e03a';
-}
-
-.oi-clock:before {
- content: '\e03b';
-}
-
-.oi-cloud-download:before {
- content: '\e03c';
-}
-
-.oi-cloud-upload:before {
- content: '\e03d';
-}
-
-.oi-cloud:before {
- content: '\e03e';
-}
-
-.oi-cloudy:before {
- content: '\e03f';
-}
-
-.oi-code:before {
- content: '\e040';
-}
-
-.oi-cog:before {
- content: '\e041';
-}
-
-.oi-collapse-down:before {
- content: '\e042';
-}
-
-.oi-collapse-left:before {
- content: '\e043';
-}
-
-.oi-collapse-right:before {
- content: '\e044';
-}
-
-.oi-collapse-up:before {
- content: '\e045';
-}
-
-.oi-command:before {
- content: '\e046';
-}
-
-.oi-comment-square:before {
- content: '\e047';
-}
-
-.oi-compass:before {
- content: '\e048';
-}
-
-.oi-contrast:before {
- content: '\e049';
-}
-
-.oi-copywriting:before {
- content: '\e04a';
-}
-
-.oi-credit-card:before {
- content: '\e04b';
-}
-
-.oi-crop:before {
- content: '\e04c';
-}
-
-.oi-dashboard:before {
- content: '\e04d';
-}
-
-.oi-data-transfer-download:before {
- content: '\e04e';
-}
-
-.oi-data-transfer-upload:before {
- content: '\e04f';
-}
-
-.oi-delete:before {
- content: '\e050';
-}
-
-.oi-dial:before {
- content: '\e051';
-}
-
-.oi-document:before {
- content: '\e052';
-}
-
-.oi-dollar:before {
- content: '\e053';
-}
-
-.oi-double-quote-sans-left:before {
- content: '\e054';
-}
-
-.oi-double-quote-sans-right:before {
- content: '\e055';
-}
-
-.oi-double-quote-serif-left:before {
- content: '\e056';
-}
-
-.oi-double-quote-serif-right:before {
- content: '\e057';
-}
-
-.oi-droplet:before {
- content: '\e058';
-}
-
-.oi-eject:before {
- content: '\e059';
-}
-
-.oi-elevator:before {
- content: '\e05a';
-}
-
-.oi-ellipses:before {
- content: '\e05b';
-}
-
-.oi-envelope-closed:before {
- content: '\e05c';
-}
-
-.oi-envelope-open:before {
- content: '\e05d';
-}
-
-.oi-euro:before {
- content: '\e05e';
-}
-
-.oi-excerpt:before {
- content: '\e05f';
-}
-
-.oi-expand-down:before {
- content: '\e060';
-}
-
-.oi-expand-left:before {
- content: '\e061';
-}
-
-.oi-expand-right:before {
- content: '\e062';
-}
-
-.oi-expand-up:before {
- content: '\e063';
-}
-
-.oi-external-link:before {
- content: '\e064';
-}
-
-.oi-eye:before {
- content: '\e065';
-}
-
-.oi-eyedropper:before {
- content: '\e066';
-}
-
-.oi-file:before {
- content: '\e067';
-}
-
-.oi-fire:before {
- content: '\e068';
-}
-
-.oi-flag:before {
- content: '\e069';
-}
-
-.oi-flash:before {
- content: '\e06a';
-}
-
-.oi-folder:before {
- content: '\e06b';
-}
-
-.oi-fork:before {
- content: '\e06c';
-}
-
-.oi-fullscreen-enter:before {
- content: '\e06d';
-}
-
-.oi-fullscreen-exit:before {
- content: '\e06e';
-}
-
-.oi-globe:before {
- content: '\e06f';
-}
-
-.oi-graph:before {
- content: '\e070';
-}
-
-.oi-grid-four-up:before {
- content: '\e071';
-}
-
-.oi-grid-three-up:before {
- content: '\e072';
-}
-
-.oi-grid-two-up:before {
- content: '\e073';
-}
-
-.oi-hard-drive:before {
- content: '\e074';
-}
-
-.oi-header:before {
- content: '\e075';
-}
-
-.oi-headphones:before {
- content: '\e076';
-}
-
-.oi-heart:before {
- content: '\e077';
-}
-
-.oi-home:before {
- content: '\e078';
-}
-
-.oi-image:before {
- content: '\e079';
-}
-
-.oi-inbox:before {
- content: '\e07a';
-}
-
-.oi-infinity:before {
- content: '\e07b';
-}
-
-.oi-info:before {
- content: '\e07c';
-}
-
-.oi-italic:before {
- content: '\e07d';
-}
-
-.oi-justify-center:before {
- content: '\e07e';
-}
-
-.oi-justify-left:before {
- content: '\e07f';
-}
-
-.oi-justify-right:before {
- content: '\e080';
-}
-
-.oi-key:before {
- content: '\e081';
-}
-
-.oi-laptop:before {
- content: '\e082';
-}
-
-.oi-layers:before {
- content: '\e083';
-}
-
-.oi-lightbulb:before {
- content: '\e084';
-}
-
-.oi-link-broken:before {
- content: '\e085';
-}
-
-.oi-link-intact:before {
- content: '\e086';
-}
-
-.oi-list-rich:before {
- content: '\e087';
-}
-
-.oi-list:before {
- content: '\e088';
-}
-
-.oi-location:before {
- content: '\e089';
-}
-
-.oi-lock-locked:before {
- content: '\e08a';
-}
-
-.oi-lock-unlocked:before {
- content: '\e08b';
-}
-
-.oi-loop-circular:before {
- content: '\e08c';
-}
-
-.oi-loop-square:before {
- content: '\e08d';
-}
-
-.oi-loop:before {
- content: '\e08e';
-}
-
-.oi-magnifying-glass:before {
- content: '\e08f';
-}
-
-.oi-map-marker:before {
- content: '\e090';
-}
-
-.oi-map:before {
- content: '\e091';
-}
-
-.oi-media-pause:before {
- content: '\e092';
-}
-
-.oi-media-play:before {
- content: '\e093';
-}
-
-.oi-media-record:before {
- content: '\e094';
-}
-
-.oi-media-skip-backward:before {
- content: '\e095';
-}
-
-.oi-media-skip-forward:before {
- content: '\e096';
-}
-
-.oi-media-step-backward:before {
- content: '\e097';
-}
-
-.oi-media-step-forward:before {
- content: '\e098';
-}
-
-.oi-media-stop:before {
- content: '\e099';
-}
-
-.oi-medical-cross:before {
- content: '\e09a';
-}
-
-.oi-menu:before {
- content: '\e09b';
-}
-
-.oi-microphone:before {
- content: '\e09c';
-}
-
-.oi-minus:before {
- content: '\e09d';
-}
-
-.oi-monitor:before {
- content: '\e09e';
-}
-
-.oi-moon:before {
- content: '\e09f';
-}
-
-.oi-move:before {
- content: '\e0a0';
-}
-
-.oi-musical-note:before {
- content: '\e0a1';
-}
-
-.oi-paperclip:before {
- content: '\e0a2';
-}
-
-.oi-pencil:before {
- content: '\e0a3';
-}
-
-.oi-people:before {
- content: '\e0a4';
-}
-
-.oi-person:before {
- content: '\e0a5';
-}
-
-.oi-phone:before {
- content: '\e0a6';
-}
-
-.oi-pie-chart:before {
- content: '\e0a7';
-}
-
-.oi-pin:before {
- content: '\e0a8';
-}
-
-.oi-play-circle:before {
- content: '\e0a9';
-}
-
-.oi-plus:before {
- content: '\e0aa';
-}
-
-.oi-power-standby:before {
- content: '\e0ab';
-}
-
-.oi-print:before {
- content: '\e0ac';
-}
-
-.oi-project:before {
- content: '\e0ad';
-}
-
-.oi-pulse:before {
- content: '\e0ae';
-}
-
-.oi-puzzle-piece:before {
- content: '\e0af';
-}
-
-.oi-question-mark:before {
- content: '\e0b0';
-}
-
-.oi-rain:before {
- content: '\e0b1';
-}
-
-.oi-random:before {
- content: '\e0b2';
-}
-
-.oi-reload:before {
- content: '\e0b3';
-}
-
-.oi-resize-both:before {
- content: '\e0b4';
-}
-
-.oi-resize-height:before {
- content: '\e0b5';
-}
-
-.oi-resize-width:before {
- content: '\e0b6';
-}
-
-.oi-rss-alt:before {
- content: '\e0b7';
-}
-
-.oi-rss:before {
- content: '\e0b8';
-}
-
-.oi-script:before {
- content: '\e0b9';
-}
-
-.oi-share-boxed:before {
- content: '\e0ba';
-}
-
-.oi-share:before {
- content: '\e0bb';
-}
-
-.oi-shield:before {
- content: '\e0bc';
-}
-
-.oi-signal:before {
- content: '\e0bd';
-}
-
-.oi-signpost:before {
- content: '\e0be';
-}
-
-.oi-sort-ascending:before {
- content: '\e0bf';
-}
-
-.oi-sort-descending:before {
- content: '\e0c0';
-}
-
-.oi-spreadsheet:before {
- content: '\e0c1';
-}
-
-.oi-star:before {
- content: '\e0c2';
-}
-
-.oi-sun:before {
- content: '\e0c3';
-}
-
-.oi-tablet:before {
- content: '\e0c4';
-}
-
-.oi-tag:before {
- content: '\e0c5';
-}
-
-.oi-tags:before {
- content: '\e0c6';
-}
-
-.oi-target:before {
- content: '\e0c7';
-}
-
-.oi-task:before {
- content: '\e0c8';
-}
-
-.oi-terminal:before {
- content: '\e0c9';
-}
-
-.oi-text:before {
- content: '\e0ca';
-}
-
-.oi-thumb-down:before {
- content: '\e0cb';
-}
-
-.oi-thumb-up:before {
- content: '\e0cc';
-}
-
-.oi-timer:before {
- content: '\e0cd';
-}
-
-.oi-transfer:before {
- content: '\e0ce';
-}
-
-.oi-trash:before {
- content: '\e0cf';
-}
-
-.oi-underline:before {
- content: '\e0d0';
-}
-
-.oi-vertical-align-bottom:before {
- content: '\e0d1';
-}
-
-.oi-vertical-align-center:before {
- content: '\e0d2';
-}
-
-.oi-vertical-align-top:before {
- content: '\e0d3';
-}
-
-.oi-video:before {
- content: '\e0d4';
-}
-
-.oi-volume-high:before {
- content: '\e0d5';
-}
-
-.oi-volume-low:before {
- content: '\e0d6';
-}
-
-.oi-volume-off:before {
- content: '\e0d7';
-}
-
-.oi-warning:before {
- content: '\e0d8';
-}
-
-.oi-wifi:before {
- content: '\e0d9';
-}
-
-.oi-wrench:before {
- content: '\e0da';
-}
-
-.oi-x:before {
- content: '\e0db';
-}
-
-.oi-yen:before {
- content: '\e0dc';
-}
-
-.oi-zoom-in:before {
- content: '\e0dd';
-}
-
-.oi-zoom-out:before {
- content: '\e0de';
-}
diff --git a/static/fonts/MaterialIcons-Outlined.woff2 b/static/fonts/MaterialIcons-Outlined.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..6fc64d815bd03c4f824c91575582c34b76a2f806
Binary files /dev/null and b/static/fonts/MaterialIcons-Outlined.woff2 differ
diff --git a/static/fonts/MaterialIcons-Round.woff2 b/static/fonts/MaterialIcons-Round.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..16336ed0c769eddb254dfeb8e54e08ede261fd44
Binary files /dev/null and b/static/fonts/MaterialIcons-Round.woff2 differ
diff --git a/static/fonts/MaterialIcons-Sharp.woff2 b/static/fonts/MaterialIcons-Sharp.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..976a6e7a96087bd678b5f10689c01332da89c0c1
Binary files /dev/null and b/static/fonts/MaterialIcons-Sharp.woff2 differ
diff --git a/static/fonts/MaterialIcons-TwoTone.woff2 b/static/fonts/MaterialIcons-TwoTone.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..7faedd4b3864bc8753d5434fbde71dfec8116b8e
Binary files /dev/null and b/static/fonts/MaterialIcons-TwoTone.woff2 differ