Commit 2e8fa50a authored by Anxhelo Lushka's avatar Anxhelo Lushka

Material Icons fixes

parent bbd363d8
......@@ -327,6 +327,10 @@ h6 {
box-sizing: border-box;
}
.size-36 {
font-size: 36px !important;
}
@media (min-width:992px) {
.navbar {
display: none !important;
......
......@@ -4,4 +4,5 @@ type: getting-started
permalink: /getting-started/
sidebar_start:
- reuse: Reuse in a project
- contribute: Contribute
---
......@@ -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>
......
......@@ -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" . }}
......
......@@ -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>
......
<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>
......@@ -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;
}
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment