scratchfoundation/scratchx
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratchx.git synced 2024-11-28 18:45:49 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Match the homepage comp more closely

Browse source
This commit is contained in:
Ray Schamp 2015-08-06 14:39:44 -04:00
parent 1384bda68a
commit 48121a694f
5 changed files with 256 additions and 212 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

435
css/scratchx.css
View file

@ -1184,7 +1184,8 @@ footer, main header {
body > main > header { body > main > header {
display: block; display: block;
height: 3.75em; height: 3.75em;
line-height: 3.75em; } line-height: 3.75em;
position: relative; }
body > main > header::after { body > main > header::after {
clear: both; clear: both;
content: ""; content: "";
@ -1195,7 +1196,8 @@ body > main > article {
margin-top: -3.75em; } margin-top: -3.75em; }
.scratchx-logo { .scratchx-logo {
float: left; } float: left;
margin-bottom: 0; }
.scratchx-logo span { .scratchx-logo span {
overflow: hidden; overflow: hidden;
text-indent: 101%; text-indent: 101%;
@ -1213,117 +1215,52 @@ body > main > article {
margin-left: 50px; } margin-left: 50px; }
/* Homepage */ /* Homepage */
#home > header { body.page-home > main > header {
background: url(../images/editor.png); background-color: transparent; }
background-size: cover; } body.page-home > main > header > div {
#home > header h1 { border-bottom: 1px solid #c5c5c5; }
font-weight: normal; } body.page-home > main > header a {
#home > header > section { color: #fff; }
max-width: 60em;
margin-left: auto; #home {
margin-right: auto; padding-top: 0; }
padding-top: 3em; } #home > header {
#home > header > section::after { background: url(../images/editor.png);
clear: both; background-size: cover;
content: ""; padding-top: 3.75em; }
display: table; } #home > header h1 {
#home > header > section div { font-weight: normal; }
float: left; #home > header > section {
display: block; max-width: 60em;
margin-right: 1.25%; margin-left: auto;
width: 83.125%; margin-right: auto;
margin-left: 8.4375%; } padding-top: 3em; }
#home > header > section div:last-child { #home > header > section::after {
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; clear: both;
content: ""; content: "";
display: table; } display: table; }
#home > header .bottom-row > div > aside { #home > header > section div {
float: left; float: left;
display: block; display: block;
margin-right: 1.25%; margin-right: 1.25%;
width: 74.6875%; width: 83.125%;
vertical-align: middle; margin-left: 8.4375%; }
line-height: 2.5em; } #home > header > section div:last-child {
#home > header .bottom-row > div > aside:last-child {
margin-right: 0; } margin-right: 0; }
#home > header .bottom-row > div > aside:before { #home > header > section .open-extension, #home > header > section .open-url {
content: ""; 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"; font-family: "ScratchX";
speak: none; speak: none;
font-style: normal; font-style: normal;
@ -1335,123 +1272,198 @@ body > main > article {
/* Better Font Rendering =========== */ /* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
font-size: 1.5em;
padding-right: 0.375em; } padding-right: 0.375em; }
#home > header .bottom-row > div > a { #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; float: left;
display: block; display: block;
margin-right: 1.25%; margin-right: 1.25%;
width: 24.0625%; } width: 24.0625%; }
#home > header .bottom-row > div > a:last-child { #home > header > ul li:last-child {
margin-right: 0; } margin-right: 0; }
#home > header .bottom-row > div > a button { #home > header > ul li:nth-child(4n) {
width: 100%; } margin-right: 0; }
#home header + aside { #home > header > ul li:nth-child(4n+1) {
margin: 0; } clear: left; }
#home > section { #home > header .bottom-row {
padding: 2.25em 0; } max-width: 60em;
#home > section > div { margin-left: auto;
max-width: 60em; margin-right: auto; }
margin-left: auto; #home > header .bottom-row::after {
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; clear: both;
content: ""; content: "";
display: table; } display: table; }
#home > section.scratch-vs-scratchx { #home > header .bottom-row > div {
background-color: #dfe3e7; } display: block;
#home > section.scratch-vs-scratchx > div > div { margin-top: 1.125em;
display: table; margin-bottom: 1.5em; }
width: 100%; #home > header .bottom-row > div::after {
table-layout: fixed; } clear: both;
#home > section.scratch-vs-scratchx > div > div > div { content: "";
display: table-cell; display: table; }
width: 50%; #home > header .bottom-row > div > aside {
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; float: left;
display: block; display: block;
margin-right: 2.53165%; margin-right: 1.25%;
width: 82.91139%; } width: 74.6875%;
#home > section.scratch-vs-scratchx > div > div > div > div:last-child { vertical-align: middle;
line-height: 2.5em; }
#home > header .bottom-row > div > aside:last-child {
margin-right: 0; } margin-right: 0; }
#home > section.scratch-vs-scratchx > div > div > div:last-child > div { #home > header .bottom-row > div > aside:before {
margin-left: 17.08861%; } content: "";
#home > section.who-uses-scratchx { font-family: "ScratchX";
text-align: center; } speak: none;
#home > section.who-uses-scratchx > div > div > div { font-style: normal;
float: left; font-weight: normal;
display: block; font-variant: normal;
margin-right: 1.25%; font-size: 1em;
width: 83.125%; text-transform: none;
margin-left: 8.4375%; } line-height: 1;
#home > section.who-uses-scratchx > div > div > div:last-child { /* Better Font Rendering =========== */
margin-right: 0; } -webkit-font-smoothing: antialiased;
#home > section.who-uses-scratchx h2 { -moz-osx-font-smoothing: grayscale;
font-weight: normal; } font-size: 1.5em;
#home nav { padding-right: 0.375em; }
max-width: 60em; #home > header .bottom-row > div > a {
margin-left: auto; float: left;
margin-right: auto; } display: block;
#home nav::after { margin-right: 1.25%;
clear: both; width: 24.0625%; }
content: ""; #home > header .bottom-row > div > a:last-child {
display: table; } margin-right: 0; }
#home nav ul { #home > header .bottom-row > div > a button {
display: table; width: 100%; }
width: 100%; #home header + aside {
table-layout: fixed; margin: 0; }
padding: 2.25em 0; #home > section {
vertical-align: top; padding: 2.25em 0; }
border-top: 1px solid #c5c5c5; } #home > section > div {
#home nav ul li { max-width: 60em;
display: table-cell; margin-left: auto;
width: 33.33333%; margin-right: auto; }
text-align: center; } #home > section > div::after {
#home nav ul li a { clear: both;
content: "";
display: table; }
#home > section > div > div {
display: block; display: block;
position: relative; margin-bottom: 0; }
padding-top: 95px; } #home > section > div > div::after {
#home nav ul li a:before { clear: both;
font-family: "ScratchX"; content: "";
speak: none; display: table; }
font-style: normal; #home > section.scratch-vs-scratchx {
font-weight: normal; background-color: #dfe3e7; }
font-variant: normal; #home > section.scratch-vs-scratchx > div > div {
font-size: 1em; display: table;
text-transform: none; width: 100%;
line-height: 1; table-layout: fixed; }
/* Better Font Rendering =========== */ #home > section.scratch-vs-scratchx > div > div > div {
-webkit-font-smoothing: antialiased; display: table-cell;
-moz-osx-font-smoothing: grayscale; width: 50%;
color: #fff; vertical-align: top; }
background-color: #24a3ec; #home > section.scratch-vs-scratchx > div > div > div:first-child {
font-size: 3.5em; border-right: 1px solid #c5c5c5; }
border-radius: 38px; #home > section.scratch-vs-scratchx > div > div > div > div {
width: 76px; float: left;
height: 76px; display: block;
line-height: 76px; margin-right: 2.53165%;
text-align: center; width: 82.91139%; }
position: absolute; #home > section.scratch-vs-scratchx > div > div > div > div:last-child {
top: 0; margin-right: 0; }
right: 50%; #home > section.scratch-vs-scratchx > div > div > div:last-child > div {
margin-right: -38px; margin-left: 17.08861%; }
box-shadow: 0 7px 0 0 #dfe3e7; } #home > section.who-uses-scratchx {
#home nav ul li.documentation a:before { text-align: center; }
content: ""; } #home > section.who-uses-scratchx > div > div > div {
#home nav ul li.extensions a:before { float: left;
content: ""; } display: block;
#home nav ul li.faq a:before { margin-right: 1.25%;
content: ""; } 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 { .logo-scratch {
overflow: hidden; overflow: hidden;
@ -1474,7 +1486,8 @@ body > main > article {
position: relative; position: relative;
display: block; } display: block; }
.featured-extension > a img { .featured-extension > a img {
display: block; } display: block;
height: 107px; }
.featured-extension > a .tryit { .featured-extension > a .tryit {
display: inline-block; display: inline-block;
position: absolute; position: absolute;

2
css/scratchx.css.map
View file

File diff suppressed because one or more lines are too long

13
js/scratchx.js
View file

@ -311,6 +311,7 @@ function showPage(path, force) {
$(toHide).filter(":visible").hide(); $(toHide).filter(":visible").hide();
if (!showEditor && editorShown) $(document.getElementById(editorId)).css({top: "-9999px"}); if (!showEditor && editorShown) $(document.getElementById(editorId)).css({top: "-9999px"});
$("body > main, body > main > article").has($toShow).show(); $("body > main, body > main > article").has($toShow).show();
setBodyClass(path);
$toShow.show(); $toShow.show();
if (showEditor) $toShow.css({top: 0}); if (showEditor) $toShow.css({top: 0});
@ -320,6 +321,17 @@ function showPage(path, force) {
$(document).trigger("page:show", path); $(document).trigger("page:show", path);
} }
function setBodyClass(path) {
var pageClassPrefix = "page-";
var currentPageClasses = ($("body").attr("class") || "").split(" ");
for (c in currentPageClasses) {
if (currentPageClasses[c].indexOf(pageClassPrefix) != -1) {
$("body").removeClass(currentPageClasses[c]);
}
}
$("body").addClass(pageClassPrefix + path);
}
/* URL Shortening */ /* URL Shortening */
function shorten(url, done) { function shorten(url, done) {
var data = {longUrl: url}; var data = {longUrl: url};
@ -454,6 +466,7 @@ function initPage() {
initialPage = window.location.hash.substr(1); initialPage = window.location.hash.substr(1);
} }
} }
setBodyClass(initialPage);
showPage(initialPage, true); showPage(initialPage, true);
loadFromURLParameter(window.location.search, true); loadFromURLParameter(window.location.search, true);
} }

16
sass/_home.scss
View file

@ -1,9 +1,24 @@
/* Homepage */ /* Homepage */
body.page-home > main > header {
background-color: transparent;
> div {
border-bottom: $base-border;
}
a {
color: $white;
}
}
#home { #home {
padding-top: 0;
> header { > header {
background: url(../images/editor.png); background: url(../images/editor.png);
background-size: cover; background-size: cover;
padding-top: $vertical-base * 10;
h1 { h1 {
font-weight: normal; font-weight: normal;
@ -222,6 +237,7 @@
img { img {
display: block; display: block;
height: 107px;
} }
.tryit { .tryit {

2
sass/scratchx.scss
View file

@ -191,6 +191,7 @@ body > main > header {
@include row(); @include row();
height: $vertical-base * 10; height: $vertical-base * 10;
line-height: $vertical-base * 10; line-height: $vertical-base * 10;
position: relative;
} }
body > main > article { body > main > article {
@ -200,6 +201,7 @@ body > main > article {
.scratchx-logo { .scratchx-logo {
float: left; float: left;
margin-bottom: 0;
span { span {
@include hide-text; @include hide-text;