Skip to content

Commit

Permalink
new web files
Browse files Browse the repository at this point in the history
  • Loading branch information
@zakdances
zakdances committed Dec 31, 2013
1 parent 01be48e commit aedb8c1
Show file tree
Hide file tree
Showing 2 changed files with 138 additions and 81 deletions.
188 changes: 121 additions & 67 deletions app/styles/main.scss
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@ $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;


@import 'bourbon/app/assets/stylesheets/bourbon'; @import 'bourbon/app/assets/stylesheets/bourbon';
@import 'foundation/scss/foundation'; @import 'foundation/scss/foundation';
@import 'foundation-icons/foundation_icons_general/sass/general_foundicons';


$light-grey: #e5e5e5; $light-grey: #e5e5e5;
$green: #b6ff07; $light-green: #b6ff07;
$green: #B6F600;
$dark-green: #78ff00; $dark-green: #78ff00;


// .browsehappy { // .browsehappy {
Expand All @@ -17,11 +19,13 @@ $dark-green: #78ff00;


/* Space out content a bit */ /* Space out content a bit */
body { body {
padding-top: 40px; height: 100%;
padding-bottom: 0px; padding-top: 20px;
// border-top: 3px solid #e5e5e5; padding-bottom: 20px;
border-top: 4px solid #e5e5e5;
border-bottom: 2px solid $light-green;
background-color: rgba(#f7f7f7, 1); background-color: rgba(#f7f7f7, 1);
color: #bbb; color: #aaa;
} }


/* Everything but the jumbotron gets side spacing for mobile first views */ /* Everything but the jumbotron gets side spacing for mobile first views */
Expand All @@ -35,31 +39,30 @@ body {
/* Custom page header */ /* Custom page header */
.container > header { .container > header {
padding-top: 0px; padding-top: 0px;
border-top: 1px solid $green; border-top: 2px solid #eee;
border-bottom: 0px solid $light-grey; border-bottom: 0px solid $light-grey;
position: relative; position: relative;
perspective: 700px; perspective: 700px;
z-index: 1; z-index: 1;


/* Make the masthead heading the same height as the navigation */ /* Make the masthead heading the same height as the navigation */
h1 { h1 {
font-size: 60px; font-size: 60px;
font-weight: 200; font-weight: 100;
text-align: center; text-align: center;
position: relative; position: relative;
left: -190px; left: -150px;
margin-top: 50px; margin-top: 30px;
margin-bottom: 0; margin-bottom: 0;
// line-height: 40px; // line-height: 40px;
padding-bottom: 30px; padding-bottom: 20px;
z-index: 2; z-index: 2;


background-position: 20px 10px; background-position: 20px 10px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-clip: no-clip; background-clip: no-clip;


transform:rotateY(40deg); transform: rotateX(2deg) rotateY(40deg);
transform:rotateX(5deg);


} }


Expand All @@ -78,27 +81,33 @@ body {


.reflection { .reflection {
position: absolute; position: absolute;
top: 65px; top: 45px;
right: 42px; right: 80px;
transform:rotateY(-210deg); transform:rotateY(-210deg);


font-weight: 200; font-weight: 100;
font-size: 60px; font-size: 60px;
color: rgba(#000, .1); color: rgba(#000, .1);
} }


.light { .light {
position: absolute; position: absolute;
top: -175px; // top: -165px;
left: -80px; // left: 0px;
bottom: -415px;
left: 31px;
width: 900px; width: 900px;
height: 600px; height: 900px;
z-index: 1; z-index: 1;


transform:rotateX(85deg); transform:rotateX(92deg);
// @include background(
// linear-gradient(180deg, rgba(#fff, 0), rgba(#fff, 0)),
// radial-gradient(#fff 10%, #ddd 50%, rgba(#fff, 0) 70%)
// );
@include background( @include background(
linear-gradient(180deg, rgba(#fff, 0), rgba(#fff, 0)), linear-gradient(180deg, rgba(#fff, 0), rgba(#fff, 0)),
radial-gradient(#fff 10%, #ddd 50%, rgba(#fff, 0) 70%) radial-gradient(#fff 10%, #ddd 20%, rgba(#fff, 0) 60%)
); );
} }
} }
Expand Down Expand Up @@ -152,26 +161,28 @@ body {
// text-align: center; // text-align: center;
position: relative; position: relative;
// border-top: 1px solid #78ff00; // border-top: 1px solid #78ff00;
border-bottom: 1px solid $green; border-bottom: 0px solid $light-grey;
// @extend .top-border; // @extend .top-border;
// padding-top: 0px; // padding-top: 0px;
// font-size: 32px; // font-size: 32px;


&:before { &:after {
content: ""; content: "";
width: 100%;
height: 5px;
display: block; display: block;
position: absolute; position: absolute;
top: 2px; bottom: -4px;
left: 0; left: 0;
border-top: 5px solid $dark-green; border-top: 0px solid $light-green;
} }


h2 { h2 {
margin-top: 0; margin-top: 0;
// margin-bottom: 0.3rem; margin-bottom: 0.1rem;
font-weight: 600; font-weight: 600;
font-size: 38px; font-size: 20px;
color: $green; color: #444;
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
Expand All @@ -184,20 +195,48 @@ body {




.links { .links {
margin-top: 35px; margin-top: 1.0rem;
padding-top: 0px;
position: relative; position: relative;
z-index: 2; z-index: 2;
// text-align: center; // text-align: center;
// border-bottom: 1px solid #e5e5e5; // border-top: 1px solid #e5e5e5;


a { a {
// margin-top: 0px; position: relative;
font-size: 32px; padding: 6px 12px 4px 5px;
font-weight: 600; // @extend h2;

font-size: 28px;
font-weight: 900;
letter-spacing: -1px;
// text-transform: uppercase; // text-transform: uppercase;
color: #ddd; color: $green;

border-radius: 0px 0px 0 15px;
// border-top: 2px solid #b6ff07; // border-top: 2px solid #b6ff07;
// border-bottom: 1px solid #b6ff07; border: 1px solid $green;
border-top: 1px solid $green;
border-left: 1px solid $green;
border-right: 0px solid $green;

&:before {
content: "";
width: 100%;
left: 0;
top: 0;
position: absolute;
border-top: 0px solid rgba($dark-green, .2);
}
// background-color: #eee;
}
a + a {
// margin-left: 0px;
// margin-right: 15px;
// padding-right: 5px;
border-left: 1px solid $green;
border-right: 1px solid $green;
border-radius: 0 6px 6px 0;
} }
} }


Expand All @@ -217,9 +256,9 @@ body {


a { a {
content:attr(data-text); content:attr(data-text);
margin-right: 10px; // margin-right: 10px;
margin-top: 0px; // margin-top: 0px;
margin-bottom: 5px; // margin-bottom: 5px;
position: relative; position: relative;


font-weight: 100; font-weight: 100;
Expand All @@ -243,11 +282,11 @@ a {


/* Supporting marketing content */ /* Supporting marketing content */
.marketing { .marketing {
padding-top: 12px; padding-top: 28px;
padding-left: 0px; padding-left: 0px;
margin: 18px 0; margin: 30px 0;
font-size: 10px; font-size: 10px;
border-top: 0px solid rgba($light-grey, 1); // border-top: 1px solid #b6ff07;


// &:before { // &:before {
// content: ""; // content: "";
Expand All @@ -261,38 +300,38 @@ a {
} }
} }


h4 { // h4 {
font-size: 32px; // font-size: 32px;
color: $green; // color: $green;
} // }
.marketing p + h4 { .marketing p + h4 {
// margin-top: 0px; // margin-top: 0px;
// margin-bottom: 0.2rem; // margin-bottom: 0.2rem;
font-size: 23px; font-size: 25px;
font-weight: 400; font-weight: 400;
// line-height: 3.4rem; // line-height: 3.4rem;
color: #111; color: #111;


} }


p { p {
font-size: 26px; font-size: 23px;
font-weight: 100; font-weight: 100;
// line-height: 1.8; // line-height: 1.8;
margin-bottom: 0.7rem; // margin-bottom: 0.7rem;
} }




/* Custom page footer */ /* Custom page footer */
.footer { .footer {
display: flex; display: flex;
padding-top: 0px; padding-top: 20px;
padding-bottom: 10px; padding-bottom: 20px;
position: relative; position: relative;
border-top: 1px solid $green; border-top: 1px solid $green;
border-bottom: 3px solid $green; border-bottom: 1px solid $green;
background-clip: no-clip; background-clip: no-clip;

vertical-align: center;
color: #777; color: #777;


// &:before { // &:before {
Expand All @@ -307,27 +346,42 @@ p {
// } // }


h3 { h3 {
margin-right: 7px; padding: 0rem;
// font-size: 20px; margin: 0rem;
font-weight: 600; margin-right: 15px;
font-size: 20px;
font-weight: 100;
line-height: 100%;
color: $green; color: $green;
} }
.content { .content {
padding-top: 4px; // padding-top: 0px;
height: 100%;
line-height: 100%;
vertical-align: center;
display: flex;
h3 {
margin-top: 0rem;
margin-bottom: 0rem;
font-weight: 900;
line-height: 100%;
color: #666;
}
p { p {
font-size: 28px; font-size: 20px;
font-weight: 900; font-weight: 900;
color: #777; color: #777;
margin: 0; margin: 0;
padding: 0; padding: 0;
line-height: 2.5rem; line-height: 100%;
// flex: 1; // flex: 1;
} }
p + p { // p + p {
color: #999; // line-height: 1rem;
// font-size: 24px; // color: #999;
font-weight: 100; // // font-size: 24px;
} // font-weight: 100;
// }
} }


} }
Expand All @@ -345,8 +399,8 @@ p {
// .links, // .links,
// .footer, // .footer,
.marketing { .marketing {
// padding-left: 45px; padding-left: 55px;
padding-right: 45px; padding-right: 0px;


// color: #b6ff07; // color: #b6ff07;
&:after { &:after {
Expand Down
Loading

0 comments on commit aedb8c1

Please sign in to comment.