mirror of
https://github.com/scratchfoundation/scratchx.git
synced 2024-11-28 18:45:49 -05:00
Move styles from base.scss to scratchx.scss
The division made no sense
This commit is contained in:
Ray Schamp
parent
b70f58a1f5
commit
0dbcebdf06
4 changed files with 196 additions and 221 deletions
181
css/scratchx.css
181
css/scratchx.css
|
|
@ -762,51 +762,8 @@ picture {
|
|||
.modal-open {
|
||||
overflow: hidden; }
|
||||
|
||||
dialog {
|
||||
display: block;
|
||||
position: static;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
text-align: center; }
|
||||
dialog h2 {
|
||||
text-align: center;
|
||||
margin: 1.5em 0 0.375em 0; }
|
||||
dialog section {
|
||||
background-color: #3f5975;
|
||||
color: #fff;
|
||||
padding: 0.75em; }
|
||||
dialog section:last-child {
|
||||
background-color: #fff;
|
||||
padding: 0.75em;
|
||||
color: #58595b; }
|
||||
dialog button {
|
||||
display: inline-block;
|
||||
line-height: normal;
|
||||
width: 100%;
|
||||
padding: 0.375em;
|
||||
/*
|
||||
Needed so that all buttons are the same height
|
||||
as text inputs
|
||||
*/
|
||||
border: 1px solid; }
|
||||
|
||||
.message {
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
margin: 1.5em 0;
|
||||
padding: 0.75em; }
|
||||
|
||||
.warning {
|
||||
background-color: #fff447;
|
||||
color: #58595b; }
|
||||
|
||||
.info {
|
||||
background-color: #dfe3e7;
|
||||
color: #58595b; }
|
||||
|
||||
.success {
|
||||
background-color: #18ba37;
|
||||
color: #fff; }
|
||||
a[href=""] {
|
||||
outline: 1px solid red; }
|
||||
|
||||
article header h1 {
|
||||
text-align: center; }
|
||||
|
|
@ -825,65 +782,6 @@ article header h1 + p {
|
|||
article header h1 + p:last-child {
|
||||
margin-right: 0; }
|
||||
|
||||
.twitter, .github {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 24px; }
|
||||
.twitter span, .github span {
|
||||
display: none; }
|
||||
|
||||
.twitter:before {
|
||||
content: "";
|
||||
font-family: "ScratchX";
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
font-size: 1.5em;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
border-radius: 0.375em;
|
||||
width: 0.75em;
|
||||
height: 0.75em;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
line-height: 1.875em;
|
||||
width: 1.875em;
|
||||
height: 1.875em;
|
||||
border-radius: 0.9375em;
|
||||
background-color: #21b4f0;
|
||||
color: #fff; }
|
||||
|
||||
.github:before {
|
||||
content: "";
|
||||
font-family: "ScratchX";
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
font-size: 1.5em;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
border-radius: 0.375em;
|
||||
width: 0.75em;
|
||||
height: 0.75em;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
line-height: 1.875em;
|
||||
width: 1.875em;
|
||||
height: 1.875em;
|
||||
border-radius: 0.9375em;
|
||||
background-color: #21b4f0;
|
||||
color: #fff; }
|
||||
a[href=""] {
|
||||
outline: 1px solid red; }
|
||||
|
||||
body > main > header > div,
|
||||
body > main > article > header > div,
|
||||
body > main > article > section > div,
|
||||
|
|
@ -1214,6 +1112,81 @@ body > main > article {
|
|||
.main-nav li {
|
||||
margin-left: 50px; }
|
||||
|
||||
.message {
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
margin: 1.5em 0;
|
||||
padding: 0.75em; }
|
||||
|
||||
.warning {
|
||||
background-color: #fff447;
|
||||
color: #58595b; }
|
||||
|
||||
.info {
|
||||
background-color: #dfe3e7;
|
||||
color: #58595b; }
|
||||
|
||||
.success {
|
||||
background-color: #18ba37;
|
||||
color: #fff; }
|
||||
|
||||
.twitter, .github {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 24px; }
|
||||
.twitter span, .github span {
|
||||
display: none; }
|
||||
|
||||
.twitter:before {
|
||||
content: "";
|
||||
font-family: "ScratchX";
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
font-size: 1.5em;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
border-radius: 0.375em;
|
||||
width: 0.75em;
|
||||
height: 0.75em;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
line-height: 1.875em;
|
||||
width: 1.875em;
|
||||
height: 1.875em;
|
||||
border-radius: 0.9375em;
|
||||
background-color: #21b4f0;
|
||||
color: #fff; }
|
||||
|
||||
.github:before {
|
||||
content: "";
|
||||
font-family: "ScratchX";
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
font-size: 1.5em;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
border-radius: 0.375em;
|
||||
width: 0.75em;
|
||||
height: 0.75em;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
line-height: 1.875em;
|
||||
width: 1.875em;
|
||||
height: 1.875em;
|
||||
border-radius: 0.9375em;
|
||||
background-color: #21b4f0;
|
||||
color: #fff; }
|
||||
|
||||
/* Homepage */
|
||||
body.page-home > main > header {
|
||||
background-color: transparent; }
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -13,118 +13,3 @@
|
|||
@import "tables";
|
||||
@import "typography";
|
||||
@import "modal";
|
||||
|
||||
dialog {
|
||||
display: block;
|
||||
position: static;
|
||||
overflow: hidden;
|
||||
border-radius: $base-border-radius;
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin: 4 * $vertical-base 0 $vertical-base 0;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: $alt-background-color;
|
||||
color: $alt-font-color;
|
||||
padding: 2 * $vertical-base;
|
||||
}
|
||||
|
||||
section:last-child {
|
||||
background-color: $base-background-color;
|
||||
padding: 2 * $vertical-base;
|
||||
color: $base-font-color;
|
||||
}
|
||||
|
||||
button {
|
||||
display: inline-block;
|
||||
line-height: normal;
|
||||
width: 100%;
|
||||
padding: $vertical-base;
|
||||
/*
|
||||
Needed so that all buttons are the same height
|
||||
as text inputs
|
||||
*/
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.message {
|
||||
border-radius: $base-border-radius;
|
||||
text-align: center;
|
||||
margin: $vertical-base * 4 0;
|
||||
padding: $vertical-base * 2;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background-color: $yellow;
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.info {
|
||||
background-color: $light-gray;
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.success {
|
||||
background-color: $green;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
article header h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
article header p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
article header h1 + p {
|
||||
font-size: 1.125em;
|
||||
margin-bottom: 1.5em;
|
||||
@include span-columns(10);
|
||||
@include shift(1);
|
||||
}
|
||||
|
||||
body > main > article > section {
|
||||
ul {
|
||||
@extend %default-ul;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.twitter, .github {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 2 * $gutter;
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.twitter {
|
||||
@include icon(before, twitter, circular, false, 4 * $vertical-base){
|
||||
display: inline-block;
|
||||
line-height: 5 * $vertical-base;
|
||||
width: 5 * $vertical-base;
|
||||
height: 5 * $vertical-base;
|
||||
border-radius: 2.5 * $vertical-base;
|
||||
background-color: $blue;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.github {
|
||||
@include icon(before, github, circular, false, 4 * $vertical-base){
|
||||
display: inline-block;
|
||||
line-height: 5 * $vertical-base;
|
||||
width: 5 * $vertical-base;
|
||||
height: 5 * $vertical-base;
|
||||
border-radius: 2.5 * $vertical-base;
|
||||
background-color: $blue;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,28 @@ a[href=""] {
|
|||
outline: 1px solid red;
|
||||
}
|
||||
|
||||
article header h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
article header p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
article header h1 + p {
|
||||
font-size: 1.125em;
|
||||
margin-bottom: 1.5em;
|
||||
@include span-columns(10);
|
||||
@include shift(1);
|
||||
}
|
||||
|
||||
body > main > article > section {
|
||||
ul {
|
||||
@extend %default-ul;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
body > main {
|
||||
> header,
|
||||
> article > header,
|
||||
|
|
@ -72,6 +94,45 @@ body {
|
|||
}
|
||||
|
||||
|
||||
dialog {
|
||||
display: block;
|
||||
position: static;
|
||||
overflow: hidden;
|
||||
border-radius: $base-border-radius;
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin: 4 * $vertical-base 0 $vertical-base 0;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: $alt-background-color;
|
||||
color: $alt-font-color;
|
||||
padding: 4 * $vertical-base;
|
||||
}
|
||||
|
||||
section:last-child {
|
||||
background-color: $base-background-color;
|
||||
padding: 4 * $vertical-base;
|
||||
color: $base-font-color;
|
||||
}
|
||||
|
||||
button {
|
||||
display: inline-block;
|
||||
line-height: normal;
|
||||
width: 100%;
|
||||
padding: $vertical-base;
|
||||
/*
|
||||
Needed so that all buttons are the same height
|
||||
as text inputs
|
||||
*/
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
dialog.with-icon {
|
||||
section:first-child {
|
||||
/* Add a border equal to the number of featured extensions - 1 */
|
||||
|
|
@ -229,6 +290,62 @@ body > main > article {
|
|||
}
|
||||
}
|
||||
|
||||
.message {
|
||||
border-radius: $base-border-radius;
|
||||
text-align: center;
|
||||
margin: $vertical-base * 4 0;
|
||||
padding: $vertical-base * 2;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background-color: $yellow;
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.info {
|
||||
background-color: $light-gray;
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.success {
|
||||
background-color: $green;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.twitter, .github {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 2 * $gutter;
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.twitter {
|
||||
@include icon(before, twitter, circular, false, 4 * $vertical-base){
|
||||
display: inline-block;
|
||||
line-height: 5 * $vertical-base;
|
||||
width: 5 * $vertical-base;
|
||||
height: 5 * $vertical-base;
|
||||
border-radius: 2.5 * $vertical-base;
|
||||
background-color: $blue;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.github {
|
||||
@include icon(before, github, circular, false, 4 * $vertical-base){
|
||||
display: inline-block;
|
||||
line-height: 5 * $vertical-base;
|
||||
width: 5 * $vertical-base;
|
||||
height: 5 * $vertical-base;
|
||||
border-radius: 2.5 * $vertical-base;
|
||||
background-color: $blue;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@import "home";
|
||||
@import "editor";
|
||||
@import "gallery";
|
||||
|
|
|
|||
Loading…
Reference in a new issue