diff --git a/src/_colors.scss b/src/_colors.scss index ad8b3a916..aea15a2aa 100644 --- a/src/_colors.scss +++ b/src/_colors.scss @@ -37,6 +37,7 @@ $ui-purple-10percent: hsla(260, 60%, 60%, .1); $ui-purple-25percent: hsla(260, 60%, 60%, .25); $ui-magenta: hsla(300, 53%, 60%, 1); /* #CF63CF Sounds Primary */ $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-coral: hsla(350, 100%, 70%, 1); // #FF6680 More Blocks Primary diff --git a/src/views/guidelines/guidelines.jsx b/src/views/guidelines/guidelines.jsx index e18d9aada..d399f47fc 100644 --- a/src/views/guidelines/guidelines.jsx +++ b/src/views/guidelines/guidelines.jsx @@ -1,49 +1,119 @@ const FormattedMessage = require('react-intl').FormattedMessage; const React = require('react'); -const Box = require('../../components/box/box.jsx'); - const Page = require('../../components/page/www/page.jsx'); const render = require('../../lib/render.jsx'); require('./guidelines.scss'); +const pageSections = [ + { + id: 'respect', + headerTextId: 'guidelines.respectheader', + 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 = () => ( -
- +
+
+
+
+
+
+
+
+
+ { + pageSections.map(({id, headerTextId, buttonImgSrc}) => ( + + + + + )) + } +
+
+
+ { + pageSections.map(({id, headerTextId, contentTextIds, sectionImgSrc}, index) => ( +
+
+
+

+ +

+

+ +

+
+ +
+ )) } - > -

-   -   - -

-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- sprites -
- +
); diff --git a/src/views/guidelines/guidelines.scss b/src/views/guidelines/guidelines.scss index 92566445d..1b3bb426c 100644 --- a/src/views/guidelines/guidelines.scss +++ b/src/views/guidelines/guidelines.scss @@ -1,23 +1,211 @@ @import "../../colors"; @import "../../frameless"; -.guidelines { - .guidelines-footer { - margin-top: 1.5rem; - text-align: center; +#view { + padding: 0; +} + +.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; + font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif; + width: 708px; + } + + .title { + margin-bottom: 2.25rem; + font-size: 2.25rem; + font-weight: 700; + } + + .header1, .header2 { + font-size: 1.5rem; + font-weight: 500; + } + + .header1 { + margin-bottom: 1.5rem; + } } - dl { - dt { - margin-top: 1.5rem; - } - } -} - -@media #{$medium-and-smaller}{ - .guidelines-footer { - img { - display: none; + .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; + } + + img { + 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; + } + } } } } diff --git a/src/views/guidelines/l10n.json b/src/views/guidelines/l10n.json index 20e1ff0d0..c9c3beb25 100644 --- a/src/views/guidelines/l10n.json +++ b/src/views/guidelines/l10n.json @@ -4,16 +4,21 @@ "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.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.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.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.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.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.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." } diff --git a/static/svgs/guidelines/blobblue_respect.svg b/static/svgs/guidelines/blobblue_respect.svg new file mode 100644 index 000000000..1bce18972 --- /dev/null +++ b/static/svgs/guidelines/blobblue_respect.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/svgs/guidelines/blobgreen_remix.svg b/static/svgs/guidelines/blobgreen_remix.svg new file mode 100644 index 000000000..635356fdc --- /dev/null +++ b/static/svgs/guidelines/blobgreen_remix.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/svgs/guidelines/blobmagenta_feedback.svg b/static/svgs/guidelines/blobmagenta_feedback.svg new file mode 100644 index 000000000..baac468c9 --- /dev/null +++ b/static/svgs/guidelines/blobmagenta_feedback.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/svgs/guidelines/blobpink_friendly.svg b/static/svgs/guidelines/blobpink_friendly.svg new file mode 100644 index 000000000..f27af60d7 --- /dev/null +++ b/static/svgs/guidelines/blobpink_friendly.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/svgs/guidelines/blobpurple_honest.svg b/static/svgs/guidelines/blobpurple_honest.svg new file mode 100644 index 000000000..5a4151d8a --- /dev/null +++ b/static/svgs/guidelines/blobpurple_honest.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/svgs/guidelines/blobyellow_safe.svg b/static/svgs/guidelines/blobyellow_safe.svg new file mode 100644 index 000000000..dfd53ea26 --- /dev/null +++ b/static/svgs/guidelines/blobyellow_safe.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/svgs/guidelines/header_sprinkles_left.svg b/static/svgs/guidelines/header_sprinkles_left.svg new file mode 100644 index 000000000..ac6236b8c --- /dev/null +++ b/static/svgs/guidelines/header_sprinkles_left.svg @@ -0,0 +1,27 @@ + + header_sprinkles-svg + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/svgs/guidelines/header_sprinkles_right.svg b/static/svgs/guidelines/header_sprinkles_right.svg new file mode 100644 index 000000000..99f8c9f2f --- /dev/null +++ b/static/svgs/guidelines/header_sprinkles_right.svg @@ -0,0 +1,27 @@ + + header_sprinkles-svg + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/svgs/guidelines/illustration_feedback.svg b/static/svgs/guidelines/illustration_feedback.svg new file mode 100644 index 000000000..25cee1c3e --- /dev/null +++ b/static/svgs/guidelines/illustration_feedback.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/svgs/guidelines/illustration_friendly.svg b/static/svgs/guidelines/illustration_friendly.svg new file mode 100644 index 000000000..3b91a6016 --- /dev/null +++ b/static/svgs/guidelines/illustration_friendly.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/svgs/guidelines/illustration_honest.svg b/static/svgs/guidelines/illustration_honest.svg new file mode 100644 index 000000000..056314c1b --- /dev/null +++ b/static/svgs/guidelines/illustration_honest.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/svgs/guidelines/illustration_remix.svg b/static/svgs/guidelines/illustration_remix.svg new file mode 100644 index 000000000..fcb9b1256 --- /dev/null +++ b/static/svgs/guidelines/illustration_remix.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/svgs/guidelines/illustration_respect.svg b/static/svgs/guidelines/illustration_respect.svg new file mode 100644 index 000000000..8ddf93fd5 --- /dev/null +++ b/static/svgs/guidelines/illustration_respect.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/svgs/guidelines/illustration_safe.svg b/static/svgs/guidelines/illustration_safe.svg new file mode 100644 index 000000000..d371c8874 --- /dev/null +++ b/static/svgs/guidelines/illustration_safe.svg @@ -0,0 +1 @@ + \ No newline at end of file