Skip to content

Commit

Permalink
landing page renovations
Browse files Browse the repository at this point in the history
  • Loading branch information
@tsm15002
tsm15002 committed Aug 30, 2016
1 parent 08e8c27 commit 1e93a89
Show file tree
Hide file tree
Showing 26 changed files with 585 additions and 192 deletions.
344 changes: 266 additions & 78 deletions dist/css/app.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/css/app.min.css
View file

Large diffs are not rendered by default.

39 changes: 37 additions & 2 deletions dist/css/base/typography.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,38 @@
@import 'https://fonts.googleapis.com/css?family=Prompt:300,300i,600,600i';
@font-face {
font-family: OpenSans;
src: url(../fonts/OpenSans-Regular.ttf);
font-weight: 500;
font-style: normal; }

@font-face {
font-family: OpenSans;
src: url(../fonts/OpenSans-Italic.ttf);
font-weight: 500;
font-style: italic; }

@font-face {
font-family: OpenSans;
src: url(../fonts/OpenSans-Bold.ttf);
font-weight: 700;
font-style: normal; }

@font-face {
font-family: OpenSans;
src: url(../fonts/OpenSans-BoldItalic.ttf);
font-weight: 700;
font-style: italic; }

@font-face {
font-family: OpenSans;
src: url(../fonts/OpenSans-Light.ttf);
font-weight: 300;
font-style: normal; }

@font-face {
font-family: OpenSans;
src: url(../fonts/OpenSans-LightItalic.ttf);
font-weight: 300;
font-style: italic; }

html {
font-family: 'Prompt', sans-serif; }
font-face: OpenSans; }
2 changes: 1 addition & 1 deletion dist/css/base/typography.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file removed dist/fonts/Gotham-Bold.otf
View file
Binary file not shown.
Binary file removed dist/fonts/Gotham-BoldItalic.otf
View file
Binary file not shown.
Binary file removed dist/fonts/Gotham-Book.otf
View file
Binary file not shown.
Binary file removed dist/fonts/Gotham-BookItalic.otf
View file
Binary file not shown.
Binary file added dist/fonts/OpenSans-Bold.ttf
View file
Binary file not shown.
Binary file added dist/fonts/OpenSans-BoldItalic.ttf
View file
Binary file not shown.
Binary file added dist/fonts/OpenSans-ExtraBold.ttf
View file
Binary file not shown.
Binary file added dist/fonts/OpenSans-ExtraBoldItalic.ttf
View file
Binary file not shown.
Binary file added dist/fonts/OpenSans-Italic.ttf
View file
Binary file not shown.
Binary file added dist/fonts/OpenSans-Light.ttf
View file
Binary file not shown.
Binary file added dist/fonts/OpenSans-LightItalic.ttf
View file
Binary file not shown.
Binary file added dist/fonts/OpenSans-Regular.ttf
View file
Binary file not shown.
Binary file added dist/fonts/OpenSans-Semibold.ttf
View file
Binary file not shown.
Binary file added dist/fonts/OpenSans-SemiboldItalic.ttf
View file
Binary file not shown.
Binary file added dist/img/landing/quoteBannerImage.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 40 additions & 0 deletions src/scss/base/_font.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
@font-face {
font-family: OpenSans;
src: url(../fonts/OpenSans-Regular.ttf);
font-weight:500;
font-style:normal;
}
@font-face {
font-family: OpenSans;
src: url(../fonts/OpenSans-Italic.ttf);
font-weight:500;
font-style:italic;
}
@font-face {
font-family: OpenSans;
src: url(../fonts/OpenSans-Bold.ttf);
font-weight:700;
font-style:normal;
}
@font-face {
font-family: OpenSans;
src: url(../fonts/OpenSans-BoldItalic.ttf);
font-weight:700;
font-style:italic;
}
@font-face {
font-family: OpenSans;
src: url(../fonts/OpenSans-Light.ttf);
font-weight:300;
font-style:normal;
}
@font-face {
font-family: OpenSans;
src: url(../fonts/OpenSans-LightItalic.ttf);
font-weight:300;
font-style:italic;
}

html {
font-face: OpenSans;
}
8 changes: 7 additions & 1 deletion src/scss/base/mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,4 +106,10 @@

}


@mixin clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
248 changes: 154 additions & 94 deletions src/scss/base/pages/landing.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@


.videoWrapper {
background-color:black;
background-color:white;
width:100%;
padding:1em;
box-sizing:border-box;
}

.videoWrapper__inner {
Expand All @@ -13,7 +17,7 @@

.videoWrapper__videoParent {
position: relative;
padding-bottom: 56.25%;
padding-bottom: 50%;
padding-top: 35px;
height: 0;
overflow: hidden;
Expand All @@ -27,123 +31,179 @@
}
}

/*
TODO:
Make this look cool with parallax webgl awesomeness
*/

.landingNav {
background-color:black;
.quoteModal {
background:url(../img/landing/quoteBannerImage.png) center/cover;
overflow:hidden;
padding:3em 0;
box-shadow:inset 0 0 1em rgba(0,0,0,0.8);
position:relative;
}

.landingNav__inner {
width:100%;
max-width:$page-max-width;
.quoteModal__inner {
max-width:80em;
margin:0 auto;
overflow:hidden;
text-align:center;
h1 {
color:lighten(#76b700, 10%);
font-size:2.5em;
text-transform:uppercase;
text-shadow: 0 0 0.5em rgba(0,0,0,0.5);
}
h3 {
font-size:1.5em;
line-height:1.4em;
color:white;
}
}

.landingNav__element {
display:block;
float:left;
height:15em;
width:16.66666%;
color:white;
text-decoration:none;
transition: width 0.15s $animation-easing-function;
position:relative;
.landingNav {
background-color:rgba(0,0,0,0.5);
padding:1em;
box-sizing:border-box;
width:100%;
text-align:center;

span {
position:absolute;
top:100%;
left:0%;
transform-origin:0% 0%;
transform:rotate(-90deg);
white-space:nowrap;
padding-left:0.25em;
z-index:2;
font-weight:bold;
font-size:1.5em;
text-shadow:0 0 0.25em rgba(0,0,0,0.25);
h2 {
color:white;
text-transform:uppercase;
margin:0 0 1em;
}

ul {
margin:0;
padding:0;
}

transition:opacity 0.15s $animation-easing-function;
li {
list-style:none;
display:inline-block;
}
}

.landingNav__elementColorScreen {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
transition:background-color 0.15s $animation-easing-function;
.landingNav__link {
width:12em;
line-height:3em;
font-weight:bold;
text-transform:uppercase;
text-align:center;
text-decoration:none;
display:block;
color:white;
margin:0.5em;
position:relative;
transition:0.15s $animation-easing-function;
}

.landingNav__link--degrees {
background-color: $degrees-color;
@include extendedBorder(after, 0.5em, $degrees-color, 1, 100%);
&:hover {
background-color:white;
color:$degrees-color;
}

.landingNav__element--red {
&:hover .landingNav__elementColorScreen {
background-color:$degrees-color;
}
.landingNav__elementColorScreen {
background-color:transparentize($degrees-color, 0.6);
}
}
.landingNav__element--orange {
&:hover .landingNav__elementColorScreen {
background-color:$concentrations-color;
}
.landingNav__elementColorScreen {
background-color:transparentize($concentrations-color, 0.6);
}
.landingNav__link--concentrations {
background-color: $concentrations-color;
@include extendedBorder(after, 0.5em, $concentrations-color, 1, 100%);
&:hover {
background-color:white;
color:$concentrations-color;
}
}
.landingNav__element--yellow {
&:hover .landingNav__elementColorScreen {
background-color:$our-work-color;
}
.landingNav__elementColorScreen {
background-color:transparentize($our-work-color, 0.6);
}
.landingNav__link--our-work {
background-color: $our-work-color;
@include extendedBorder(after, 0.5em, $our-work-color, 1, 100%);
&:hover {
background-color:white;
color:$our-work-color;
}
}
.landingNav__element--green {
&:hover .landingNav__elementColorScreen {
background-color:$for-students-color;
}
.landingNav__elementColorScreen {
background-color:transparentize($for-students-color, 0.6);
}
.landingNav__link--for-students {
background-color: $for-students-color;
@include extendedBorder(after, 0.5em, $for-students-color, 1, 100%);
&:hover {
background-color:white;
color:$for-students-color;
}
}
.landingNav__element--blue {
&:hover .landingNav__elementColorScreen {
background-color:$campuses-color;
}
.landingNav__elementColorScreen {
background-color:transparentize($campuses-color, 0.6);
.landingNav__link--campuses {
background-color: $campuses-color;
@include extendedBorder(after, 0.5em, $campuses-color, 1, 100%);
&:hover {
background-color:white;
color:$campuses-color;
}
}
.landingNav__element--purple {
&:hover .landingNav__elementColorScreen {
background-color:$about-us-color;
}
.landingNav__elementColorScreen {
background-color:transparentize($about-us-color, 0.6);
}
.landingNav__link--about-us {
background-color: $about-us-color;
@include extendedBorder(after, 0.5em, $about-us-color, 1, 100%);
&:hover {
background-color:white;
color:$about-us-color;
}
}

.quoteModal {
.homePosts {
background-color:#383838;
padding:3em 0;
box-shadow:inset 0 0 1em rgba(0,0,0,0.8);
color:white;
padding-bottom:1em;
}

.quoteModal__inner {
max-width:80em;
margin:0 auto;
text-align:center;
h1 {
color:#76b700;
font-size:2.5em;
text-transform:uppercase;
.homePost {
width:100%;
padding:0.5em;
box-sizing:border-box;
}

.homePost__inner {
background-color:#474747;
width:100%;
height:100%;
padding:0.5em 1em;
box-sizing:border-box;
background-color:white;
color:#383838;

@include clearfix;
}

.homePost__image {
display:none;
float:left;
width:7em;
height:7em;
padding:0.5em;
margin:0;
box-sizing:border-box;

div {
width:100%;
height:100%;
}
h3 {
font-size:1.5em;
line-height:1.4em;
color:white;
}

.homePost__body {
padding:0.5em;
box-sizing:border-box;
width:100%;
float:left;
}

.homePost__title {
margin-top:0;
}

.homePost__body {
a {
color:#3f3f3f;
&:hover {
color:#76b700;
}
}
}
Loading

0 comments on commit 1e93a89

Please sign in to comment.