Finally, my changes to the header are added to the public css files.

This commit is contained in:
Victoria Wang 2013-07-15 15:07:03 -05:00
parent 0202a88cea
commit 3276d772c6
3 changed files with 141 additions and 21 deletions

View file

@ -11,6 +11,7 @@
} }
.header-Content{ .header-Content{
padding-top: 22px;
@extend .content; @extend .content;
@media (max-device-width:480px), screen and (max-width:800px){ @media (max-device-width:480px), screen and (max-width:800px){
padding:0 padding:0
@ -29,8 +30,23 @@
} }
} }
$outroShadow:inset 0px 7px 10px 0px rgba(0, 0, 0, 0.10);
.header-Outro{ .header-Outro{
background:#30424b; background:#30424b;
background: -moz-linear-gradient(top, #2b3c43 0%, #354751 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2b3c43), color-stop(100%,#354751)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2b3c43 0%,#354751 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2b3c43 0%,#354751 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #2b3c43 0%,#354751 100%); /* IE10+ */
background: linear-gradient(to bottom, #2b3c43 0%,#354751 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b3c43', endColorstr='#354751',GradientType=0 ); /* IE6-9 */
-moz-box-shadow:$outroShadow;
-webkit-box-shadow:$outroShadow;
box-shadow:$outroShadow;
color:#fafafa; color:#fafafa;
} }
@ -44,11 +60,15 @@
li{ li{
padding-left:$spacing*9; padding-left:$spacing*9;
padding-right:$spacing*3; padding-right:$spacing*3;
margin-bottom: 18px;
} }
h2{ h2{
font-size:24px; font-size:22px;
margin-bottom:10px margin-bottom:2px;
}
p {
color: #B2BCC1;
} }
} }
@ -77,6 +97,8 @@
position:relative position:relative
} }
$signupShadow: 1px 2px 12px 2px rgba(0, 0, 0, 0.15);
.signup-Form{ .signup-Form{
background:#354751; background:#354751;
border-radius:4px 4px 0 0; border-radius:4px 4px 0 0;
@ -85,6 +107,10 @@
position:absolute; position:absolute;
top:-45px; top:-45px;
-moz-box-shadow:$signupShadow;
-webkit-box-shadow:$signupShadow;
box-shadow:$signupShadow;
@media (max-device-width:480px), screen and (max-width:800px){ @media (max-device-width:480px), screen and (max-width:800px){
height:auto; height:auto;
margin:0; margin:0;
@ -95,14 +121,16 @@
h2{ h2{
margin-bottom:0; margin-bottom:0;
text-shadow:0 1px 1px rgba(0,0,0,.5); text-shadow:0 1px 1px rgba(0,0,0,.5);
font-size: 1.8em;
} }
hr{ hr{
border-bottom:1px solid #4a6677; border-bottom:1px solid #4a6677;
border-top:1px solid #1d282d; border-top:1px solid #1d282d;
margin:5px 0 15px; margin:4px 0 22px;
} }
fieldset{ fieldset{
background:url(../img/sign-up-bg.png) repeat-x center top; background:url(../img/sign-up-bg.png) repeat-x center top;
padding: 20px 33px;
} }
label{ label{
color:#81b8c6; color:#81b8c6;
@ -110,17 +138,42 @@
font-size:70% font-size:70%
} }
} }
$inputAreaShadow:inset 1px 3px 10px 0px rgba(0, 0, 0, 0.20);
.input-Area{ .input-Area{
background:#29383f; background:#29383f;
border:0px solid black; border:0px solid black;
@include box-shadow($bs-2);
color:#557380; color:#557380;
margin-bottom:$spacing*8; margin-bottom:$spacing*7;
margin-right:$spacing; margin-right:$spacing;
padding: 11px 12px 9px 12px;
width:62%; width:62%;
-moz-box-shadow:$inputAreaShadow;
-webkit-box-shadow:$inputAreaShadow;
box-shadow:$inputAreaShadow;
&:focus{color:#eee} &:focus{color:#eee}
} }
$placeholderColor: #5E7F8D;
::-webkit-input-placeholder { /* WebKit browsers */
color:$placeholderColor;
font-style: italic;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:$placeholderColor;
font-style: italic;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:$placeholderColor;
font-style: italic;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color:$placeholderColor;
font-style: italic;
}
.btn-Action{
padding:10px 25px;
}
} }
.small-Nav{ .small-Nav{
@ -221,6 +274,17 @@
} }
} }
.hp h1.logo {
padding-top: 45px;
padding-bottom: 0;
}
.hp h1.logo img {
margin-left: -10px;
@media (max-device-width:480px), screen and (max-width:800px){
margin-left: 20px;
}
}
.constant-Nav{ .constant-Nav{
margin-left:-88px; margin-left:-88px;
@include vendor(transition, all 0.35s); @include vendor(transition, all 0.35s);

View file

@ -943,9 +943,11 @@ a {
min-height: 42px; min-height: 42px;
overflow: hidden; } overflow: hidden; }
@media (max-device-width: 480px), screen and (max-width: 800px) { .header-Content {
.header-Content { padding-top: 22px; }
padding: 0; } } @media (max-device-width: 480px), screen and (max-width: 800px) {
.header-Content {
padding: 0; } }
.blurb { .blurb {
background: #fff; } background: #fff; }
@ -964,6 +966,23 @@ a {
.header-Outro { .header-Outro {
background: #30424b; background: #30424b;
background: -moz-linear-gradient(top, #2b3c43 0%, #354751 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b3c43), color-stop(100%, #354751));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2b3c43 0%, #354751 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2b3c43 0%, #354751 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #2b3c43 0%, #354751 100%);
/* IE10+ */
background: linear-gradient(to bottom, #2b3c43 0%, #354751 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2b3c43', endColorstr='#354751',GradientType=0 );
/* IE6-9 */
-moz-box-shadow: inset 0px 7px 10px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0px 7px 10px 0px rgba(0, 0, 0, 0.1);
box-shadow: inset 0px 7px 10px 0px rgba(0, 0, 0, 0.1);
color: #fafafa; } color: #fafafa; }
@media (max-device-width: 480px), screen and (max-width: 800px) { @media (max-device-width: 480px), screen and (max-width: 800px) {
@ -972,10 +991,13 @@ a {
padding: 20px !important; } } padding: 20px !important; } }
.intro-List li { .intro-List li {
padding-left: 36px; padding-left: 36px;
padding-right: 12px; } padding-right: 12px;
margin-bottom: 18px; }
.intro-List h2 { .intro-List h2 {
font-size: 24px; font-size: 22px;
margin-bottom: 10px; } margin-bottom: 2px; }
.intro-List p {
color: #B2BCC1; }
.intro-Icon { .intro-Icon {
background: url(../img/icons.png) no-repeat; background: url(../img/icons.png) no-repeat;
@ -1004,7 +1026,10 @@ a {
height: 600%; height: 600%;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
top: -45px; } top: -45px;
-moz-box-shadow: 1px 2px 12px 2px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 1px 2px 12px 2px rgba(0, 0, 0, 0.15);
box-shadow: 1px 2px 12px 2px rgba(0, 0, 0, 0.15); }
@media (max-device-width: 480px), screen and (max-width: 800px) { @media (max-device-width: 480px), screen and (max-width: 800px) {
.signup-Form { .signup-Form {
height: auto; height: auto;
@ -1013,13 +1038,15 @@ a {
position: static; } } position: static; } }
.signup-Form h2 { .signup-Form h2 {
margin-bottom: 0; margin-bottom: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); } text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
font-size: 1.8em; }
.signup-Form hr { .signup-Form hr {
border-bottom: 1px solid #4a6677; border-bottom: 1px solid #4a6677;
border-top: 1px solid #1d282d; border-top: 1px solid #1d282d;
margin: 5px 0 15px; } margin: 4px 0 22px; }
.signup-Form fieldset { .signup-Form fieldset {
background: url(../img/sign-up-bg.png) repeat-x center top; } background: url(../img/sign-up-bg.png) repeat-x center top;
padding: 20px 33px; }
.signup-Form label { .signup-Form label {
color: #81b8c6; } color: #81b8c6; }
@media (max-device-width: 480px), screen and (max-width: 800px) { @media (max-device-width: 480px), screen and (max-width: 800px) {
@ -1028,15 +1055,34 @@ a {
.signup-Form .input-Area { .signup-Form .input-Area {
background: #29383f; background: #29383f;
border: 0px solid black; border: 0px solid black;
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25) inset;
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25) inset;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.25) inset;
color: #557380; color: #557380;
margin-bottom: 32px; margin-bottom: 28px;
margin-right: 4px; margin-right: 4px;
width: 62%; } padding: 11px 12px 9px 12px;
width: 62%;
-moz-box-shadow: inset 1px 3px 10px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 1px 3px 10px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 1px 3px 10px 0px rgba(0, 0, 0, 0.2); }
.signup-Form .input-Area:focus { .signup-Form .input-Area:focus {
color: #eee; } color: #eee; }
.signup-Form ::-webkit-input-placeholder {
/* WebKit browsers */
color: #5e7f8d;
font-style: italic; }
.signup-Form :-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #5e7f8d;
font-style: italic; }
.signup-Form ::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #5e7f8d;
font-style: italic; }
.signup-Form :-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #5e7f8d;
font-style: italic; }
.signup-Form .btn-Action {
padding: 10px 25px; }
.small-Nav { .small-Nav {
background: #30424B; background: #30424B;
@ -1123,6 +1169,16 @@ a {
.hp .hp-Logo.in-View { .hp .hp-Logo.in-View {
left: -90px !important; } } left: -90px !important; } }
.hp h1.logo {
padding-top: 45px;
padding-bottom: 0; }
.hp h1.logo img {
margin-left: -10px; }
@media (max-device-width: 480px), screen and (max-width: 800px) {
.hp h1.logo img {
margin-left: 20px; } }
.constant-Nav { .constant-Nav {
margin-left: -88px; margin-left: -88px;
-moz-transition: all 0.35s; -moz-transition: all 0.35s;

File diff suppressed because one or more lines are too long