mirror of
https://github.com/scratchfoundation/scratchx.git
synced 2024-11-24 16:48:07 -05:00
First pass on new homepage design
This commit is contained in:
Ray Schamp
parent
06e5019760
commit
76222a7edf
9 changed files with 685 additions and 163 deletions
352
css/scratchx.css
352
css/scratchx.css
|
|
@ -774,7 +774,10 @@ picture {
|
|||
|
||||
dialog {
|
||||
display: block;
|
||||
position: static; }
|
||||
position: static;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
text-align: center; }
|
||||
dialog h2 {
|
||||
text-align: center;
|
||||
margin: 1.5em 0 0.375em 0; }
|
||||
|
|
@ -1025,24 +1028,14 @@ body > section {
|
|||
body #home {
|
||||
display: block; }
|
||||
|
||||
#dialogs, #modal-dialogs {
|
||||
display: block; }
|
||||
#dialogs::after, #modal-dialogs::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table; }
|
||||
#dialogs dialog, #modal-dialogs dialog {
|
||||
float: left;
|
||||
display: block;
|
||||
margin-right: 1.25%;
|
||||
width: 32.5%; }
|
||||
#dialogs dialog:last-child, #modal-dialogs dialog:last-child {
|
||||
margin-right: 0; }
|
||||
#dialogs dialog p, #modal-dialogs dialog p {
|
||||
text-align: center; }
|
||||
|
||||
.modal .single {
|
||||
width: 50%; }
|
||||
.modal dialog {
|
||||
float: left;
|
||||
margin-right: 12px;
|
||||
width: 49%; }
|
||||
.modal dialog:last-child {
|
||||
margin-right: auto; }
|
||||
.modal dialog:only-child {
|
||||
float: none; }
|
||||
|
||||
.extension-file section:first-child {
|
||||
/* Add a border equal to the number of featured extensions - 1 */
|
||||
|
|
@ -1223,40 +1216,287 @@ body > main > article {
|
|||
#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 {
|
||||
#home > header h1 {
|
||||
font-weight: normal; }
|
||||
#home > header > section {
|
||||
max-width: 60em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-top: 3em; }
|
||||
#home > header > section::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table; }
|
||||
#home > header > section div {
|
||||
float: left;
|
||||
display: block;
|
||||
margin-right: 1.25%;
|
||||
width: 83.125%;
|
||||
margin-left: 8.4375%; }
|
||||
#home > header > section div:last-child {
|
||||
margin-right: 0; }
|
||||
#home > header > section .open-extension, #home > header > section .open-url {
|
||||
float: left;
|
||||
display: block;
|
||||
margin-right: 1.25%;
|
||||
width: 24.0625%;
|
||||
text-align: center; }
|
||||
#home > header > section .open-extension:last-child, #home > header > section .open-url:last-child {
|
||||
margin-right: 0; }
|
||||
#home > header > section .open-extension a, #home > header > section .open-url a {
|
||||
color: #fff; }
|
||||
#home > header > section .open-extension {
|
||||
margin-left: 25.3125%; }
|
||||
#home > header > section .open-extension a: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;
|
||||
padding-right: 0.375em; }
|
||||
#home > header > section .open-url {
|
||||
margin-left: 0%; }
|
||||
#home > header > section .open-url a: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;
|
||||
padding-right: 0.375em; }
|
||||
#home > header > ul {
|
||||
max-width: 60em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-top: 3em; }
|
||||
#home > header > ul::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table; }
|
||||
#home > header > ul li {
|
||||
float: left;
|
||||
display: block;
|
||||
margin-right: 1.25%;
|
||||
width: 24.0625%; }
|
||||
#home > header > ul li:last-child {
|
||||
margin-right: 0; }
|
||||
#home > header > ul li:nth-child(4n) {
|
||||
margin-right: 0; }
|
||||
#home > header > ul li:nth-child(4n+1) {
|
||||
clear: left; }
|
||||
#home > header .bottom-row {
|
||||
max-width: 60em;
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
#home > header .bottom-row::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table; }
|
||||
#home > header .bottom-row > div {
|
||||
display: block;
|
||||
margin-top: 1.125em;
|
||||
margin-bottom: 1.5em; }
|
||||
#home > header .bottom-row > div::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table; }
|
||||
#home > header .bottom-row > div > aside {
|
||||
float: left;
|
||||
display: block;
|
||||
margin-right: 1.25%;
|
||||
width: 74.6875%;
|
||||
vertical-align: middle;
|
||||
line-height: 2.5em; }
|
||||
#home > header .bottom-row > div > aside:last-child {
|
||||
margin-right: 0; }
|
||||
#home > header .bottom-row > div > aside: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: 1.5em;
|
||||
padding-right: 0.375em; }
|
||||
#home > header .bottom-row > div > a {
|
||||
float: left;
|
||||
display: block;
|
||||
margin-right: 1.25%;
|
||||
width: 24.0625%; }
|
||||
#home > header .bottom-row > div > a:last-child {
|
||||
margin-right: 0; }
|
||||
#home > header .bottom-row > div > a button {
|
||||
width: 100%; }
|
||||
#home header + aside {
|
||||
margin: 0; }
|
||||
#home > section {
|
||||
padding: 2.25em 0; }
|
||||
#home > section > div {
|
||||
max-width: 60em;
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
#home > section > div::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table; }
|
||||
#home > section > div > div {
|
||||
display: block;
|
||||
margin-bottom: 0; }
|
||||
#home > section > div > div::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table; }
|
||||
#home > section.scratch-vs-scratchx {
|
||||
background-color: #dfe3e7; }
|
||||
#home > section.scratch-vs-scratchx > div > div {
|
||||
display: table;
|
||||
width: 100%;
|
||||
table-layout: fixed; }
|
||||
#home > section.scratch-vs-scratchx > div > div > div {
|
||||
display: table-cell;
|
||||
width: 50%;
|
||||
vertical-align: top; }
|
||||
#home > section.scratch-vs-scratchx > div > div > div:first-child {
|
||||
border-right: 1px solid #c5c5c5; }
|
||||
#home > section.scratch-vs-scratchx > div > div > div > div {
|
||||
float: left;
|
||||
display: block;
|
||||
margin-right: 2.53165%;
|
||||
width: 82.91139%; }
|
||||
#home > section.scratch-vs-scratchx > div > div > div > div:last-child {
|
||||
margin-right: 0; }
|
||||
#home > section.scratch-vs-scratchx > div > div > div:last-child > div {
|
||||
margin-left: 17.08861%; }
|
||||
#home > section.who-uses-scratchx {
|
||||
text-align: center; }
|
||||
#home > section.who-uses-scratchx > div > div > div {
|
||||
float: left;
|
||||
display: block;
|
||||
margin-right: 1.25%;
|
||||
width: 83.125%;
|
||||
margin-left: 8.4375%; }
|
||||
#home > section.who-uses-scratchx > div > div > div:last-child {
|
||||
margin-right: 0; }
|
||||
#home > section.who-uses-scratchx h2 {
|
||||
font-weight: normal; }
|
||||
#home nav {
|
||||
max-width: 60em;
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
#home nav::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table; }
|
||||
#home nav ul {
|
||||
display: table;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
padding: 2.25em 0;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid #c5c5c5; }
|
||||
#home nav ul li {
|
||||
display: table-cell;
|
||||
width: 33.33333%;
|
||||
text-align: center; }
|
||||
#home nav ul li a {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-top: 95px; }
|
||||
#home nav ul li a:before {
|
||||
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;
|
||||
color: #fff;
|
||||
background-color: #24a3ec;
|
||||
font-size: 3.5em;
|
||||
border-radius: 38px;
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
line-height: 76px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 50%;
|
||||
margin-right: -38px;
|
||||
box-shadow: 0 7px 0 0 #dfe3e7; }
|
||||
#home nav ul li.documentation a:before {
|
||||
content: ""; }
|
||||
#home nav ul li.extensions a:before {
|
||||
content: ""; }
|
||||
#home nav ul li.faq a:before {
|
||||
content: ""; }
|
||||
|
||||
.logo-scratch {
|
||||
overflow: hidden;
|
||||
text-indent: 101%;
|
||||
white-space: nowrap;
|
||||
background: url(../images/scratch-heading.png) no-repeat;
|
||||
height: 49px; }
|
||||
|
||||
.logo-scratchx {
|
||||
overflow: hidden;
|
||||
text-indent: 101%;
|
||||
white-space: nowrap;
|
||||
background: url(../images/scratchx-heading.png) no-repeat;
|
||||
height: 49px; }
|
||||
|
||||
.featured-extension {
|
||||
border-radius: 5px;
|
||||
overflow: hidden; }
|
||||
.featured-extension > a {
|
||||
position: relative;
|
||||
display: block; }
|
||||
.featured-extension > a img {
|
||||
display: block; }
|
||||
.featured-extension > a .tryit {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
background-color: #24a3ec;
|
||||
color: #fff;
|
||||
padding: 0 1em;
|
||||
border-radius: 1em;
|
||||
top: 0.375em;
|
||||
right: 0.375em; }
|
||||
.featured-extension > section {
|
||||
background-color: #fff;
|
||||
color: #58595b;
|
||||
padding: 0.75em;
|
||||
line-height: 1; }
|
||||
.featured-extension > section h2 {
|
||||
color: #24a3ec;
|
||||
margin-bottom: 0;
|
||||
font-size: 1.25em; }
|
||||
.featured-extension > section p {
|
||||
text-align: left;
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 0; }
|
||||
|
||||
#scratch {
|
||||
position: absolute;
|
||||
|
|
@ -1289,7 +1529,9 @@ body > main > article {
|
|||
display: block;
|
||||
margin-right: 1.25%;
|
||||
width: 32.5%;
|
||||
margin-bottom: 12px; }
|
||||
margin-bottom: 12px;
|
||||
overflow: hidden;
|
||||
border-radius: 5px; }
|
||||
.gallery li:last-child {
|
||||
margin-right: 0; }
|
||||
.gallery li:nth-child(3n) {
|
||||
|
|
@ -1304,8 +1546,6 @@ body > main > article {
|
|||
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; }
|
||||
|
|
@ -1340,8 +1580,6 @@ body > main > article {
|
|||
float: left;
|
||||
display: block; }
|
||||
.gallery li .tags {
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
border-top: 1px solid #c5c5c5; }
|
||||
|
||||
aside + .gallery {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
BIN
images/scratch-heading.png
Normal file
BIN
images/scratch-heading.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
images/scratchx-heading.png
Normal file
BIN
images/scratchx-heading.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
189
index.html
189
index.html
|
|
@ -21,77 +21,105 @@
|
|||
</header>
|
||||
<article id="home">
|
||||
<header>
|
||||
<div>
|
||||
<aside class="warning message"><strong>Warning:</strong> These extensions are experimental. <a href="#faq">Please read the FAQ before trying them.</a></aside>
|
||||
<section>
|
||||
<div>
|
||||
<h1>Play with Experimental Extensions to Scratch!</h1>
|
||||
<p>With Experimental Extensions, you can create Scratch projects that connect with external hardware (such as electronic devices and robotics) and online resources (including web data and web services).</p>
|
||||
</div>
|
||||
<div class="open-extension">
|
||||
<a href="#" data-action="modal" data-template="template-extension-file">Open Extension File</a>
|
||||
</div>
|
||||
<div class="open-url">
|
||||
<a href="#" data-action="modal" data-template="template-extension-url">Open Extension URL</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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 robotics) and online resources (including web data and web services).
|
||||
</p>
|
||||
<ul class="featured-extensions">
|
||||
<li class="featured-extension">
|
||||
<a href="?url=https://khanning.github.io/scratch-isstracker-extension/iss_extension.js" data-action="load-url">
|
||||
<img src="/images/extensions/ISSTracker_small.png" />
|
||||
<span class="button tryit">Try it!</span>
|
||||
</a>
|
||||
<section>
|
||||
<h2>ISS Tracker</h2>
|
||||
<p class="author">Kreg Hanning</p>
|
||||
</section>
|
||||
</li>
|
||||
<li class="featured-extension">
|
||||
<a href="?url=https://khanning.github.io/scratch-isstracker-extension/iss_extension.js" data-action="load-url">
|
||||
<img src="/images/extensions/ISSTracker_small.png" />
|
||||
<span class="button tryit">Try it!</span>
|
||||
</a>
|
||||
<section>
|
||||
<h2>ISS Tracker</h2>
|
||||
<p class="author">Kreg Hanning</p>
|
||||
</section>
|
||||
</li>
|
||||
<li class="featured-extension">
|
||||
<a href="?url=https://khanning.github.io/scratch-isstracker-extension/iss_extension.js" data-action="load-url">
|
||||
<img src="/images/extensions/ISSTracker_small.png" />
|
||||
<span class="button tryit">Try it!</span>
|
||||
</a>
|
||||
<section>
|
||||
<h2>ISS Tracker</h2>
|
||||
<p class="author">Kreg Hanning</p>
|
||||
</section>
|
||||
</li>
|
||||
<li class="featured-extension">
|
||||
<a href="?url=https://khanning.github.io/scratch-isstracker-extension/iss_extension.js" data-action="load-url">
|
||||
<img src="/images/extensions/ISSTracker_small.png" />
|
||||
<span class="button tryit">Try it!</span>
|
||||
</a>
|
||||
<section>
|
||||
<h2>ISS Tracker</h2>
|
||||
<p class="author">Kreg Hanning</p>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<section id="dialogs">
|
||||
<dialog open class="extension-file">
|
||||
<section>
|
||||
<h2>Open an Extension Project</h2>
|
||||
<p>Choose a .sbx file from your local drive</p>
|
||||
<p><a href="#faq-sbx-file">What is a .sbx file?</a></p>
|
||||
</section>
|
||||
<section>
|
||||
<button data-action="load-file">Browse for local file</button>
|
||||
</section>
|
||||
</dialog>
|
||||
<div class="bottom-row">
|
||||
<div>
|
||||
|
||||
<dialog open class="extension-url">
|
||||
<section>
|
||||
<h2>Open an Extension URL</h2>
|
||||
<p>Paste the web address below</p>
|
||||
<p><a href="#faq-scratchx-url">What is a ScratchX URL?</a></p>
|
||||
</section>
|
||||
<section>
|
||||
<form class="input-plus-button url-load-form">
|
||||
<input type="text" placeholder="paste url..." />
|
||||
<button type="submit">Open</button>
|
||||
</form>
|
||||
</section>
|
||||
</dialog>
|
||||
<aside class="icon-gears">Most physical extensions require the Scratch Device Plugin - <a href="https://scratch.mit.edu/info/ext_download/">Download here</a></aside>
|
||||
|
||||
<dialog open class="extension-feature">
|
||||
<section>
|
||||
<h2>Featured Extensions</h2>
|
||||
<p><a href="https://scratch.mit.edu/scratchr2/static/ext/download.html">Download hardware plugin</a></p>
|
||||
</section>
|
||||
<section>
|
||||
<ul>
|
||||
<li><a href="?url=http://sayamindu.github.io/scratch-extensions/text_to_speech_extension.js" data-action="load-url">
|
||||
<h3>Text to Speech</h3>
|
||||
<p>Use Scratch to read text out loud</p>
|
||||
</a></li>
|
||||
<li><a href="?url=http://technoboy10.github.io/mesh/mesh.js" data-action="load-url">
|
||||
<h3>Mesh</h3>
|
||||
<p>Communicate across projects</p>
|
||||
</a></li>
|
||||
<li><a href="?url=http://khanning.github.io/scratch-arduino-extension/arduino_extension.js" data-action="load-url">
|
||||
<h3>Arduino</h3>
|
||||
<p>Control your Arduino using Scratch</p>
|
||||
</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</dialog>
|
||||
</section>
|
||||
|
||||
<aside class="info message">
|
||||
<strong>Note:</strong> To use any physical extensions, you need to download the <a href="https://scratch.mit.edu/info/ext_download/">Hardware Plugin</a>.<br />
|
||||
Official Scratch Extensions (such as LEGO WeDo) are available on the main <a href="https://scratch.mit.edu">Scratch site</a>.
|
||||
</aside>
|
||||
<a href="#extensions"><button>See all Extensions</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<section>
|
||||
<div>
|
||||
<h2>Developer Documentation</h2>
|
||||
<p>Developers can create new Experimental Extensions using Javascript. To learn more, read the <a href="https://github.com/LLK/scratchx/wiki">Developer Documentation</a>.</p>
|
||||
<p><a href="#scratch"><button>Open editor</button></a></p>
|
||||
</div>
|
||||
<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="scratch-vs-scratchx">
|
||||
<div><div>
|
||||
<div>
|
||||
<div>
|
||||
<h2 class="logo-scratch">Scratch</h2>
|
||||
<p>With the Scratch programming language, you can create your own interactive stories, games, and animations &emdash; and share your creations with others in an online community. <a href="http://scratch.mit.edu/">Take me to Scratch</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2 class="logo-scratchx">ScratchX</h2>
|
||||
<p>On the ScratchX website, you can play with Experimental Extensions to Scratch. Because these extensions are experimental and not enforsed or supported by the Scratch Team, they are available only on the ScratchX site, not the main Scratch site. <a href="#scratch">Try out ScratchX</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div></div>
|
||||
</section>
|
||||
<section class="who-uses-scratchx">
|
||||
<div><div>
|
||||
<div>
|
||||
<h2>Who uses ScratchX?</h2>
|
||||
<p><strong>Anyone</strong> can access and play with Experimental Extensions on ScratchX. Integrate <a href="">Twitter</a> feeds into your Scratch project, connect with hardware like <a href="">Arduino</a> and <a href="">Raspberry Pi</a>, and <a href="">much much more.</a></p>
|
||||
|
||||
<p><strong>Developers</strong> can use ScratchX to create and test new Experimental Extensions. Learn more about ScratchX in our <a href="https://github.com/LLK/scratchx/wiki/">developer documentation</a></p>
|
||||
</div>
|
||||
</div></div>
|
||||
</section>
|
||||
<nav>
|
||||
<ul>
|
||||
<li class="faq"><a href="#faq">Frequently Asked Questions</a></li>
|
||||
<li class="extensions"><a href="#extensions">See all Extensions</a></li>
|
||||
<li class="documentation"><a href="https://github.com/LLK/scratchx/wiki/">Developer Documentation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</article>
|
||||
<article id="extensions">
|
||||
<section class="intro">
|
||||
|
|
@ -135,7 +163,7 @@
|
|||
</a>
|
||||
<section class="description">
|
||||
<p>Broadcast messages to other projects!</p>
|
||||
<a href="#">Sample Project</a>
|
||||
<a href="">Sample Project</a>
|
||||
<a href="http://technoboy10.tk/mesh/">Documentation</a>
|
||||
</section>
|
||||
<section class="tags">
|
||||
|
|
@ -220,8 +248,8 @@
|
|||
</a>
|
||||
<section class="description">
|
||||
<p>Use Scratch to read text out loud</p>
|
||||
<a href="#">Sample Project</a>
|
||||
<a href="#">Documentation</a>
|
||||
<a href="">Sample Project</a>
|
||||
<a href="">Documentation</a>
|
||||
</section>
|
||||
<section class="tags">
|
||||
<span class="tag web" title="Web Extension"></span>
|
||||
|
|
@ -442,6 +470,33 @@
|
|||
</section>
|
||||
</dialog>
|
||||
</script>
|
||||
<script type="text/template" id="template-extension-url">
|
||||
<dialog class="single extension-url">
|
||||
<section>
|
||||
<h2>Open an Extension URL</h2>
|
||||
<p>Paste the web address below</p>
|
||||
<p><a href="#faq-scratchx-url">What is a ScratchX URL?</a></p>
|
||||
</section>
|
||||
<section>
|
||||
<form class="input-plus-button url-load-form">
|
||||
<input type="text" placeholder="paste url..." />
|
||||
<button type="submit">Open</button>
|
||||
</form>
|
||||
</section>
|
||||
</dialog>
|
||||
</script>
|
||||
<script type="text/template" id="template-extension-file">
|
||||
<dialog class="single extension-file">
|
||||
<section>
|
||||
<h2>Open an Extension Project</h2>
|
||||
<p>Choose a .sbx file from your local drive</p>
|
||||
<p><a href="#faq-sbx-file">What is a .sbx file?</a></p>
|
||||
</section>
|
||||
<section>
|
||||
<button data-action="load-file">Browse for local file</button>
|
||||
</section>
|
||||
</dialog>
|
||||
</script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
|
||||
ul {
|
||||
@include outer-container;
|
||||
@include reset-display;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
|
|
@ -16,6 +17,9 @@
|
|||
@include omega(3n);
|
||||
margin-bottom: $gutter;
|
||||
|
||||
overflow: hidden;
|
||||
border-radius: $base-border-radius;
|
||||
|
||||
section, header {
|
||||
padding: $gutter;
|
||||
background-color: $base-background-color;
|
||||
|
|
@ -28,8 +32,6 @@
|
|||
}
|
||||
|
||||
header {
|
||||
@include border-top-radius($base-border-radius);
|
||||
|
||||
background-color: $bright-blue;
|
||||
color: $white;
|
||||
position: relative;
|
||||
|
|
@ -65,8 +67,6 @@
|
|||
}
|
||||
|
||||
.tags {
|
||||
@include border-bottom-radius($base-border-radius);
|
||||
|
||||
border-top: $base-border;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
270
sass/_home.scss
270
sass/_home.scss
|
|
@ -1,34 +1,258 @@
|
|||
/* Homepage */
|
||||
|
||||
#home > header {
|
||||
background: url(../images/editor.png);
|
||||
background-size: cover;
|
||||
#home {
|
||||
> header {
|
||||
background: url(../images/editor.png);
|
||||
background-size: cover;
|
||||
|
||||
h1 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
> section {
|
||||
@include outer-container;
|
||||
padding-top: $vertical-base * 8;
|
||||
|
||||
div {
|
||||
@include span-columns(10);
|
||||
@include shift(1);
|
||||
}
|
||||
|
||||
.open-extension, .open-url {
|
||||
@include span-columns(3);
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: $white
|
||||
}
|
||||
}
|
||||
|
||||
.open-extension {
|
||||
@include shift(3);
|
||||
|
||||
a {
|
||||
@include icon(before, upload){
|
||||
padding-right: $vertical-base;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
.open-url {
|
||||
@include shift(0);
|
||||
|
||||
a {
|
||||
@include icon(before, link){
|
||||
padding-right: $vertical-base;
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> ul {
|
||||
@include outer-container;
|
||||
|
||||
padding-top: $vertical-base * 8;
|
||||
|
||||
li {
|
||||
@include span-columns(3);
|
||||
@include omega(4n);
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-row {
|
||||
@include outer-container;
|
||||
|
||||
|
||||
> div {
|
||||
@include row;
|
||||
margin-top: 3 * $vertical-base;
|
||||
margin-bottom: 4 * $vertical-base;
|
||||
|
||||
> aside{
|
||||
@include span-columns(9);
|
||||
vertical-align: middle;
|
||||
line-height: 2.5em;
|
||||
|
||||
@include icon(before, gears) {
|
||||
font-size: 1.5 * $base-font-size;
|
||||
padding-right: $vertical-base;
|
||||
}
|
||||
}
|
||||
|
||||
> a {
|
||||
@include span-columns(3);
|
||||
|
||||
button {
|
||||
@include fill-parent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header + aside {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> section {
|
||||
|
||||
padding: 6 * $vertical-base 0;
|
||||
|
||||
> div {
|
||||
@include outer-container;
|
||||
|
||||
> div {
|
||||
@include row();
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.scratch-vs-scratchx {
|
||||
|
||||
background-color: $light-gray;
|
||||
|
||||
> div > div {
|
||||
|
||||
@include row(table);
|
||||
|
||||
> div {
|
||||
@include span-columns(6);
|
||||
vertical-align: top;
|
||||
|
||||
&:first-child {
|
||||
border-right: $base-border;
|
||||
}
|
||||
|
||||
> div {
|
||||
@include reset-display;
|
||||
@include span-columns(5 of 6);
|
||||
|
||||
}
|
||||
|
||||
&:last-child > div {
|
||||
@include shift(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.who-uses-scratchx {
|
||||
> div > div > div {
|
||||
@include span-columns(10);
|
||||
@include shift(1);
|
||||
}
|
||||
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
@include outer-container;
|
||||
|
||||
ul {
|
||||
@include row(table);
|
||||
padding: 6 * $vertical-base 0;
|
||||
vertical-align: top;
|
||||
border-top: $base-border;
|
||||
|
||||
li {
|
||||
@include span-columns(4);
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-top: 76px * 1.25;
|
||||
@include icon(before) {
|
||||
color: $white;
|
||||
background-color: $bright-blue;
|
||||
font-size: 3.5em;
|
||||
border-radius: 38px;
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
line-height: 76px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 50%;
|
||||
margin-right: -38px;
|
||||
box-shadow: 0 7px 0 0 $light-gray;
|
||||
}
|
||||
}
|
||||
|
||||
&.documentation a:before {
|
||||
content: $icon-doc;
|
||||
}
|
||||
|
||||
&.extensions a:before {
|
||||
content: $icon-blocks;
|
||||
}
|
||||
|
||||
&.faq a:before {
|
||||
content: $icon-faq;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#home > header > div {
|
||||
/* To stop child elements from adding margin */
|
||||
padding: 1px 0;
|
||||
.logo-scratch {
|
||||
@include hide-text;
|
||||
background: url(../images/scratch-heading.png) no-repeat;
|
||||
height: 49px;
|
||||
}
|
||||
|
||||
#home > section > div {
|
||||
border-top: $base-border;
|
||||
margin-top: 10 * $vertical-base;
|
||||
padding: 10 * $vertical-base 0;
|
||||
position: relative;
|
||||
.logo-scratchx {
|
||||
@include hide-text;
|
||||
background: url(../images/scratchx-heading.png) no-repeat;
|
||||
height: 49px;
|
||||
}
|
||||
|
||||
@include icon(before, documentation) {
|
||||
font-size: 2em;
|
||||
color: $base-border-color;
|
||||
position: absolute;
|
||||
top: -.55em;
|
||||
left: 50%;
|
||||
margin-left: -1.3em;
|
||||
.featured-extension {
|
||||
border-radius: $base-border-radius;
|
||||
overflow: hidden;
|
||||
|
||||
> a {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.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;
|
||||
border: 1em solid $white;
|
||||
border-width: 0 0.4em;
|
||||
}
|
||||
color: $base-font-color;
|
||||
padding: 2 * $vertical-base;
|
||||
|
||||
h2, p {
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
|
||||
h2 {
|
||||
color: $bright-blue;
|
||||
margin-bottom: 0;
|
||||
font-size: 1.25 * $base-font-size;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: left;
|
||||
font-size: $small-font-size;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,9 @@
|
|||
dialog {
|
||||
display: block;
|
||||
position: static;
|
||||
overflow: hidden;
|
||||
border-radius: $base-border-radius;
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -61,19 +61,21 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
#dialogs, #modal-dialogs {
|
||||
@include row();
|
||||
dialog {
|
||||
@include span-columns(4);
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal dialog {
|
||||
float: left;
|
||||
margin-right: $gutter;
|
||||
width: 49%;
|
||||
|
||||
&:last-child {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
.modal .single {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.extension-file {
|
||||
section:first-child {
|
||||
|
|
|
|||
Loading…
Reference in a new issue