Permalink
Browse files

First pass on gallery page

  • Loading branch information...
1 parent fd76bec commit 4ef6b3bdba109849d472f610719b43d441cb820d @rschamp rschamp committed Aug 4, 2015
View
@@ -994,6 +994,23 @@ body > main > footer > div {
body > main > footer > div > div nav:last-child {
margin-right: 0; }
+body > main > article > section > div {
+ display: block; }
+ body > main > article > section > div::after {
+ clear: both;
+ content: "";
+ display: table; }
+ body > main > article > section > div > div {
+ text-align: center;
+ float: left;
+ display: block;
+ margin-right: 1.25%;
+ width: 83.125%;
+ margin-left: 8.4375%;
+ margin-bottom: 0; }
+ body > main > article > section > div > div:last-child {
+ margin-right: 0; }
+
body > main > article,
body > section {
display: none; }
@@ -1245,4 +1262,110 @@ body > main > article {
margin-top: 14px;
line-height: 28px; }
+.gallery {
+ background: #d7e5f3; }
+ .gallery div {
+ padding: 3.75em 0; }
+ .gallery ul {
+ max-width: 60em;
+ margin-left: auto;
+ margin-right: auto; }
+ .gallery ul::after {
+ clear: both;
+ content: "";
+ display: table; }
+ .gallery li {
+ /* Grid of 3 wide */
+ float: left;
+ display: block;
+ margin-right: 1.25%;
+ width: 32.5%;
+ margin-bottom: 12px; }
+ .gallery li:last-child {
+ margin-right: 0; }
+ .gallery li:nth-child(3n) {
+ margin-right: 0; }
+ .gallery li:nth-child(3n+1) {
+ clear: left; }
+ .gallery li section, .gallery li header {
+ padding: 12px;
+ background-color: #fff;
+ font-size: 0.9em; }
+ .gallery li section p, .gallery li header p {
+ margin-bottom: 0;
+ text-align: left; }
+ .gallery li header {
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ background-color: #24a3ec;
+ color: #fff;
+ position: relative; }
+ .gallery li header: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;
+ position: absolute;
+ font-size: 1.5em;
+ line-height: 1.5;
+ right: 12px; }
+ .gallery li header h2 {
+ font-size: 1.1em;
+ margin-bottom: 0;
+ line-height: 1; }
+ .gallery li img {
+ display: block;
+ height: 150px; }
+ .gallery li .description {
+ overflow: hidden; }
+ .gallery li .description a {
+ width: 50%;
+ float: left;
+ display: block; }
+ .gallery li .tags {
+ border-bottom-left-radius: 5px;
+ border-bottom-right-radius: 5px;
+ border-top: 1px solid #c5c5c5; }
+
+aside + .gallery {
+ margin-top: -1.5em; }
+
+.tag {
+ font-size: 1.5em;
+ line-height: 1; }
+ .tag.web: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; }
+ .tag.hardware: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; }
+
/*# sourceMappingURL=scratchx.css.map */
Oops, something went wrong.
View
Binary file not shown.
View
Oops, something went wrong.
View
Binary file not shown.
View
Binary file not shown.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -93,6 +93,178 @@
</div>
</section>
</article>
+ <article id="extensions">
+ <section>
+ <div class="intro">
+ <div>
+ <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>If you are a developer with an extension that you'd like to submit to our gallery, read more about the <a href="#faq-submission-process">submission process here</a>.</p>
+ </div>
+ </div>
+ </section>
+ <aside class="warning message"><strong>Warning:</strong> all extensions are experimental and not a product of the Scratch Team. <a href="#faq">Find out more</a></aside>
+ <section class="gallery">
+ <div>
+ <ul>
+ <li>
+ <a href="?url=http://khanning.github.io/scratch-arduino-extension/arduino_extension.js" data-action="load-url">
+ <header>
+ <h2>Arduino</h2>
+ <p class="author">Kreg Hanning, David Mellis</p>
+ </header>
+ <img src="/images/extensions/arduino_small.png" />
+ </a>
+ <section class="description">
+ <p>Control Arduino boards</p>
+ <a href="http://khanning.github.io/scratch-arduino-extension/examples/Arduino%20Example%20-%20Blink%20a%20LED.sbx">Sample Project</a>
+ <a href="http://khanning.github.io/scratch-arduino-extension/">Documentation</a>
+ </section>
+ <section class="tags">
+ <span class="tag hardware" title="Hardware Extension"></span>
+ </section>
+ </li>
+ <li>
+ <a href="?url=http://technoboy10.github.io/mesh/mesh.js" data-action="load-url">
+ <header>
+ <h2>Firebase Mesh</h2>
+ <p class="author">Connor Hudson</p>
+ </header>
+ <img src="/images/extensions/extension.png" />
+ </a>
+ <section class="description">
+ <p>Broadcast messages to other projects!</p>
+ <a href="#">Sample Project</a>
+ <a href="http://technoboy10.tk/mesh/">Documentation</a>
+ </section>
+ <section class="tags">
+ <span class="tag web" title="Web Extension"></span>
+ </section>
+ </li>
+ <li>
+ <a href="?url=http://intel-realsense-extension-for-scratch.github.io/public/extension/intel_realsense_extension.js" data-action="load-url">
+ <header>
+ <h2>Intel&reg; RealSense&trade;</h2>
+ <p class="author">Shachar Oz, Yaron Yanai, Avi Salmon</p>
+ </header>
+ <img src="/images/extensions/extension.png" />
+ </a>
+ <section class="description">
+ <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">Sample Project</a>
+ <a href="http://intel-realsense-extension-for-scratch.github.io/public">Documentation</a>
+ </section>
+ <section class="tags">
+ <span class="tag hardware" title="Hardware Extension"></span>
+ </section>
+ </li>
+ <li>
+ <a href="?url=https://khanning.github.io/scratch-isstracker-extension/iss_extension.js" data-action="load-url">
+ <header>
+ <h2>ISS Tracker</h2>
+ <p class="author">Kreg Hanning</p>
+ </header>
+ <img src="/images/extensions/ISSTracker_small.png" />
+ </a>
+ <section class="description">
+ <p>International Space Station tracker</p>
+ <a href="http://khanning.github.io/scratch-isstracker-extension/examples/ISS%20Tracker.sbx">Sample Project</a>
+ <a href="http://khanning.github.io/scratch-isstracker-extension/">Documentation</a>
+ </section>
+ <section class="tags">
+ <span class="tag web" title="Web Extension"></span>
+ </section>
+ </li>
+ <li>
+ <a href="?url=http://khanning.github.io/scratch-leapmotion-extension/leapmotion_extension.js" data-action="load-url">
+ <header>
+ <h2>Leapmotion</h2>
+ <p class="author">Kreg Hanning</p>
+ </header>
+ <img src="/images/extensions/leapmotion_small.png" />
+ </a>
+ <section class="description">
+ <p>Hand and finger tracking</p>
+ <a href="http://khanning.github.io/scratch-leapmotion-extension/examples/Leap%20Motion%20Example%20-%20Hand%20Skeleton.sbx">Sample Project</a>
+ <a href="http://khanning.github.io/scratch-leapmotion-extension/">Documentation</a>
+ </section>
+ <section class="tags">
+ <span class="tag hardware" title="Hardware Extension"></span>
+ </section>
+ </li>
+ <li>
+ <a href="?url=http://khanning.github.io/scratch-littlebits-extension/littlebits_extension.js" data-action="load-url">
+ <header>
+ <h2>littleBits</h2>
+ <p class="author">Kreg Hanning</p>
+ </header>
+ <img src="/images/extensions/extension.png" />
+ </a>
+ <section class="description">
+ <p>Control littleBits creations</p>
+ <a href="http://khanning.github.io/scratch-littlebits-extension/examples/littleBits%20-%20Move%20with%20Dimmer.sbx">Sample Project</a>
+ <a href="http://khanning.github.io/scratch-littlebits-extension/">Documentation</a>
+ </section>
+ <section class="tags">
+ <span class="tag hardware" title="Hardware Extension"></span>
+ </section>
+ </li>
+ <li>
+ <a href="?url=http://sayamindu.github.io/scratch-extensions/text_to_speech_extension.js" data-action="load-url">
+ <header>
+ <h2>Text to Speech</h2>
+ <p class="author">Sayamindu Dasgupta</p>
+ </header>
+ <img src="/images/extensions/extension.png" />
+ </a>
+ <section class="description">
+ <p>Use Scratch to read text out loud</p>
+ <a href="#">Sample Project</a>
+ <a href="#">Documentation</a>
+ </section>
+ <section class="tags">
+ <span class="tag web" title="Web Extension"></span>
+ </section>
+ </li>
+ <li>
+ <a href="?url=https://technoboy10.github.io/twitter/extension.js" data-action="load-url">
+ <header>
+ <h2>Twitter</h2>
+ <p class="author">Connor Hudson and Kreg Hanning</p>
+ </header>
+ <img src="/images/extensions/extension.png" />
+ </a>
+ <section class="description">
+ <p>Use Twitter in your projects!</p>
+ <a href="?url=https://technoboy10.github.io/twitter/extension.js">Sample Project</a>
+ <a href="http://technoboy10.tk/twitter/">Documentation</a>
+ </section>
+ <section class="tags">
+ <span class="tag web" title="Web Extension"></span>
+ </section>
+ </li>
+ <li>
+ <a href="?url=https://MrYsLab.github.io/xi4s.js" data-action="load-url">
+ <header>
+ <h2>Xi - Multi uC Interconnect</h2>
+ <p class="author">Alan Yorinks</p>
+ </header>
+ <img src="/images/extensions/xi3_small.png" />
+ </a>
+ <section class="description">
+ <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">Sample Project</a>
+ <a href="https://github.com/MrYsLab/xi">Documentation</a>
+ </section>
+ <section class="tags">
+ <span class="tag hardware" title="Hardware Extension"></span>
+ </section>
+ </li>
+ </ul>
+ </div>
+ </section>
+ </article>
<article id="privacy-policy">
<section>
<div>
Oops, something went wrong.

0 comments on commit 4ef6b3b

Please sign in to comment.