scratchfoundation/scratchx
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Final tweaks from @kaschm

Browse source
This commit is contained in:
Ray Schamp 2015-08-11 10:57:34 -04:00
parent 6471daa634
commit 5ba04659e7
4 changed files with 67 additions and 65 deletions

33
css/scratchx.css
View file

@ -1493,29 +1493,30 @@ body.page-home > main > header {
overflow: hidden; } overflow: hidden; }
.featured-extension > a { .featured-extension > a {
position: relative; position: relative;
display: block; } display: block;
.featured-extension > a img { font-weight: normal; }
display: block; .featured-extension img {
height: 107px; } display: block;
.featured-extension > a .tryit { height: 107px; }
display: inline-block; .featured-extension .tryit {
position: absolute; display: inline-block;
background-color: #24a3ec; position: absolute;
color: #fff; background-color: #24a3ec;
padding: 0 1em; color: #fff;
border-radius: 1em; padding: 0 1em;
top: 0.375em; border-radius: 1em;
right: 0.375em; } top: 0.375em;
.featured-extension > section { right: 0.375em; }
.featured-extension section {
background-color: #fff; background-color: #fff;
color: #58595b; color: #58595b;
padding: 0.75em; padding: 0.75em;
line-height: 1; } line-height: 1; }
.featured-extension > section h2 { .featured-extension section h2 {
color: #24a3ec; color: #24a3ec;
margin-bottom: 0; margin-bottom: 0;
font-size: 1.1em; } font-size: 1.1em; }
.featured-extension > section p { .featured-extension section p {
text-align: left; text-align: left;
font-size: 0.9em; font-size: 0.9em;
margin-bottom: 0; } margin-bottom: 0; }

2
css/scratchx.css.map
View file

File diff suppressed because one or more lines are too long

62
index.html
View file

@ -38,38 +38,38 @@
<li class="featured-extension"> <li class="featured-extension">
<a href="?url=https://technoboy10.github.io/twitter/extension.js" data-action="load-url"> <a href="?url=https://technoboy10.github.io/twitter/extension.js" data-action="load-url">
<img src="images/extensions/twitter_small.png" /> <img src="images/extensions/twitter_small.png" />
<section>
<h2>Twitter</h2>
<p class="author">Connor Hudson and Kreg Hanning</p>
</section>
</a> </a>
<section>
<h2>Twitter</h2>
<p class="author">Connor Hudson and Kreg Hanning</p>
</section>
</li> </li>
<li class="featured-extension"> <li class="featured-extension">
<a href="?url=http://ericrosenbaum.github.io/tone-synth-extension/examples/Bouncing%20Synth%20Ball.sbx" data-action="load-url"> <a href="?url=http://ericrosenbaum.github.io/tone-synth-extension/examples/Bouncing%20Synth%20Ball.sbx" data-action="load-url">
<img src="images/extensions/tonesynth_small.png" /> <img src="images/extensions/tonesynth_small.png" />
<section>
<h2>Sound Synthesizer</h2>
<p class="author">Eric Rosenbaum</p>
</section>
</a> </a>
<section>
<h2>Sound Synthesizer</h2>
<p class="author">Eric Rosenbaum</p>
</section>
</li> </li>
<li class="featured-extension"> <li class="featured-extension">
<a href="?url=http://sayamindu.github.io/scratch-extensions/text-to-speech/TalkingGobo.sbx" data-action="load-url"> <a href="?url=http://sayamindu.github.io/scratch-extensions/text-to-speech/TalkingGobo.sbx" data-action="load-url">
<img src="images/extensions/texttospeech_small.png" /> <img src="images/extensions/texttospeech_small.png" />
<section>
<h2>Text to Speech</h2>
<p class="author">Sayamindu Dasgupta</p>
</section>
</a> </a>
<section>
<h2>Text to Speech</h2>
<p class="author">Sayamindu Dasgupta</p>
</section>
</li> </li>
<li class="featured-extension"> <li class="featured-extension">
<a href="?url=http://khanning.github.io/scratch-arduino-extension/arduino_extension.js" data-action="load-url"> <a href="?url=http://khanning.github.io/scratch-arduino-extension/arduino_extension.js" data-action="load-url">
<img src="images/extensions/arduino_small.png" /> <img src="images/extensions/arduino_small.png" />
<section>
<h2>Arduino</h2>
<p class="author">Kreg Hanning, David Mellis</p>
</section>
</a> </a>
<section>
<h2>Arduino</h2>
<p class="author">Kreg Hanning, David Mellis</p>
</section>
</li> </li>
</ul> </ul>
@ -124,7 +124,7 @@
<h1>Gallery of Experimental Extensions</h1> <h1>Gallery of Experimental Extensions</h1>
<p>With Experimental Extensions, you can create Scratch projects that connect with external hardware and online resources. Try examples below to see the wide variety of things you can do with Experimental Extensions!</p> <p>With Experimental Extensions, you can create Scratch projects that connect with external hardware and online resources. Try examples below to see the wide variety of things you can do with Experimental Extensions!</p>
<p>If you are a developer with an extension that you'd like to submit to our gallery, read more about the <a href="https://github.com/LLK/scratchx/wiki#how-do-i-submit-my-extension-for-consideration-on-scratchx">submission process here</a>.</p> <p>If you are a developer with an extension that you'd like to submit to our gallery, read more about the <a href="https://github.com/LLK/scratchx/wiki#how-do-i-submit-my-extension-for-consideration-on-scratchx" target="_blank">submission process here</a>.</p>
</div> </div>
</div> </div>
</section> </section>
@ -143,10 +143,10 @@
<section class="description"> <section class="description">
<p>Control Arduino boards</p> <p>Control Arduino boards</p>
<a href="http://khanning.github.io/scratch-arduino-extension/examples/Arduino%20Example%20-%20Blink%20a%20LED.sbx" data-action="load-url">Sample Project</a> <a href="http://khanning.github.io/scratch-arduino-extension/examples/Arduino%20Example%20-%20Blink%20a%20LED.sbx" data-action="load-url">Sample Project</a>
<a href="http://khanning.github.io/scratch-arduino-extension/">Documentation</a> <a href="http://khanning.github.io/scratch-arduino-extension/" target="_blank">Documentation</a>
</section> </section>
<section class="tags"> <section class="tags">
<span class="tag hardware" data-action="load-url">Sample Project</span> <span class="tag hardware" title="Hardware Extension">Requires Hardware</span>
</section> </section>
</li> </li>
<li> <li>
@ -160,7 +160,7 @@
<section class="description"> <section class="description">
<p>Broadcast messages to other projects!</p> <p>Broadcast messages to other projects!</p>
<a href="?url=http://technoboy10.tk/mesh/mesh.sbx" data-action="load-url">Sample Project</a> <a href="?url=http://technoboy10.tk/mesh/mesh.sbx" data-action="load-url">Sample Project</a>
<a href="http://technoboy10.tk/mesh/">Documentation</a> <a href="http://technoboy10.tk/mesh/" target="_blank">Documentation</a>
</section> </section>
<section class="tags"> <section class="tags">
<span class="tag web" title="Web Extension">Requires Internet Connection</span> <span class="tag web" title="Web Extension">Requires Internet Connection</span>
@ -177,7 +177,7 @@
<section class="description"> <section class="description">
<p>Hand Gestures, face tracking, voice commands</p> <p>Hand Gestures, face tracking, voice commands</p>
<a href="http://intel-realsense-extension-for-scratch.github.io/public/extension/samples/simplest-realsense-blocks.sbx" data-action="load-url">Sample Project</a> <a href="http://intel-realsense-extension-for-scratch.github.io/public/extension/samples/simplest-realsense-blocks.sbx" data-action="load-url">Sample Project</a>
<a href="http://intel-realsense-extension-for-scratch.github.io/public">Documentation</a> <a href="http://intel-realsense-extension-for-scratch.github.io/" target="_blank">Documentation</a>
</section> </section>
<section class="tags"> <section class="tags">
<span class="tag hardware" title="Hardware Extension">Requires Hardware</span> <span class="tag hardware" title="Hardware Extension">Requires Hardware</span>
@ -194,7 +194,7 @@
<section class="description"> <section class="description">
<p>International Space Station tracker</p> <p>International Space Station tracker</p>
<a href="http://khanning.github.io/scratch-isstracker-extension/examples/ISS%20Tracker.sbx" data-action="load-url">Sample Project</a> <a href="http://khanning.github.io/scratch-isstracker-extension/examples/ISS%20Tracker.sbx" data-action="load-url">Sample Project</a>
<a href="http://khanning.github.io/scratch-isstracker-extension/">Documentation</a> <a href="http://khanning.github.io/scratch-isstracker-extension/" target="_blank">Documentation</a>
</section> </section>
<section class="tags"> <section class="tags">
<span class="tag web" title="Web Extension">Requires Internet Connection</span> <span class="tag web" title="Web Extension">Requires Internet Connection</span>
@ -211,7 +211,7 @@
<section class="description"> <section class="description">
<p>Hand and finger tracking</p> <p>Hand and finger tracking</p>
<a href="http://khanning.github.io/scratch-leapmotion-extension/examples/Leap%20Motion%20Example%20-%20Hand%20Skeleton.sbx" data-action="load-url">Sample Project</a> <a href="http://khanning.github.io/scratch-leapmotion-extension/examples/Leap%20Motion%20Example%20-%20Hand%20Skeleton.sbx" data-action="load-url">Sample Project</a>
<a href="http://khanning.github.io/scratch-leapmotion-extension/">Documentation</a> <a href="http://khanning.github.io/scratch-leapmotion-extension/" target="_blank">Documentation</a>
</section> </section>
<section class="tags"> <section class="tags">
<span class="tag hardware" title="Hardware Extension">Requires Hardware</span> <span class="tag hardware" title="Hardware Extension">Requires Hardware</span>
@ -228,7 +228,7 @@
<section class="description"> <section class="description">
<p>Control littleBits creations</p> <p>Control littleBits creations</p>
<a href="http://khanning.github.io/scratch-littlebits-extension/examples/littleBits%20-%20Move%20with%20Dimmer.sbx" data-action="load-url">Sample Project</a> <a href="http://khanning.github.io/scratch-littlebits-extension/examples/littleBits%20-%20Move%20with%20Dimmer.sbx" data-action="load-url">Sample Project</a>
<a href="http://khanning.github.io/scratch-littlebits-extension/">Documentation</a> <a href="http://khanning.github.io/scratch-littlebits-extension/" target="_blank">Documentation</a>
</section> </section>
<section class="tags"> <section class="tags">
<span class="tag hardware" title="Hardware Extension">Requires Hardware</span> <span class="tag hardware" title="Hardware Extension">Requires Hardware</span>
@ -245,7 +245,7 @@
<section class="description"> <section class="description">
<p>Synthesize sound effects and music</p> <p>Synthesize sound effects and music</p>
<a href="?url=http://ericrosenbaum.github.io/tone-synth-extension/examples/Bouncing%20Synth%20Ball.sbx" data-action="load-url">Sample Project</a> <a href="?url=http://ericrosenbaum.github.io/tone-synth-extension/examples/Bouncing%20Synth%20Ball.sbx" data-action="load-url">Sample Project</a>
<a href="http://ericrosenbaum.github.io/tone-synth-extension">Documentation</a> <a href="http://ericrosenbaum.github.io/tone-synth-extension" target="_blank">Documentation</a>
</section> </section>
<section class="tags"> <section class="tags">
<span class="tag web" title="Web Extension">Requires Internet Connection</span> <span class="tag web" title="Web Extension">Requires Internet Connection</span>
@ -262,7 +262,7 @@
<section class="description"> <section class="description">
<p>Use Scratch to read text out loud</p> <p>Use Scratch to read text out loud</p>
<a href="?url=http://sayamindu.github.io/scratch-extensions/text-to-speech/TalkingGobo.sbx" data-action="load-url">Sample Project</a> <a href="?url=http://sayamindu.github.io/scratch-extensions/text-to-speech/TalkingGobo.sbx" data-action="load-url">Sample Project</a>
<a href="http://sayamindu.github.io/scratch-extensions/text-to-speech">Documentation</a> <a href="http://sayamindu.github.io/scratch-extensions/text-to-speech" target="_blank">Documentation</a>
</section> </section>
<section class="tags"> <section class="tags">
<span class="tag web" title="Web Extension">Requires Internet Connection</span> <span class="tag web" title="Web Extension">Requires Internet Connection</span>
@ -279,7 +279,7 @@
<section class="description"> <section class="description">
<p>Use Twitter in your projects!</p> <p>Use Twitter in your projects!</p>
<a href="?url=https://technoboy10.github.io/twitter/extension.js" data-action="load-url">Sample Project</a> <a href="?url=https://technoboy10.github.io/twitter/extension.js" data-action="load-url">Sample Project</a>
<a href="http://technoboy10.tk/twitter/">Documentation</a> <a href="http://technoboy10.tk/twitter/" target="_blank">Documentation</a>
</section> </section>
<section class="tags"> <section class="tags">
<span class="tag web" title="Web Extension">Requires Internet Connection</span> <span class="tag web" title="Web Extension">Requires Internet Connection</span>
@ -296,7 +296,7 @@
<section class="description"> <section class="description">
<p>Control for Arduino, <acronym title="Raspberry Pi">RPi</acronym> and <acronym title="BeagleBone Black">BBB</acronym></p> <p>Control for Arduino, <acronym title="Raspberry Pi">RPi</acronym> and <acronym title="BeagleBone Black">BBB</acronym></p>
<a href="https://github.com/MrYsLab/xi/blob/master/clients/scratch/projects/blink.sbx" data-action="load-url">Sample Project</a> <a href="https://github.com/MrYsLab/xi/blob/master/clients/scratch/projects/blink.sbx" data-action="load-url">Sample Project</a>
<a href="https://github.com/MrYsLab/xi">Documentation</a> <a href="https://github.com/MrYsLab/xi" target="_blank">Documentation</a>
</section> </section>
<section class="tags"> <section class="tags">
<span class="tag hardware" title="Hardware Extension">Requires Hardware</span> <span class="tag hardware" title="Hardware Extension">Requires Hardware</span>
@ -369,13 +369,13 @@
<p>The Scratch Team has created ScratchX to enable people to create and test Experimental Extensions. However, the Scratch Team does not endorse, support or maintain specific Experimental Extensions. People using Experimental Extensions should be careful not to provide any personal details such as login passwords or personally-identifiable information if prompted by an Experimental Extension.</p> <p>The Scratch Team has created ScratchX to enable people to create and test Experimental Extensions. However, the Scratch Team does not endorse, support or maintain specific Experimental Extensions. People using Experimental Extensions should be careful not to provide any personal details such as login passwords or personally-identifiable information if prompted by an Experimental Extension.</p>
<h2 id="faq-how-to-use-scratchx">How do I use ScratchX?</h2> <h2 id="faq-how-to-use-scratchx">How do I use ScratchX?</h2>
<p>There are three pathways into ScratchX. If you have been given or sent a .sbx file, you can load that into ScratchX via the homepage (look for 'Open an Extension Project'). If you have been sent a ScratchX URL (starts with 'scratchx.org/'), you can click your link and the extension will load automatically, or you can enter that URL into the box on the homepage (look for 'Open an Extension URL'). Lastly, if you don't have an example extension, you can try out one on the site by clicking on a Featured Experimental Extension on the homepage (look for 'Featured Extensions').</p> <p>There are three pathways into ScratchX. If you have been given or sent a .sbx file, you can load that into ScratchX via the homepage (look for 'Open an Extension Project'). If you have been sent a ScratchX URL (starts with 'scratchx.org/'), you can click your link and the extension will load automatically, or you can enter that URL into the box on the homepage (look for 'Open an Extension URL'). Lastly, if you don't have an example extension, you can try out one on the site by visiting the <a href="#extensions">Gallery page</a> and clicking on an example extension there.</p>
<h2 id="faq-how-to-share">I made a cool project on ScratchX. How do I share it?</h2> <h2 id="faq-how-to-share">I made a cool project on ScratchX. How do I share it?</h2>
<p>Click the 'Save' button at the top of the page to download your project as an .sbx file on to your local computer. You can then send this file to other people, and they can upload your file onto ScratchX to play with your project.</p> <p>Click the 'Save' button at the top of the page to download your project as an .sbx file on to your local computer. You can then send this file to other people, and they can upload your file onto ScratchX to play with your project.</p>
<h2 id="faq-examples">Where can I find example Experimental Extensions to play around with?</h2> <h2 id="faq-examples">Where can I find example Experimental Extensions to play around with?</h2>
<p>We have linked to a few example extensions on the <a href="#home">ScratchX</a> homepage. We plan to highlight additional extensions in the coming months.</p> <p>You can find a list of example extensions in the <a href="#extensions">ScratchX Gallery</a>. We plan to add more extensions to this page in the coming months.</p>
<h2 id="faq-scratchx-url">What is a ScratchX URL?</h2> <h2 id="faq-scratchx-url">What is a ScratchX URL?</h2>
<p>Developers who make extensions for ScratchX can choose to create a custom web address or URL that points to their extension and/or demo project. Clicking on a ScratchX extension URL will take you directly to a project with an extension loaded.</p> <p>Developers who make extensions for ScratchX can choose to create a custom web address or URL that points to their extension and/or demo project. Clicking on a ScratchX extension URL will take you directly to a project with an extension loaded.</p>
@ -437,7 +437,7 @@
<li><a href="http://www.scratchjr.org/">ScratchJr</a></li> <li><a href="http://www.scratchjr.org/">ScratchJr</a></li>
<li><a href="https://scratch.mit.edu/conference/">Scratch Conference</a></li> <li><a href="https://scratch.mit.edu/conference/">Scratch Conference</a></li>
<li><a href="http://day.scratch.mit.edu/">Scratch Day</a></li> <li><a href="http://day.scratch.mit.edu/">Scratch Day</a></li>
<li><a href="http://codetolearn.org/">Scratch Foundation</a></li> <li><a href="http://scratchfoundation.org/">Scratch Foundation</a></li>
</ul> </ul>
</nav> </nav>
</div> </div>

35
sass/_home.scss
View file

@ -242,25 +242,26 @@ body.page-home > main > header {
> a { > a {
position: relative; position: relative;
display: block; display: block;
font-weight: normal;
img {
display: block;
height: 107px;
}
.tryit {
display: inline-block;
position: absolute;
background-color: $bright-blue;
color: $white;
padding: 0 1em;
border-radius: 1em;
top: $vertical-base;
right: $vertical-base;
}
} }
> section { img {
display: block;
height: 107px;
}
.tryit {
display: inline-block;
position: absolute;
background-color: $bright-blue;
color: $white;
padding: 0 1em;
border-radius: 1em;
top: $vertical-base;
right: $vertical-base;
}
section {
background-color: $white; background-color: $white;
color: $base-font-color; color: $base-font-color;
padding: 2 * $vertical-base; padding: 2 * $vertical-base;