scratchfoundation/scratchx
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratchx.git synced 2024-11-25 00:58:05 -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 {
display: block;
height: 3.75em;
line-height: 3.75em; }
line-height: 3.75em;
position: relative; }
body > main > header::after {
clear: both;
content: "";
@ -1195,7 +1196,8 @@ body > main > article {
margin-top: -3.75em; }
.scratchx-logo {
float: left; }
float: left;
margin-bottom: 0; }
.scratchx-logo span {
overflow: hidden;
text-indent: 101%;
@ -1213,117 +1215,52 @@ body > main > article {
margin-left: 50px; }
/* Homepage */
#home > header {
background: url(../images/editor.png);
background-size: cover; }
#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 {
body.page-home > main > header {
background-color: transparent; }
body.page-home > main > header > div {
border-bottom: 1px solid #c5c5c5; }
body.page-home > main > header a {
color: #fff; }
#home {
padding-top: 0; }
#home > header {
background: url(../images/editor.png);
background-size: cover;
padding-top: 3.75em; }
#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 .bottom-row > div > aside {
#home > header > section div {
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 {
width: 83.125%;
margin-left: 8.4375%; }
#home > header > section div:last-child {
margin-right: 0; }
#home > header .bottom-row > div > aside:before {
content: "";
#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;
@ -1335,123 +1272,198 @@ body > main > article {
/* 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 {
#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 .bottom-row > div > a:last-child {
#home > header > ul li: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 {
#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 > 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 {
#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: 2.53165%;
width: 82.91139%; }
#home > section.scratch-vs-scratchx > div > div > div > div:last-child {
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 > 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 {
#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;
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: ""; }
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;
@ -1474,7 +1486,8 @@ body > main > article {
position: relative;
display: block; }
.featured-extension > a img {
display: block; }
display: block;
height: 107px; }
.featured-extension > a .tryit {
display: inline-block;
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();
if (!showEditor && editorShown) $(document.getElementById(editorId)).css({top: "-9999px"});
$("body > main, body > main > article").has($toShow).show();
setBodyClass(path);
$toShow.show();
if (showEditor) $toShow.css({top: 0});
@ -320,6 +321,17 @@ function showPage(path, force) {
$(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 */
function shorten(url, done) {
var data = {longUrl: url};
@ -454,6 +466,7 @@ function initPage() {
initialPage = window.location.hash.substr(1);
}
}
setBodyClass(initialPage);
showPage(initialPage, true);
loadFromURLParameter(window.location.search, true);
}

16
sass/_home.scss
View file

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

2
sass/scratchx.scss
View file

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