mirror of
https://github.com/scratchfoundation/scratchx.git
synced 2024-11-28 18:45:49 -05:00
Add initial home page content and grid layout
This commit is contained in:
Ray Schamp
parent
628c48afac
commit
a505617bf4
9 changed files with 296 additions and 34 deletions
103
css/scratchx.css
103
css/scratchx.css
|
|
@ -35,6 +35,7 @@ body {
|
|||
article,
|
||||
aside,
|
||||
details,
|
||||
dialog,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
|
|
@ -362,6 +363,24 @@ td,
|
|||
th {
|
||||
padding: 0; }
|
||||
|
||||
/* Dialogs
|
||||
========================================================================== */
|
||||
/**
|
||||
* Destroy normal layout for dialogs
|
||||
*/
|
||||
dialog {
|
||||
position: static;
|
||||
border: none;
|
||||
background-color: inherit;
|
||||
width: auto;
|
||||
height: auto;
|
||||
left: auto;
|
||||
right: auto;
|
||||
top: auto;
|
||||
bottom: auto;
|
||||
padding: 0;
|
||||
color: inherit; }
|
||||
|
||||
button, input[type="button"], input[type="reset"], input[type="submit"],
|
||||
button {
|
||||
-webkit-appearance: none;
|
||||
|
|
@ -370,7 +389,7 @@ button {
|
|||
-o-appearance: none;
|
||||
appearance: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background-color: #477dca;
|
||||
background-color: #21b4f0;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
|
|
@ -388,7 +407,7 @@ button {
|
|||
button:hover, button:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="reset"]:hover, input[type="reset"]:focus, input[type="submit"]:hover, input[type="submit"]:focus,
|
||||
button:hover,
|
||||
button:focus {
|
||||
background-color: #2c5999;
|
||||
background-color: #0c86b8;
|
||||
color: #fff; }
|
||||
button:disabled, input[type="button"]:disabled, input[type="reset"]:disabled, input[type="submit"]:disabled,
|
||||
button:disabled {
|
||||
|
|
@ -396,8 +415,8 @@ button {
|
|||
opacity: 0.5; }
|
||||
|
||||
fieldset {
|
||||
background-color: #f7f7f7;
|
||||
border: 1px solid #ddd;
|
||||
background-color: #fcfcfd;
|
||||
border: 1px solid #dfe3e7;
|
||||
margin: 0 0 0.75em;
|
||||
padding: 1.5em; }
|
||||
|
||||
|
|
@ -420,7 +439,7 @@ input[type="color"], input[type="date"], input[type="datetime"], input[type="dat
|
|||
select[multiple=multiple],
|
||||
textarea {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid #dfe3e7;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||
box-sizing: border-box;
|
||||
|
|
@ -433,12 +452,12 @@ 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: #c4c4c4; }
|
||||
border-color: #c2c9d1; }
|
||||
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 {
|
||||
border-color: #477dca;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(55, 112, 192, 0.7);
|
||||
border-color: #21b4f0;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(16, 169, 232, 0.7);
|
||||
outline: none; }
|
||||
|
||||
textarea {
|
||||
|
|
@ -489,13 +508,13 @@ table {
|
|||
width: 100%; }
|
||||
|
||||
th {
|
||||
border-bottom: 1px solid #b7b7b7;
|
||||
border-bottom: 1px solid #b3bdc6;
|
||||
font-weight: 600;
|
||||
padding: 0.75em 0;
|
||||
text-align: left; }
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-bottom: 1px solid #dfe3e7;
|
||||
padding: 0.75em 0; }
|
||||
|
||||
tr,
|
||||
|
|
@ -509,7 +528,7 @@ body {
|
|||
-ms-font-feature-settings: "kern", "liga", "pnum";
|
||||
font-feature-settings: "kern", "liga", "pnum";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: #333;
|
||||
color: #58595b;
|
||||
font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
|
||||
font-size: 1em;
|
||||
line-height: 1.5; }
|
||||
|
|
@ -529,16 +548,16 @@ p {
|
|||
margin: 0 0 0.75em; }
|
||||
|
||||
a {
|
||||
color: #477dca;
|
||||
color: #21b4f0;
|
||||
text-decoration: none;
|
||||
transition: color 0.1s linear; }
|
||||
a:active, a:focus, a:hover {
|
||||
color: #2c5999; }
|
||||
color: #0c86b8; }
|
||||
a:active, a:focus {
|
||||
outline: none; }
|
||||
|
||||
hr {
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-bottom: 1px solid #dfe3e7;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
|
|
@ -549,10 +568,17 @@ picture {
|
|||
margin: 0;
|
||||
max-width: 100%; }
|
||||
|
||||
#scratch {
|
||||
dialog {
|
||||
display: block;
|
||||
position: static; }
|
||||
|
||||
a[href=""] {
|
||||
outline: 1px solid red; }
|
||||
|
||||
#editor {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
position: relative; }
|
||||
|
||||
.scratch_unsupported p {
|
||||
|
|
@ -561,4 +587,49 @@ picture {
|
|||
margin-top: 14px;
|
||||
line-height: 28px; }
|
||||
|
||||
body > main > header > div,
|
||||
body > main > article > header > div,
|
||||
body > main > article > section > div,
|
||||
body > main > footer > div {
|
||||
max-width: 60em;
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
body > main > header > div::after,
|
||||
body > main > article > header > div::after,
|
||||
body > main > article > section > div::after,
|
||||
body > main > footer > div::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table; }
|
||||
|
||||
dialog {
|
||||
float: left;
|
||||
display: block;
|
||||
margin-right: 1.25%;
|
||||
width: 32.5%; }
|
||||
dialog:last-child {
|
||||
margin-right: 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, main header {
|
||||
background-color: #3f5975;
|
||||
color: #fff; }
|
||||
|
||||
/*# sourceMappingURL=scratchx.css.map */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
124
index.html
124
index.html
|
|
@ -8,9 +8,127 @@
|
|||
<script type="text/javascript" src="libs/swfobject.js"></script>
|
||||
<script type="text/javascript" src="libs/jquery-1.11.2.min.js"></script>
|
||||
</head>
|
||||
<body class="editor scratchx">
|
||||
<body>
|
||||
<main>
|
||||
<header>
|
||||
<div>
|
||||
<h1>ScratchX</h1>
|
||||
<nav>
|
||||
Related Sites:
|
||||
<ul>
|
||||
<li><a href="https://scratch.mit.edu/">Scratch</a></li>
|
||||
<li><a href="https://scratch.mit.edu/">ScratchEd</a></li>
|
||||
<li><a href="https://scratch.mit.edu/">ScratchJr</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<article id="home">
|
||||
<header>
|
||||
<div>
|
||||
<aside class="warning">Warning: These extensions are experimental. Please read the FAQ before trying them.</aside>
|
||||
|
||||
<div id="scratch">
|
||||
<h1>About ScratchX</h1>
|
||||
<p>
|
||||
ScratchX allows you to try out experimental extensions to the Scratch programming environment. With extensions, you can connect Scratch to the physical world (such as electronic devices and kits) and online resources (including web data and web services).
|
||||
</p>
|
||||
|
||||
<section id="dialogs">
|
||||
<dialog open>
|
||||
<section>
|
||||
<h2>Open an Extension File</h2>
|
||||
<p>Choose a .sbx file from your local drive</p>
|
||||
<p><a href="">What is a .sbx file?</a></p>
|
||||
</section>
|
||||
<section>
|
||||
<button>Browse for local file</button>
|
||||
</section>
|
||||
</dialog>
|
||||
|
||||
<dialog open>
|
||||
<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>
|
||||
</section>
|
||||
</dialog>
|
||||
|
||||
<dialog open>
|
||||
<section>
|
||||
<h2>Featured Extensions</h2>
|
||||
<p><a href="">Download hardware plugin</a></p>
|
||||
</section>
|
||||
<section>
|
||||
<ul>
|
||||
<li><a href="">
|
||||
<h3>Extension 1</h3>
|
||||
<p>Extension 1 description</p>
|
||||
</a></li>
|
||||
<li><a href="">
|
||||
<h3>Extension 2</h3>
|
||||
<p>Extension 2 description</p>
|
||||
</a></li>
|
||||
<li><a href="">
|
||||
<h3>Extension 3</h3>
|
||||
<p>Extension 3 description</p>
|
||||
</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</dialog>
|
||||
</section>
|
||||
|
||||
<aside class="info">
|
||||
Note: To use any physical extensions, you need to download the <a href="">Hardware Plugin</a>.
|
||||
</aside>
|
||||
|
||||
<aside class="info">
|
||||
Official Scratch Extensions (such as LEGO WeDo) are available on the main <a href="https://scratch.mit.edu">Scratch site</a>.
|
||||
</aside>
|
||||
</div>
|
||||
</header>
|
||||
<section>
|
||||
<div>
|
||||
<h2>Developer Documentation</h2>
|
||||
<p>Developers can create new Experimental Extensions using Javascript. To learn more, read the <a href="">Developer Documentation</a>.</p>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
<footer>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<nav>
|
||||
<h2>ScratchX</h2>
|
||||
<ul>
|
||||
<li><a href="">Terms of Service</a></li>
|
||||
<li><a href="">Privacy Policy</a></li>
|
||||
<li><a href="">Contact Us</a></li>
|
||||
<li><a href="">FAQ</a></li>
|
||||
<li><a href="">Forums</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav>
|
||||
<h2>Scratch Family</h2>
|
||||
<ul>
|
||||
<li><a href="">Scratch</a></li>
|
||||
<li><a href="">ScratchEd</a></li>
|
||||
<li><a href="">ScratchJr</a></li>
|
||||
<li><a href="">Scratch Conference</a></li>
|
||||
<li><a href="">Scratch Day</a></li>
|
||||
<li><a href="">Code-to-Learn Foundation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
<section id="editor">
|
||||
<div class="scratch_unsupported">
|
||||
<p>
|
||||
Oh Noes! Scratch project cannot display.<br/>
|
||||
|
|
@ -21,7 +139,7 @@
|
|||
alt="Get Adobe Flash player"/></a>
|
||||
</div>
|
||||
<div class="scratch_loading"></div>
|
||||
</div>
|
||||
</section>
|
||||
<script type="text/javascript" src="scratch_extensions/scratch_ext.js"></script>
|
||||
<script type="text/javascript" src="js/scratchx.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ Scratch.FlashApp = Scratch.FlashApp || {};
|
|||
|
||||
function handleEmbedStatus(e) {
|
||||
$('#scratch-loader').hide();
|
||||
var scratch = $('#scratch');
|
||||
var scratch = $('#editor');
|
||||
if (!e.success) {
|
||||
scratch.css('marginTop', '10');
|
||||
scratch.find('IMG.proj_thumb').css('width', '179px');
|
||||
|
|
@ -101,5 +101,5 @@ $.each(flashVars, function (prop, val) {
|
|||
|
||||
swfobject.switchOffAutoHideShow();
|
||||
|
||||
swfobject.embedSWF('Scratch.swf', 'scratch', '100%', '100%', '11.7.0', 'libs/expressInstall.swf',
|
||||
swfobject.embedSWF('Scratch.swf', 'editor', '100%', '100%', '11.7.0', 'libs/expressInstall.swf',
|
||||
flashVars, params, null, handleEmbedStatus);
|
||||
|
|
|
|||
|
|
@ -10,3 +10,8 @@
|
|||
@import "lists";
|
||||
@import "tables";
|
||||
@import "typography";
|
||||
|
||||
dialog {
|
||||
display: block;
|
||||
position: static;
|
||||
}
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
@import "../neat/neat-helpers";
|
||||
|
||||
// Neat Overrides
|
||||
// $column: 90px;
|
||||
// $gutter: 30px;
|
||||
// $grid-columns: 12;
|
||||
// $max-width: em(1088);
|
||||
$column: 69px;
|
||||
$gutter: 12px;
|
||||
$grid-columns: 12;
|
||||
$max-width: em(960);
|
||||
|
||||
// Neat Breakpoints
|
||||
$medium-screen: em(640);
|
||||
$large-screen: em(860);
|
||||
$large-screen: em(960);
|
||||
|
||||
$medium-screen-up: new-breakpoint(min-width $medium-screen 4);
|
||||
$large-screen-up: new-breakpoint(min-width $large-screen 8);
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ body {
|
|||
article,
|
||||
aside,
|
||||
details,
|
||||
dialog,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
|
|
@ -425,3 +426,24 @@ td,
|
|||
th {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Dialogs
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Destroy normal layout for dialogs
|
||||
*/
|
||||
|
||||
dialog {
|
||||
position: static;
|
||||
border: none;
|
||||
background-color: inherit;
|
||||
width: auto;
|
||||
height: auto;
|
||||
left: auto;
|
||||
right: auto;
|
||||
top: auto;
|
||||
bottom: auto;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,15 +16,24 @@ $small-spacing: $base-spacing / 2;
|
|||
$base-z-index: 0;
|
||||
|
||||
// Colors
|
||||
$blue: #477dca;
|
||||
$dark-gray: #333;
|
||||
$medium-gray: #999;
|
||||
$light-gray: #ddd;
|
||||
$white: #fff;
|
||||
$blue: #21b4f0;
|
||||
$bright-blue: #24a3ec;
|
||||
$dark-blue: #3f5975;
|
||||
$dark-gray: #58595b;
|
||||
$medium-gray: #c5c5c5;
|
||||
$light-gray: #dfe3e7;
|
||||
$green: #18ba37;
|
||||
$yellow: #fff447;
|
||||
|
||||
|
||||
// Font Colors
|
||||
$base-background-color: #fff;
|
||||
$alt-background-color: $dark-blue;
|
||||
$base-font-color: $dark-gray;
|
||||
$action-color: $blue;
|
||||
$warning-color: $yellow;
|
||||
$alt-action-color: $green;
|
||||
|
||||
// Border
|
||||
$base-border-color: $light-gray;
|
||||
|
|
|
|||
|
|
@ -4,10 +4,14 @@
|
|||
@import "base/base";
|
||||
|
||||
|
||||
#scratch {
|
||||
a[href=""] {
|
||||
outline: 1px solid red;
|
||||
}
|
||||
|
||||
#editor {
|
||||
text-align: center ;
|
||||
margin-top: 30px;
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -18,3 +22,36 @@
|
|||
line-height: 28px;
|
||||
}
|
||||
|
||||
body > main {
|
||||
> header,
|
||||
> article > header,
|
||||
> article > section,
|
||||
> footer {
|
||||
> div {
|
||||
@include outer-container;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dialog {
|
||||
@include span-columns(4);
|
||||
}
|
||||
|
||||
footer {
|
||||
section {
|
||||
@include span-columns(4);
|
||||
@include shift(1);
|
||||
}
|
||||
|
||||
nav {
|
||||
@include span-columns(2);
|
||||
&:first-of-type {
|
||||
@include shift(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer, main header {
|
||||
background-color: $alt-background-color;
|
||||
color: $white;
|
||||
}
|
||||
Loading…
Reference in a new issue