mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-12-11 08:11:19 -05:00
feat: [UEPR-67] restyle community guidelines page
This commit is contained in:
MiroslavDionisiev
parent
a906ade362
commit
9134f6a2a6
18 changed files with 386 additions and 56 deletions
|
|
@ -37,6 +37,7 @@ $ui-purple-10percent: hsla(260, 60%, 60%, .1);
|
||||||
$ui-purple-25percent: hsla(260, 60%, 60%, .25);
|
$ui-purple-25percent: hsla(260, 60%, 60%, .25);
|
||||||
$ui-magenta: hsla(300, 53%, 60%, 1); /* #CF63CF Sounds Primary */
|
$ui-magenta: hsla(300, 53%, 60%, 1); /* #CF63CF Sounds Primary */
|
||||||
$ui-magenta-dark: hsla(300, 48%, 50%, 1); /* #BD42BD Sounds Tertiary */
|
$ui-magenta-dark: hsla(300, 48%, 50%, 1); /* #BD42BD Sounds Tertiary */
|
||||||
|
$ui-light-grayish-blue: hsla(215, 76%, 95%, 1);
|
||||||
|
|
||||||
$ui-yellow: hsla(45, 100%, 50%, 1); // #FFBF00 Events Primary
|
$ui-yellow: hsla(45, 100%, 50%, 1); // #FFBF00 Events Primary
|
||||||
$ui-coral: hsla(350, 100%, 70%, 1); // #FF6680 More Blocks Primary
|
$ui-coral: hsla(350, 100%, 70%, 1); // #FF6680 More Blocks Primary
|
||||||
|
|
|
||||||
|
|
@ -1,49 +1,119 @@
|
||||||
const FormattedMessage = require('react-intl').FormattedMessage;
|
const FormattedMessage = require('react-intl').FormattedMessage;
|
||||||
const React = require('react');
|
const React = require('react');
|
||||||
|
|
||||||
const Box = require('../../components/box/box.jsx');
|
|
||||||
|
|
||||||
const Page = require('../../components/page/www/page.jsx');
|
const Page = require('../../components/page/www/page.jsx');
|
||||||
const render = require('../../lib/render.jsx');
|
const render = require('../../lib/render.jsx');
|
||||||
|
|
||||||
require('./guidelines.scss');
|
require('./guidelines.scss');
|
||||||
|
|
||||||
const Guidelines = () => (
|
const pageSections = [
|
||||||
<div className="inner guidelines">
|
{
|
||||||
<Box
|
id: 'respect',
|
||||||
title={
|
headerTextId: 'guidelines.respectheader',
|
||||||
<FormattedMessage id="guidelines.title" />
|
contentTextIds: [
|
||||||
|
'guidelines.respectbody1',
|
||||||
|
'guidelines.respectbody2'
|
||||||
|
],
|
||||||
|
sectionImgSrc: '/svgs/guidelines/illustration_respect.svg',
|
||||||
|
buttonImgSrc: '/svgs/guidelines/blobblue_respect.svg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'privacy',
|
||||||
|
headerTextId: 'guidelines.privacyheader',
|
||||||
|
contentTextIds: [
|
||||||
|
'guidelines.privacybody1',
|
||||||
|
'guidelines.privacybody2'
|
||||||
|
],
|
||||||
|
sectionImgSrc: '/svgs/guidelines/illustration_safe.svg',
|
||||||
|
buttonImgSrc: '/svgs/guidelines/blobyellow_safe.svg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'helpful',
|
||||||
|
headerTextId: 'guidelines.helpfulheader',
|
||||||
|
contentTextIds: [
|
||||||
|
'guidelines.privacybody1',
|
||||||
|
'guidelines.privacybody2'
|
||||||
|
],
|
||||||
|
sectionImgSrc: '/svgs/guidelines/illustration_feedback.svg',
|
||||||
|
buttonImgSrc: '/svgs/guidelines/blobmagenta_feedback.svg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'remix',
|
||||||
|
headerTextId: 'guidelines.remixheader',
|
||||||
|
contentTextIds: [
|
||||||
|
'guidelines.remixbody1',
|
||||||
|
'guidelines.remixbody2'
|
||||||
|
],
|
||||||
|
sectionImgSrc: '/svgs/guidelines/illustration_remix.svg',
|
||||||
|
buttonImgSrc: '/svgs/guidelines/blobgreen_remix.svg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'honesty',
|
||||||
|
headerTextId: 'guidelines.honestyheader',
|
||||||
|
contentTextIds: [
|
||||||
|
'guidelines.honestybody1',
|
||||||
|
'guidelines.honestybody2'
|
||||||
|
],
|
||||||
|
sectionImgSrc: '/svgs/guidelines/illustration_honest.svg',
|
||||||
|
buttonImgSrc: '/svgs/guidelines/blobpurple_honest.svg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'friendly',
|
||||||
|
headerTextId: 'guidelines.friendlyheader',
|
||||||
|
contentTextIds: [
|
||||||
|
'guidelines.friendlybody1',
|
||||||
|
'guidelines.friendlybody2'
|
||||||
|
],
|
||||||
|
sectionImgSrc: '/svgs/guidelines/illustration_friendly.svg',
|
||||||
|
buttonImgSrc: '/svgs/guidelines/blobpink_friendly.svg'
|
||||||
}
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const Guidelines = () => (
|
||||||
|
<div className="guidelines-page">
|
||||||
|
<header>
|
||||||
|
<div className="title"><FormattedMessage id="guidelines.title" /></div>
|
||||||
|
<div className="header1"><FormattedMessage id="guidelines.header1" /></div>
|
||||||
|
<div className="header2"><FormattedMessage id="guidelines.header2" /></div>
|
||||||
|
</header>
|
||||||
|
<section className="navigation">
|
||||||
|
<div className="header3"><FormattedMessage id="guidelines.header3" /></div>
|
||||||
|
<section className="navigation-buttons">
|
||||||
|
{
|
||||||
|
pageSections.map(({id, headerTextId, buttonImgSrc}) => (
|
||||||
|
<a
|
||||||
|
key={id}
|
||||||
|
href={`#${id}`}
|
||||||
>
|
>
|
||||||
<p>
|
<img src={buttonImgSrc} />
|
||||||
<FormattedMessage id="guidelines.header1" />
|
<FormattedMessage id={headerTextId} />
|
||||||
<strong><FormattedMessage id="guidelines.header2" /></strong>
|
</a>
|
||||||
<FormattedMessage id="guidelines.header3" />
|
))
|
||||||
|
}
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
<section className="inner guidelines">
|
||||||
|
{
|
||||||
|
pageSections.map(({id, headerTextId, contentTextIds, sectionImgSrc}, index) => (
|
||||||
|
<div
|
||||||
|
id={id}
|
||||||
|
key={id}
|
||||||
|
className={`guideline ${index % 2 === 0 ? 'content-first' : 'image-first'}`}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div className="guideline-title"><FormattedMessage id={headerTextId} /></div>
|
||||||
|
<p className="first-paragraph">
|
||||||
|
<FormattedMessage id={contentTextIds[0]} />
|
||||||
|
</p>
|
||||||
|
<p className="second-paragraph">
|
||||||
|
<FormattedMessage id={contentTextIds[1]} />
|
||||||
</p>
|
</p>
|
||||||
<dl>
|
|
||||||
<dt><FormattedMessage id="guidelines.respectheader" /></dt>
|
|
||||||
<dd><FormattedMessage id="guidelines.respectbody" /></dd>
|
|
||||||
<dt><FormattedMessage id="guidelines.privacyheader" /></dt>
|
|
||||||
<dd><FormattedMessage id="guidelines.privacybody" /></dd>
|
|
||||||
<dt><FormattedMessage id="guidelines.helpfulheader" /></dt>
|
|
||||||
<dd><FormattedMessage id="guidelines.helpfulbody" /></dd>
|
|
||||||
<dt><FormattedMessage id="guidelines.remixheader" /></dt>
|
|
||||||
<dd>
|
|
||||||
<em><FormattedMessage id="guidelines.remixbody1" /></em><br />
|
|
||||||
<FormattedMessage id="guidelines.remixbody2" />
|
|
||||||
</dd>
|
|
||||||
<dt><FormattedMessage id="guidelines.honestyheader" /></dt>
|
|
||||||
<dd><FormattedMessage id="guidelines.honestybody" /></dd>
|
|
||||||
<dt><FormattedMessage id="guidelines.friendlyheader" /></dt>
|
|
||||||
<dd><FormattedMessage id="guidelines.friendlybody" /></dd>
|
|
||||||
</dl>
|
|
||||||
<div className="guidelines-footer">
|
|
||||||
<img
|
|
||||||
alt="sprites"
|
|
||||||
src="//cdn.scratch.mit.edu/scratchr2/static/images/help/spritesforcommunityguid.png"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</Box>
|
<img src={sectionImgSrc} />
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,211 @@
|
||||||
@import "../../colors";
|
@import "../../colors";
|
||||||
@import "../../frameless";
|
@import "../../frameless";
|
||||||
|
|
||||||
.guidelines {
|
#view {
|
||||||
.guidelines-footer {
|
padding: 0;
|
||||||
margin-top: 1.5rem;
|
}
|
||||||
|
|
||||||
|
.guidelines-page {
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
background-color: $motion-blue-3;
|
||||||
|
background-image: url('/svgs/guidelines/header_sprinkles_left.svg'), url('/svgs/guidelines/header_sprinkles_right.svg');
|
||||||
|
background-position: left, right;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
border-top: 50px solid $ui-blue;
|
||||||
|
padding: 6.25rem 0;
|
||||||
|
|
||||||
|
div {
|
||||||
|
color: $ui-white;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
|
||||||
|
width: 708px;
|
||||||
}
|
}
|
||||||
|
|
||||||
dl {
|
.title {
|
||||||
dt {
|
margin-bottom: 2.25rem;
|
||||||
margin-top: 1.5rem;
|
font-size: 2.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header1, .header2 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header1 {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 4.5rem;
|
||||||
|
margin: 6rem 15% 0 15%;
|
||||||
|
padding-bottom: 6rem;
|
||||||
|
|
||||||
|
border-bottom: 1px solid $active-gray;
|
||||||
|
|
||||||
|
.header3 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 400;
|
||||||
|
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation-buttons {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-rows: repeat(3, 1fr);
|
||||||
|
grid-auto-flow: column;
|
||||||
|
column-gap: 2.25rem;
|
||||||
|
row-gap: 1rem;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1.875rem;
|
||||||
|
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
|
||||||
|
color: $header-gray;
|
||||||
|
text-align: start;
|
||||||
|
word-wrap: break-word;
|
||||||
|
|
||||||
|
border: 1px solid $box-shadow-light-gray;
|
||||||
|
border-radius: 10px;
|
||||||
|
transition: background 0.5s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
background-color: $ui-light-grayish-blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.guidelines {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12rem;
|
||||||
|
|
||||||
|
margin: 6rem auto;
|
||||||
|
|
||||||
|
.guideline {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4.5rem;
|
||||||
|
scroll-margin-top: 6rem;
|
||||||
|
|
||||||
|
div, p {
|
||||||
|
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guideline-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-paragraph {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.second-paragraph {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media #{$medium-and-smaller}{
|
|
||||||
.guidelines-footer {
|
|
||||||
img {
|
img {
|
||||||
display: none;
|
width: $cols4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-first {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-first {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1024px) {
|
||||||
|
.guidelines {
|
||||||
|
.guideline {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
margin: 6rem 10%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
header {
|
||||||
|
background-image: unset;
|
||||||
|
padding: 6.25rem 10%;
|
||||||
|
|
||||||
|
div {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 560px) {
|
||||||
|
header {
|
||||||
|
.title {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header1, .header2 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation {
|
||||||
|
.navigation-buttons {
|
||||||
|
grid-template-columns: repeat(1, 1fr);
|
||||||
|
grid-template-rows: unset;
|
||||||
|
grid-auto-flow: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 360px) {
|
||||||
|
header {
|
||||||
|
.title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header1, .header2 {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation {
|
||||||
|
.header3 {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.guidelines {
|
||||||
|
.guideline {
|
||||||
|
.guideline-title {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-paragraph {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,16 +4,21 @@
|
||||||
"guidelines.header2": "We welcome people of all ages, races, ethnicities, religions, abilities, sexual orientations, and gender identities.",
|
"guidelines.header2": "We welcome people of all ages, races, ethnicities, religions, abilities, sexual orientations, and gender identities.",
|
||||||
"guidelines.header3": "Help keep Scratch a welcoming, supportive, and creative space for all by following these Community Guidelines:",
|
"guidelines.header3": "Help keep Scratch a welcoming, supportive, and creative space for all by following these Community Guidelines:",
|
||||||
"guidelines.respectheader": "Treat everyone with respect.",
|
"guidelines.respectheader": "Treat everyone with respect.",
|
||||||
"guidelines.respectbody": "Scratchers have diverse backgrounds, interests, identities, and experiences. Everyone on Scratch is encouraged to share things that excite them and are important to them—we hope that you find ways to celebrate your own identity on Scratch, and allow others to do the same. It’s never OK to attack a person or group’s identity or to be unkind to someone about their background or interests.",
|
"guidelines.respectbody1": "Scratchers have diverse backgrounds, interests, identities, and experiences.",
|
||||||
|
"guidelines.respectbody2": "Everyone on Scratch is encouraged to share things that excite them and are important to them—we hope that you find ways to celebrate your own identity on Scratch, and allow others to do the same. It’s never OK to attack a person or group’s identity or to be unkind to someone about their background or interests.",
|
||||||
"guidelines.privacyheader": "Be safe: keep personal and contact information private.",
|
"guidelines.privacyheader": "Be safe: keep personal and contact information private.",
|
||||||
"guidelines.privacybody": "For safety reasons, don't give out any information that could be used for private communication, in person or online. This includes sharing real last names, phone numbers, addresses, hometowns, school names, email addresses, usernames or links to social media sites, video chatting applications, or websites with private chat functionality.",
|
"guidelines.privacybody1": "For safety reasons, don't give out any information that could be used for private communication, in person or online.",
|
||||||
|
"guidelines.privacybody2": "This includes sharing real last names, phone numbers, addresses, hometowns, school names, email addresses, usernames or links to social media sites, video chatting applications, or websites with private chat functionality.",
|
||||||
"guidelines.helpfulheader": "Give helpful feedback.",
|
"guidelines.helpfulheader": "Give helpful feedback.",
|
||||||
"guidelines.helpfulbody": "Everyone on Scratch is learning. When commenting on a project, remember to say something you like about it, offer suggestions, and be kind, not critical. Please keep comments respectful and avoid spamming or posting chain mail. We encourage you to try new things, experiment, and learn from others.",
|
"guidelines.helpfulbody1": "Everyone on Scratch is learning.",
|
||||||
|
"guidelines.helpfulbody2": "When commenting on a project, remember to say something you like about it, offer suggestions, and be kind, not critical. Please keep comments respectful and avoid spamming or posting chain mail. We encourage you to try new things, experiment, and learn from others.",
|
||||||
"guidelines.remixheader": "Embrace remix culture.",
|
"guidelines.remixheader": "Embrace remix culture.",
|
||||||
"guidelines.remixbody1": "Remixing is when you build upon someone else’s projects, code, ideas, images, or anything else they share on Scratch to make your own unique creation.",
|
"guidelines.remixbody1": "Remixing is when you build upon someone else’s projects, code, ideas, images, or anything else they share on Scratch to make your own unique creation.",
|
||||||
"guidelines.remixbody2": "Remixing is a great way to collaborate and connect with other Scratchers. You are encouraged to use anything you find on Scratch in your own creations, as long as you provide credit to everyone whose work you used and make a meaningful change to it. And when you share something on Scratch, you are giving permission to all Scratchers to use your work in their creations, too.",
|
"guidelines.remixbody2": "Remixing is a great way to collaborate and connect with other Scratchers. You are encouraged to use anything you find on Scratch in your own creations, as long as you provide credit to everyone whose work you used and make a meaningful change to it. And when you share something on Scratch, you are giving permission to all Scratchers to use your work in their creations, too.",
|
||||||
"guidelines.honestyheader": "Be honest.",
|
"guidelines.honestyheader": "Be honest.",
|
||||||
"guidelines.honestybody": "It’s important to be honest and authentic when interacting with others on Scratch, and remember that there is a person behind every Scratch account. Spreading rumors, impersonating other Scratchers or celebrities, or pretending to be seriously ill is not respectful to the Scratch Community.",
|
"guidelines.honestybody1": "It’s important to be honest and authentic when interacting with others on Scratch, and remember that there is a person behind every Scratch account.",
|
||||||
|
"guidelines.honestybody2": "Spreading rumors, impersonating other Scratchers or celebrities, or pretending to be seriously ill is not respectful to the Scratch Community.",
|
||||||
"guidelines.friendlyheader": "Help keep the site friendly.",
|
"guidelines.friendlyheader": "Help keep the site friendly.",
|
||||||
"guidelines.friendlybody": "It’s important to keep your creations and conversations friendly and appropriate for all ages. If you think something on Scratch is mean, insulting, too violent, or otherwise disruptive to the community, click “Report” to let us know about it. Please use the “Report” button rather than engaging in fights, spreading rumors about other people’s behavior, or otherwise responding to any inappropriate content. The Scratch Team will look at your report and take the appropriate action."
|
"guidelines.friendlybody1": "It’s important to keep your creations and conversations friendly and appropriate for all ages.",
|
||||||
|
"guidelines.friendlybody2": "If you think something on Scratch is mean, insulting, too violent, or otherwise disruptive to the community, click “Report” to let us know about it. Please use the “Report” button rather than engaging in fights, spreading rumors about other people’s behavior, or otherwise responding to any inappropriate content. The Scratch Team will look at your report and take the appropriate action."
|
||||||
}
|
}
|
||||||
|
|
|
||||||
1
static/svgs/guidelines/blobblue_respect.svg
Normal file
1
static/svgs/guidelines/blobblue_respect.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg width="45" height="46" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44.572 22.631c0 12.427-7.428 20.7-22.286 22.5C7.43 46.931 0 35.059 0 22.632c0-12.426 2.476-21 22.286-22.5 19.81-1.5 22.286 10.074 22.286 22.5z" fill="#4C97FF"/></svg>
|
||||||
|
After Width: | Height: | Size: 251 B |
1
static/svgs/guidelines/blobgreen_remix.svg
Normal file
1
static/svgs/guidelines/blobgreen_remix.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg width="45" height="46" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44.572 22.631c0 12.427-7.428 20.7-22.286 22.5C7.43 46.931 0 35.059 0 22.632c0-12.426 2.476-21 22.286-22.5 19.81-1.5 22.286 10.074 22.286 22.5z" fill="#59C059"/></svg>
|
||||||
|
After Width: | Height: | Size: 251 B |
1
static/svgs/guidelines/blobmagenta_feedback.svg
Normal file
1
static/svgs/guidelines/blobmagenta_feedback.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg width="45" height="46" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44.572 22.631c0 12.427-7.428 20.7-22.286 22.5C7.43 46.931 0 35.059 0 22.632c0-12.426 2.476-21 22.286-22.5 19.81-1.5 22.286 10.074 22.286 22.5z" fill="#CF63CF"/></svg>
|
||||||
|
After Width: | Height: | Size: 251 B |
1
static/svgs/guidelines/blobpink_friendly.svg
Normal file
1
static/svgs/guidelines/blobpink_friendly.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg width="45" height="46" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44.572 22.631c0 12.427-7.428 20.7-22.286 22.5C7.43 46.931 0 35.059 0 22.632c0-12.426 2.476-21 22.286-22.5 19.81-1.5 22.286 10.074 22.286 22.5z" fill="#FF6680"/></svg>
|
||||||
|
After Width: | Height: | Size: 251 B |
1
static/svgs/guidelines/blobpurple_honest.svg
Normal file
1
static/svgs/guidelines/blobpurple_honest.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg width="45" height="46" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44.572 22.631c0 12.427-7.428 20.7-22.286 22.5C7.43 46.931 0 35.059 0 22.632c0-12.426 2.476-21 22.286-22.5 19.81-1.5 22.286 10.074 22.286 22.5z" fill="#96F"/></svg>
|
||||||
|
After Width: | Height: | Size: 248 B |
1
static/svgs/guidelines/blobyellow_safe.svg
Normal file
1
static/svgs/guidelines/blobyellow_safe.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg width="45" height="46" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44.572 22.631c0 12.427-7.428 20.7-22.286 22.5C7.43 46.931 0 35.059 0 22.632c0-12.426 2.476-21 22.286-22.5 19.81-1.5 22.286 10.074 22.286 22.5z" fill="#FFAB19"/></svg>
|
||||||
|
After Width: | Height: | Size: 251 B |
27
static/svgs/guidelines/header_sprinkles_left.svg
Normal file
27
static/svgs/guidelines/header_sprinkles_left.svg
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 354" width="201" height="354">
|
||||||
|
<title>header_sprinkles-svg</title>
|
||||||
|
<defs>
|
||||||
|
<clipPath clipPathUnits="userSpaceOnUse" id="cp1">
|
||||||
|
<path d="m0 0h1280v354h-1280z"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
<style>
|
||||||
|
.s0 { opacity: .1;fill: #000000 }
|
||||||
|
.s1 { opacity: .1;fill: none;stroke: #000000;stroke-miterlimit:10;stroke-width: 2 }
|
||||||
|
.s2 { opacity: .3;fill: #ffffff }
|
||||||
|
</style>
|
||||||
|
<g id="Clip-Path" clip-path="url(#cp1)">
|
||||||
|
<g>
|
||||||
|
<path class="s0" d="m1270.5 132.8c27 0 48.6-23.3 48.6-52.1 0-28.8-21.9-52.1-48.6-52.1h-17.7c-27 0-48.6 23.3-48.6 52.1 0 28.8 21.8 52.1 48.6 52.1l-15.7-3.8c2.9 6.9 3.5 11.1 2 25.3-1.8 17.7 13.3 19.5 39.6-22 0.4-0.6 3.3-5 3.7-5.5z"/>
|
||||||
|
<path class="s0" d="m1260.3 113.3c19.1 0 34.5-15.5 34.5-34.6 0-19.1-15.4-34.6-34.5-34.6-19 0-34.5 15.5-34.5 34.6 0 19.1 15.5 34.6 34.5 34.6z"/>
|
||||||
|
<path fill-rule="evenodd" class="s1" d="m1244 84.3c0 0 15.4 10.2 32 0.8"/>
|
||||||
|
<path class="s0" d="m1238.2 77.6c2.3 0 4.2-1.9 4.2-4.2 0-1.1-0.4-2.2-1.2-3-0.8-0.8-1.9-1.2-3-1.2-1.1 0-2.2 0.4-3 1.2-0.8 0.8-1.2 1.9-1.2 3 0 2.3 1.9 4.2 4.2 4.2zm44.2 0c2.3 0 4.2-1.9 4.2-4.2q0-0.8-0.3-1.6-0.3-0.8-0.9-1.4-0.6-0.6-1.4-0.9-0.7-0.3-1.6-0.3c-2.3 0-4.2 1.9-4.2 4.2 0 2.3 1.9 4.2 4.2 4.2z"/>
|
||||||
|
<path class="s0" d="m1225.1 280.9h-81c-13 0-23.5 11.6-23.5 26 0 14.3 10.5 25.9 23.5 25.9h46c0.1 0.3 0.4 0.4 0.6 0.7 12.7 20.8 31.6 25.2 29.9 15.8-1.3-6.9-2.3-13-1-16.5h5.5c13 0 23.5-11.6 23.5-25.9-0.1-14.4-10.5-26-23.5-26z"/>
|
||||||
|
<path fill-rule="evenodd" class="s0" d="m1220.8 302.5c-0.8 8.4-10.3 15.1-12.8 15.1-2.4 0-12-6.7-12.7-15.1v-0.8c0-4.1 3.3-7.4 7.4-7.4 2 0 3.9 0.8 5.3 2.1 1.3-1.4 3.2-2.1 5.4-2.1 4 0 7.4 3.3 7.4 7.4z"/>
|
||||||
|
<path class="s0" d="m1163.5 318.2l3-6.3c0.3-0.4 0.6-0.7 1.2-0.8l6.8-1c1.3-0.2 1.7-1.8 0.9-2.6l-5-4.8c-0.3-0.3-0.5-0.9-0.4-1.3l1.2-6.8c0.1-1.2-1.1-2.2-2.2-1.6l-6.1 3.2c-0.4 0.2-1 0.2-1.4 0l-6.1-3.2c-1.2-0.6-2.5 0.3-2.2 1.6l1.2 6.8c0.1 0.4-0.2 1-0.4 1.3l-5 4.8c-0.8 0.8-0.4 2.3 0.9 2.6l6.8 1c0.4 0 0.9 0.4 1.2 0.8l3 6.3c0.4 1.1 2 1.1 2.6 0z"/>
|
||||||
|
<path class="s2" d="m18.2 15.8c2.4-0.6 4.2-2.6 4.9-4.9l1.5-5.6c0.6-2.7 4.4-2.7 5.1 0l1.4 5.6c0.7 2.4 2.7 4.3 5 4.9l5.6 1.5c2.6 0.7 2.6 4.5 0 5.1l-5.6 1.5c-2.5 0.7-4.3 2.6-5 4.9l-1.4 5.6c-0.7 2.7-4.5 2.7-5.1 0l-1.5-5.6c-0.7-2.4-2.6-4.2-4.9-4.9l-5.6-1.5c-2.7-0.6-2.7-4.4 0-5.1zm1162.3 3.1c1.2-0.3 2-1.2 2.3-2.3l0.7-2.6c0.3-1.3 2.1-1.3 2.4 0l0.7 2.6c0.3 1.2 1.3 2 2.4 2.3l2.6 0.7c1.2 0.3 1.2 2.1 0 2.4l-2.6 0.7c-1.2 0.3-2.1 1.3-2.4 2.3l-0.7 2.7c-0.3 1.2-2.1 1.2-2.4 0l-0.7-2.7c-0.3-1.1-1.2-2-2.3-2.3l-2.6-0.7c-1.3-0.3-1.3-2.1 0-2.4zm-31.1 181.2c1.1-0.3 2-1.2 2.3-2.3l0.7-2.7c0.3-1.2 2.1-1.2 2.4 0l0.7 2.7c0.3 1.1 1.2 2 2.3 2.3l2.6 0.7c1.3 0.3 1.3 2.1 0 2.4l-2.6 0.7c-1.1 0.3-2 1.3-2.3 2.3l-0.7 2.7c-0.3 1.2-2.1 1.2-2.4 0l-0.7-2.7c-0.3-1.1-1.2-2-2.3-2.3l-2.7-0.7c-1.2-0.3-1.2-2.1 0-2.4zm-29-26.5c2.5-0.6 4.3-2.6 4.9-4.9l1.5-5.6c0.7-2.7 4.5-2.7 5.1 0l1.5 5.6c0.6 2.4 2.6 4.3 4.9 4.9l5.6 1.5c2.6 0.7 2.6 4.4 0 5.1l-5.6 1.5c-2.4 0.7-4.3 2.6-4.9 4.9l-1.5 5.6c-0.6 2.7-4.4 2.7-5.1 0l-1.5-5.6c-0.6-2.4-2.6-4.2-4.9-4.9l-5.6-1.5c-2.6-0.7-2.6-4.4 0-5.1zm-1027.8 119.7c2.3-0.6 4-2.4 4.7-4.5l1.3-5.1c0.7-2.4 4.2-2.4 4.8 0l1.4 5.1c0.7 2.2 2.5 3.9 4.7 4.5l5.2 1.3c2.5 0.6 2.5 4.1 0 4.7l-5.2 1.4c-2.3 0.6-4 2.4-4.7 4.5l-1.4 5.1c-0.6 2.4-4.1 2.4-4.8 0l-1.3-5.1c-0.7-2.3-2.5-3.9-4.7-4.5l-5.2-1.4c-2.5-0.6-2.5-4.1 0-4.7zm28.2-16.6c1.1-0.3 1.9-1.1 2.2-2.1l0.7-2.5c0.3-1.2 1.9-1.2 2.2 0l0.7 2.5c0.3 1 1.1 1.8 2.2 2.1l2.4 0.7c1.2 0.3 1.2 2 0 2.2l-2.4 0.7c-1.1 0.3-1.9 1.2-2.2 2.2l-0.7 2.5c-0.3 1.1-1.9 1.1-2.2 0l-0.7-2.5c-0.3-1.1-1.1-1.9-2.2-2.2l-2.4-0.7c-1.2-0.2-1.2-1.9 0-2.2z"/>
|
||||||
|
<path class="s0" d="m116.9 220.6c28.4 0 51.4-24.7 51.4-55.1 0-30.4-23.1-55-51.4-55h-147c-28.5-0.2-51.6 24.4-51.6 54.9 0 30.4 23.1 55 51.4 55h12.3c3 7.4 0.7 20.3-2.2 35.2-3.9 20 37.8 10.5 65.5-33.4 0.5-0.6 0.7-1.2 1.2-1.6z"/>
|
||||||
|
<path fill-rule="evenodd" class="s0" d="m39 156.7c-2.1 22.7-27.7 40.5-34.2 40.5-6.5 0-32-17.8-34.1-40.5 0-0.7-0.1-1.5-0.1-2.2 0-11 8.9-19.8 19.9-19.8q2-0.1 4 0.3 2 0.4 3.8 1.2 1.9 0.8 3.5 2 1.7 1.1 3 2.5 1.4-1.4 3.1-2.5 1.6-1.2 3.5-2 1.8-0.8 3.8-1.2 1.9-0.4 4-0.3c10.9 0 19.9 8.9 19.9 19.8 0 0.7-0.1 1.5-0.1 2.2zm78.2 2.7c-1.5 16-19.4 28.4-24 28.4-4.7 0-22.6-12.4-24-28.4 0-0.5-0.2-1-0.2-1.6 0-7.6 6.4-14 14-14 4 0 7.6 1.6 10 4.2 2.5-2.6 6.1-4.2 10-4.2 7.8 0 14 6.2 14 14 0.3 0.6 0.2 1.2 0.2 1.6z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.2 KiB |
27
static/svgs/guidelines/header_sprinkles_right.svg
Normal file
27
static/svgs/guidelines/header_sprinkles_right.svg
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 224 354" width="224" height="354">
|
||||||
|
<title>header_sprinkles-svg</title>
|
||||||
|
<defs>
|
||||||
|
<clipPath clipPathUnits="userSpaceOnUse" id="cp1">
|
||||||
|
<path d="m-1056 0h1280v354h-1280z"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
<style>
|
||||||
|
.s0 { opacity: .1;fill: #000000 }
|
||||||
|
.s1 { opacity: .1;fill: none;stroke: #000000;stroke-miterlimit:10;stroke-width: 2 }
|
||||||
|
.s2 { opacity: .3;fill: #ffffff }
|
||||||
|
</style>
|
||||||
|
<g id="Clip-Path" clip-path="url(#cp1)">
|
||||||
|
<g>
|
||||||
|
<path class="s0" d="m214.5 132.8c27 0 48.6-23.3 48.6-52.1 0-28.8-21.9-52.1-48.6-52.1h-17.7c-27 0-48.6 23.3-48.6 52.1 0 28.8 21.8 52.1 48.6 52.1l-15.7-3.8c2.9 6.9 3.5 11.1 2 25.3-1.8 17.7 13.3 19.5 39.6-22 0.4-0.6 3.3-5 3.7-5.5z"/>
|
||||||
|
<path class="s0" d="m204.3 113.3c19.1 0 34.5-15.5 34.5-34.6 0-19.1-15.4-34.6-34.5-34.6-19 0-34.5 15.5-34.5 34.6 0 19.1 15.5 34.6 34.5 34.6z"/>
|
||||||
|
<path fill-rule="evenodd" class="s1" d="m188 84.3c0 0 15.4 10.2 32 0.8"/>
|
||||||
|
<path class="s0" d="m182.2 77.6c2.3 0 4.2-1.9 4.2-4.2 0-1.1-0.4-2.2-1.2-3-0.8-0.8-1.9-1.2-3-1.2-1.1 0-2.2 0.4-3 1.2-0.8 0.8-1.2 1.9-1.2 3 0 2.3 1.9 4.2 4.2 4.2zm44.2 0c2.4 0 4.2-1.9 4.2-4.2q0-0.8-0.3-1.6-0.3-0.8-0.9-1.4-0.6-0.6-1.4-0.9-0.7-0.3-1.6-0.3c-2.3 0-4.2 1.9-4.2 4.2 0 2.3 1.9 4.2 4.2 4.2z"/>
|
||||||
|
<path class="s0" d="m169.1 280.9h-81c-13 0-23.5 11.6-23.5 26 0 14.3 10.5 25.9 23.5 25.9h46c0.1 0.3 0.4 0.4 0.6 0.7 12.7 20.8 31.6 25.2 29.9 15.8-1.3-6.9-2.3-13-1-16.5h5.5c13 0 23.5-11.6 23.5-25.9-0.1-14.4-10.5-26-23.5-26z"/>
|
||||||
|
<path fill-rule="evenodd" class="s0" d="m164.8 302.5c-0.8 8.4-10.3 15.1-12.8 15.1-2.4 0-12-6.7-12.7-15.1v-0.8c0-4.1 3.3-7.4 7.4-7.4 2 0 3.9 0.8 5.3 2.1 1.3-1.4 3.2-2.1 5.4-2.1 4 0 7.3 3.3 7.3 7.4z"/>
|
||||||
|
<path class="s0" d="m107.5 318.2l3-6.3c0.3-0.4 0.6-0.7 1.2-0.8l6.8-1c1.3-0.2 1.7-1.8 0.9-2.6l-5-4.8c-0.3-0.3-0.5-0.9-0.4-1.3l1.2-6.8c0.1-1.2-1.1-2.2-2.2-1.6l-6.1 3.2c-0.4 0.2-1 0.2-1.4 0l-6.1-3.2c-1.2-0.6-2.5 0.3-2.2 1.6l1.2 6.8c0.1 0.4-0.2 1-0.4 1.3l-5 4.8c-0.8 0.8-0.4 2.3 0.9 2.6l6.8 1c0.4 0 0.9 0.4 1.2 0.8l3 6.3c0.4 1.1 2 1.1 2.6 0z"/>
|
||||||
|
<path class="s2" d="m-1037.8 15.8c2.4-0.6 4.2-2.6 4.9-4.9l1.5-5.6c0.6-2.7 4.4-2.7 5.1 0l1.4 5.6c0.7 2.4 2.7 4.3 5 4.9l5.6 1.5c2.6 0.7 2.6 4.5 0 5.1l-5.6 1.5c-2.5 0.7-4.3 2.6-5 4.9l-1.4 5.6c-0.7 2.7-4.5 2.7-5.1 0l-1.5-5.6c-0.7-2.4-2.6-4.2-4.9-4.9l-5.6-1.5c-2.7-0.6-2.7-4.4 0-5.1zm1162.3 3.1c1.2-0.3 2-1.2 2.3-2.3l0.7-2.6c0.3-1.3 2.1-1.3 2.4 0l0.7 2.6c0.3 1.2 1.3 2 2.4 2.3l2.6 0.7c1.2 0.3 1.2 2.1 0 2.4l-2.6 0.7c-1.2 0.3-2.1 1.3-2.4 2.3l-0.7 2.7c-0.3 1.2-2.1 1.2-2.4 0l-0.7-2.7c-0.3-1.1-1.2-2-2.3-2.3l-2.6-0.7c-1.3-0.3-1.3-2.1 0-2.4zm-31.1 181.2c1.1-0.3 2-1.2 2.3-2.3l0.7-2.7c0.3-1.2 2.1-1.2 2.4 0l0.7 2.7c0.3 1.1 1.2 2 2.3 2.3l2.6 0.7c1.3 0.3 1.3 2.1 0 2.4l-2.6 0.7c-1.1 0.3-2 1.3-2.3 2.3l-0.7 2.7c-0.3 1.2-2.1 1.2-2.4 0l-0.7-2.7c-0.3-1.1-1.2-2-2.3-2.3l-2.7-0.7c-1.2-0.3-1.2-2.1 0-2.4zm-29-26.5c2.5-0.6 4.3-2.6 4.9-4.9l1.5-5.6c0.7-2.7 4.5-2.7 5.1 0l1.5 5.6c0.6 2.4 2.6 4.3 4.9 4.9l5.6 1.5c2.6 0.7 2.6 4.4 0 5.1l-5.6 1.5c-2.4 0.7-4.3 2.6-4.9 4.9l-1.5 5.6c-0.6 2.7-4.4 2.7-5.1 0l-1.5-5.6c-0.6-2.4-2.6-4.2-4.9-4.9l-5.6-1.5c-2.6-0.7-2.6-4.4 0-5.1zm-1027.8 119.7c2.3-0.6 4-2.4 4.7-4.5l1.3-5.1c0.7-2.4 4.2-2.4 4.8 0l1.4 5.1c0.7 2.2 2.5 3.9 4.7 4.5l5.2 1.3c2.5 0.6 2.5 4.1 0 4.7l-5.2 1.4c-2.3 0.6-4 2.4-4.7 4.5l-1.4 5.1c-0.6 2.4-4.1 2.4-4.8 0l-1.3-5.1c-0.7-2.3-2.5-3.9-4.7-4.5l-5.2-1.4c-2.5-0.6-2.5-4.1 0-4.7zm28.2-16.6c1.1-0.3 1.9-1.1 2.2-2.1l0.7-2.5c0.3-1.2 1.9-1.2 2.2 0l0.7 2.5c0.3 1 1.1 1.8 2.2 2.1l2.4 0.7c1.2 0.3 1.2 2 0 2.2l-2.4 0.7c-1.1 0.3-1.9 1.2-2.2 2.2l-0.7 2.5c-0.3 1.1-1.9 1.1-2.2 0l-0.7-2.5c-0.3-1.1-1.1-1.9-2.2-2.2l-2.4-0.7c-1.2-0.2-1.2-1.9 0-2.2z"/>
|
||||||
|
<path class="s0" d="m-939.1 220.6c28.5 0 51.4-24.7 51.4-55.1 0-30.4-23.1-55-51.4-55h-147c-28.5-0.2-51.6 24.4-51.6 54.9 0 30.4 23.1 55 51.4 55h12.3c3 7.4 0.7 20.3-2.2 35.2-3.9 20 37.8 10.5 65.5-33.4 0.5-0.6 0.7-1.2 1.2-1.6z"/>
|
||||||
|
<path fill-rule="evenodd" class="s0" d="m-1017 156.7c-2.1 22.7-27.7 40.5-34.2 40.5-6.5 0-32-17.8-34.1-40.5 0-0.7-0.1-1.5-0.1-2.2 0-11 8.9-19.8 19.9-19.8q2-0.1 4 0.3 2 0.4 3.8 1.2 1.9 0.8 3.5 2 1.7 1.1 3 2.5 1.4-1.4 3.1-2.5 1.6-1.2 3.5-2 1.8-0.8 3.8-1.2 1.9-0.4 4-0.3c10.9 0 19.9 8.9 19.9 19.8 0 0.7-0.1 1.5-0.1 2.2zm78.2 2.7c-1.5 16-19.4 28.4-24 28.4-4.7 0-22.6-12.4-24-28.4 0-0.5-0.2-1-0.2-1.6 0-7.6 6.4-14 14-14 4 0 7.6 1.6 10 4.2 2.5-2.6 6.1-4.2 10-4.2 7.8 0 14 6.2 14 14 0.3 0.6 0.2 1.2 0.2 1.6z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.2 KiB |
1
static/svgs/guidelines/illustration_feedback.svg
Normal file
1
static/svgs/guidelines/illustration_feedback.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9 KiB |
1
static/svgs/guidelines/illustration_friendly.svg
Normal file
1
static/svgs/guidelines/illustration_friendly.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.7 KiB |
1
static/svgs/guidelines/illustration_honest.svg
Normal file
1
static/svgs/guidelines/illustration_honest.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.1 KiB |
1
static/svgs/guidelines/illustration_remix.svg
Normal file
1
static/svgs/guidelines/illustration_remix.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 KiB |
1
static/svgs/guidelines/illustration_respect.svg
Normal file
1
static/svgs/guidelines/illustration_respect.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.1 KiB |
1
static/svgs/guidelines/illustration_safe.svg
Normal file
1
static/svgs/guidelines/illustration_safe.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6 KiB |
Loading…
Reference in a new issue