mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-12-20 12:32:47 -05:00
b604b19641
* Add extension-landing generalized styles, install scratch link component * Make EV3 page use generalized stuff * Use OS_ENUM file instead of class variable * use extension-landing/os-enum in os chooser * Use extension-landing class in extension-landing.scss * Use extension-landing styles and components on microbit page * Add view-specific styles * Move install scratch link l10n strings to src/l10n.json * Start moving steps display to its own components * Finish initial pass at Step, Steps components for extension landing pages * Create ProjectCard component * Use new components on InstallScratchLInk component * Use new components on EV3 page * allow className prop in Steps component * Use new components on micro:bit landing page * imageUrl -> imageSrc in ProjectCard * Create ExtensionHeader component and use it on micro:bit and EV3 pages * Fix a spacing issue in the InstallScratchLink component * Add ExtensionRequirements component * Use ExtensionRequirements component on landing pages * Remove requirements l10n string for ev3 page * Move project card styles out of things-to-try section * Don't render the number row in a step if compact and number props are not set * Add ExtensionSection component * Use ExtensionSection on ev3 and microbit pages * Move state configuration to ExtensionLanding class * Move tip box, screenshot styles outside of specific section * Add TipBox component and use it on the EV3 page * Use hr element instead of section-separator div * Remove refactor TODO comments :)
261 lines
5 KiB
SCSS
261 lines
5 KiB
SCSS
@import "../../colors";
|
|
@import "../../frameless";
|
|
|
|
#view {
|
|
padding: 0;
|
|
}
|
|
|
|
.extension-landing {
|
|
&>div {
|
|
padding: 4rem 0;
|
|
}
|
|
|
|
h2 {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
h3 {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
span {
|
|
line-height: 1.7rem;
|
|
}
|
|
|
|
hr {
|
|
margin: 4rem 0;
|
|
border-width: 1px 0 0 0;
|
|
border-style: solid;
|
|
border-color: $ui-border;
|
|
width: 100%;
|
|
}
|
|
|
|
.download {
|
|
display: inline-block;
|
|
|
|
&::after {
|
|
display: inline-block;
|
|
margin-left: .5rem;
|
|
background-image: url("/svgs/extensions/download.svg");
|
|
background-repeat: no-repeat;
|
|
width: 20px;
|
|
height: 20px;
|
|
vertical-align: text-top;
|
|
content: "";
|
|
}
|
|
}
|
|
|
|
.screenshot {
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.tip-box {
|
|
margin-top: 4rem;
|
|
border: 1px solid $ui-blue-25percent;
|
|
border-radius: 1rem;
|
|
background-color: $ui-blue-10percent;
|
|
padding: 2rem 3rem;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
|
|
.tip-content {
|
|
align-items: flex-start;
|
|
|
|
p {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.extension-header {
|
|
background-size: cover;
|
|
color: $ui-white;
|
|
|
|
.inner {
|
|
justify-content: space-between;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.extension-info {
|
|
max-width: $cols7;
|
|
align-items: flex-start;
|
|
|
|
.extension-copy {
|
|
margin-bottom: 5rem;
|
|
align-items: flex-start;
|
|
|
|
h2 {
|
|
display: flex;
|
|
margin-bottom: 2rem;
|
|
color: $ui-white;
|
|
}
|
|
|
|
h2 img {
|
|
padding-right: .5rem;
|
|
max-height: 100%;
|
|
}
|
|
|
|
span {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
a {
|
|
border-bottom: 1px solid $ui-white;
|
|
color: $ui-white;
|
|
}
|
|
}
|
|
|
|
.extension-requirements-container {
|
|
font-weight: 500;
|
|
align-items: flex-start;
|
|
|
|
.requirements-header {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.extension-requirements {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.extension-requirements span {
|
|
display: flex;
|
|
margin-right: 1rem;
|
|
font-size: 15px; // TODO: change to rem later
|
|
align-items: center;
|
|
}
|
|
|
|
.extension-requirements span img {
|
|
padding-right: .5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.extension-image {
|
|
width: 100%;
|
|
max-width: $cols5;
|
|
|
|
img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.os-chooser {
|
|
padding: 0;
|
|
}
|
|
|
|
.install-scratch-link {
|
|
padding: 2rem 0;
|
|
|
|
.inner {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.step-image.badge {
|
|
height: initial;
|
|
}
|
|
|
|
.download-button {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img {
|
|
margin-left: .5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.extension-section {
|
|
.inner {
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
|
|
.getting-started {
|
|
.getting-started-section {
|
|
width: 100%;
|
|
align-items: flex-start;
|
|
|
|
a {
|
|
margin: 1rem 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.things-to-try .inner {
|
|
align-items: center;
|
|
}
|
|
|
|
.project-card {
|
|
margin: 0 1.5rem;
|
|
border: 1px solid $ui-border;
|
|
border-radius: .5rem;
|
|
background-color: $ui-white;
|
|
overflow: hidden;
|
|
flex-basis: 0;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.project-card-image {
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.project-card-info {
|
|
padding: 1rem;
|
|
|
|
p {
|
|
margin: .2rem 0;
|
|
}
|
|
}
|
|
|
|
.faq {
|
|
p {
|
|
margin-bottom: 1.25rem;
|
|
margin-left: 0;
|
|
max-width: $cols8;
|
|
text-align: left;
|
|
}
|
|
|
|
.faq-title {
|
|
margin-bottom: 0;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
ul {
|
|
max-width: $cols8;
|
|
}
|
|
|
|
section {
|
|
ul {
|
|
max-width: $cols8;
|
|
}
|
|
|
|
.nav-spacer {
|
|
display: block;
|
|
visibility: hidden;
|
|
margin-top: -50px; // height of nav bar
|
|
height: 50px;
|
|
}
|
|
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
&.indented {
|
|
padding-left: $cols1 + (20px / $em);
|
|
}
|
|
}
|
|
}
|
|
|
|
.blue {
|
|
background-color: $ui-blue-10percent;
|
|
}
|
|
|
|
.inner {
|
|
max-width: $cols12;
|
|
}
|
|
}
|