scratchfoundation/scratchx
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratchx.git synced 2024-12-11 00:31:01 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Style the homepage

Browse source
This commit is contained in:
Ray Schamp 2015-05-05 13:06:47 -04:00
parent a505617bf4
commit 35e1cca33b
20 changed files with 787 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

417
css/scratchx.css
View file

@ -1,3 +1,5 @@
@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic);
html { html {
box-sizing: border-box; } box-sizing: border-box; }
@ -381,6 +383,12 @@ dialog {
padding: 0; padding: 0;
color: inherit; } color: inherit; }
@font-face {
font-family: "ScratchX";
src: url("../fonts/ScratchX.eot?-omdesu");
src: url("../fonts/ScratchX.eot?#iefix-omdesu") format("embedded-opentype"), url("../fonts/ScratchX.woff?-omdesu") format("woff"), url("../fonts/ScratchX.ttf?-omdesu") format("truetype"), url("../fonts/ScratchX.svg?-omdesu#ScratchX") format("svg");
font-weight: normal;
font-style: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"], button, input[type="button"], input[type="reset"], input[type="submit"],
button { button {
-webkit-appearance: none; -webkit-appearance: none;
@ -390,12 +398,12 @@ button {
appearance: none; appearance: none;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
background-color: #21b4f0; background-color: #21b4f0;
border-radius: 3px; border-radius: 5px;
border: none; border: none;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; font-family: "Source Sans Pro", "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif;
font-size: 1em; font-size: 1em;
font-weight: 600; font-weight: 600;
line-height: 1; line-height: 1;
@ -415,8 +423,8 @@ button {
opacity: 0.5; } opacity: 0.5; }
fieldset { fieldset {
background-color: #fcfcfd; background-color: #dfdfdf;
border: 1px solid #dfe3e7; border: 1px solid #c5c5c5;
margin: 0 0 0.75em; margin: 0 0 0.75em;
padding: 1.5em; } padding: 1.5em; }
@ -424,7 +432,7 @@ input,
label, label,
select { select {
display: block; display: block;
font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; font-family: "Source Sans Pro", "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif;
font-size: 1em; } font-size: 1em; }
label { label {
@ -439,11 +447,11 @@ input[type="color"], input[type="date"], input[type="datetime"], input[type="dat
select[multiple=multiple], select[multiple=multiple],
textarea { textarea {
background-color: #fff; background-color: #fff;
border: 1px solid #dfe3e7; border: 1px solid #c5c5c5;
border-radius: 3px; border-radius: 5px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
box-sizing: border-box; box-sizing: border-box;
font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; font-family: "Source Sans Pro", "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif;
font-size: 1em; font-size: 1em;
margin-bottom: 0.75em; margin-bottom: 0.75em;
padding: 0.5em; padding: 0.5em;
@ -452,7 +460,7 @@ textarea {
input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="email"]:hover, input[type="month"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="time"]:hover, input[type="url"]:hover, input[type="week"]:hover, textarea:hover, input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="email"]:hover, input[type="month"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="time"]:hover, input[type="url"]:hover, input[type="week"]:hover, textarea:hover,
select[multiple=multiple]:hover, select[multiple=multiple]:hover,
textarea:hover { textarea:hover {
border-color: #c2c9d1; } border-color: #acacac; }
input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, textarea:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, textarea:focus,
select[multiple=multiple]:focus, select[multiple=multiple]:focus,
textarea:focus { textarea:focus {
@ -484,6 +492,60 @@ select {
max-width: 100%; max-width: 100%;
width: auto; } width: auto; }
.input-plus-button {
overflow: hidden; }
.input-plus-button input, .input-plus-button input:focus, .input-plus-button input:hover, .input-plus-button button {
border: 0;
margin: 0;
padding: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
display: block;
float: left;
border-radius: 5px;
padding: 0.375em; }
.input-plus-button input::-webkit-input-placeholder, .input-plus-button input:focus::-webkit-input-placeholder, .input-plus-button input:hover::-webkit-input-placeholder, .input-plus-button button::-webkit-input-placeholder {
border: 0;
margin: 0;
padding: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none; }
.input-plus-button input::-moz-placeholder, .input-plus-button input:focus::-moz-placeholder, .input-plus-button input:hover::-moz-placeholder, .input-plus-button button::-moz-placeholder {
border: 0;
margin: 0;
padding: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none; }
.input-plus-button input:-moz-placeholder, .input-plus-button input:focus:-moz-placeholder, .input-plus-button input:hover:-moz-placeholder, .input-plus-button button:-moz-placeholder {
border: 0;
margin: 0;
padding: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none; }
.input-plus-button input:-ms-input-placeholder, .input-plus-button input:focus:-ms-input-placeholder, .input-plus-button input:hover:-ms-input-placeholder, .input-plus-button button:-ms-input-placeholder {
border: 0;
margin: 0;
padding: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none; }
.input-plus-button input, .input-plus-button input:focus, .input-plus-button input:hover {
width: 75%;
text-align: center;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border: 1px solid #dfe3e7;
border-right: 0px; }
.input-plus-button button {
width: 25%;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border: 1px solid #21b4f0; }
ul, ul,
ol { ol {
list-style-type: none; list-style-type: none;
@ -508,13 +570,13 @@ table {
width: 100%; } width: 100%; }
th { th {
border-bottom: 1px solid #b3bdc6; border-bottom: 1px solid #9f9f9f;
font-weight: 600; font-weight: 600;
padding: 0.75em 0; padding: 0.75em 0;
text-align: left; } text-align: left; }
td { td {
border-bottom: 1px solid #dfe3e7; border-bottom: 1px solid #c5c5c5;
padding: 0.75em 0; } padding: 0.75em 0; }
tr, tr,
@ -529,7 +591,7 @@ body {
font-feature-settings: "kern", "liga", "pnum"; font-feature-settings: "kern", "liga", "pnum";
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
color: #58595b; color: #58595b;
font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; font-family: "Source Sans Pro", "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif;
font-size: 1em; font-size: 1em;
line-height: 1.5; } line-height: 1.5; }
@ -539,11 +601,17 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; font-family: "Source Sans Pro", "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif;
font-size: 1em; font-size: 1em;
line-height: 1.2; line-height: 1.2;
margin: 0 0 0.75em; } margin: 0 0 0.75em; }
article h1 {
font-size: 1.5em; }
article h2 {
font-size: 1.5em; }
p { p {
margin: 0 0 0.75em; } margin: 0 0 0.75em; }
@ -557,7 +625,7 @@ a {
outline: none; } outline: none; }
hr { hr {
border-bottom: 1px solid #dfe3e7; border-bottom: 1px solid #c5c5c5;
border-left: none; border-left: none;
border-right: none; border-right: none;
border-top: none; border-top: none;
@ -571,22 +639,61 @@ picture {
dialog { dialog {
display: block; display: block;
position: static; } position: static; }
dialog h2 {
text-align: center;
margin: 1.5em 0 0.375em 0; }
dialog section {
background-color: #3f5975;
color: #fff;
/* Kill margin collapse */
padding: 1px; }
dialog section:last-child {
background-color: #fff;
padding: 0.75em;
color: #58595b; }
dialog button {
display: inline-block;
line-height: normal;
width: 100%;
padding: 0.375em;
/*
Needed so that all buttons are the same height
as text inputs
*/
border: 1px solid; }
.message, .warning, .info {
border-radius: 5px;
line-height: 49px;
text-align: center;
margin: 1.5em 0; }
.warning {
background-color: #fff447;
color: #58595b; }
.info {
background-color: #dfe3e7;
color: #58595b; }
article h1 {
text-align: center; }
article header p {
text-align: center; }
article h1 + p {
float: left;
display: block;
margin-right: 1.25%;
width: 83.125%;
margin-left: 8.4375%; }
article h1 + p:last-child {
margin-right: 0; }
a[href=""] { a[href=""] {
outline: 1px solid red; } outline: 1px solid red; }
#editor {
text-align: center;
margin-top: 30px;
display: none;
position: relative; }
.scratch_unsupported p {
color: #aaa;
font-size: 22px;
margin-top: 14px;
line-height: 28px; }
body > main > header > div, body > main > header > div,
body > main > article > header > div, body > main > article > header > div,
body > main > article > section > div, body > main > article > section > div,
@ -601,35 +708,247 @@ body > main > footer > div {
clear: both; clear: both;
content: ""; content: "";
display: table; } display: table; }
body > main > header > div > div,
body > main > article > header > div > div,
body > main > article > section > div > div,
body > main > footer > div > div {
display: block; }
body > main > header > div > div::after,
body > main > article > header > div > div::after,
body > main > article > section > div > div::after,
body > main > footer > div > div::after {
clear: both;
content: "";
display: table; }
body > main > header > div > div .main,
body > main > article > header > div > div .main,
body > main > article > section > div > div .main,
body > main > footer > div > div .main {
float: left;
display: block;
margin-right: 1.25%;
width: 66.25%; }
body > main > header > div > div .main:last-child,
body > main > article > header > div > div .main:last-child,
body > main > article > section > div > div .main:last-child,
body > main > footer > div > div .main:last-child {
margin-right: 0; }
body > main > header > div > div nav,
body > main > article > header > div > div nav,
body > main > article > section > div > div nav,
body > main > footer > div > div nav {
float: left;
display: block;
margin-right: 1.25%;
width: 32.5%; }
body > main > header > div > div nav:last-child,
body > main > article > header > div > div nav:last-child,
body > main > article > section > div > div nav:last-child,
body > main > footer > div > div nav:last-child {
margin-right: 0; }
dialog { body > main > article,
float: left; body > section {
display: block; display: none; }
margin-right: 1.25%; body #home {
width: 32.5%; } display: block; }
dialog:last-child {
margin-right: 0; }
footer section { #dialogs {
float: left; display: block; }
display: block; #dialogs::after {
margin-right: 1.25%; clear: both;
width: 32.5%; content: "";
margin-left: 8.4375%; } display: table; }
footer section:last-child { #dialogs dialog {
margin-right: 0; } float: left;
footer nav { display: block;
float: left; margin-right: 1.25%;
display: block; width: 32.5%; }
margin-right: 1.25%; #dialogs dialog:last-child {
width: 15.625%; } margin-right: 0; }
footer nav:last-child {
margin-right: 0; } .extension-file section:first-child {
footer nav:first-of-type { /* Add a border equal to the number of featured extensions - 1 */
border-top: 2px solid #3f5975;
position: relative;
padding-top: 6.75em; }
.extension-file section:first-child:before {
content: "";
font-family: "ScratchX";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
font-size: 3em;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-radius: 0.75em;
width: 1.5em;
height: 1.5em;
text-align: center;
line-height: 1.5;
position: absolute;
left: 50%;
margin-left: -0.75em;
background-color: #18ba37;
color: #fff;
top: 0.75em; }
.extension-file button {
background-color: #18ba37;
color: #fff; }
.extension-url section:first-child {
/* Add a border equal to the number of featured extensions - 1 */
border-top: 2px solid #3f5975;
position: relative;
padding-top: 6.75em; }
.extension-url section:first-child:before {
content: "";
font-family: "ScratchX";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
font-size: 3em;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-radius: 0.75em;
width: 1.5em;
height: 1.5em;
text-align: center;
line-height: 1.5;
position: absolute;
left: 50%;
margin-left: -0.75em;
background-color: #21b4f0;
color: #fff;
top: 0.75em; }
.extension-feature section:first-child h2 {
margin-top: 0.375em; }
.extension-feature section:last-child {
padding: 0px; }
.extension-feature ul li {
border-bottom: 1px solid #dfe3e7;
padding: 0.75em; }
.extension-feature ul li h3 {
font-size: 1.125em;
font-weight: 600;
margin-bottom: 0.375em; }
.extension-feature ul li p {
text-align: left;
margin: 0;
color: #58595b; }
footer {
padding: 1.875em 0; }
footer section {
float: left;
display: block;
margin-right: 1.25%;
width: 32.5%;
margin-left: 8.4375%; } margin-left: 8.4375%; }
footer section:last-child {
margin-right: 0; }
footer nav {
float: left;
display: block;
margin-right: 1.25%;
width: 15.625%; }
footer nav:last-child {
margin-right: 0; }
footer nav:first-of-type {
margin-left: 8.4375%; }
footer nav h2 {
line-height: 1.5;
margin-bottom: 0; }
footer, main header { footer, main header {
background-color: #3f5975; background-color: #3f5975;
color: #fff; } color: #fff; }
body > main > header {
display: block;
height: 3.75em;
line-height: 3.75em; }
body > main > header::after {
clear: both;
content: "";
display: table; }
.scratchx-logo {
float: left; }
.scratchx-logo span {
overflow: hidden;
text-indent: 101%;
white-space: nowrap;
display: inline-block;
background: url(../images/scratchx-logo.png) left center no-repeat;
width: 192px;
height: 3.75em; }
.main-nav {
float: right; }
.main-nav ul, .main-nav li {
display: inline-block; }
.main-nav li {
margin-left: 50px; }
/* Homepage */
#home > header {
background: url(../images/editor.png);
background-size: cover; }
#home > header > div {
/* To stop child elements from adding margin */
padding: 1px 0; }
#home > section > div {
border-top: 1px solid #c5c5c5;
margin-top: 3.75em;
padding: 3.75em 0;
position: relative; }
#home > section > div:before {
content: "";
font-family: "ScratchX";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
font-size: 1em;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 2em;
color: #c5c5c5;
position: absolute;
top: -.55em;
left: 50%;
margin-left: -1.3em;
background-color: #fff;
border: 1em solid #fff;
border-width: 0 0.4em; }
#home > section > div h2, #home > section > div p {
text-align: center; }
#editor {
text-align: center;
margin-top: 30px;
display: none;
position: relative; }
.scratch_unsupported p {
color: #aaa;
font-size: 22px;
margin-top: 14px;
line-height: 28px; }
/*# sourceMappingURL=scratchx.css.map */ /*# sourceMappingURL=scratchx.css.map */

4
css/scratchx.css.map
View file

File diff suppressed because one or more lines are too long

BIN
fonts/ScratchX.eot Executable file
View file

Binary file not shown.

17
fonts/ScratchX.svg Executable file
View file

@ -0,0 +1,17 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="ScratchX" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" d="" horiz-adv-x="512" />
<glyph unicode="&#xe600;" d="M1169.406 611.629l-20.453 25.567c-25.567 25.567-56.248 40.907-92.041 51.135h-10.227c-25.567 5.113-46.020 20.453-61.361 35.793l-132.948 132.948c-5.113 5.113-81.815 86.928-194.309 86.928-40.907 0-81.815-10.227-117.608-30.68-20.453-10.227-30.68-35.793-25.567-56.248s25.567-35.793 46.020-35.793h5.113c5.113 0 10.227 0 15.34 0 51.135 0 97.155-15.34 138.061-51.135-10.227-25.567-5.113-51.135 10.227-76.701l-127.835-127.835-46.020 46.020c10.227 76.701-20.453 158.516-76.701 214.763l-66.475 76.701c-25.567 25.567-56.248 40.907-97.155 40.907-35.793 0-66.475-15.34-92.041-40.907-5.113-5.113-10.227-15.34-10.227-20.453s5.113-15.34 10.227-20.453l132.948-132.948-25.567-97.155-97.155-25.567-132.948 132.948c-10.227 10.227-30.68 10.227-40.907 0-51.135-51.135-51.135-138.061 0-189.196l81.815-81.815c56.248-56.248 132.948-86.928 209.649-76.701l5.113-5.113-194.309-194.309c-35.793-35.793-35.793-92.041 0-127.835l92.041-92.041c15.34-15.34 40.907-25.567 61.361-25.567 25.567 0 46.020 10.227 61.361 25.567l194.309 194.309 132.948-132.948c30.68-30.68 66.475-46.020 107.381-46.020s81.815 15.34 107.381 46.020c30.68 30.68 46.020 66.475 46.020 107.381s-15.34 76.701-46.020 107.381l-168.743 168.743 102.268 102.268c0-5.113 0-5.113 0-10.227l5.113-25.567c5.113-35.793 20.453-66.475 40.907-86.928l30.68-30.68c25.567-25.567 71.588-25.567 97.155 0l148.289 148.288c25.567 25.567 25.567 71.588-5.113 97.155zM330.808 18.475c-10.227-10.227-30.68-10.227-40.907 0l-92.041 92.041c-10.227 10.227-10.227 30.68 0 40.907l194.309 194.309 132.948-132.948-194.309-194.309zM877.942 212.784c15.34-15.34 25.567-40.907 25.567-66.475s-10.227-46.020-25.567-66.475c-35.793-35.793-97.155-35.793-132.948 0l-327.257 327.257-35.793 40.907c-5.113 5.113-15.34 10.227-20.453 10.227 0 0-5.113 0-5.113 0-61.361-10.227-127.835 10.227-173.856 51.135l-81.815 81.815c-20.453 20.453-25.567 51.135-15.34 81.815l117.608-117.608c10.227-15.34 20.453-15.34 30.68-15.34l127.835 35.793c10.227 5.113 20.453 10.227 20.453 20.453l35.793 127.835c0 10.227 0 20.453-10.227 30.68l-117.608 122.721c25.567 10.227 61.361 5.113 81.815-15.34l76.701-76.701c46.020-46.020 66.475-112.495 56.248-178.969 0-10.227 0-20.453 10.227-25.567l40.907-35.793c0 0 0-5.113 5.113-5.113l132.948-132.948 184.083-194.309zM1128.499 555.381l-148.288-148.288c-5.113-5.113-10.227-5.113-10.227 0l-30.68 30.68c-15.34 15.34-25.567 30.68-25.567 51.135l-5.113 35.793c-5.113 25.567-15.34 51.135-30.68 71.588-5.113 5.113-15.34 10.227-20.453 10.227-10.227 0-15.34-5.113-25.567-10.227l-132.948-132.948-51.135 51.135 143.175 143.175c10.227 10.227 10.227 25.567 0 40.907l-5.113 30.68c-5.113 5.113-5.113 15.34 0 25.567 10.227 10.227 10.227 30.68 0 40.907-46.020 46.020-102.268 76.701-163.629 81.815 15.34 5.113 25.567 5.113 40.907 5.113 81.815 0 143.175-66.475 148.288-66.475l127.835-132.948c25.567-25.567 56.248-46.020 92.041-51.134h10.227c25.567-5.113 46.020-20.453 66.475-35.793l25.567-25.567c0-5.113 0-10.227-5.113-15.34zM632.499 197.443v0c-5.113 5.113 0 0 0 0zM612.046 565.608l-15.34 15.34c0 0 0 0 0 0l15.34-15.34z" horiz-adv-x="1209" />
<glyph unicode="&#xe601;" d="M365.714-64c-11.253 0-22.505 5.626-28.132 11.253l-326.33 326.33c-11.253 11.253-16.879 28.132-5.626 39.385 5.626 16.879 16.879 28.132 33.758 28.132h106.901v264.44c0 22.505 16.879 39.385 39.385 39.385h360.088c22.505 0 39.385-16.879 39.385-39.385v-264.44h106.901c16.879 0 28.132-11.253 39.385-22.505 5.626-16.879 0-33.758-11.253-45.011l-326.33-326.33c-11.253-5.626-16.879-11.253-28.132-11.253zM135.033 262.33l230.681-230.681 230.681 230.681h-50.637c-22.505 0-39.385 16.879-39.385 39.385v264.44h-281.319v-264.44c0-22.505-16.879-39.385-39.385-39.385h-50.637zM506.374 729.319h-281.319c-22.505 0-39.385 16.879-39.385 39.385s16.879 39.385 39.385 39.385h281.319c22.505 0 39.385-16.879 39.385-39.385s-16.879-39.385-39.385-39.385zM438.857 881.231h-151.912c-22.505 0-39.385 16.879-39.385 39.385s16.879 39.385 39.385 39.385h151.912c22.505 0 39.385-16.879 39.385-39.385s-16.879-39.385-39.385-39.385z" horiz-adv-x="731" />
<glyph unicode="&#xe602;" d="M606.041 291.265c20.898-20.898 41.796-62.694 41.796-118.422 0-48.762 0-139.32 0-215.946-55.728-13.932-104.49-20.898-160.218-20.898s-111.456 6.966-160.218 20.898c0 55.728 0 125.388 0 153.252-181.116-41.796-222.912 76.626-222.912 76.626-27.864 76.626-69.66 97.524-69.66 97.524-62.694 41.796 6.966 41.796 6.966 41.796 62.694-6.966 97.524-69.66 97.524-69.66 55.728-97.524 153.252-69.66 195.048-55.728 6.966 41.796 20.898 69.66 41.796 90.558-160.218 13.932-313.469 69.66-313.469 320.435 0 69.66 27.864 132.354 69.66 174.15-6.966 13.932-27.864 83.592 6.966 174.15 0 0 55.728 13.932 181.116-69.66 55.728 13.932 111.456 20.898 167.184 20.898s111.456-6.966 167.184-20.898c125.388 83.592 181.116 69.66 181.116 69.66 34.83-90.558 13.932-153.252 6.966-174.15 34.83-48.762 62.694-104.49 62.694-174.15 0-250.776-153.252-306.503-299.537-320.435z" horiz-adv-x="906" />
<glyph unicode="&#xe603;" d="M472.615 140.8c-7.877 0-15.754 0-23.631 7.877-15.754 7.877-39.385 0-55.138-15.754l-31.508-31.508c-47.262-55.138-133.908-55.138-189.046-7.877-63.015 55.138-63.015 141.785-7.877 196.923l244.185 236.308c7.877 7.877 15.754 15.754 23.631 15.754 23.631 15.754 47.262 23.631 78.769 23.631 15.754 0 31.508 0 47.262-7.877s31.508-15.754 47.262-31.508c0 0 0 0 0 0 23.631-23.631 55.138-23.631 70.892 0l15.754 15.754c23.631 15.754 23.631 47.262 0 70.892 0 0 0 0 0 0-7.877 7.877-23.631 15.754-39.385 31.508-15.754 7.877-23.631 7.877-39.385 15.754s-31.508 7.877-47.262 15.754c-78.769 15.754-157.538 0-228.431-47.262 0-7.877-7.877-15.754-15.754-23.631l-244.185-236.308c-102.4-102.4-102.4-267.815 7.877-370.215 102.4-94.523 267.815-86.646 370.215 7.877l39.385 39.385c31.508 39.385 15.754 86.646-23.631 94.523zM984.615 881.231c-102.4 102.4-275.692 102.4-378.092 0l-47.262-39.385c-31.508-31.508-15.754-78.769 23.631-86.646 7.877 0 15.754 0 23.631-7.877 15.754-7.877 39.385 0 55.138 15.754l31.508 39.385c55.138 55.138 149.662 55.138 204.8-7.877 47.262-55.138 47.262-133.908-7.877-189.046l-236.308-236.308c-15.754 0-23.631-7.877-31.508-15.754-23.631-15.754-47.262-15.754-70.892-15.754-15.754 0-31.508 0-47.262 7.877-23.631 7.877-39.385 15.754-55.138 31.508 0 0 0 0 0 0-23.631 23.631-55.138 23.631-70.892 0l-15.754-15.754c-23.631-15.754-23.631-47.262 0-70.892 0 0 0 0 0 0 15.754-15.754 31.508-23.631 47.262-39.385 15.754-7.877 23.631-15.754 39.385-23.631 7.877 0 23.631-7.877 39.385-7.877 78.769-15.754 157.538 0 228.431 47.262 7.877 7.877 15.754 15.754 23.631 15.754l236.308 228.431c102.4 110.277 110.277 267.815 7.877 370.215z" horiz-adv-x="1056" />
<glyph unicode="&#xe604;" d="M508.609-64c-135.629 0-264.477 54.252-359.417 149.192-196.662 196.662-196.662 522.172 0 725.616 94.94 94.94 223.788 149.192 359.417 149.192s264.477-54.252 359.417-149.192c196.662-196.662 196.662-522.172 0-725.616-88.159-94.94-217.007-149.192-359.417-149.192zM508.609 898.967c-122.066 0-237.351-47.47-318.728-135.629-176.318-176.318-176.318-461.139 0-637.457 88.159-88.159 196.662-135.629 318.728-135.629s237.351 47.47 318.728 135.629c176.318 176.318 176.318 461.139 0 637.457-81.377 88.159-196.662 135.629-318.728 135.629zM427.232 159.788c-20.344 0-40.689 6.781-54.252 20.344-27.126 27.126-27.126 74.596 0 101.722l162.755 162.755-162.755 162.755c-27.126 33.907-27.126 81.377 0 108.503s74.596 27.126 101.722 0l217.007-217.007c27.126-27.126 27.126-74.596 0-101.722l-217.007-217.007c-6.781-13.563-27.126-20.344-47.47-20.344z" />
<glyph unicode="&#xe605;" d="M1302.64 841.578v0 0zM898.612 960c-146.286 0-264.707-118.422-264.707-257.742 0-20.898 0-41.796 6.966-55.728-222.912 6.966-417.959 111.456-550.313 264.707-20.898-34.83-34.83-83.592-34.83-132.354 0-90.558 48.762-167.184 118.422-215.946-41.796 0-83.592 13.932-118.422 34.83 0 0 0 0 0 0 0-125.388 90.558-229.878 215.946-250.776-27.864-13.932-48.762-13.932-76.626-13.932-13.932 0-34.83 0-48.762 6.966 34.83-104.49 132.354-181.116 250.776-181.116-90.558-69.66-208.98-111.456-334.367-111.456-20.898 0-41.796 0-62.694 6.966 118.422-76.626 257.742-118.422 410.993-118.422 487.619 0 759.293 397.061 759.293 738.395 0 13.932 0 20.898 0 34.83 48.762 34.83 97.524 83.592 132.354 132.354-48.762-20.898-104.49-34.83-153.252-41.796 55.728 34.83 97.524 83.592 118.422 146.286-48.762-27.864-111.456-48.762-167.184-62.694-55.728 41.796-125.388 76.626-202.014 76.626z" horiz-adv-x="1303" />
<glyph unicode="&#xe606;" d="M365.714 960c11.253 0 22.505-5.626 28.132-11.253l326.33-326.33c11.253-11.253 11.253-28.132 5.626-45.011s-22.505-22.505-39.385-22.505h-106.901v-264.44c0-22.505-16.879-39.385-39.385-39.385h-354.462c-22.505 0-39.385 16.879-39.385 39.385v264.44h-106.901c-16.879 0-28.132 11.253-33.758 22.505-11.253 16.879-5.626 33.758 5.626 45.011l326.33 326.33c5.626 5.626 16.879 11.253 28.132 11.253zM590.769 633.67l-225.055 230.681-230.681-230.681h50.637c22.505 0 39.385-16.879 39.385-39.385v-264.44h281.319v264.44c0 22.505 16.879 39.385 39.385 39.385h45.011zM225.055 166.681h281.319c22.505 0 39.385-16.879 39.385-39.385s-16.879-39.385-39.385-39.385h-281.319c-22.505 0-39.385 16.879-39.385 39.385s16.879 39.385 39.385 39.385zM286.945 14.769h151.912c22.505 0 39.385-16.879 39.385-39.385s-16.879-39.385-39.385-39.385h-151.912c-22.505 0-39.385 16.879-39.385 39.385s16.879 39.385 39.385 39.385z" horiz-adv-x="731" />
</font></defs></svg>
Side by side

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
fonts/ScratchX.ttf Executable file
View file

Binary file not shown.

BIN
fonts/ScratchX.woff Executable file
View file

Binary file not shown.

BIN
images/editor.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
images/scratchx-bg.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9 KiB

BIN
images/scratchx-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.5 KiB

25
index.html
View file

@ -12,8 +12,8 @@
<main> <main>
<header> <header>
<div> <div>
<h1>ScratchX</h1> <h1 class="scratchx-logo"><span>ScratchX</span></h1>
<nav> <nav class="main-nav">
Related Sites: Related Sites:
<ul> <ul>
<li><a href="https://scratch.mit.edu/">Scratch</a></li> <li><a href="https://scratch.mit.edu/">Scratch</a></li>
@ -26,7 +26,7 @@
<article id="home"> <article id="home">
<header> <header>
<div> <div>
<aside class="warning">Warning: These extensions are experimental. Please read the FAQ before trying them.</aside> <aside class="warning"><strong>Warning:</strong> These extensions are experimental. Please read the FAQ before trying them.</aside>
<h1>About ScratchX</h1> <h1>About ScratchX</h1>
<p> <p>
@ -34,7 +34,7 @@
</p> </p>
<section id="dialogs"> <section id="dialogs">
<dialog open> <dialog open class="extension-file">
<section> <section>
<h2>Open an Extension File</h2> <h2>Open an Extension File</h2>
<p>Choose a .sbx file from your local drive</p> <p>Choose a .sbx file from your local drive</p>
@ -45,18 +45,21 @@
</section> </section>
</dialog> </dialog>
<dialog open> <dialog open class="extension-url">
<section> <section>
<h2>Open an Extension URL</h2> <h2>Open an Extension URL</h2>
<p>Paste the web address below</p> <p>Paste the web address below</p>
<p><a href="">What is a ScratchX URL?</a></p> <p><a href="">What is a ScratchX URL?</a></p>
</section> </section>
<section> <section>
<button>Browse for local file</button> <div class="input-plus-button">
<input type="text" placeholder="paste url..." />
<button>Open</button>
</div>
</section> </section>
</dialog> </dialog>
<dialog open> <dialog open class="extension-feature">
<section> <section>
<h2>Featured Extensions</h2> <h2>Featured Extensions</h2>
<p><a href="">Download hardware plugin</a></p> <p><a href="">Download hardware plugin</a></p>
@ -81,7 +84,7 @@
</section> </section>
<aside class="info"> <aside class="info">
Note: To use any physical extensions, you need to download the <a href="">Hardware Plugin</a>. <strong>Note:</strong> To use any physical extensions, you need to download the <a href="">Hardware Plugin</a>.
</aside> </aside>
<aside class="info"> <aside class="info">
@ -100,7 +103,11 @@
<div> <div>
<section> <section>
<p>Extensions on ScratchX are experimental and are not reviewed by the Scratch Team or the MIT Media Lab.</p> <p>Extensions on ScratchX are experimental and are not reviewed by the Scratch Team or the MIT Media Lab.</p>
<p>Scratch is a project of the Lifelong Kindergarten Group at the MIT Media Lab.</p> <p><a href="https://scratch.mit.edu/">Scratch</a> is a project of the Lifelong Kindergarten Group at the MIT Media Lab.</p>
<p>
<a class="twitter" title="Follow us on Twitter" href="https://twitter.com/scratch/" target="_blank">@scratch on Twitter</a>
<a class="github" title="Fork us on GitHub" href="https://twitter.com/scratch/" target="_blank">LLK on GitHub</a>
</p>
</section> </section>
<nav> <nav>

14
sass/_editor.scss Normal file
View file

@ -0,0 +1,14 @@
#editor {
text-align: center ;
margin-top: 30px;
display: none;
position: relative;
}
.scratch_unsupported p {
color: #aaa;
font-size: 22px;
margin-top: 14px;
line-height: 28px;
}

34
sass/_home.scss Normal file
View file

@ -0,0 +1,34 @@
/* Homepage */
#home > header {
background: url(../images/editor.png);
background-size: cover;
}
#home > header > div {
/* To stop child elements from adding margin */
padding: 1px 0;
}
#home > section > div {
border-top: $base-border;
margin-top: 10 * $vertical-base;
padding: 10 * $vertical-base 0;
position: relative;
@include icon(before, documentation) {
font-size: 2em;
color: $base-border-color;
position: absolute;
top: -.55em;
left: 50%;
margin-left: -1.3em;
background-color: $white;
border: 1em solid $white;
border-width: 0 0.4em;
}
h2, p {
text-align: center;
}
}

66
sass/base/_base.scss
View file

@ -4,6 +4,8 @@
// MIT License // MIT License
@import "normalize"; @import "normalize";
@import "mixins";
@import "icons";
@import "variables"; @import "variables";
@import "buttons"; @import "buttons";
@import "forms"; @import "forms";
@ -14,4 +16,68 @@
dialog { dialog {
display: block; display: block;
position: static; position: static;
h2 {
text-align: center;
margin: 4 * $vertical-base 0 $vertical-base 0;
}
section {
background-color: $alt-background-color;
color: $alt-font-color;
/* Kill margin collapse */
padding: 1px;
}
section:last-child {
background-color: $base-background-color;
padding: 2 * $vertical-base;
color: $base-font-color;
}
button {
display: inline-block;
line-height: normal;
width: 100%;
padding: $vertical-base;
/*
Needed so that all buttons are the same height
as text inputs
*/
border: 1px solid;
}
} }
.message {
border-radius: $base-border-radius;
line-height: 49px;
text-align: center;
margin: $vertical-base * 4 0;
}
.warning {
@extend .message;
background-color: $yellow;
color: $dark-gray;
}
.info {
@extend .message;
background-color: $light-gray;
color: $dark-gray;
}
article h1 {
text-align: center;
}
article header p {
text-align: center;
}
article h1 + p {
@include span-columns(10);
@include shift(1);
}

30
sass/base/_forms.scss
View file

@ -76,3 +76,33 @@ select {
max-width: 100%; max-width: 100%;
width: auto; width: auto;
} }
.input-plus-button {
overflow: hidden;
input, input:focus, input:hover, button {
@include reset-box;
display: block;
float: left;
border-radius: $base-border-radius;
padding: $vertical-base;
@include placeholder{
@include reset-box;
}
}
input, input:focus, input:hover {
width: 75%;
text-align: center;
@include border-right-radius(0);
border: 1px solid $light-gray;
border-right: 0px;
}
button {
width: 25%;
@include border-left-radius(0);
border: 1px solid $blue;
}
}

4
sass/base/_grid-settings.scss
View file

@ -12,3 +12,7 @@ $large-screen: em(960);
$medium-screen-up: new-breakpoint(min-width $medium-screen 4); $medium-screen-up: new-breakpoint(min-width $medium-screen 4);
$large-screen-up: new-breakpoint(min-width $large-screen 8); $large-screen-up: new-breakpoint(min-width $large-screen 8);
// Vertical rhythm
$vertical-base: em(6);

74
sass/base/_icons.scss Normal file
View file

@ -0,0 +1,74 @@
$font-icon: "ScratchX";
@font-face {
font-family: '#{$font-icon}';
src:url('../fonts/ScratchX.eot?-omdesu');
src:url('../fonts/ScratchX.eot?#iefix-omdesu') format('embedded-opentype'),
url('../fonts/ScratchX.woff?-omdesu') format('woff'),
url('../fonts/ScratchX.ttf?-omdesu') format('truetype'),
url('../fonts/ScratchX.svg?-omdesu#ScratchX') format('svg');
font-weight: normal;
font-style: normal;
}
$icon-documentation: "\e600";
$icon-download: "\e601";
$icon-github: "\e602";
$icon-link: "\e603";
$icon-right-arrow: "\e604";
$icon-twitter: "\e605";
$icon-upload: "\e606";
$icons: (
"documentation": "#{$icon-documentation}",
"download": "#{$icon-download}",
"github": "#{$icon-github}",
"link": "#{$icon-link}",
"right-arrow": "#{$icon-right-arrow}",
"twitter": "#{$icon-twitter}",
"upload": "#{$icon-upload}",
);
@mixin icon($position: before, $icon: false, $style: plain, $centered: false, $font-size: 1em) {
@if $position == both {
$position: 'before, &:after';
}
// Either a :before or :after pseudo-element, or both, defaulting to :before
&:#{$position} {
@if $icon {
// A particular icon has been specified
content: "#{map-get($icons, $icon)}";
}
font-family: $font-icon;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
font-size: $font-size;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@if $style == circular {
border-radius: $font-size/4;
width: $font-size/2;
height: $font-size/2;
text-align: center;
}
@if $centered {
line-height: 1.5;
position: absolute;
left: 50%;
margin-left: -$font-size/4;
}
// Include any extra rules supplied for the pseudo-element
@content;
}
}

13
sass/base/_mixins.scss Normal file
View file

@ -0,0 +1,13 @@
@mixin box-shadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
@mixin reset-box {
border: 0;
margin: 0;
padding: 0;
@include box-shadow(none);
}

10
sass/base/_typography.scss
View file

@ -1,3 +1,5 @@
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic);
body { body {
@include font-feature-settings("kern", "liga", "pnum"); @include font-feature-settings("kern", "liga", "pnum");
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -19,6 +21,14 @@ h6 {
margin: 0 0 $small-spacing; margin: 0 0 $small-spacing;
} }
article h1 {
font-size: $h1-font-size;
}
article h2 {
font-size: $h2-font-size;
}
p { p {
margin: 0 0 $small-spacing; margin: 0 0 $small-spacing;
} }

10
sass/base/_variables.scss
View file

@ -1,16 +1,19 @@
// Typography // Typography
$base-font-family: $helvetica; $base-font-family: "Source Sans Pro", "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif;
$heading-font-family: $base-font-family; $heading-font-family: $base-font-family;
// Font Sizes // Font Sizes
$base-font-size: 1em; $base-font-size: 1em;
$h1-font-size: 1.5 * $base-font-size;
$h2-font-size: $h1-font-size;
// Line height // Line height
$base-line-height: 1.5; $base-line-height: 1.5;
$heading-line-height: 1.2; $heading-line-height: 1.2;
// Other Sizes // Other Sizes
$base-border-radius: 3px; $base-border-radius: 5px;
$base-spacing: $base-line-height * 1em; $base-spacing: $base-line-height * 1em;
$small-spacing: $base-spacing / 2; $small-spacing: $base-spacing / 2;
$base-z-index: 0; $base-z-index: 0;
@ -31,12 +34,13 @@ $yellow: #fff447;
$base-background-color: #fff; $base-background-color: #fff;
$alt-background-color: $dark-blue; $alt-background-color: $dark-blue;
$base-font-color: $dark-gray; $base-font-color: $dark-gray;
$alt-font-color: $white;
$action-color: $blue; $action-color: $blue;
$warning-color: $yellow; $warning-color: $yellow;
$alt-action-color: $green; $alt-action-color: $green;
// Border // Border
$base-border-color: $light-gray; $base-border-color: $medium-gray;
$base-border: 1px solid $base-border-color; $base-border: 1px solid $base-border-color;
// Forms // Forms

147
sass/scratchx.scss
View file

@ -8,20 +8,6 @@ a[href=""] {
outline: 1px solid red; outline: 1px solid red;
} }
#editor {
text-align: center ;
margin-top: 30px;
display: none;
position: relative;
}
.scratch_unsupported p {
color: #aaa;
font-size: 22px;
margin-top: 14px;
line-height: 28px;
}
body > main { body > main {
> header, > header,
> article > header, > article > header,
@ -29,15 +15,105 @@ body > main {
> footer { > footer {
> div { > div {
@include outer-container; @include outer-container;
> div {
@include row();
.main {
@include span-columns(8);
}
nav {
@include span-columns(4);
}
}
} }
} }
} }
dialog { body {
@include span-columns(4); > main > article,
> section {
display: none;
}
#home {
display: block;
}
}
#dialogs {
@include row();
dialog {
@include span-columns(4);
}
}
.extension-file {
section:first-child {
/* Add a border equal to the number of featured extensions - 1 */
border-top: 2px solid $alt-background-color;
position: relative;
padding-top: 18 * $vertical-base;
@include icon(before, upload, circular, true, 8*$vertical-base) {
background-color: $green;
color: $white;
top: 2 * $vertical-base;
}
}
button {
background-color: $green;
color: $alt-font-color;
}
}
.extension-url {
section:first-child {
/* Add a border equal to the number of featured extensions - 1 */
border-top: 2px solid $alt-background-color;
position: relative;
padding-top: 18 * $vertical-base;
@include icon(before, link, circular, true, 8*$vertical-base) {
background-color: $blue;
color: $white;
top: 2 * $vertical-base;
}
}
}
.extension-feature {
section:first-child {
h2 {
margin-top: $vertical-base;
}
}
section:last-child {
padding: 0px;
}
ul {
li {
border-bottom: 1px solid $light-gray;
padding: 2 * $vertical-base;
h3 {
font-size: 1.125 * $base-font-size;
font-weight: 600;
margin-bottom: $vertical-base;
}
p {
text-align: left;
margin: 0;
color: $base-font-color;
}
}
}
} }
footer { footer {
@include pad(5 * $vertical-base 0);
section { section {
@include span-columns(4); @include span-columns(4);
@include shift(1); @include shift(1);
@ -48,10 +124,47 @@ footer {
&:first-of-type { &:first-of-type {
@include shift(1); @include shift(1);
} }
h2 {
line-height: 1.5;
margin-bottom: 0;
}
} }
} }
footer, main header { footer, main header {
background-color: $alt-background-color; background-color: $alt-background-color;
color: $white; color: $alt-font-color;
} }
body > main > header {
@include row();
height: $vertical-base * 10;
line-height: $vertical-base * 10;
}
.scratchx-logo {
float: left;
span {
@include hide-text;
display: inline-block;
background: url(../images/scratchx-logo.png) left center no-repeat;
width: 192px;
height: $vertical-base * 10;
}
}
.main-nav {
float: right;
ul, li {
display: inline-block;
}
li {
margin-left: 50px;
}
}
@import "home";
@import "editor";