mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 15:47:53 -05:00
6a8676ea35
Updated all the places in the SCSS where we use Darken and Lighten properties. These properties have been problematic in the past and caused some state issues, e.g. New message(s) hightlight (which was fixed seperately from this issue)
180 lines
2.5 KiB
SCSS
180 lines
2.5 KiB
SCSS
@import "colors";
|
|
@import "frameless";
|
|
|
|
/* Tags */
|
|
html,
|
|
body {
|
|
display: block;
|
|
margin: 0;
|
|
background-color: $ui-blue-dark;
|
|
padding: 0;
|
|
color: $type-gray;
|
|
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
|
|
}
|
|
|
|
/* Typography */
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
margin: 0;
|
|
border: 0;
|
|
padding: 0;
|
|
|
|
color: $header-gray;
|
|
font-weight: bold;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.5rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.4rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
h5 {
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
font-size: .85rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
p {
|
|
&.legal {
|
|
font-size: .8rem;
|
|
}
|
|
|
|
&.intro {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
&.callout {
|
|
// margin: 1.5em 0;
|
|
// border-top: 1px solid $ui-border;
|
|
// border-bottom: 1px solid $ui-border;
|
|
// padding: 1em 0;
|
|
|
|
margin: 1.5em 0;
|
|
border: 1px solid $active-gray;
|
|
border-radius: .5rem;
|
|
background-color: $ui-blue-10percent;
|
|
padding: 1.25em;
|
|
|
|
&.orange {
|
|
background-color: $ui-orange-10percent;
|
|
}
|
|
}
|
|
|
|
a {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
b,
|
|
strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Links */
|
|
a {
|
|
cursor: pointer;
|
|
color: $ui-blue;
|
|
font-weight: bold;
|
|
|
|
&:link,
|
|
&:visited,
|
|
&:active {
|
|
text-decoration: none;
|
|
color: $link-blue;
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
color: $ui-blue-dark;
|
|
}
|
|
}
|
|
|
|
/* Classes */
|
|
.empty {
|
|
border: 1px solid $active-gray;
|
|
border-radius: 5px;
|
|
background-color: $ui-blue-10percent;
|
|
padding: 10px;
|
|
text-align: center;
|
|
line-height: 2rem;
|
|
color: $type-gray;
|
|
|
|
h4 {
|
|
color: $type-gray;
|
|
}
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
p {
|
|
line-height: 1.7em;
|
|
color: $type-gray;
|
|
}
|
|
|
|
p {
|
|
font-size: 1rem;
|
|
font-weight: normal;
|
|
}
|
|
|
|
::selection {
|
|
background-color: $ui-blue-25percent;
|
|
}
|
|
|
|
ol,
|
|
ul {
|
|
padding-left: 20px;
|
|
|
|
line-height: 1.5em;
|
|
font-size: 1rem;
|
|
font-weight: normal;
|
|
|
|
li {
|
|
margin: .75em 0;
|
|
}
|
|
}
|
|
|
|
dl {
|
|
line-height: 1.5rem;
|
|
font-size: 1rem;
|
|
font-weight: normal;
|
|
|
|
dt {
|
|
font-weight: bold;
|
|
}
|
|
|
|
dd {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
#view {
|
|
display: inline-block;
|
|
|
|
/* NOTE: Margin should match height in navigation.scss */
|
|
margin-top: 50px;
|
|
background-color: $background-color;
|
|
padding: 20px 0;
|
|
min-width: 100%;
|
|
min-height: 768px;
|
|
}
|