mirror of
https://github.com/scratchfoundation/scratchx.git
synced 2024-11-28 10:36:03 -05:00
Style the homepage
This commit is contained in:
Ray Schamp
parent
a505617bf4
commit
35e1cca33b
20 changed files with 787 additions and 82 deletions
417
css/scratchx.css
417
css/scratchx.css
|
|
@ -1,3 +1,5 @@
|
|||
@charset "UTF-8";
|
||||
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic);
|
||||
html {
|
||||
box-sizing: border-box; }
|
||||
|
||||
|
|
@ -381,6 +383,12 @@ dialog {
|
|||
padding: 0;
|
||||
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 {
|
||||
-webkit-appearance: none;
|
||||
|
|
@ -390,12 +398,12 @@ button {
|
|||
appearance: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background-color: #21b4f0;
|
||||
border-radius: 3px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
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-weight: 600;
|
||||
line-height: 1;
|
||||
|
|
@ -415,8 +423,8 @@ button {
|
|||
opacity: 0.5; }
|
||||
|
||||
fieldset {
|
||||
background-color: #fcfcfd;
|
||||
border: 1px solid #dfe3e7;
|
||||
background-color: #dfdfdf;
|
||||
border: 1px solid #c5c5c5;
|
||||
margin: 0 0 0.75em;
|
||||
padding: 1.5em; }
|
||||
|
||||
|
|
@ -424,7 +432,7 @@ input,
|
|||
label,
|
||||
select {
|
||||
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; }
|
||||
|
||||
label {
|
||||
|
|
@ -439,11 +447,11 @@ input[type="color"], input[type="date"], input[type="datetime"], input[type="dat
|
|||
select[multiple=multiple],
|
||||
textarea {
|
||||
background-color: #fff;
|
||||
border: 1px solid #dfe3e7;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #c5c5c5;
|
||||
border-radius: 5px;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||
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;
|
||||
margin-bottom: 0.75em;
|
||||
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,
|
||||
select[multiple=multiple]: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,
|
||||
select[multiple=multiple]:focus,
|
||||
textarea:focus {
|
||||
|
|
@ -484,6 +492,60 @@ select {
|
|||
max-width: 100%;
|
||||
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,
|
||||
ol {
|
||||
list-style-type: none;
|
||||
|
|
@ -508,13 +570,13 @@ table {
|
|||
width: 100%; }
|
||||
|
||||
th {
|
||||
border-bottom: 1px solid #b3bdc6;
|
||||
border-bottom: 1px solid #9f9f9f;
|
||||
font-weight: 600;
|
||||
padding: 0.75em 0;
|
||||
text-align: left; }
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid #dfe3e7;
|
||||
border-bottom: 1px solid #c5c5c5;
|
||||
padding: 0.75em 0; }
|
||||
|
||||
tr,
|
||||
|
|
@ -529,7 +591,7 @@ body {
|
|||
font-feature-settings: "kern", "liga", "pnum";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
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;
|
||||
line-height: 1.5; }
|
||||
|
||||
|
|
@ -539,11 +601,17 @@ h3,
|
|||
h4,
|
||||
h5,
|
||||
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;
|
||||
line-height: 1.2;
|
||||
margin: 0 0 0.75em; }
|
||||
|
||||
article h1 {
|
||||
font-size: 1.5em; }
|
||||
|
||||
article h2 {
|
||||
font-size: 1.5em; }
|
||||
|
||||
p {
|
||||
margin: 0 0 0.75em; }
|
||||
|
||||
|
|
@ -557,7 +625,7 @@ a {
|
|||
outline: none; }
|
||||
|
||||
hr {
|
||||
border-bottom: 1px solid #dfe3e7;
|
||||
border-bottom: 1px solid #c5c5c5;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
|
|
@ -571,22 +639,61 @@ picture {
|
|||
dialog {
|
||||
display: block;
|
||||
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=""] {
|
||||
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 > article > header > div,
|
||||
body > main > article > section > div,
|
||||
|
|
@ -601,35 +708,247 @@ body > main > footer > div {
|
|||
clear: both;
|
||||
content: "";
|
||||
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 {
|
||||
float: left;
|
||||
display: block;
|
||||
margin-right: 1.25%;
|
||||
width: 32.5%; }
|
||||
dialog:last-child {
|
||||
margin-right: 0; }
|
||||
body > main > article,
|
||||
body > section {
|
||||
display: none; }
|
||||
body #home {
|
||||
display: block; }
|
||||
|
||||
footer section {
|
||||
float: left;
|
||||
display: block;
|
||||
margin-right: 1.25%;
|
||||
width: 32.5%;
|
||||
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 {
|
||||
#dialogs {
|
||||
display: block; }
|
||||
#dialogs::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table; }
|
||||
#dialogs dialog {
|
||||
float: left;
|
||||
display: block;
|
||||
margin-right: 1.25%;
|
||||
width: 32.5%; }
|
||||
#dialogs dialog:last-child {
|
||||
margin-right: 0; }
|
||||
|
||||
.extension-file 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-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%; }
|
||||
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 {
|
||||
background-color: #3f5975;
|
||||
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 */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
BIN
fonts/ScratchX.eot
Executable file
BIN
fonts/ScratchX.eot
Executable file
Binary file not shown.
17
fonts/ScratchX.svg
Executable file
17
fonts/ScratchX.svg
Executable 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=" " d="" horiz-adv-x="512" />
|
||||
<glyph unicode="" 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="" 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="" 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="" 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="" 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="" 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="" 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>
|
||||
|
After Width: | Height: | Size: 9.4 KiB |
BIN
fonts/ScratchX.ttf
Executable file
BIN
fonts/ScratchX.ttf
Executable file
Binary file not shown.
BIN
fonts/ScratchX.woff
Executable file
BIN
fonts/ScratchX.woff
Executable file
Binary file not shown.
BIN
images/editor.png
Normal file
BIN
images/editor.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9 KiB |
BIN
images/scratchx-logo.png
Normal file
BIN
images/scratchx-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
25
index.html
25
index.html
|
|
@ -12,8 +12,8 @@
|
|||
<main>
|
||||
<header>
|
||||
<div>
|
||||
<h1>ScratchX</h1>
|
||||
<nav>
|
||||
<h1 class="scratchx-logo"><span>ScratchX</span></h1>
|
||||
<nav class="main-nav">
|
||||
Related Sites:
|
||||
<ul>
|
||||
<li><a href="https://scratch.mit.edu/">Scratch</a></li>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
<article id="home">
|
||||
<header>
|
||||
<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>
|
||||
<p>
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
</p>
|
||||
|
||||
<section id="dialogs">
|
||||
<dialog open>
|
||||
<dialog open class="extension-file">
|
||||
<section>
|
||||
<h2>Open an Extension File</h2>
|
||||
<p>Choose a .sbx file from your local drive</p>
|
||||
|
|
@ -45,18 +45,21 @@
|
|||
</section>
|
||||
</dialog>
|
||||
|
||||
<dialog open>
|
||||
<dialog open class="extension-url">
|
||||
<section>
|
||||
<h2>Open an Extension URL</h2>
|
||||
<p>Paste the web address below</p>
|
||||
<p><a href="">What is a ScratchX URL?</a></p>
|
||||
</section>
|
||||
<section>
|
||||
<button>Browse for local file</button>
|
||||
<div class="input-plus-button">
|
||||
<input type="text" placeholder="paste url..." />
|
||||
<button>Open</button>
|
||||
</div>
|
||||
</section>
|
||||
</dialog>
|
||||
|
||||
<dialog open>
|
||||
<dialog open class="extension-feature">
|
||||
<section>
|
||||
<h2>Featured Extensions</h2>
|
||||
<p><a href="">Download hardware plugin</a></p>
|
||||
|
|
@ -81,7 +84,7 @@
|
|||
</section>
|
||||
|
||||
<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 class="info">
|
||||
|
|
@ -100,7 +103,11 @@
|
|||
<div>
|
||||
<section>
|
||||
<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>
|
||||
|
||||
<nav>
|
||||
|
|
|
|||
14
sass/_editor.scss
Normal file
14
sass/_editor.scss
Normal 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
34
sass/_home.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,6 +4,8 @@
|
|||
// MIT License
|
||||
|
||||
@import "normalize";
|
||||
@import "mixins";
|
||||
@import "icons";
|
||||
@import "variables";
|
||||
@import "buttons";
|
||||
@import "forms";
|
||||
|
|
@ -14,4 +16,68 @@
|
|||
dialog {
|
||||
display: block;
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -76,3 +76,33 @@ select {
|
|||
max-width: 100%;
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -12,3 +12,7 @@ $large-screen: em(960);
|
|||
|
||||
$medium-screen-up: new-breakpoint(min-width $medium-screen 4);
|
||||
$large-screen-up: new-breakpoint(min-width $large-screen 8);
|
||||
|
||||
// Vertical rhythm
|
||||
|
||||
$vertical-base: em(6);
|
||||
|
|
|
|||
74
sass/base/_icons.scss
Normal file
74
sass/base/_icons.scss
Normal 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
13
sass/base/_mixins.scss
Normal 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);
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic);
|
||||
|
||||
body {
|
||||
@include font-feature-settings("kern", "liga", "pnum");
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
|
@ -19,6 +21,14 @@ h6 {
|
|||
margin: 0 0 $small-spacing;
|
||||
}
|
||||
|
||||
article h1 {
|
||||
font-size: $h1-font-size;
|
||||
}
|
||||
|
||||
article h2 {
|
||||
font-size: $h2-font-size;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 $small-spacing;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,19 @@
|
|||
// Typography
|
||||
$base-font-family: $helvetica;
|
||||
$base-font-family: "Source Sans Pro", "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif;
|
||||
$heading-font-family: $base-font-family;
|
||||
|
||||
// Font Sizes
|
||||
$base-font-size: 1em;
|
||||
|
||||
$h1-font-size: 1.5 * $base-font-size;
|
||||
$h2-font-size: $h1-font-size;
|
||||
|
||||
// Line height
|
||||
$base-line-height: 1.5;
|
||||
$heading-line-height: 1.2;
|
||||
|
||||
// Other Sizes
|
||||
$base-border-radius: 3px;
|
||||
$base-border-radius: 5px;
|
||||
$base-spacing: $base-line-height * 1em;
|
||||
$small-spacing: $base-spacing / 2;
|
||||
$base-z-index: 0;
|
||||
|
|
@ -31,12 +34,13 @@ $yellow: #fff447;
|
|||
$base-background-color: #fff;
|
||||
$alt-background-color: $dark-blue;
|
||||
$base-font-color: $dark-gray;
|
||||
$alt-font-color: $white;
|
||||
$action-color: $blue;
|
||||
$warning-color: $yellow;
|
||||
$alt-action-color: $green;
|
||||
|
||||
// Border
|
||||
$base-border-color: $light-gray;
|
||||
$base-border-color: $medium-gray;
|
||||
$base-border: 1px solid $base-border-color;
|
||||
|
||||
// Forms
|
||||
|
|
|
|||
|
|
@ -8,20 +8,6 @@ a[href=""] {
|
|||
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,
|
||||
> article > header,
|
||||
|
|
@ -29,15 +15,105 @@ body > main {
|
|||
> footer {
|
||||
> div {
|
||||
@include outer-container;
|
||||
> div {
|
||||
@include row();
|
||||
.main {
|
||||
@include span-columns(8);
|
||||
}
|
||||
nav {
|
||||
@include span-columns(4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dialog {
|
||||
@include span-columns(4);
|
||||
body {
|
||||
> 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 {
|
||||
@include pad(5 * $vertical-base 0);
|
||||
section {
|
||||
@include span-columns(4);
|
||||
@include shift(1);
|
||||
|
|
@ -48,10 +124,47 @@ footer {
|
|||
&:first-of-type {
|
||||
@include shift(1);
|
||||
}
|
||||
h2 {
|
||||
line-height: 1.5;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer, main header {
|
||||
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";
|
||||
Loading…
Reference in a new issue